*Edite parte del contenido del tema para ser mas concreto.
Pues eso, que; Mi pagina solo se ve perfectamente tal como la diseñe, en el navegador Explorer. Les agradeceria que la revisaran, es la siguiente: La pagina principal de mi pagina web (index)
Y esta es la primer Subpagina
Ademas del IE, ya la visualize tambien en Firefox, Chrome y Opera, y se ve peor en unos que en otros. Si se fijan, en firefox la imagen de fondo la sube a donde le da la gana y no la deja en el mero centro... Que tal cuando quiera hacerle un diseño mas elaborado que requiera imagenes con una posicion exacta?
Ya se que nunca se va a ver tal como quiero por que los programadores no se quiren ajustar a un estandar exacto y nos dejan el problema :x , pero al menos quiero que en los 2 principales navegadores (IE y Firefox), sea inperceptible la diferencia, pero no es asi. Vean el menu de la 2da pagina; Esta inaceptablemente desalineado!... Segun el tutorial "paso a paso", esto no deberia pasar pues le agrege al principio de la hoja de estilos, esta linea que lo corregiria:
* {margin: 0px ;padding: 0px ;border: 0px}
Entonces como debe de quedar el codigo del html y de la hoja de estilos?
-------------------------------------------------------------------------------------------
:arrow: Este es el codigo del index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pagina Principal del Ejemplo CCTW</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<p class="centrado">Bienvenidos a mi página web. Muy pronto estará lista!</p>
[contenido no disponible]</p>
Página creada gracias a CCTW</p>
[correo eliminado]</p>
</body>
</html>
:arrow: Y el de su hoja de estilo este:
body { background-color: #E6E6FA ;
background-image: url(objetos/fondo.jpg) ;
background-repeat: no-repeat ;
background-position: center center }
img { border-style: none }
.centrado { text-align:center }
---------------------------------------------------------------------------------------------
:arrow: Ahora que este es el html de la subpagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Titulo de ventana</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"/>
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegacion</div>
<div id="contenido"><div id="menu"><ul>Elemento 1 Elemento 2 Elemento 3</div><h1>EL HOMBRE</h1><h2>Homo sapiens</h2>
Homo sapiens es la denominación científica, desde el punto de vista biológico, de la especie animal constituida por los seres humanos.</p>
Es también llamada genéricamente como el hombre o los hombres, aunque ese término generalmente se reserva específicamente a los individuos de sexo masculino.[1] Sus capacidades mentales le permiten inventar, aprender y utilizar estructuras lingüísticas complejas, matemáticas, escritura, ciencia, tecnología. En comparación con otros animales son entes bastante sociales, capaces de concebir, transmitir y aprender conceptos totalmente abstractos. Hasta lo que hoy se sabe, ha sido el único ser vivo terrícola en visitar otro cuerpo del Sistema Solar; concretamente la Luna, y aún no se tiene evidencia de que exista otra forma de vida con dichas capacidades -o superiores- en el universo</p></div>
<div id="pie">Pie</div>
</div>
</body>
</html>
:arrow: Y este su estilo css:
* {margin:0px ;padding:0px ;border:0px}
body {text-align:center ;margin:4px}
#global {width:800px ;margin:0px auto}
#contenido p {margin:8px 8px 20px 8px ;text-indent:30px}
#cabecera {background-color:#FFDEAD}
#navegacion {background-color:#F0FFF0}
#contenido {background-color:#FFE4E1 ;width:800px ;text-align:justify}
#pie {background-color:#E6E6FA}
#menu {background-color:white ;width:130px ;text-align:center ;float:left ;margin:12px 8px 4px 8px ;height:80px}
#menu li {list-style:none ;margin: ;text-align:center}
#menu a {color:blue ;text-decoration:none ;display:block ;font-size:1.3em ;margin:4px 0px 4px 0px ;text-weight:bold}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color:white ;background-color:blue ;text-decoration:underline}
#menu a:active {}
h1 {font-size:2em ;color:blue ;text-align:center ;text-decoration:underline ;margin-top:10px}
h2 {font-size:1.3em ;color:black ;text-align:center ;margin-top:10px ;margin-bottom:10px}
Pues eso, que; Mi pagina solo se ve perfectamente tal como la diseñe, en el navegador Explorer. Les agradeceria que la revisaran, es la siguiente: La pagina principal de mi pagina web (index)
Y esta es la primer Subpagina
Ademas del IE, ya la visualize tambien en Firefox, Chrome y Opera, y se ve peor en unos que en otros. Si se fijan, en firefox la imagen de fondo la sube a donde le da la gana y no la deja en el mero centro... Que tal cuando quiera hacerle un diseño mas elaborado que requiera imagenes con una posicion exacta?
Ya se que nunca se va a ver tal como quiero por que los programadores no se quiren ajustar a un estandar exacto y nos dejan el problema :x , pero al menos quiero que en los 2 principales navegadores (IE y Firefox), sea inperceptible la diferencia, pero no es asi. Vean el menu de la 2da pagina; Esta inaceptablemente desalineado!... Segun el tutorial "paso a paso", esto no deberia pasar pues le agrege al principio de la hoja de estilos, esta linea que lo corregiria:
* {margin: 0px ;padding: 0px ;border: 0px}
Entonces como debe de quedar el codigo del html y de la hoja de estilos?
-------------------------------------------------------------------------------------------
:arrow: Este es el codigo del index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pagina Principal del Ejemplo CCTW</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<p class="centrado">Bienvenidos a mi página web. Muy pronto estará lista!</p>
[contenido no disponible]</p>
Página creada gracias a CCTW</p>
[correo eliminado]</p>
</body>
</html>
:arrow: Y el de su hoja de estilo este:
body { background-color: #E6E6FA ;
background-image: url(objetos/fondo.jpg) ;
background-repeat: no-repeat ;
background-position: center center }
img { border-style: none }
.centrado { text-align:center }
---------------------------------------------------------------------------------------------
:arrow: Ahora que este es el html de la subpagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Titulo de ventana</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"/>
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegacion</div>
<div id="contenido"><div id="menu"><ul>
Homo sapiens es la denominación científica, desde el punto de vista biológico, de la especie animal constituida por los seres humanos.</p>
Es también llamada genéricamente como el hombre o los hombres, aunque ese término generalmente se reserva específicamente a los individuos de sexo masculino.[1] Sus capacidades mentales le permiten inventar, aprender y utilizar estructuras lingüísticas complejas, matemáticas, escritura, ciencia, tecnología. En comparación con otros animales son entes bastante sociales, capaces de concebir, transmitir y aprender conceptos totalmente abstractos. Hasta lo que hoy se sabe, ha sido el único ser vivo terrícola en visitar otro cuerpo del Sistema Solar; concretamente la Luna, y aún no se tiene evidencia de que exista otra forma de vida con dichas capacidades -o superiores- en el universo</p></div>
<div id="pie">Pie</div>
</div>
</body>
</html>
:arrow: Y este su estilo css:
* {margin:0px ;padding:0px ;border:0px}
body {text-align:center ;margin:4px}
#global {width:800px ;margin:0px auto}
#contenido p {margin:8px 8px 20px 8px ;text-indent:30px}
#cabecera {background-color:#FFDEAD}
#navegacion {background-color:#F0FFF0}
#contenido {background-color:#FFE4E1 ;width:800px ;text-align:justify}
#pie {background-color:#E6E6FA}
#menu {background-color:white ;width:130px ;text-align:center ;float:left ;margin:12px 8px 4px 8px ;height:80px}
#menu li {list-style:none ;margin: ;text-align:center}
#menu a {color:blue ;text-decoration:none ;display:block ;font-size:1.3em ;margin:4px 0px 4px 0px ;text-weight:bold}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color:white ;background-color:blue ;text-decoration:underline}
#menu a:active {}
h1 {font-size:2em ;color:blue ;text-align:center ;text-decoration:underline ;margin-top:10px}
h2 {font-size:1.3em ;color:black ;text-align:center ;margin-top:10px ;margin-bottom:10px}