Foros del Web » Creando para Internet » CSS »

Problema Menu html/css

Estas en el tema de Problema Menu html/css en el foro de CSS en Foros del Web. Hola, les hago una consulta, sobre un menu que utiliza css. Al final del mensaje adjunto el codigo. El problema que tengo, es al querer ...
  #1 (permalink)  
Antiguo 09/07/2009, 17:49
 
Fecha de Ingreso: febrero-2002
Mensajes: 15
Antigüedad: 15 años, 9 meses
Puntos: 0
Problema Menu html/css

Hola, les hago una consulta, sobre un menu que utiliza css. Al final del mensaje adjunto el codigo.

El problema que tengo, es al querer colocar bordes en las opciones de menu de nivel 2 y 3 (por ejemplo Opcion 2.2 o Opcion 2.3.2), los cuales quiero que sean naranja (#FF6600) como el menu princial. Probe distintas al ternativas pero no encuentro la solucion. Como esta el codigo actualmente toma un borde de color blanco, que entiendo "hereda" de algun elemento pero no me doy cuanta donde especificarle que use naranja en su lugar.

Espero que se entienda el problema. Al diseño como esta ahora, solo necesito que ademas tengan los submenu bordes naranjas (al seleccionarlos los bordes pasan a ser negros).

Desde ya muchas gracias por su gran ayuda.
Daniela

est.css

* {
margin: 0px;
padding: 0px;
outline: 0;
}

html, body {width: 100%;}

body {
color: #FFFFFF;
background-color: #000000;
padding: 0;
margin: 0;
border: none;
border-collapse:collapse;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#enc {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 80px;
margin: 0;
padding: 0;
background-color: #000000;
}

#enc p {
text-align: center;
}

#menu {
position: absolute;
left: 150px;
top: 80px;
width: auto;
height: 50px;
margin: 0;
padding: 0;
font-size: 0.7em;
background-color: #000000;
text-align: center;
}

#lat {
position: absolute;
left: 0;
top: 130px;
width: 150px;
height: auto;
padding: 0;
margin: 0;
background-color: #000000;
}

#cuer {
position: absolute;
left: 150px;
top: 130px;
width: auto;
height: auto;
padding: 0;
margin: 0;
background-color: #000000;
}

#menu ul {
list-style-type: none;
/*margin: 5px 0px 0px 0px; /* separacion de encabezado */
}

#menu ul li {width: 162px;} /* tamaño de opcion */

#menu ul li.nivel1 {
float: left;
margin-right: 1px; /* separacion entre opc ppal */
}

#menu ul li a { /* opcion ppal */
display: block;
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
border: solid 1px #FF6600;
padding: 6px;
position: relative;
}

#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #99CC66;} /* color de opc de nivel 2 que tiene nivel 3 abajo */

#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block!important;display: none;
position: relative;
}

#menu ul li:hover {position: relative;}

#menu ul li a:hover, #menu ul li:hover a.nivel1 { /* selecciona opcion ppal */
background-color: #FF6600;
color: #FFFFFF;
position: relative;
}

#menu ul li ul {display: none;}

#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
position: absolute;
left: 0px; /* donde se alinea el nivel 2 bajo nivel 1 */
}

#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 { /* cuando se marca nivel 3 */
display: block;
position: absolute;
left: 161px!important;left: 160px;
top:0px!important;top: -21px;
border-color: #000000;
}

#menu ul li ul li a { /* nivel 2 */
width: 160px;
padding: 6px 0px;
border: solid 1px #FF6600;
}

#menu ul li ul li a:hover { /* cuando se marca nivel 2 */
border-color: #000000;
position: relative;
}

#menu ul li ul li ul li a.primera { /* primera opc nivel 3 */
border-color: #000000;
}

table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

HTML
(edito la primer linea porque no me la deja postear, tiene espacios de mas)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "h t t p ://w w w .w 3.o r g / T R / h t m l 4 0 / st r i c t . d t d ">
<html>
<head>

<title>xx</title>
<link media="screen" href="css/est.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
#menu ul li ul li a{margin-bottom:-1px;border-top-color: #fff;}
#menu ul.nivel2{margin-top: -1px;}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}
</style>
<![endif]-->

</head>

<body>

<div id="enc">
<p><IMG SRC="img/top.gif" WIDTH="473" HEIGHT="64" BORDER="0" ALT="Titulo"></p>
</div>

<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 2.1</a></li>
<li><a href="#">Opción 2.2</a></li>
<li class="nivel2"><a class="nivel2" href="#">Opción 2.3 »</a>
<!--[if lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]-->
<ul class="nivel3">
<li><a class="primera" href="#">Opción 2.3.1</a></li>
<li><a href="#">Opción 2.3.2</a></li>
<li><a href="#">Opción 2.3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>

<div id="lat">
<p>Lateral</p>
</div>

</body>
</html>
  #2 (permalink)  
Antiguo 10/07/2009, 16:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema Menu html/css

Hola:

Cita:
Iniciado por DANICAD Ver Mensaje
Probe distintas al ternativas pero no encuentro la solucion. Como esta el codigo actualmente toma un borde de color blanco, que entiendo "hereda" de algun elemento pero no me doy cuanta donde especificarle que use naranja en su lugar.
¿En que navegador lo visualizas? Porque he probado en Firefox 3.0.11 y en IE7 y no acabo de ver ese borde blanco del que hablas y en la única parte que veo un border blanco es aquí.

Código:
<link media="screen" href="css/est.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
#menu ul li ul li a{margin-bottom:-1px;border-top-color: #fff;}
#menu ul.nivel2{margin-top: -1px;}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}
</style>
<![endif]-->
Espero haberte sido útil.

Saludos.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:54.