Forums Últimos mensajes - Powered by IBM
 
Tags Palabras claves

CSS y WEB :( por favor ayuda...

16/12/2006 - 18:42 por Marcos Galaviz | Informe spam
Ayuda Hacer una pregunta
Hola a todos aunque soy nuevo en esto del rollo web he intentado emplear los
CSS que me parece lo mejor para el diseño web sin embargo tengo algunos
problemillas y aun me resultan confusas algunas cosas como por ejemplo en
como se muestra la pagina en IE6 y en firefox, adjunto imagenes (espero no
se molesten) donde en firefox el estilo del "Contenido" comienza mas arriba
que en IE6 ¿hay alguna forma de homologar esto? les copio los estilos que
intervienen en esta parte:

/* CSS Document */
#Encabezado{position:absolute; height:140px; width:770px;
background-color:#666666; z-index:20}
#Busqueda{position:absolute; top:49px; width:100px; height:40px; left:55%;
z-index:21}
#Margen_izquierdo{position:absolute; top:140px; width:140px; height:470px;
background-color:#FFFFFF ; z-index:19; border-right-color:#95C845;
border-right-width:10px; border-right-style:solid}

#Centrado{top:0px; height:600px; width: 770px; margin:auto; text-align:left;
background-color:#ECECEC}

#Contenido{position:relative; top:140px; left:150px; height:444px;
width:620px; text-align:center; overflow:auto; background-color:#ECECEC;
z-index:18}

ahora como estan en la pagina:

<body>
<DIV id="Centrado">
<DIV id="Encabezado">
<p align="center"><img src="/autos/IMAGES/imagen_encabezado.jpg"
width="770" height="140"></p>
</DIV>

<div id="Busqueda">
<p align="left"><!--#include file="forma_busqueda.asp"--></p>
</div>

<DIV id="Margen_izquierdo"> <br>
<!--#include file="Menu_izquierdo.asp"-->

</DIV>

<div id="Contenido">
</div>
</DIV>
</body>
email Siga el debateRespuesta 1 respuestaRespuesta Tengo una respuesta
DRAGON AGE™: INQUISITION – Matadragones
 

Leer las respuestas

#1 Miguel Gonzalez
17/12/2006 - 18:07 | Informe spam
Hola Marcos.

Creo que el culpable es el párrafo que contiene la imagen: tiene un
margen propio.

Prueba a establecer su margen a 0.

#Encabezado p{margin:0;}

Por otro lado, ten en cuenta que las CSS "vierten" sus estilos en
cascada. Es posible que otras reglas (incluyendo las que por defecto
tienen los diversos elementos HTML en cada navegador) influyan en la
visualización del documento.

Por último, recordarte que IE tiene su "peculiar" manera de interpretar
los estándares CSS (Firefox también tiene alguna "iniciativa" parecida,
aunque menos) con lo que es bastante difícil que te quede igual en ambos
navegadores (si testeas además con Opera, Safari, Konqueror y las
diferentes versiones de IE y Netscape/Mozilla es para volverse loco).
Una solución que tiene sus pros y sus contras es utilizar "CSS hacks",
es decir, escribir las reglas de estilo de forma que algunos navegadores
no las entiendan y otros sí, creando una especie de "filtros CSS" (en
internet puedes encontrar abundante información sobre esta técnica)

Una regla básica: Cuanto más sencilla es la estructura de una página,
tanto más cómodo es darle un formato que quede aproximadamente igual en
(casi) cualquier navegador.


Saludos!
Miguel


Marcos Galaviz escribió:
Hola a todos aunque soy nuevo en esto del rollo web he intentado emplear los
CSS que me parece lo mejor para el diseño web sin embargo tengo algunos
problemillas y aun me resultan confusas algunas cosas como por ejemplo en
como se muestra la pagina en IE6 y en firefox, adjunto imagenes (espero no
se molesten) donde en firefox el estilo del "Contenido" comienza mas arriba
que en IE6 ¿hay alguna forma de homologar esto? les copio los estilos que
intervienen en esta parte:

/* CSS Document */
#Encabezado{position:absolute; height:140px; width:770px;
background-color:#666666; z-index:20}
#Busqueda{position:absolute; top:49px; width:100px; height:40px; left:55%;
z-index:21}
#Margen_izquierdo{position:absolute; top:140px; width:140px; height:470px;
background-color:#FFFFFF ; z-index:19; border-right-color:#95C845;
border-right-width:10px; border-right-style:solid}

#Centrado{top:0px; height:600px; width: 770px; margin:auto; text-align:left;
background-color:#ECECEC}

#Contenido{position:relative; top:140px; left:150px; height:444px;
width:620px; text-align:center; overflow:auto; background-color:#ECECEC;
z-index:18}

ahora como estan en la pagina:

<body>
<DIV id="Centrado">
<DIV id="Encabezado">
<p align="center"><img src="/autos/IMAGES/imagen_encabezado.jpg"
width="770" height="140"></p>
</DIV>

<div id="Busqueda">
<p align="left"><!--#include file="forma_busqueda.asp"--></p>
</div>

<DIV id="Margen_izquierdo"> <br>
<!--#include file="Menu_izquierdo.asp"-->

</DIV>

<div id="Contenido">
</div>
</DIV>
</body>



Preguntas similares

 

Busqueda sugerida :