Problema con posicionamiento de listas

kiM- · #1 (**permalink**) 22/03/2011, 16:25

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!

kiM- · #2 (**permalink**) 23/03/2011, 06:57

Al parecer lo único que podría hacer es poneer laa barra en sí de fondo (poniendola de un tamaño de 1007px) pero no es eso lo busco, naddie sabría decirme?

cuervo699 · #3 (**permalink**) 24/03/2011, 00:07

No entiendo bien tu pregunta!!! deberias explicar mejor en tus post! o a lo mejor yo soy el que no entiende! xD

kiM- · #4 (**permalink**) 24/03/2011, 01:34

A ver, os explico, la barra de menú que está justo debajo del logo, resulta que tiene un fondo verde, y yo quiero que ese fondo ocupe TODO el ancho del contenedor (1007px), pero está ajustado para ocuparme solo lo que mida el texto y claro esa barra no me llega al final y entonces me queda un hueco blanco, tendría que escribir las palabras justas (innecesarias) para que llegara al final y aún así se vería rara, he probado a alinear el texto en el centro o centrar el div e incluso a ponerlo de fondo de buttons_nav, pero ni el texto se me centra, ni el div se centra, y si pongo la imagen de fondo en buttons_nav la opción a:hover se desactiva... llevo días comiéndome la cabeza y nada... :\

Os dejo el css bien encerrado en el quote:

CSS:

Cita:

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>

Yojimbo · #5 (**permalink**) 24/03/2011, 02:53

Si quieres centar el div #buttons_nav porque no le pones un margin-left de 35px?
o aumentas los padding laterales de cada li hasta que te ocupen los 1007px.

Yo personalmente no haria el ancho mas de 950px.