Foros del Web » Creando para Internet » CSS »

por favor ayuda situando listas

Estas en el tema de por favor ayuda situando listas en el foro de CSS en Foros del Web. Hola buenas tardes ¡¡ , el Css a dia de hoy me sigue trayendo de cabeza, tardo más en diseñar una página que en programar ...
  #1 (permalink)  
Antiguo 30/07/2009, 07:14
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
por favor ayuda situando listas

Hola buenas tardes ¡¡ , el Css a dia de hoy me sigue trayendo de cabeza, tardo más en diseñar una página que en programar una web , pero bueno habrá que acostumbrarse digo yo.
El problema que tengo es que tengo una capa central donde quiero poner 3 menus a la izquierda y 1 menú a la derecha.

Si lo hago con float left (dentro de la capa contenedora que contiene todos los menus) me posiciona perfectamente los menus a la izq como es lógico , y si pongo float:right al menú que quiero en la derecha lo mismo. El problema por el que me estoy tirando de los pelos (:: es que cuando inserto contenido en el menú de la derecha se corre todo para abajo (me refiero a que se crea un espacio entre los menus de la izquierda cosa que no debería de pasar).
¿Alguien me puede decir como se soluciona esto?.
Voy a pegar parte del código:

Código:
<div class="PostMetadataHeader">
                                               
                                                      <div class="left_box"> 
                                                     
                                                         <div class="line">Noticias</div>
                                                         <ul class="bg_lista">
                                                         <li>texto noticia 1.   |   Imagen 1</li>
                                                         <li>texto noticia 2 |   Imagen 1</li>
                                                         </ul>
                                                   </div>
                                                    <div class="right_box "> 
                                                     
                                                         <div class="line">Titulo principal</div>
                                                         <ul class="bg_lista">
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         </ul>
                                                          <ul class="bg_lista">
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         </ul>
                                                         
                                                          <ul class="bg_lista">
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         </ul>
                                                          
                                                          <ul class="bg_lista">
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         </ul>
                                                          
                                                          <ul class="bg_lista">
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         <li>Noticia 1    |   Imagen 1</li>
                                                         </ul>
                                                         
                                                   </div>
                                                                   <div class="cleared"></div>

                                                     <div class="left_box"> 
                                                     
                                                         <div class="line">Noticias</div>
                                                         <ul class="bg_lista">
                                                         <li>noticias del sitiol  |   Imagen 1</li>
                                                         <li>noticias del sitio  |   Imagen 1</li>
                                                         </ul>
                                                   </div>
                                                                                                                                                         <div class="cleared"></div>

                                                     <div class="left_box"> 
                                                     
                                                         <div class="line">Noticias</div>
                                                         <ul class="bg_lista">
                                                         <li>Cnoticias del sitio |   Imagen 1</li>
                                                         <li>noticias del sitiol |   Imagen 1</li>
                                                         </ul>
                                                   </div>
                                                    
                                                   
   <div class="cleared"></div>

                                    </div>
Y el css lo tengo así

Código:
.text_intro {font-family:Tahoma; font-size:16px }

.line {  background-color:#000099; color:#FFFFFF; font-size:16px; letter-spacing:0.3em;
width:220px;border:#000066 1px solid }
  
 .left_box  { float:left; padding:10px; width:230px; }
 
  .right_box  { float:right; padding:10px; width:190px; }

  
 .border_table { border:#000066 1px solid }
  
 .titular {color:#FF0000 }
Un saludo y gracias de antemano
  #2 (permalink)  
Antiguo 30/07/2009, 07:24
Avatar de pyroCL  
Fecha de Ingreso: marzo-2009
Ubicación: C#
Mensajes: 261
Antigüedad: 8 años, 8 meses
Puntos: 2
Respuesta: por favor ayuda situando listas

Probaste dandole ams ancho a tu contenedor?
Saludos!
__________________
La verdadera sabiduría está en reconocer la propia ignorancia.
  #3 (permalink)  
Antiguo 30/07/2009, 08:44
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: por favor ayuda situando listas

Cita:
Iniciado por pyroCL Ver Mensaje
Probaste dandole ams ancho a tu contenedor?
Saludos!
Buenas , gracias por la respuesta pero te cuento , el tamaño del contenedor no tiene que ver (aún así lo he probado y sigue pasando lo mismo); el problema es que tengo dos filas , la primera que tiene varias capas con listas con float:left y la segunda que tiene una lista con float:right. Aparentemente se posicionan donde yo quiero , pero cuando meto contenido en la de la derecha se corre todo para abajo .

Un saludo y gracias
  #4 (permalink)  
Antiguo 30/07/2009, 08:47
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: por favor ayuda situando listas

Lo acabo de solucionar , el problema que tenía es que tenía puesto una limpieza de fila (se llama así no?? ) despúes de cada lista, lo he borrado y ya no pasa eso.
<div class="cleared"></div>
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 22:11.