Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/03/2011, 16:25
Avatar de kiM-
kiM-
 
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 16 años
Puntos: 2
Problema con posicionamiento de listas

Buenas, puñes resulta que yo tengo un div con un acho de 1007px, y tengo dentro una lista, en float:left para que se posicione horizontalmente, he escrito varios textos y todo, quiero que todo cuadre sin que de un salto de línea, y que lo que sobre desaparezca para que esté en la misma línea, os dejo el CSS:

HTML:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<div id="global">
<div id="logo"></div>
<div id="menu_bar">
<div id="buttons_nav">
<ul>
<li><a href="#">Noticias</a></li>
<li><a href="#">Foros</a></li>
<li><a href="#">Información</a></li>
<li><a href="#">Consolas</a></li>
<li><a href="#">Videojuegos</a></li>
<li><a href="#">Plataformas</a></li>
<li><a href="#">Emblemas</a></li>
<li><a href="#">Personajes</a></li>
<li><a href="#">Compra/Venta</a></li>
<li><a href="#">Acceso</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Afiliados</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">RSS/NEWS</a></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#global {
width: 1007px;
margin-right: auto;
margin-left: auto;
}
#logo {
width: 1007px;
background-image: url(images/logo.png);
height: 200px;
}
#menu_bar {
width: 1007px;
overflow: hidden;
}
#buttons_nav {
float: left;
overflow: hidden;
}
#buttons_nav a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
background-image: url(images/bg_menu_bar.png);
padding-top: 5px;
padding-bottom: 5px;
float: left;
padding-right: 5px;
padding-left: 5px;
color: #FFF;
}
#buttons_nav a:hover {
background-image: url(images/bg_menu_bar_hover.png);
}
#buttons_nav ul {
padding: 0px;
margin: 0px;
}
#buttons_nav ul li {
list-style-type: none;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #6C8800;
}
</html>[/QUOTE]

El texto de la lista "RSS/NEWS" se me descuadra y se coloca automaticamente debajo en vez de seguir (lo que quiero es que si no cabe se oculte parte del botón y solo muestre hasta el ancho del div, pero no lo consigo... ¿Alguna solución?

Saludos y gracias!