Comunidad PHPeros

Lenguajes => CSS => Mensaje iniciado por: GuayAngel12 en 04 de Septiembre de 2011, 16:57:34 pm

Título: [PROBLEMA] Tengo un problema con mi diseño.
Publicado por: GuayAngel12 en 04 de Septiembre de 2011, 16:57:34 pm
Miren, estoy realizando un diseño web. Hasta el momento todo bien, pero en el momento de poner las box's sale de la siguiente manera:

(http://img819.imageshack.us/img819/1029/duday.png)

Se que con ésta imagen digo todo, por lo que voy a adjuntar el codigo css:

Código: [Seleccionar]
/* Menu izquierdo */

#contenido .menu{
width: 215px;
height: auto;
margin: 5px;
float: left;
}

#contenido .arriba_amarillo{
background: url('../img/boxs/v1/box_amarillo.png') no-repeat;
width: 215px;
height: 30px;
line-height: 27px;
font-weight: bold;
text-align: center;
font-size: 12px;
color: white;
text-shadow: 0px -1px 0px rgb(213, 170, 25);
}

#contenido .centro{
background: url('../img/boxs/v1/box_medio.png') repeat-y;
width: 215px;
height: auto;
text-align: left;
padding: 4px;
font-size: 10px;
}

#contenido .abajo{
background: url('../img/boxs/v1/box_abajo.png') no-repeat;
width: 215px;
height: 9px;
}

/* Fin menu izquierdo */

/* Menu grande */

#contenido .menu_grande{
width: 725px;
height: auto;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
float: left;
}

#contenido .arriba_amarillo_grande{
background: url('../img/boxs/v2/box_amarillo.png') no-repeat;
width: 725px;
height: 30px;
line-height: 27px;
font-weight: bold;
text-align: center;
font-size: 12px;
color: white;
text-shadow: 0px -1px 0px rgb(213, 170, 25);
}

#contenido .centro_grande{
background: url('../img/boxs/v2/box_medio.png') repeat-y;
width: 725px;
height: auto;
text-align: left;
padding: 4px;
font-size: 10px;
}

#contenido .abajo_grande{
background: url('../img/boxs/v2/box_abajo.png') no-repeat;
width: 725px;
height: 9px;
}

/* Fin menu grande */

Me sería de gran ayuda que me expliquen que es lo que tengo mal, (No pido ningún código), solo pido que me expliquen cual podría ser el causante del error para yo investigar y solucionarlo por mi cuenta.

Saludos,
Ángel Q.
Título: Re:[PROBLEMA] Tengo un problema con mi diseño.
Publicado por: naveda en 04 de Septiembre de 2011, 18:00:40 pm
Sería interesante ver tambien el codigo html ;)
Título: Re:[PROBLEMA] Tengo un problema con mi diseño.
Publicado por: westwest en 04 de Septiembre de 2011, 18:12:19 pm
Esto ocurre por usar elementos flotantes, el contenedor "no sabe que estan ahí" así que los ignora y no se expande, la solución es añadir un div con clear:both; de esta manera:
<div>
<div>floto</div>
<div>floto</div>
<div>floto</div>
<div style="clear:both;"></div>
</div>
Título: Re:[PROBLEMA] Tengo un problema con mi diseño.
Publicado por: GuayAngel12 en 04 de Septiembre de 2011, 20:05:01 pm
Siento mucho no haber podido contestar antes.

Esto ocurre por usar elementos flotantes, el contenedor "no sabe que estan ahí" así que los ignora y no se expande, la solución es añadir un div con clear:both; de esta manera:
<div>
<div>floto</div>
<div>floto</div>
<div>floto</div>
<div style="clear:both;"></div>
</div>

Muchas gracias, tu método ha funcionado. K+

Sería interesante ver tambien el codigo html ;)

Muchas gracias por tu interés a la hora de ayudarme.

Saludos,
Ángel Q.