Maquetacion con css

cristofer-2006 · #1 (**permalink**) 20/09/2009, 13:49

Hola estoy intentando hacer esto pero con css y div

<TABLE>
<TR>

<TD>Imagen de fondo que se repite hacia abajo</TD>
<TD>Menu</TD>

<TD>Otra imagen con las misma propiedades</TD>
<TD>Contenido</TD>
<TD>Otre imaen qque se repite hacia abajo</TD>

</TR>
</TABLE>

Pero me es imposible por mas que lo intento la idea es que si el menu o el conteniddo se estira lo hagan todos los <DIV> haber si alguien save de algun sitio qe lo explique o algo.

Saludos.

JavierB · #2 (**permalink**) 20/09/2009, 13:51

Mensaje movido al foro de Css desde Competencias CSS.

Saludos,

cristofer-2006 · #3 (**permalink**) 20/09/2009, 14:02

xD lo siento no me habia dado cuenta

jomaruro · #4 (**permalink**) 20/09/2009, 15:18

Hola:

Tendrías que hacer algo así:

En el CSS:

Código:

#menu {
    background: url(ruta/imagen.jpg) repeat-y;
}

#contenido {
    background: url(ruta/imagen.jpg) repeat-y;
}

#pie {
    background: url(ruta/imagen.jpg) repeat-y;
}

Y en el HTML:

Código:

<div id="contenedor">
    <ul id="menu">
        <li><a href="#">Opción 1</a></li>
        <li><a href="#">Opción 2</a></li>
        <li><a href="#">Opción 3</a></li>
        <li><a href="#">Opción 4</a></li>
    </ul>
    <div id="contenido">bla bla bla</div>
    <div id="pie">bla bla bla</div>
</div>

Saludos.

cristofer-2006 · #5 (**permalink**) 20/09/2009, 15:56

Hola muchas gracias pero eso no es, eso seria una maquetacion a 2 columnas pero no sale una al lado de la otra de todas formas no es asi.

Lo que quiero es tener 5 columnas.

La 1,3 y 5 serian para meter una imagen que acabe de encuadrar el menu y el contenido de la pagina.

La 2 que contenga el menu y 4 que tenga el contenido estas columnas serian de alto variable lo que quiero es que si una de ellas es mas alta, que las demas tengan el mismo tamaño. Exactamente igual que si usara una tabla como la que e puesto de ejemplo pero usando div y css.

Lo que es el pie y la cabecera de la pagina ya las tengo maquetadas solo me queda ese cacho par meter los menus y el contenido que se me hace imposible.

Maquetar a 2 y 3 columnas si se, lo que no se es hacer una maquetacion a 5 columanas y que todas tengan el mismo tamaño si una cambia el alto.

Saludos

kseso? · #6 (**permalink**) 20/09/2009, 16:11

Lo siento, Crístofer, pero no acabo de pillar tu intención (especialmente por lo que dices del 4)
Inicialmente creí que buscabas algo como ésto. Pero lo del 4 me rompió los esquemas mentales.

Si tienes lo mismo hecho en tablas, pon un enlace, será más fácil ver tu idea.

Un saludo

deirdre · #7 (**permalink**) 20/09/2009, 16:11

Hola cristofer-2006

Pon tu código y veremos que se puede hacer...

Bye

cristofer-2006 · #8 (**permalink**) 20/09/2009, 17:18

Ok tengo un reset echo para que me funcione bien en todos los navegadores, el codigo que tengo echo es el siguiente:

Código HTML:

<div style="min-height:100px; height:auto; width:899px; background-image:url(img/imagen_1.jpg); background-position:left;">

<div style="min-height:100px; height:auto; width:172px; background-image:url(img/imagen_2.jpg); background-position:right; background-repeat:repeat-y;">
<div style="min-height:100px; height:auto; width:890px; background-image:url(img/imegen_3.jpg); background-position:right; background-repeat:repeat-y;">

<div style="min-height:100px; height:auto; width:157px; background-color:#FF9900; margin-left:9px; float:left; clear:none; overflow:hidden;">
<p>Menu (aqui el alto es variable)</p>
</div>

<div style="min-height:100px; height:auto; width:700px; background-color:#FFFFFF; margin-left:206px; float:right; overflow:hidden;">
<p>Contendio de la pagina (aqui el alto es variable)</p>
</div>

</div>
</div>
</div>

Lo que quiero es que si una de las 2 columnas que puede tener un alto variable es la mas grande todas las demas tengan el mismo alto.

kseso? · #9 (**permalink**) 20/09/2009, 17:50

Mira a ver si esto va en la línea que buscas.
Layout ajustado a la ventana, con 5 columnas equilibras (en la vertical) con header y footer 100% de ancho

Un saludo

deirdre · #10 (**permalink**) 20/09/2009, 17:59

Hola cristofer-2006

Este es tu código, un poco ordenado:

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>Problema de cristofer-2006</title>
<style type="text/css">
#contenedor {
	min-height: 100px; 
	height: auto; 
	width: 899px; 
	background-image: url(img/imagen_1.jpg); 
	background-position: left;
}
#subcontenedor {
	min-height: 100px; 
	height: auto; 
	width: 172px; 
	background-image: url(img/imagen_2.jpg); 
	background-position: right; 
	background-repeat: repeat-y;
}
#tercera_caja {
	min-height: 100px; 
	height: auto; 
	width: 890px; 
	background-image: url(img/imagen_3.jpg); 
	background-position: right; 
	background-repeat: repeat-y;
	background-color:#ccc; /*meto este color para poder testar, ya que no tengo las imágenes*/
}
#menu {
	min-height: 100px; 
	height: auto; 
	width: 157px; 
	background-color: #FF9900; 
	margin-left: 9px; 
	float: left; 
	clear: none; 
	overflow: hidden;
}
#contenido {
	min-height: 100px; 
	height: auto; 
	width: 700px; 
	background-color: #FFFFFF; 
	margin-left: 206px; 
	float: right; 
	overflow: hidden;
	border: 1px solid #484848; /*le añado este borde para poder testar*/
}
</style>
</head>

<body>
<div id="contenedor">
	<div id="subcontenedor">
		<div id="tercera_caja">
			<div id="menu">
				<p>Menu (aquí el alto es variable)</p>
				<div style="height: 400px; background-color: #ffc">Metemos un div para recrear artificialmente (un simulacro de altura) una altura de 400px (por ejemplo)</div>
			</div>

			<div id="contenido">
				<p>Contenido de la página (aquí el alto es variable)</p>
			</div>
		</div> <!-- fin de tercera caja -->
	</div> <!-- fin de subcontenedor -->
</div> <!-- fin de contenedor -->

</body>

</html>

Si haces un copia-pega y lo pruebas verás que tiene problemas. Sobre esta base, dinos lo que quieres conseguir y seguiremos adelante.

Bye

cristofer-2006 · #11 (**permalink**) 20/09/2009, 19:06

Muchisimas gracias me esta ayudando mucho eso, pero alguien sabría decirme como se consigue que esos div sean de la misma altura? es que tiene muchos estilos puestos y no se cuales son los que hacen eso ya que estoy intentando sacar lo que quiero a partir de hay pero tiene algún parámetro que no me deja hacerlo.

cristofer-2006 · #12 (**permalink**) 20/09/2009, 19:12

deirdre estoy mirando el código que me dices se acerca a lo que quiero solo que no se ve bien por ejemplo el contenido se ve abajo y donde se suponen que van las imagenes se ve como un solo div una caja pero no se estira.

Lo mirare mejor haber si consigo sacarlo.

Muchas gracias por la ayuda.

deirdre · #13 (**permalink**) 20/09/2009, 19:44

Hola cristofer-2006

Yo arreglaría primero todo el tema de la distribución de los divs (colocación, posición, etc) dejando de momento el asunto de la altura igualada y una vez que todo te funcione pasamos a solucionar la igualación de altura.

Una vez tengas tu código afinado lo subes para comprobar y ver lo de las alturas.

Bye

cristofer-2006 · #14 (**permalink**) 20/09/2009, 19:49

Ya esta llevava ya bastante tiempo intentandolo muchas gracias.

Copio el codigo que ami me a servido por si a alguien le puede servir

Código HTML:

<html>
<head>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

:focus {
outline: 0;
}
body {
line-height: 1;
background-color:#FFFF66;
}
ol, ul {
list-style: none;
}

table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
#izquierda, #centro-izquierda {float:left;}
#izquierda {width:9px; background-image:url(img/imagen1.jpg); margin-right:0px; padding-right:0px; margin-left:0px; padding-left:0px;}
#centro-izquierda {width:163px; background:#FF9900; margin-right:0px; padding-right:0px; margin-left:0px; padding-left:0px;background-image:url(img/imagen2.jpg); background-repeat:repeat-y; background-position:right;}
#derecha, #centro-derecha {float:right; padding:10px;}
#derecha { background-image:url(img/imagen3.jpg); width:5px; margin-right:0px; padding-right:0px; margin-left:0px; padding-left:0px;}
#centro-derecha {width:719px; background:#FFFFFF; margin-right:0px; padding-right:0px; margin-left:0px; padding-left:0px;}
#izquierda, #centro-izquierda , #centro-derecha, #derecha {padding-bottom:10000px; margin-bottom:-10000px;}
#contenedor {overflow:hidden; background:#FF9900;display:inline-block; min-width:896px;}
</style>
</head>
<body>
<div id="contenedor">
<div id="izquierda">&nbsp;</div>
<div id="centro-izquierda">
  <p>Menu</p>
</div>
<div id="derecha"></div>
<div id="centro-derecha">
  <p>Contenido</p>
</div>
</div>
</body>
</html>

Saludos.

cristofer-2006 · #15 (**permalink**) 20/09/2009, 20:26

Puff lo e subido al servidor para ver el resultado y no coje los estilos css xD no se ve ninguna imagen del diseño ni nada.

Alguien sabe por que puede ser esto?

Si pongo el estilo en en el mismo archivo .html funciona en mi pc pero cuando lo pongo en el servidor y los estilos en un hoja de estilo .css aparte no funciona.

podeis ver el resultado aqui fondosdescritorio.net

cristofer-2006 · #16 (**permalink**) 20/09/2009, 21:50

Bueno ya va la hoja de estilos, la tenia en una carpeta y con sacarla de la carpeta llego.

Saludos.

kseso? · #17 (**permalink**) 21/09/2009, 04:28

Cita:

Iniciado por cristofer-2006

Ya esta llevava ya bastante tiempo intentandolo muchas gracias.

Copio el codigo que ami me a servido por si a alguien le puede servir

Saludos.

Cuanto me alegro, Cristofer.
Aunque lo mínimo hubiese sido mencionar de donde salió tu código. Creo.
Pero tampoco es que tenga tanta importancia.

Un saludo

jomaruro · #18 (**permalink**) 21/09/2009, 13:28

Hola:

¿Y dónde están las 5 columnas famosas?

Saludos.

cristofer-2006 · #19 (**permalink**) 28/09/2009, 06:23

Hola kseso? pues precisamente use el código que me recomendaste con alguna modificación por que no me cuadraba cuando le metía imanes.

Aquí dejo el sitio del que lo saque: http://css.devillasbuenas.es/5columnas.html

Saludos

heyruben · #20 (**permalink**) 28/09/2009, 08:26

conchale hay algo que no entiendo, yo siempre he hecho mis web en flash pero esta ves cmo es una sencilla quiero hacerla en otro lenguaje y veo que el css es muy usado, y de hecho la pagina que voy a usar segun el sitio de donde la saque es en css asi que quiero usar este lenguaje, bueno y lo que he recopilado en mi busqueda es que se puede hacer hasta en el blog de notas ejeje pero cuando voy a los faqs no los entiendo xq estan como que avanzados y por eso estoy atascado en la pagina, bueno con permiso uso este post a ver si me dan el empujon que me tiene atascado =( porfis..!!! bueno aqui les dejo una imagen de la distribucion d lo q quiero hacer

como ven las diviciones estan en horizontal, realmente estoy como empezando de cero... no mejor de menos 50 ayudenme porfis!!

deirdre · #21 (**permalink**) 28/09/2009, 10:46

Hola heyruben

Si tu empiezas tu código, seguro, seguro... que alguien te ayuda en el punto en que te atasques.

Esperando...

Bye

kseso? · #22 (**permalink**) 28/09/2009, 11:13

Como te da a entender Deirdre, por acá se ayuda con aquello que se facilita. Si es código, pues la respuesta en código, y si es una imagen tiramos del paint y familia:

Espero te sean de utilidad
Un saludo, heyruben

jomaruro · #23 (**permalink**) 28/09/2009, 13:24

Hola:

Si estás empezando y no te aclaras con el css léete los manuales que aparecen en www.librosweb.es, y tenlos siempre a mano.

Saludos.