Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: Aerolito en 02 de Agosto de 2009, 02:21:36 am
-
He ensayado un código de estilos en un host que uso para pruebas, y algo hace que el menú horizontal esté trastocado visualmente. El código usado es el siguiente que paso a detallar:
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
body {
background: white;/* center navcontainer in IE5 */
margin-top: 60px;
margin-bottom: 40px;
}
#contenido {
width: 740px;
position: relative;
background: white;
margin: 0 auto;
}
h3 {
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: Navy;
text-align:
justify;
text-indent: 1cm;
}
#auxiliar {
width: 900px;
background: white;
position: relative;
top: 70px;
left: 0;
text-align: center;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
margin-bottom: 30px;
}
#navcontainer {
margin: 0 auto;
padding-left: 25px;
text-align: center;
}
#navlist {
width: 100%;
padding: 1px 1px 1px;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0 auto;
border-top: 1px solid gray;
display: inline;
}
#navlist li a {
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 150px;
display: inline;
float: left;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
border-color: #FF0000;
color: #FFF;
background: #332;
}
</style>
El efecto que comento se aprecia claramente en www.iluminigoj.idomyweb.com
(http://www.iluminigoj.idomyweb.com), y por más que reviso el código no encuentro la razón del fallo.
Gracias por anticipado y un saludo.
-
Haber man quiero colaborar con una respuesta, yo uso el DW 2004, en el lo he probado y correo de maravilla,te dejo el codigo Ok.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mi Menu Horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
body {
background: white;/* center navcontainer in IE5 */
margin-top: 60px;
margin-bottom: 40px;
}
#contenido {
width: 740px;
position: relative;
background: white;
margin: 0 auto;
}
h3 {
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: Navy;
text-align:
justify;
text-indent: 1cm;
}
#auxiliar {
width: 900px;
background: white;
position: relative;
top: 70px;
left: 0;
text-align: center;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
margin-bottom: 30px;
}
#navcontainer {
margin: 0 auto;
padding-left: 25px;
text-align: center;
}
#navlist {
width: 100%;
padding: 1px 1px 1px;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0 auto;
border-top: 1px solid gray;
display: inline;
}
#navlist li a {
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 150px;
display: inline;
float: left;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
border-color: #FF0000;
color: #FFF;
background: #332;
}
</style>
</head>
<body>
<!-- Comienza mi Menu Horizontal -->
<ul id=navlist>
<li id=active>
<A href="http://www.google.com.pe/">Ir a Google</A>
<li><A href="http://www.google.com.pe/">Ir a Google</A>
<li><A href="http://www.google.com.pe/">Ir a Google</A>
<li><A href="http://www.google.com.pe/">Ir a Google</A>
<li><A href="http://www.google.com.pe/">Ir a Google</A>
<li><A href="http://www.google.com.pe/">Ir a Google</A>
</li>
</ul>
<!-- Termina mi menu horizontal -->
</body>
</html>
Saludos man, un abrazo.... Luis ;-)
-
Hola y gracias, disculpa mi tardanza en responder, entre el ajetreo del verano y otras cosas uno se desconecta demasiado. En cualquier caso, gracias por tu ayuda, probaré a corregir mi código de acuerdo a tus observaciones.
Un saludo ;-)