problema al hacer menu con pestañas

hades87 · #1 (**permalink**) 07/01/2008, 05:54

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:

josdelaranda · #2 (**permalink**) 07/01/2008, 09:46

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

hades87 · #3 (**permalink**) 07/01/2008, 10:01

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

josdelaranda · #4 (**permalink**) 07/01/2008, 10:16

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.

josdelaranda · #5 (**permalink**) 07/01/2008, 10:19

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.

hades87 · #6 (**permalink**) 07/01/2008, 10:21

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

josdelaranda · #7 (**permalink**) 07/01/2008, 10:24

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

hades87 · #8 (**permalink**) 07/01/2008, 10:29

probé lo del #last y no m funciona :S, solo meva si le pongo con style :\

josdelaranda · #9 (**permalink**) 07/01/2008, 10:33

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

josdelaranda · #10 (**permalink**) 07/01/2008, 10:34

Escribe:

#last { margin: 0 !important;}

hades87 · #11 (**permalink**) 07/01/2008, 10:37

con eso tampoco me sirve :(

josdelaranda · #12 (**permalink**) 07/01/2008, 10:37

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.

hades87 · #13 (**permalink**) 07/01/2008, 10:43

parece que con esta ultima si funcionó :D

josdelaranda · #14 (**permalink**) 07/01/2008, 10:46

Me alegra que se haya solucionado sino los moderadores nos iban a decir que esto ya parece chat, Saludos