Foros del Web » Creando para Internet » CSS »

Maquetacion con css

Estas en el tema de Maquetacion con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/09/2009, 13:49
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Maquetacion con css

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.

Última edición por cristofer-2006; 20/09/2009 a las 13:58
  #2 (permalink)  
Antiguo 20/09/2009, 13:51
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Respuesta: Maquetacion con css

Mensaje movido al foro de Css desde Competencias CSS.

Saludos,
  #3 (permalink)  
Antiguo 20/09/2009, 14:02
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

xD lo siento no me habia dado cuenta
  #4 (permalink)  
Antiguo 20/09/2009, 15:18
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Maquetacion con css

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.

  #5 (permalink)  
Antiguo 20/09/2009, 15:56
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

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
  #6 (permalink)  
Antiguo 20/09/2009, 16:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Maquetacion con css

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 20/09/2009, 16:11
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Maquetacion con css

Hola cristofer-2006

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

Bye
  #8 (permalink)  
Antiguo 20/09/2009, 17:18
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

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.
  #9 (permalink)  
Antiguo 20/09/2009, 17:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Maquetacion con css

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 20/09/2009, 17:59
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Maquetacion con css

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
  #11 (permalink)  
Antiguo 20/09/2009, 19:06
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

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.

Última edición por cristofer-2006; 20/09/2009 a las 19:14
  #12 (permalink)  
Antiguo 20/09/2009, 19:12
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

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.
  #13 (permalink)  
Antiguo 20/09/2009, 19:44
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Maquetacion con css

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
  #14 (permalink)  
Antiguo 20/09/2009, 19:49
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

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.
  #15 (permalink)  
Antiguo 20/09/2009, 20:26
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

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
  #16 (permalink)  
Antiguo 20/09/2009, 21:50
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Maquetacion con css

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

Saludos.
  #17 (permalink)  
Antiguo 21/09/2009, 04:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Maquetacion con css

Cita:
Iniciado por cristofer-2006 Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 21/09/2009, 13:28
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Maquetacion con css

Hola:

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

Saludos.

  #19 (permalink)  
Antiguo 28/09/2009, 06:23
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 10 meses
Puntos: 2
De acuerdo Respuesta: Maquetacion con css

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

Última edición por cristofer-2006; 28/09/2009 a las 08:33
  #20 (permalink)  
Antiguo 28/09/2009, 08:26
 
Fecha de Ingreso: enero-2004
Mensajes: 339
Antigüedad: 20 años, 1 mes
Puntos: 6
Respuesta: Maquetacion con css

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!!
__________________
Pazzz mundiaaaalllll
  #21 (permalink)  
Antiguo 28/09/2009, 10:46
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Maquetacion con css

Hola heyruben

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

Esperando...

Bye
  #22 (permalink)  
Antiguo 28/09/2009, 11:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Maquetacion con css

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #23 (permalink)  
Antiguo 28/09/2009, 13:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Maquetacion con css

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.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:24.