CSS: Posicionar divs y menú

Josepanaero #1 Dic '08

Buenas! Estoy calentándome la cabeza con un código, pero no sé cómo hacerlo. Tengo tres divs que quiero situar de la siguiente manera, pero no sé cómo hacerlo:

Me sale humo por la cabeza ya, pero es que no doy con la tecla. He probado a envolver A y B en otro div, y poner ése y C con la propiedad display: inline, pero no sale nada. A ver si alguien con más experiencia en esto me puede ayudar.

Por otra parte estoy haciendo un menú que funciona de la siguiente forma: es una imagen que cuando pones el ratón encima, se convierte en otra imagen (la misma que antes, pero con un efecto de resaltado). Ya he hecho el código de esto, pero se ha quedado un poco cutre en mi opinión, y estaba buscando a ver si alguien puede darme otras ideas de diseño que se le ocurran.

Un saludo y muchas gracias.

mOrK2 #2 Dic '08

Haz dos divs, uno a la izquirda y otro a la derecha, al de la izq le das float:left y despues metes ahi las otras dos le metes a la de arriba margin-bottom y no sé, supongo que lo habras probado pero haciendolo asi deberia funcionar sin más xD por cierto, tendrias que crear otra con clear:left para la capa que engloba las otras dos minis xD

saludos

GaN2 #3 Dic '08 Inocente

A ver, yo lo que he hecho es lo siguiente:

Contenedor que engloba a todas las capas.
Contenedor Izquierda, que engloba 2 capas:
- Capa superior izq.
- Capa inferior izq.
Contenedor derecha, que engloba solo una capa.

Soy capaz de mostrar bien el contendor izq, pero el derecho me pone la capa debajo. Seguire probando a ver si soy capaz de sacarlo.

B

[Borrado] #4 Dic '08

DIV contenedor izquierda { float: left; width: x; }
-- DIV contenedor izquierda arriba
-- DIV contenedor izquierda abajo
DIV contenedor derecha { float: right; width: x; }
DIV limpiador de floats { clear: both; }

Y debe de funcionar correctamente. No hace falta display: inline ni nada

Importante el div abajo de todos con el clear:both.

Josepanaero #5 Dic '08

Sois los reyes. Me ha valido con lo que me ha dicho #4. De todas formas, para hacerlo un poco más elegante, el div limpiador de floats lo he eliminado y a todos los divs anteriores los he englobado con un nuevo div, al cual le he puesto la propiedad clear: both.

El pseudocódigo quedaría así:

DIV contenedor principal { clear: both;}
-- DIV contenedor izquierda { float: left; width: x; }
--- DIV contenedor izquierda arriba
--- DIV contenedor izquierda abajo

-- DIV contenedor derecha { float: right; width: x; }

Muchas gracias a todos!

GaN2 #6 Dic '08 Inocente

Hago exactamente lo mismo que vosotros y no me lo muestra como me lo tiene que mostrar xD

Crawler #7 Dic '08

@ #4: "el div limpiador de floats lo he eliminado y a todos los divs anteriores los he englobado con un nuevo div, al cual le he puesto la propiedad clear: both."

¿Y te funciona? ¿El contenedor global coge el height de su contenido?
Compruébalo, por que me extraña bastante.

Mi apuesta (para este caso en concreto, normalmente no lo haría asi):

CSS:

div{border: 1px solid red;margin: 5px;} // esto solo para que se vea

#arriba , #abajo{width: 60%;float: left; height: 50px;}

#dcha{height: 200px;width: 30%;float: right;}

HTML:

<div id="dcha">derecha</div>
<div id="arriba">arriba</div>
<div id="abajo">abajo</div>

SeiYa #8 Dic '08

Igual en IE y en FF

<style>
div#web
{
	background: black;
	position: absolute;
	padding: 5px;
}
div#izquierda
{
	width: 73%;
	position: relative;
	background: red;
	float: left;
}
div#derecha
{
	width: 23%;
	position: relative;
	background: yellow;
	float: right;
}

div#capa1
{
	margin: 5px;
	background: blue;
}

div#capa2
{
	margin: 5px;
	background: green;
}
</style>
<div id="web">
	<div id="izquierda">
		<div id="capa1">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc hendrerit purus in orci. Donec varius elit eget arcu. Pellentesque metus. Nam lorem ipsum, egestas blandit, venenatis interdum, egestas eu, sem. Phasellus nec libero. In fringilla nisl non mauris. Nam erat risus, congue ac, dignissim sit amet, dapibus eget, purus. Vestibulum ante odio, elementum a, vestibulum eu, accumsan sollicitudin, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis dui. Quisque fringilla metus ac metus. Praesent purus arcu, porttitor et, tempus a, tempus vitae, nisi. Aenean in magna. Cras ut neque ut diam fringilla posuere.
		</div>
		
	<div id="capa2">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc hendrerit purus in orci. Donec varius elit eget arcu. Pellentesque metus. Nam lorem ipsum, egestas blandit, venenatis interdum, egestas eu, sem. Phasellus nec libero. In fringilla nisl non mauris. Nam erat risus, congue ac, dignissim sit amet, dapibus eget, purus. Vestibulum ante odio, elementum a, vestibulum eu, accumsan sollicitudin, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis dui. Quisque fringilla metus ac metus. Praesent purus arcu, porttitor et, tempus a, tempus vitae, nisi. Aenean in magna. Cras ut neque ut diam fringilla posuere.
	</div>
</div>
<div id="derecha">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc hendrerit purus in orci. Donec varius elit eget arcu. Pellentesque metus. Nam lorem ipsum, egestas blandit, venenatis interdum, egestas eu, sem. Phasellus nec libero. In fringilla nisl non mauris. Nam erat risus, congue ac, dignissim sit amet, dapibus eget, purus. Vestibulum ante odio, elementum a, vestibulum eu, accumsan sollicitudin, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis dui. Quisque fringilla metus ac metus. Praesent purus arcu, porttitor et, tempus a, tempus vitae, nisi. Aenean in magna. Cras ut neque ut diam fringilla posuere.
</div>
</div>

ElKedao #9 Dic '08

Más fácil, y menos lioso. Valida en Strict 1.0, compatible con IE & Firefox y con solo 4 divs...

CÓDIGO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
<!--
* {
	margin: 0px;
	padding: 0px;
}
#general {
	height: 340px;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
}
#general #a {
	background-color: #CC0000;
	float: left;
	height: 150px;
	width: 400px;
}
#general #b {
	float: left;
	height: 150px;
	width: 400px;
	margin-top: 20px;
	background-color: #3300FF;
}
#general #c {
	float: right;
	height: 320px;
	width: 150px;
	margin-right: 20px;
	background-color: #FFFF00;
}
-->
</style>
</head>

<body>
<div id="general">
  <div id="c"></div>
	<div id="a"></div>
    <div id="b"></div>
   

</div>
</body>
</html>

scumah #10 Dic '08

En cuanto a la segunda pregunta, échale un ojo a esto.

Usuarios habituales