Foros del Web » Creando para Internet » CSS »

problema al hacer menu con pestañas

Estas en el tema de problema al hacer menu con pestañas en el foro de CSS en Foros del Web. ando haciendo un menú con pestañas y no consigo quitar una rayita de borde del ultimo botón a la derecha del todo. Código HTML: <!DOCTYPE ...
  #1 (permalink)  
Antiguo 07/01/2008, 05:54
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
problema al hacer menu con pestañas

ando haciendo un menú con pestañas y no consigo quitar una rayita de borde del ultimo botón a la derecha del todo.

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!–
#demo-container{
padding:25px 15px 0 15px;
margin:0 0 15px 0;
background:#67A897;
}
ul#simple-menu{list-style-type:none;width:633px;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;border-bottom:1px solid #000000}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;margin-left:0px; margin-right:3px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;border:1px solid #000000; border-bottom:none;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}

.abajo{
width: 628px;
height: 100px;
border:1px solid #000000;
border-top: none;
}
–>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<div id="demo-container">
<ul id="simple-menu">
<li><a href="#" title="Home" class="current">Home</a></li>
<li><a href="Untitled-2.htm" title="Home">Resources</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Inspiration</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Community Forums</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">About Us</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Contact Us</a></li>
</ul>
</div>
<div class="abajo">
aaa
</div>
</body>
</html> 
y una imagen también para entenderlo mejor:

  #2 (permalink)  
Antiguo 07/01/2008, 09:46
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Hola Hades podrías cambiar esto en tu código css:
Código:
ul#simple-menu{width:630px; }
y al útimo li dentro de ul#simple-menu debes darle margin: 0.
Saludos
  #3 (permalink)  
Antiguo 07/01/2008, 10:01
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: problema al hacer menu con pestañas

no me acaba de salir bien, me podrías poner el código por favor?

Última edición por hades87; 07/01/2008 a las 10:14
  #4 (permalink)  
Antiguo 07/01/2008, 10:16
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Hola Hades87, si, en este caso debes darle al último li un id específico. Una cosa que olvidé comentar es que en IE 6 veo tu barra de navegación un poco movida. Saludos.
  #5 (permalink)  
Antiguo 07/01/2008, 10:19
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Aca está el código completo

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!–
#demo-container{
padding:25px 15px 0 15px;
margin:0 0 15px 0;
background:#67A897;
}
ul#simple-menu{list-style-type:none;width:630px;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;border-bottom:1px solid #000000}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;margin-left:0px; margin-right:3px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;border:1px solid #000000; border-bottom:none;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}

.abajo{
width: 628px;
height: 100px;
border:1px solid #000000;
border-top: none;
}
–>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<div id="demo-container">
<ul id="simple-menu">
<li><a href="#" title="Home" class="current">Home</a></li>
<li><a href="Untitled-2.htm" title="Home">Resources</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Inspiration</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Community Forums</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">About Us</a></li>
<li style="margin:0;"><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Contact Us</a></li>
</ul>
</div>
<div class="abajo">
aaa
</div>
</body>
</html>
Saludos.

PD. Solo lo he revisado para Firefox.
  #6 (permalink)  
Antiguo 07/01/2008, 10:21
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: problema al hacer menu con pestañas

es que ahora mismo me pierdo, como le doy un id especifico? me podrías poner el ejemplo?

en css se hacer maquetacion ya con divs y to eso, pero esto del menu de pestañas lo cogí d e un sitio y no lo he hecho yo enteramente :P
  #7 (permalink)  
Antiguo 07/01/2008, 10:24
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Al li que tiene el estilo <li style="margin:0;"> lo puedes cambiar por <li id="last">
y agregas la siguiente regla:

#last { margin:0; }, esa es la forma correcta de poner el estilo, no como lo puse yo dentro de la misma etiqueta.

Saludos
  #8 (permalink)  
Antiguo 07/01/2008, 10:29
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: problema al hacer menu con pestañas

probé lo del #last y no m funciona :S, solo meva si le pongo con style :\
  #9 (permalink)  
Antiguo 07/01/2008, 10:33
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Debes agregar el nuevo estilo asï

Código:
<style type="text/css">
<!–
#demo-container{
padding:25px 15px 0 15px;
margin:0 0 15px 0;
background:#67A897;
}
ul#simple-menu{list-style-type:none;width:630px;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;border-bottom:1px solid #000000}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;margin-left:0px; margin-right:3px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;border:1px solid #000000; border-bottom:none;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}

.abajo{
width: 628px;
height: 100px;
border:1px solid #000000;
border-top: none;
}

#last { margin: 0;}
–>
</style>
Saludos
  #10 (permalink)  
Antiguo 07/01/2008, 10:34
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Escribe:

#last { margin: 0 !important;}
  #11 (permalink)  
Antiguo 07/01/2008, 10:37
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: problema al hacer menu con pestañas

con eso tampoco me sirve :(
  #12 (permalink)  
Antiguo 07/01/2008, 10:37
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Tambien puedes usar:

#simple-menu #last { margin: 0;}

para darle más fuerza a tu declaración

Saludos

Que raro que no te funcione con #last { margin: 0 !important;}, yo lo veo bien desde mi compu.
  #13 (permalink)  
Antiguo 07/01/2008, 10:43
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: problema al hacer menu con pestañas

parece que con esta ultima si funcionó :D
  #14 (permalink)  
Antiguo 07/01/2008, 10:46
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: problema al hacer menu con pestañas

Me alegra que se haya solucionado sino los moderadores nos iban a decir que esto ya parece chat, 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 14:43.