Hola chicos, ante todo daros la enhorabuena por la web que me esta ayudando mucho. Veréis, estoy siguiendo el tutorial paso a paso de creación de una web en HTML, mas o menos me sale todo pero hace unos días toque algo que hace que en el navegador Firefox la página me ocupe la pantalla entera (en Internet Explorer se ve perfecta), antes esto no sucedia y aunque el pie de página no se me veia completo todo lo demás cuadraba.
Os voy a copiar la plantilla y la hoja de estilos de la web que estoy haciendo de una peluquería. He revisado todo pero no consigo que en Firefox no ocupe toda la pantalla. Si alguien me puede ayudar le estaría agradecido.
Muchas gracias de antemano, os dejo el código.
Plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>plantilla</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="plantilla.html"><img src="objetos/logotipo3.gif" width="528" height="85"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="navegacion">
<ul>
<li><a href="#">Galeria</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Promociones</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Donde estamos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="contenido">
<div id="menu"><ul>
<h1>Titulo de sección</h1>
<li><a href="#">Enlace 1</a>
</li><li><a href="#">Enlace 2</a>
</li><li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1><h2>Aquí estarán las novedades y las ofertas destacables, así como nuevos productos.</h2><p>También se pueden incluir fotos de peinados, tratamientos de Keratina etc..
Además un mapa de google de donde encontrarnos y algunas cosas más de utilidad.
Y diversas cosas que se nos ocurrán como fotos y apechusques varios.relleno</p></div>
<div id="pie">
<div id="pieuno"><ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul></div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul></div>
</div>
</body>
</html>
Hoja de estilos:
*{margin:0px; padding:0px; border:0px;}
#cabecera {background-color:black; border-left:black 1px solid;
border-right:black 1px solid; height:85px;}
border-right:black 1px solid; height:85px;}
#logotipo {background-color: black;width:280px;float:center;}
#publicidad {background-color:black ;width:518 px; float:right; margin-top:25px;}
#navegacion {background-color:#00FF00; border:black 1px solid;height:20px;}
#contenido {background-color: orange; width:auto ; border-left:black 1px solid; border-right:black 1px solid;}
#contenido p {padding:5px 10px 5px 10px}; text-indent:15px;}
#global {width:800px; margin:4px auto;}
body {text-align:center;}
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);background-position:bottom;padding-bottom:5px;}
#menu li {list-style:none; margin:4px 8px 4px 6px;}
a {color:black; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:#00FF00 ; text-decoration:underline ; background-color:black;}
a:active {}
p {text-align:justify;}
h1 {font-size:1.2em; color:green; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
#curva-superior {background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat;background-repeat:no-repeat; width:800px; height:12px;overflow:hidden;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif);
background-repeat: no-repeat ; width:800px ; height:12px ; overflow:hidden;}
#navegacion li {float:left;list-style:none ; margin:0px 20px 0px 20px;}
#navegacion ul { margin-left: 50px }
#menu h1 {font-size:12px; color:silver; text-decoration:none;background-image: url(objetos/menu-parte-superior-2.gif);}
#pie { background-color: red ;border-left: black 1px solid ;border-right: black 1px solid;border-top: black 1px solid }
#pie li {list-style:none;}
#pie li {list-style:none; font-size:12px;}
#pieuno {background-color:white; float:left;width:150px;border-right: black 1px solid;}
#piedos {background-color:white; float:left;width:330px;}
#pietres {background-color:white; float:left;width:150px;border-left:black 1px solid;}
Os voy a copiar la plantilla y la hoja de estilos de la web que estoy haciendo de una peluquería. He revisado todo pero no consigo que en Firefox no ocupe toda la pantalla. Si alguien me puede ayudar le estaría agradecido.
Muchas gracias de antemano, os dejo el código.
Plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>plantilla</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="plantilla.html"><img src="objetos/logotipo3.gif" width="528" height="85"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="navegacion">
<ul>
<li><a href="#">Galeria</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Promociones</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Donde estamos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="contenido">
<div id="menu"><ul>
<h1>Titulo de sección</h1>
<li><a href="#">Enlace 1</a>
</li><li><a href="#">Enlace 2</a>
</li><li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1><h2>Aquí estarán las novedades y las ofertas destacables, así como nuevos productos.</h2><p>También se pueden incluir fotos de peinados, tratamientos de Keratina etc..
Además un mapa de google de donde encontrarnos y algunas cosas más de utilidad.
Y diversas cosas que se nos ocurrán como fotos y apechusques varios.relleno</p></div>
<div id="pie">
<div id="pieuno"><ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul></div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul></div>
</div>
</body>
</html>
Hoja de estilos:
*{margin:0px; padding:0px; border:0px;}
#cabecera {background-color:black; border-left:black 1px solid;
border-right:black 1px solid; height:85px;}
border-right:black 1px solid; height:85px;}
#logotipo {background-color: black;width:280px;float:center;}
#publicidad {background-color:black ;width:518 px; float:right; margin-top:25px;}
#navegacion {background-color:#00FF00; border:black 1px solid;height:20px;}
#contenido {background-color: orange; width:auto ; border-left:black 1px solid; border-right:black 1px solid;}
#contenido p {padding:5px 10px 5px 10px}; text-indent:15px;}
#global {width:800px; margin:4px auto;}
body {text-align:center;}
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);background-position:bottom;padding-bottom:5px;}
#menu li {list-style:none; margin:4px 8px 4px 6px;}
a {color:black; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:#00FF00 ; text-decoration:underline ; background-color:black;}
a:active {}
p {text-align:justify;}
h1 {font-size:1.2em; color:green; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
#curva-superior {background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat;background-repeat:no-repeat; width:800px; height:12px;overflow:hidden;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif);
background-repeat: no-repeat ; width:800px ; height:12px ; overflow:hidden;}
#navegacion li {float:left;list-style:none ; margin:0px 20px 0px 20px;}
#navegacion ul { margin-left: 50px }
#menu h1 {font-size:12px; color:silver; text-decoration:none;background-image: url(objetos/menu-parte-superior-2.gif);}
#pie { background-color: red ;border-left: black 1px solid ;border-right: black 1px solid;border-top: black 1px solid }
#pie li {list-style:none;}
#pie li {list-style:none; font-size:12px;}
#pieuno {background-color:white; float:left;width:150px;border-right: black 1px solid;}
#piedos {background-color:white; float:left;width:330px;}
#pietres {background-color:white; float:left;width:150px;border-left:black 1px solid;}