hola, tengo un problema con una pajina web que estoy tratando de crear con el html kit. Usando los divs y estilos-general.css ya inserte mi logo. El problema es que ahora quiero insertar un background image para mi div de navegacion que hice con photoshop y quedo muy lindo pero no aparece. Tambien el logo aparece un poco raro como que es mas largo que las otras cosas. favor ayudame!!!
Aqui esta mi plantilla:
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"></div>
<div id="publicidad">Bienvenidos a Futbol.com</div>
</div>
<div id="navegacion">
<ul>
Seccion 1
Seccion 2
Seccion 3
Seccion 4
</div>
<div id="contenido">
<div id="menu">
<ul> 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 aqui esta mi estilos-general.css:
*{margin:0px;padding:0px;border:0px}
#cabecera{background-color:white;border-left:1px solid black;border-right:1px solid black;height:85px}
#navegacion{border:1px solid black;background-image:url(objetos/barra-navegacion-1.jpg);height:35px;width:800px;background-repeat:no-repeat}
#navegacion li{float:left;list-style:none}
#contenido{background-color:orange;height:150px;border-left:1px solid black;border-right:1px solid black;padding:0px}
#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}
#menu{background-color:yellow;width:150px;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{}
a:hover{color:red;text-decoration:none;display:block;background-color:black}
a:active{}
p{text-align:justify}
#contenido p{padding:5px 10px 5px 10px;text-indent:15px}
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(objetos/logo.jpg);width:800px;height:200px;background-repeat:no-repeat}
#publicidad{background-color:white;width:518px;float:right;margin-top:25px}
Aqui esta mi plantilla:
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"></div>
<div id="publicidad">Bienvenidos a Futbol.com</div>
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido">
<div id="menu">
<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 aqui esta mi estilos-general.css:
*{margin:0px;padding:0px;border:0px}
#cabecera{background-color:white;border-left:1px solid black;border-right:1px solid black;height:85px}
#navegacion{border:1px solid black;background-image:url(objetos/barra-navegacion-1.jpg);height:35px;width:800px;background-repeat:no-repeat}
#navegacion li{float:left;list-style:none}
#contenido{background-color:orange;height:150px;border-left:1px solid black;border-right:1px solid black;padding:0px}
#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}
#menu{background-color:yellow;width:150px;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{}
a:hover{color:red;text-decoration:none;display:block;background-color:black}
a:active{}
p{text-align:justify}
#contenido p{padding:5px 10px 5px 10px;text-indent:15px}
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(objetos/logo.jpg);width:800px;height:200px;background-repeat:no-repeat}
#publicidad{background-color:white;width:518px;float:right;margin-top:25px}