Problema Float:left y Position (creo)

[ingridbrosman]

Hola! No consigo que flote un div al lado de otro, es una cosa simple pero que me esta dando muchos dolores de cabeza. No entiendo porque no funciona, le he dado 1000 vueltas.. A ver si podeis ayudarme viendo el error.. Muchas gracias!

http://artsioficis.cat/Web/experimentem.html

(Esta colgada provisionalmente aqui para que podais verlo, no es su lugar definitivo)

[C2am]

Hola y Bienvenido al foro

¿Que es lo que quieres flotar y al lado de qué?

Si es hola, y quieres que flote a la derecha de "menu_formacio", no debes ubicarlo dentro de este último.
saludos

Menú: el menú se maqueta, por cuestiones semanticas, dentro de una lista desordenada:
<ul>
<li>primero</li>
<li>segundo</li>
<li>tercero</li>
<li>cuarto</li>
</ul>

y así todos los items que quieras.

Para aprender:
www.librosweb.es , revisa Introducción a Xhtml e Intro a CSS.

Tienes recursos como distintos menues en www.araudi.net

Y un buen blog con información que aclara muchas dudas: http://ksesocss.blogspot.com

[ingridbrosman]

Hola!

Me gustaria flotar el div "centro" al lado de "menu_formacio" per no lo consigo.. Ya esta fuera de este, ahora esta en "contenido2" pero sigue pasando lo mismo.

Cierto que el menú se maqueta con listas desordenadas, es que tube problemas con el jquery de menú y lo quité.. Ya lo he puesto otra vez, gracias!

[C2am]

Fijate que el div "menu_formacio" ocupa el 100% del espacio disponible, en consecuencia no deja que nada se pueda ubicar a su derecha.
Posibles Soluciones:
S 1 - flotarlo también, y darle un ancho o no.

S 2- Flotar "menu_formacio" y asignarle un ancho explicitamente -> width: 300px (lo que corresponda), y NO FLOTAR "centro", lo que hará que este último fluya alrededor del menu. También puedes asignarle un ancho si no quieres que el contenido de centro quede, al superar el alto de "menu_f.." debajo de este.

S3: otras opciones que ahora no se me ocurre.

Prueba y me dices.

Saludos

[ingridbrosman]

Aiixx.. He intentado lo que me dices pero el resultado sigue siendo el mismo.


.menu_formacio {
float:left;
width: 300px;
}

#centre {
width:400px;
background-color:#F60;
}

[ingridbrosman]

No entiendo porque sigue saliendo 1024px de ancho cuando lo tengo a 300px..

[C2am]

Lo que es que efectivamente has cambiado center, pero no veo la primera clase .menu_formacio
Revisa si lo subiste

Revisando la Herramienta de Desarrollo de Chrome veo que sí está en la hoja css, pero no te aparece en el inspector de propiedades lo cual me hace pensar que algo, como el jquery o algo lo está modificando o eliminando.

[C2am]

Ahhhhhhhhhh, no, muy mal

Tienes esto:

Código HTML:

<div class="menu_formacio">
                 <ul>
                    <div class="menu_lateral">
                    <li>  
                        <img src="img/art_menu.png"/>
                        <h7>Art</h7>
                            <div class="respuesta_menu">
                                <a href="experimentem.html"><p>> Experimentem</p></a>
                           </div> 
                      </li>
                     </div>
                     
                   
                 
                    <div class="menu_lateral">
                <li>
                                       </li>
                    </div>
                
             
             
                
                    <div class="menu_lateral">
                <li>
    
                        </li>
                     </div>
                
             
              
                
                    <div class="menu_lateral">
                <li>
     
                        </li>
                    </div>
                  
                
                
                  
                    <div class="menu_lateral">
                          <li>
                            <img src="img/idiomes_menu.png"/>
            
                                </li>        
                      </div>
                    </ul>
       </div>
<div id="centre">hola</div>    
    
 </div>
 

No puedes hacer esto, o mejor dicho no debes hacer esto:

Código HTML:

<ul>
  <div>
     <li></li>
  </div>
</ul>
 

No sé cual será la idea pero esto hace que ese div que pones ahí ocupe, tal como es su naturaleza el 100%, a menos que le digas que ocupe menos.
Pero más allá de eso, no te recomiendo que lo hagas de esa forma. Investiga mejor le jquery y haz lo que pretendes con las listas (que seguro se podrá), o vuelve a los div (lo cual para mí no sería correcto)

Te diría que primero maquetes correctamente, y luego apliques los efectos que deseas con jquery.
Si tienes problemas con el jquery consulta en el foro de javascript o framework.

Me dices como te fue

Saludos

[ingridbrosman]

C2am ya lo consegui! Quite el jQuery y volvi a emezar sin él. Ahora ya lo tengo todo puesto y funciona!

Aun me queda un pequeño detalle por pulir pero supongo que es del jQuery ya, al darle al menu, cuando se despliega sube un poco el texto que esta dentro de la imagen.

http://artsioficis.cat/Web/experimentem.html