hola, tengo un problema con mi barra de navegacion. Hice que cuando haga hover en una de las secciones apparesca una imagen de fondo hecha con photoshop. El problema es que cuando hago hover se ve la imagen de fondo pero la div de la barra de navegacion se hace mas grande. No veo porque pasa esto porque la imagen de fondo es mas chica que el div de la barra de navegacion. Por favor ayudenme!!!
Esta es mi plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
</head>
<body>
<div id="background"><div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div class="logotipo"></div>
</div>
<div id="navegacion"
<ul>
Seccion 1 Seccion 2 Seccion 3 Seccion 4
</div>
<font color="white">
<div id="contenido">
</font>
<div id="menu">
<h1>Titulo 1</h1>
<ul> </p>Partidos Botines y camisetas Juegos Jugadores
</div>
<h1>Esta es la zona principla de la pajina</h1>
La zona principal de la pajina se puede usar para muchas cosas como,por ejemplo
acceder a la seccion partidos, botines y camisetas, juegos y jugadores. En cada
parte hay un monton de cosas buenas, ya vas a ver.</p>
<h2>Gracias</h2>
Espero que les guste. Gracias por visitar mi web.Nos vemos otro dia y no se olviden
de volver por favor. </p></div>
<div id="pie">Este es el pie de la pagina</div>
<div id="curva-inferior"></div>
</body>
</html>
Y esta es mi estilos-general.css:
*{margin:0px;padding:0px;border:0px}
#cabecera{border-left:1px solid black;border-right:1px solid black;height:85px}
#background{background-image:url(grass.jpg)}
#navegacion{border-top:2px solid green;border-left:2px solid green;border-right:2px solid green;border-bottom:2px solid green;background-color:black;height:35px;width:800px;background-repeat:no-repeat}
#navegacion li{float:left;list-style:none;color:green;margin:5px 20px 0px;height:20px;list-style:none}
#navegacion ul {text-color:green;margin-left:25px;list-style:none }
#navagacion:hover{background-image:url(objetos/barra navegacion 2.jpg)}
#contenido{background-image:url(stripe.png);height:1000px;length:800px;border-left:2px solid green;border-right:2px solid green;border-bottom:2px solid green;padding:0px;font-color:white}
#pie{background-color:white;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black}
#global{width:800px;margin:4px auto}
body{text-align:center;color:white}
#menu{background-image:url(green.jpg);width:150px;height:200px;float:left;text-align:left;margin:3px 10px 3px 3px}
#menu li{list-style:none;margin:4px 0px 4px 6px}
a{color:green;font-size:1.1em;text-decoration:none;block}
a:link{}
a:visited{background-image:url(stripe.png);width:100px;height:30px}
a.press:hover{color:red;text-decoration:underline;display:block;background-image:url(bar.jpg);
width:80px;height:30px;margin-bottom:6px;hover:up;overflow:hidden}
a:active{}
.press1:active{color:white}
.press2:visited{color:white}
p{text-align:justify}
#contenido p{padding:5px 10px 5px 10px;text-indent:15px;background-color:grey}
h1{font-size:1.2em;color:green;font-weight:bold;text-decoration:underline;text-align:center}
h2{font-size:1.1em;color:green;font-weight:bold;text-decoration:none;text-align:center}
{border:1px solid black}
#curva-superior{background-image:url(objetos/curva-superior.gif);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}
.logotipo{background-image:url(logo.jpg);width:799px;height:80px;background-repeat:no-repeat}
a.logotipo{background-image:url(logo2.jpg)}
#white{background-color:white;width:850px;height:1050px}
Por favor ayudenme si pueden, estaria super contento chauuu
Esta es mi plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
</head>
<body>
<div id="background"><div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div class="logotipo"></div>
</div>
<div id="navegacion"
<ul>
</div>
<font color="white">
<div id="contenido">
</font>
<div id="menu">
<h1>Titulo 1</h1>
<ul>
</div>
<h1>Esta es la zona principla de la pajina</h1>
La zona principal de la pajina se puede usar para muchas cosas como,por ejemplo
acceder a la seccion partidos, botines y camisetas, juegos y jugadores. En cada
parte hay un monton de cosas buenas, ya vas a ver.</p>
<h2>Gracias</h2>
Espero que les guste. Gracias por visitar mi web.Nos vemos otro dia y no se olviden
de volver por favor. </p></div>
<div id="pie">Este es el pie de la pagina</div>
<div id="curva-inferior"></div>
</body>
</html>
Y esta es mi estilos-general.css:
*{margin:0px;padding:0px;border:0px}
#cabecera{border-left:1px solid black;border-right:1px solid black;height:85px}
#background{background-image:url(grass.jpg)}
#navegacion{border-top:2px solid green;border-left:2px solid green;border-right:2px solid green;border-bottom:2px solid green;background-color:black;height:35px;width:800px;background-repeat:no-repeat}
#navegacion li{float:left;list-style:none;color:green;margin:5px 20px 0px;height:20px;list-style:none}
#navegacion ul {text-color:green;margin-left:25px;list-style:none }
#navagacion:hover{background-image:url(objetos/barra navegacion 2.jpg)}
#contenido{background-image:url(stripe.png);height:1000px;length:800px;border-left:2px solid green;border-right:2px solid green;border-bottom:2px solid green;padding:0px;font-color:white}
#pie{background-color:white;border-top:1px solid black;border-right:1px solid black;border-left:1px solid black}
#global{width:800px;margin:4px auto}
body{text-align:center;color:white}
#menu{background-image:url(green.jpg);width:150px;height:200px;float:left;text-align:left;margin:3px 10px 3px 3px}
#menu li{list-style:none;margin:4px 0px 4px 6px}
a{color:green;font-size:1.1em;text-decoration:none;block}
a:link{}
a:visited{background-image:url(stripe.png);width:100px;height:30px}
a.press:hover{color:red;text-decoration:underline;display:block;background-image:url(bar.jpg);
width:80px;height:30px;margin-bottom:6px;hover:up;overflow:hidden}
a:active{}
.press1:active{color:white}
.press2:visited{color:white}
p{text-align:justify}
#contenido p{padding:5px 10px 5px 10px;text-indent:15px;background-color:grey}
h1{font-size:1.2em;color:green;font-weight:bold;text-decoration:underline;text-align:center}
h2{font-size:1.1em;color:green;font-weight:bold;text-decoration:none;text-align:center}
{border:1px solid black}
#curva-superior{background-image:url(objetos/curva-superior.gif);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}
.logotipo{background-image:url(logo.jpg);width:799px;height:80px;background-repeat:no-repeat}
a.logotipo{background-image:url(logo2.jpg)}
#white{background-color:white;width:850px;height:1050px}
Por favor ayudenme si pueden, estaria super contento chauuu