Diseño de página con marco en CSS, IExplorer no va y Firefox, sí.

Urdaris_Nox · #1 (**permalink**) 13/05/2009, 04:57

Buenos días;

Estoy intentando desarrollar mi primer marco exclusivamente en CSS, y llevo dos días con la contienda a muerte. Espero alguien me ilumine.

Código de la página actual;

Código:

<style type="text/css">
	body {
		background-color:white;
		margin:0 auto 0 auto;				/*en algunos navegadores hace falta el margin y align en body y en otros en contenidogeneral.*/
		text-align:center;
	}

	.contenidogeneral {
		background-color:blue;
		width:800px;
		height:600px;
		margin:0 auto 0 auto;				/*en algunos navegadores hace falta el margin y align en body y en otros en contenidogeneral.*/
		text-align:center;
	}

	#cabecera {
		background-image: url(./../imagenes/inicio_cabecera.jpg) no-repeat;
		width:800px;
		height:100px;
		background-color:red;
	}

	.lateral {
	}

	#izq{
		float:left;
	}
	#der{
		float:right;
	}

	#inf{
		position:relative;
		bottom:0px;
	}
</style>
</head>
<body>

<div class="contenidogeneral">								<!---->
	<div id="cabecera">
		<img src="./../imagenes/inicio_cabecera.jpg">
	</div>

	<div class="lateral">
		<div id="izq">
			<img src="./../imagenes/inicio_lateral.jpg">
		</div>
		<div id="der">
			<img src="./../imagenes/inicio_lateral.jpg">
		</div>
	</div>
	<div id="inf">
		<img src="./../imagenes/inicio_inferior.jpg">
	</div>
</div>

Como veis en sí el código no tiene mucho secreto.
Firefox me muestra la página como deseo; (Introducir en dirección, que al tener menos de 30 mensajes no me permite introducir la imagen o enlace)

http//img16.imageshack.us/img16/6716/bienn.jpg

En cambio Iexplorer y el preview del EditPlus con el que realizo esto se hacen un lío, mostrandome ambos;

http//img16.imageshack.us/img16/8485/malh.jpg

Muchas gracias, por su tiempo e intención.

kseso? · #2 (**permalink**) 13/05/2009, 05:28

Hola Urdaris
Es buena práctica identificar el problema claramente, y no dejarlo como si fuese una adivinanza.

Si nos das una imagen gráfica, lo que podemos hacer es usar un editor de imágenes, pero seguro que eso no te servirá.

Es mejor (para ti) que pongas un enlace a la página (si está en línea) o publique código.

Un saludo

Urdaris_Nox · #3 (**permalink**) 13/05/2009, 06:08

Soy plenamente consciente de que cuantos más datos se ofrecen más fácil es ver el problema, por eso mismo he puesto dos enlaces a las imagenes y el código de la página completa... No sé exactamente que me pides...

Si lo que falta son las imagenes por separado, entonces;

Imagen superior de cabecera: 800x100
img4.imageshack.us/img4/915/iniciocabecera.jpg

Imagenes laterales (son la misma repetida): 20x600
img4.imageshack.us/img4/655/iniciolateral.jpg

Imagen inferior: 800x20
img4.imageshack.us/img4/653/inicioinferior.jpg

kseso? · #4 (**permalink**) 13/05/2009, 07:44

Ok, Urdaris
Creo que te debo una pequeña disculpa y explicación, pues efectivamente tienes posteado el código. Pero aleatoriamente ando con algunos problemillas con los contenidos del foro y no lo vi (¿no lo cargaría?)

Creo que quieres un diseño de cabecera, pie abajo y cuerpo de tres columnas. ¿Cierto?

1º: Es conveniente comenzar el css "poniéndolo a cero" o "resetearlo" para evitar en ciertos elementos interpretaciones particulares de cada navegador.
2º: Te falta definir el elemento central del cuerpo, donde alojas el contenido central, que llamas .lateral no tiene asignadas propiedades.

Ahora no puedo mirar a fondo tu código, pero como estás iniciando el proyecto, me permito dejarte unos enlaces a plantillas. Posíblemente ya conozcas alguno.
Araudi.net de Mikmoro
CSSplay
http://matthewjamestaylor.com/

Espero que lo anterior te sea de utilidad. Y una vez más, disculpa el malentendido.

Un saludo

Urdaris_Nox · #5 (**permalink**) 13/05/2009, 12:11

Buenas;

Gracias por los enlaces, en realidad sí que que conozco pero de ahí a haberme visto todo hay mucho, jeje.

Voy a procurar explicar algo mejor lo que quiero hacer (aunque si ves las imagenes de antes puedes hacer una idea).

Tengo cuatro imagenes, por ahora cutres pero que más adelante tendrán contenido más interesante, que corresponden a la cabecera, laterales y barra inferior. Sólo delimitan la página, por que me interesa tener al usuario dentro.

Por ahora los marcos comprenden 800x600px, siendo el resto background-color:white. El contenido se centra.

Los problemas que tengo son esos malditos detalles. Las imagenes encajan pero dejan pequeñas partes fuera de lugar, y a mí me gusta el trabajo bien hecho.

La teoría dice que tendría que funcionar ese código, pero las barras laterales dejan un margen inferior de unos pocos píxeles que separan de la barra inferior. Y esto con los margins, paddings, y todo a 0. Y considero que poner un negativo es una chapuza...

Iré ayudando a quien pueda por ahí, a ver si me dejan poner ya enlaces e imagenes para poder explicarme mejor.

Urdaris_Nox · #6 (**permalink**) 14/05/2009, 09:58

Ya he solucionado este problema de forma temporal. Con un overflow:hidden, me las apaño.

Ahora tengo otro problema, pero por ahora no necesitaré ayuda.

Gracias, podeis cerrar.