Foros del Web - Ver Mensaje Individual

comoquetal · #1 (**permalink**) 05/03/2013, 06:58

Hola a todos,

antes que nada comentar que soy un novato en esto de html5 y agradecería cualquier tipo de ayuda para resolver una duda que me está volviendo loco.

El problema está cuando uso explorer para abrir este ejemplo de web que estoy haciendo. En el menú de navegación (nav) al clicar en la segunda opción y posteriores se me ve perfecto, pero cuando le doy a la primera (inicio) no sé por qué no se me ve como las demás, me descoloca el menú y no coge ningún estilo. Supongo que el problema está en que no lee la hoja de estilos, pero no sé qué hacer. ¿Alguna sugerencia?

Gracias de antemano.

Ésta es la web: http://91.235.40.250/~histori2/index.php (abrila con explorer para ver de lo que hablo)

aquí está mi código:

Cita:

<?php
include_once 'lenguages.php';
?>
<!DOCTYPE html PUBLIC>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8" />
<title>Lighthouse works</title>
<script src="swfobject.js"> type="text/javascript"</script>
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-2.0.6.js" type="text/javascript"></script>

<script src="js/prefixfree.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all"/>

<link rel="shortcut icon" href="objetos/favicon.ico"/>
</head>
<body>
<header id="cabecera">
<div id="logotipo"><a href="index.php"><img src="objetos/logo.png" width="30" height="70" alt="Haz clic aquí para volver a la página de inicio" border="0"></a></div>
<div id="tituloweb"><h1>LIGHTHOUSE WORKS</h1></div>
</header>
<div id="idiomas">
<ul id="language">
<li class="vertical"><a href="#"><?php echo $lang['idioma'];?></a>
<ul class="horizontal">
<li><a href="index.php?lang=cat"><img src="objetos/cat.png" width="25" height="25"border="0"></a></li>
<li><a href="index.php?lang=es"><img src="objetos/es.png" width="25" height="25" border="0"></a></li>
<li><a href="index.php?lang=en"><img src="objetos/en.png" width="25" height="25" border="0"></a></li>
</ul>
</li>
</ul>
</div>
<div id="portada">
<nav id="menu"><li><a href="index.php"><?php echo $lang['inicio'];?></a></li><li><a href="menu1/menu1.php"><?php echo $lang['descripcion'];?></a></li><li><a href="menu2/menu2.php"><?php echo $lang['productos'];?></a></li><li><a href="menu3/menu3.php"><?php echo $lang['galeria'];?></a></li></nav>
<section id="contenido">
</section>
</div>
<footer id="pie">
<div id="pie1"><a href="#" target="_blank"><?php echo $lang['contacto'];?></a></div>
<div id="pie2"><a href="#" target="_blank"><?php echo $lang['compartir'];?></a></div>
</footer>
</body>
</html>

y ésta mi hoja de estilos:

Cita:

article,aside,details,figcaption,figure,footer,hea der,hgroup,menu,nav,section{
display: block;
}

body {
background-color:black;
margin:0 auto;
width:940px;
height:675px;
font:13px/22px Helvetica, Arial, sans-serif;
}

#cabecera{
height:85px;
margin-top:7px;
border-radius:15px 15px 15px 15px;
}

#logotipo{
float:left;
margin-left:425px;
margin-top:3px;
}

#tituloweb{
float:right;
}

#tituloweb h1{
font-size:3em;
color:#eeeeee;
font-weight:bold;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-style:italic;
text-decoration:none;
text-align:centre;
margin-top:35px;
margin-right:60px;
}

#idiomas{
position:fixed;
top:150px;
left:1095px;
margin:30px 0px 0px 50px;
list-style:none;
border-radius:0px 10px 10px 0px;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=60);
width:25;
height:25;
}

.vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=3);
position:absolute;
top:19px;/*Muevo vertical arriba-abajo*/
left:-32px;/*Muevo vertical derecha-izquierda*/
width:130px;/*Altura del recuadro vertical*/
height:25px;/*Ancho del recuadro vertical*/
}

.horizontal{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=3);
position:absolute;
top:14px;/*Muevo horizontal derecha-izquierda*/
/*left:20px;/*Muevo horizontal arriba-abajo*/
/*width:70px;/*Ancho del recuadro horizontal*/
/*heigth:200px;/*Altura del recuadro horizontal*/
/*}*/

ul#language li{
position:relative;
list-style:none;
}

ul#language a{
text-decoration:none;
padding:1px 0px 10px 15px;
display:block;
color:white;
}

ul#language ul{
position:absolute;
padding:5px 5px 3px 5px;
display:none;
list-style:none;
}

ul#language li:hover ul{
display:block;
}

ul#language li:hover ul li a{
text-decoration:none;
}

#portada{
border-radius:90px 90px 90px 90px;
height:490px;
width:940px;
float:left;
background-image:url(objetos/portada.jpg);
background-size:940px 490px;
background-repeat:no-repeat;
}

nav{
width:180px;
height:340px;
float:left;
padding-top:150px;
}

nav>li{
padding:10px 0px 0px 30px;
text-transform:capitalize;
font-size:20px;
list-style:none;
}

nav>li a{
color:#111111;
text-decoration:none;
}

nav>li a:hover{
font-size:25px;
}

nav ul>li{
margin:0px 0px 10px 0px;
text-transform:capitalize;
list-style:none;
}

nav ul>li a{
color:#111111;
text-decoration:none;
font-size:18px;
}

nav ul>li a:hover{
color:#666666;
}

#contenido{
width:760px;
height:490px;
float:right;
border-radius:30px 30px 30px 30px;
}

#pie{
float:left;
width:940px;
height:30px;
border-radius:15px 15px 15px 15px;
}

#pie1 a{
color:white;
float:left;
font-size:1em;
text-decoration:none;
margin:5px 0px 0px 40px;
}

#pie2 a{
color:white;
float:left;
font-size:1em;
text-decoration:none;
margin:5px 0px 0px 600px;
}