Problema incomprensible con un diseño

#1 (**permalink**) 14/08/2009, 09:39

Hola,

Vereis me he leido todos los manuales y ejemplos que he visto sobre el tema y no consigo saber donde estoy fallando.

El problema que tengo es que mi diseño a dos columnas me deforma el contenido de la capa central (donde se supone que va la informacion). Por ejemplo en la primera pagina estoy creando un sistema de noticias, y la primera me sale exageradamente grande, a pesar de que todas tienen el mismo CSS.

Os paso la web para que le deis un vistazo: arreglado ^^

Es una web privada sin acabar, aun me queda mucho por hacer solo necesito un empujón con este problema de CSS que no consigo solucionar, y ya van 2 dias de prueba y error...

Gracias.

alexk · #2 (**permalink**) 14/08/2009, 10:07

hey chimera, jeje soy de truzone igual pero bueno...

primero te aconsejo no usar un "<br class="separator"/>"... sino un "margin-bottom"
aveces tienes esto igual

Código html:

Ver original<span class="cr-bot3">
<span/>
</span>
</div>
<span class="cr-bot2">
<span/>
</span>
</div>
<br class="separator"/></div>

"?????
abriendo y cerrando etiquetas a ciegas... valida tu html corrige todo y si aun asi da errores vuelve a preguntar... chao y suerte!...

#3 (**permalink**) 14/08/2009, 10:35

El br no tiene nada que ver con el espacio, es para limpiar (clear:both;), si fuese para dejar un espacio pondria margen;

Y de abriendo y cerrando etiquetas a ciegas nada, mira el CSS y verás que eso es para las esquinas redondeadas, segun firebug no tengo ni una sola etiqueta sin cerrar. Sabias que se pueden anidar estilos no? ¬¬

Pasaré el validador...

kaninox · #4 (**permalink**) 14/08/2009, 10:49

podrías poner el código para ver en que te lías, saludos....

#5 (**permalink**) 14/08/2009, 11:04

mm ok, he puesto la web pero si preferis codigo lo pongo:

HTML

Código:

<html>
<head>bla bla bla</head>
<body >
<div id="mainBody">
	<div id="header">
	</div><!--FIN #header-->
	<div id="innerBody">
		<div id="leftColumn">
		</div><!--FIN #leftColumn-->
	<div id="contentBody">
		<div class="centerColumn">
			AQUI CONTENIDO
		</div><!--FIN .centerColumn-->
	</div><!--FIN #contentBody-->

CSS

Código:

body, html {
	margin:0;
	padding:0;
	height: 100%;
}

#header {
	margin:0 .4em 0 .4em;
	padding:0em .31em;
	color: #FFFFFF;
}

#mainBody{
	margin:0 4em 0 4em;
	padding: 0;
	background-color: #FFFFFF;
	border-left: 4px solid #CADFE6;
	border-right: 4px solid #CADFE6;
	min-height:100%;
}
 
#innerBody {
	clear:both;
	height:100%;
	margin: .4em;
}

#leftColumn {
	width:14em;
	padding:.03em .1em;
	background:#FFFFFF;
	font-size:.9em;
	float:left;
}

#contentBody{
	position: relative;
	margin-left: 14em;
}

.centerColumn {
	padding:0 .35em;
	background: #DCE8EF;
	font-size:.9em;
}

Ese es el codigo en el que deberia estar el problema, yo solo intento conseguir un diseño a 2 columnas fluido, pero el contenido de la columna central (.centerColumn) no se me muestra bien, como se puede ver en la web la primera noticia se me ve estirada (el resto perfectas), y se estira verticalmente hasta la altura del bloque izquierdo...no se me ocurre nada.

Un saludo.

alexk · #6 (**permalink**) 14/08/2009, 11:11

que estiqueta es esta?
<span/>
<hr class="subtit">??? jeje
y los 63 errores del html?
y los 4 del css con tus 23 advertencias?... ok jaja
clearboth? jaja.... overflow "amigo"... y en un br? jajaja eso es para el texto "amigo"
"segun firebug no tengo ni una sola etiqueta sin cerrar"

firefug te muestra el html correcto por que asi lo interpreta el buen navegador firefox... pero la realidad es otra sgun W3C... firebug es para hacer pruebas no es un corrector. pero si sirve para corregir

pero bueno con esa actitud JDT mucha suerte!... valida tus codigos... chao

#7 (**permalink**) 14/08/2009, 11:35

La etiqueta "<span/>" (con esa barra al final antes de ">") no está en mi web, será tu navegador el que la añade así que no me preguntes.

El <hr> no se que me preguntas, tampoco existe esa etiqueta?

Y el clear: both; tampoco se lo que me estas preguntando, overflow? tampoco se lo que me preguntas, y en un br? pues claro que en un <br> es un elemento como otro cualquiera.

No he entendido la mitad de tu mensaje, pero te agradeceria que para soltarme estas cosas no postees nada.

Y que yo sepa no te he insultado ni faltado al respeto, solo he aclarado un par de cosas que me has dicho tu en el primer mensaje, y tu a la primera de cambio me sueltas "jodete", pues muy bien.

Deberías tranquilizarte para empezar, que pida ayuda no significa que tenga que decir "si" a todo y hacerte la ola por dejarme un mensaje.

Gracias de todos modos por tu intención..............

EDITO: Casi se me olvida, los 4 errores que da de CSS son porque uso la barra baja "_" para mandar estilos al internet explorer solo (porque no lo interpreta) sin que los demas navegadores lo vean, por ejemplo si pongo:

Código:

margin:0;
_margin:1;

Tendra margen 0 en todos los navegadores menos en IE que tendra 1. Así que en este punto tampoco se lo que me tiras a la cara, salvo tu ignorancia.

kseso? · #8 (**permalink**) 14/08/2009, 11:47

a .centerColumn añádele un "float:left". No sé que herencia o qué propiedad le estará afectando, si más tarde tengo un rato lo miro.
También se arregla la altura si añades un overflow, pero te saca el scrool horizontal, así

Un saludo

alexk · #9 (**permalink**) 14/08/2009, 11:51

w3c me saco la etiqueta esa <spam/>
hr si existe pero mal aplicado,
clear:bot como lo usas es mejor poner un overflow al contenedor.. y
el br... es para el texto... y lo usas como separador de tus capas... para eso esta el margin.

PD: agregale un overflow:hidden; .centerColumn y a tu #wp-noticias
y perdona si te cabreo algo... como sea

#10 (**permalink**) 14/08/2009, 11:51

kseso, por navidad te mando un jamón de verdad.

Ya está todo solucionado y funciona perfectamente, ni se me había ocurrido lo del float para los anidados :S

Un saludo y gracias.

kseso? · #11 (**permalink**) 14/08/2009, 12:11

Cita:

Iniciado por .:Chimera:.

kseso, por navidad te mando un jamón de verdad.

Mejor no esperes tanto, no vaya a ser que se estropee y tengamos un disgusto

Nada, un placer haber acertado.