Foros del Web » Creando para Internet » CSS »

Problema con posicionamiento de listas

Estas en el tema de Problema con posicionamiento de listas en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 22/03/2011, 17:25
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
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!
  #2 (permalink)  
Antiguo 23/03/2011, 07:57
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Problema con posicionamiento de listas

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?
  #3 (permalink)  
Antiguo 24/03/2011, 01:07
Avatar de cuervo699  
Fecha de Ingreso: febrero-2011
Mensajes: 104
Antigüedad: 6 años, 10 meses
Puntos: 7
Respuesta: Problema con posicionamiento de listas

No entiendo bien tu pregunta!!! deberias explicar mejor en tus post! o a lo mejor yo soy el que no entiende! xD
  #4 (permalink)  
Antiguo 24/03/2011, 02:34
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Problema con posicionamiento de listas

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>
  #5 (permalink)  
Antiguo 24/03/2011, 03:53
Avatar de Yojimbo  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 31
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: Problema con posicionamiento de listas

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.

Etiquetas: listas, posicionamiento
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 09:52.