Etiqueta nav

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;
}

ipraetoriux · #2 (**permalink**) 05/03/2013, 18:11

...haber tienes varios errores...

<!DOCTYPE html PUBLIC ""> ????....error, es <!DOCTYPE html>

luego tienes...

Código HTML:

Ver original.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8" />

>

...tambie es un error, solo debes dejar <meta charset="utf-8">

...el problema que tienes es en index, al cargar estilos.css, y en estilosIE.css, que tienes?

comoquetal · #3 (**permalink**) 06/03/2013, 06:02

Hola ipraetoriux, gracias por la respuesta...

Lo que te muestro es estilosIE.css, y en estilos.css tengo prácticamente lo mismo pero cambiando solamente esta parte:

Cita:

.vertical{
font-size:1.4em;
display:block;
position:absolute;
top:49px;/*Muevo vertical arriba-abajo*/
left:-92px;/*Muevo vertical derecha-izquierda*/
width:130px;/*Altura del recuadro vertical*/
height:25px;/*Ancho del recuadro vertical*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}

.horizontal{
position:absolute;
top:-2px;/*Muevo horizontal derecha-izquierda*/
left:25px;/*Muevo horizontal arriba-abajo*/
width:70px;/*Ancho del recuadro horizontal*/
heigth:200px;/*Altura del recuadro horizontal*/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}

Que me sirve para rotar el menu de idiomas en navegadores que no sean explorer. Por cierto, hay que decir que en los estilosIE.css que puse anteriormente esta parte la tenía entre comentarios para que no me afectara:

/*.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*/
/*}*/

Sigo sin encontrar la solución, la risa es que sí que me funciona para los demás elementos del menú, pero no para el enlace Inicio, que me redirige a index.php...

Gracias

asitudela · #4 (**permalink**) 09/03/2013, 12:51

Cuidado en la línea 18 tienes coficación mezclada que no est UF8 "\xED", esto puede hacer que se te vea mal... (aparte de otras cosillas)

tienes unos cuantos errores en el html, yo comenzaría por solucionarlos, te sugiero que compruebes el código en la web http://validator.w3.org/check y soluciones los problemas que te aparecen, y si tienes algún problema no dudes en preguntar :)

pzin · #5 (**permalink**) 09/03/2013, 18:54

Pon los li dentro de su correspondiente ul...