porque no me deja poner el cuadro de color flotandolo?

00israel · #1 (**permalink**) 23/07/2011, 09:14

que estoy haciendo mal? no veo el cuadro que he creado magenta de 300 px por 300 px. Lo he flotado a la izquierda tambien pero no lo veo. Que hago mal?

Código HTML:

<!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>prueba patri</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #f6f6f6;
}
-->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenedor">
  <div id="columna-logo"></div>
  <div id="texto-versioningles">bla bla bla bla bla bla</div>
</div>
<hr /> 
<div id="contenedor2">
  <div id="columnablanca2"></div>
  <div id="contenido fotos">lkjllkjlkjlkjlkjlkjl</div>
</div>
</body>
</html>

css:

Código:

* {
	margin: 0px;
	padding: 0px;
}
#contenedor {
	width: 944px;
}
#contenedor2 {
}
#contenedor #columna-logo {
	background-color: #FFF;
	background-image: url(../links/logo.png);
	background-repeat: no-repeat;
	background-position: bottom;
	display: inline;
	float: left;
	height: 300px;
	width: 236px;
	margin-left: 41px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #CCC;
	border-left-color: #CCC;
}
#contenedor2 #contenido fotos {
	float: left;
	height: 300px;
	width: 300px;
	margin-top: 17px;
	margin-left: 17px;
	background-color: #909;
}
#contenedor #texto-versioningles {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	vertical-align: text-bottom;
	display: inline;
	width: 500px;
	margin-left: 17px;
	float: left;
	height: 20px;
	margin-top: 275px;
}
hr {
	background-color: #CCC;
	height: 1px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	clear: both;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
#contenedor2 #columnablanca2 {
	background-color: #FFF;
	display: inline;
	float: left;
	height: 600px;
	width: 236px;
	margin-left: 41px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #CCC;
	border-left-color: #CCC;
}

emprear · #2 (**permalink**) 23/07/2011, 09:49

00israel

los identificadores ID no pueden contener espacios en blanco en su nombre

reemplazá

#contenido fotos

x

#contenido_fotos

Saludos

00israel · #3 (**permalink**) 23/07/2011, 10:38

joder, estoy atontado. Perdona y muchas gracias. Vaya despiste

ahora que acabo de arreglarlo, me hace otro extraño que no entiendo. Si yo le pongo al contenedor2 un ancho fijo de 944 px y al contenido-fotos le pongo lo que resta, 650 px, al aplicarlo no me lo pone todo en la misma fila, como si se pasase de ancho y me lo pasará para abajo, pero no lo entiendo. Porque he sumando, 41 px del espacio que tiene la columna blanca a la izquierda, 236 de la columna blanca y 17 del espacio que dejo entre el cuadro morado y la columna blanca. En total son 294 menos los 944 del ancho total son 650 que es lo que debo de ponerle al contenido-fotos. ¿porque se desborda?

emprear · #4 (**permalink**) 23/07/2011, 11:22

00israel:

650 (ancho) + 17 (margen) + 236 (ancho) + 41 (margen) + borde (minimo 2px) = 946px

Código CSS:

Ver originalborder-right-width: thin;
    border-left-width: thin;

Y el borde?

saludos

00israel · #5 (**permalink**) 24/07/2011, 03:44

emprear muchas gracias. no había tenido en cuenta los bordes.

otra cosita. Normalmente suelo dar un tamaño al div contenedor donde van alojados otros div. Pero ¿es necesario? porque veo que una vez que le das dimensiones a los div que van a ir dentro no le veo mucho sentido darle tambien un tamaño al div contenedor.

Y lo último. Suelo maquetar combinando posiciones relativas/absolutas con div flotados. Según necesite. ¿Hago bien? o es preferible maquetar todo flotandolo o posicionando?

gracias nuevamente.

Batan · #6 (**permalink**) 24/07/2011, 04:05

Buenas 00israel.

Cita:

Iniciado por 00israel

otra cosita. Normalmente suelo dar un tamaño al div contenedor donde van alojados otros div. Pero ¿es necesario? porque veo que una vez que le das dimensiones a los div que van a ir dentro no le veo mucho sentido darle tambien un tamaño al div contenedor.

A un div contenedor puedes asignarle el valor auto a su propiedad height; asi tu DIV contenedor se ajustará automaticamente al height de los DIV que estan dentro.

height: auto;

Cita:

Iniciado por 00israel

Y lo último. Suelo maquetar combinando posiciones relativas/absolutas con div flotados. Según necesite. ¿Hago bien? o es preferible maquetar todo flotandolo o posicionando?

Los position pueden darte problemas de compatibilidad con los navegadores pero puedes fijarlos en cualquier posicion que te guste.

Con los float no tendras problemas de compatibilidad pero solo puedes fijarlos a la izquiera, derecha o a ninguno dentro de su contenedor.

En tal caso depende de la situación. Pero yo te recomendaria usar float.

Saludos

00israel · #7 (**permalink**) 24/07/2011, 05:13

Gracias de nuevo. Lo del auto, para el height, perfecto ¿Puedo hacer lo mismo para el ancho? O sencillamente no poner ancho ya que lo van a determinar los div que van dentro no?

Batan · #8 (**permalink**) 24/07/2011, 05:59

claro, es igual. Simplemente no pongas width si quieres quieres que coja el ancho de tu DIV.

emprear · #9 (**permalink**) 24/07/2011, 08:24

No es exactamente lo mismo, y en particular para el ancho, por ejemplo el centrado con margin: 0px auto; no te va a funcionar si no proporcionas una medida no relativa
Otra, divs con ancho en % que esten dentro de un div sin una medidad definida, no se adpatan por carecer de un valor de referencia.

Sin conocer exactamente el conjunto de la estructura, aplicar auto al ancho puede ser necesario o no.

Saludos

Batan · #10 (**permalink**) 24/07/2011, 09:52

Pues gracias por la corrección.