Foros del Web » Creando para Internet » CSS »

montar una pagina en css y div

Estas en el tema de montar una pagina en css y div en el foro de CSS en Foros del Web. Hola buenas, hasta ahora montaba todo en tablas, pero ahora por temas de validación y demás lo stoy montando todo en div, sin tablas, y ...
  #1 (permalink)  
Antiguo 19/05/2007, 09:47
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
montar una pagina en css y div

Hola buenas, hasta ahora montaba todo en tablas, pero ahora por temas de validación y demás lo stoy montando todo en div, sin tablas, y me estoy metiendo un follón que no veais, buf toy más perdido que la puñeta, he montado la misma página 3 veces y no consigo ponerla bien, lo que antes me costaba un par de horas, por decir algo, ahora me esta costando dias, alguien puede ayudarme?, le paso la imagen o lo que llevo hecho y haber si alguien puede montarla, o decirme como se haría.

Un saludo y gracias
__________________
asp, php, .net, adaptandose a las necesidades
  #2 (permalink)  
Antiguo 19/05/2007, 14:40
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
Re: montar una pagina en css y div

Bueno voy a ir poniendo los pasos que voy haciendo para haber si alguien sabe donde estoy metiendo la pata.

empezamos por la capa contenedor y dentro tres capas

Código HTML:
<div id="contenedor">

<div id="lateralizq"></div>
<div id="centro"></div>
<div id="lateralder"></div>

</div> 
y esto es la hoja de estilo

Código HTML:
body {
	margin: 0px;
	padding:0px;
	font-family: verdana;
	color:#333333;
	text-align:center;
	background-repeat:repeat;
	background-position:center;
	background-image: url(../img/fondounto.png);
	}

#contenedor {
	width: 820px;
	height: 435px;
	margin:0 auto 0 auto;
}


#lateralizq {
	width: 29px;
	height: 397px;
	background-image: url(../img/lateralizq.png);
	float:left;
}

#lateralder {
	width: 62px;
	height: 397px;
	background-image: url(../img/lateralder.png);
	float:left;
}


#centro {
	width: 740px;
	background-color:#FFFFFF;
	float:left;
	height: 435px;
}
Hasta aqui sin problemas todo perfecto
__________________
asp, php, .net, adaptandose a las necesidades
  #3 (permalink)  
Antiguo 19/05/2007, 14:46
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
Re: montar una pagina en css y div

Ahora dentro de la capa centro añadimos 2 capas más, una arriba, en donde pondremos 3 capas más y la otra debajo suyo.

Código HTML:
<div id="cabecera">

<div id="cabecera_foto"></div>
<div id="nav">
				<div id="navInner">
						  <ul>
							<li><a href="index.php">La empresa</a></li>
							<li><a href="index.php">Servicios</a></li>
							<li><a href="index.php">Productos</a></li>
							<li><a href="index.php">Documentaci&oacute;n</a></li>
							<li><a href="index.php">Contacto</a></li>
						  </ul>
				</div>
			</div>
			<div id="zonagris"></Div>

</div>

<div id="zonacontenidos"></div> 
y el codigo css

Código HTML:
cabecera {
	width: 729px;
	height: 190px;
}

#cabecera_foto {
	width: 729px;
	height: 166px;
	background-image: url(../img/cabecera.png);
}

/* ------------------------------------------------------------

	Menu Cabecera

------------------------------------------------------------ */

a:link, a:visited {color: #125DA1; text-decoration: none;}
a:hover {color: #002F5E;}

#nav {
	width: 100%;
	overflow: hidden;
	height: 14px;
	/*_height: 1%;*/
	margin: 0 auto;
	background: #FFF;
	}
	
#nav a {
	color: #015484;
	font-family: "Trebuchet MS", serif;
	font-size: 82%;
	}
	
#nav a:hover {
	color: #015484;
	text-decoration: underline;
	}

#navInner {
	text-align: center;
	color: #847740;
	font-size: 82%;
	margin: 0 auto;
	}
	
#navInner ul {
	list-style: none;
	margin: 0 auto;
	text-align: center;
	padding: 0px;
	}
	
#navInner li {
	display: inline;
	margin: 10px 0 10px 8px;
	padding-right: 10px;
	}
	
#navInner .noBorder {
	display: inline;
	margin: 10px 0 10px 8px;
	padding-right: 0;
	border-right: none;
	}
	
#zonagris {
	background-color: #d9d9d9;
	padding: 5px;
}

/* ------------------------------------------------------------

	Zona contenidos

------------------------------------------------------------ */

#zonacontenidos {
	height: 435px;
	width: 729px;
}
Aqui ya tenemos la zona de arriba de banner mas uno de los menús y la zona donde iran los contenidos.
__________________
asp, php, .net, adaptandose a las necesidades
  #4 (permalink)  
Antiguo 19/05/2007, 15:24
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
Re: montar una pagina en css y div

dentro de la capa zona contenidos, tendremos otras 2 capas a la izquierda el segundo menú y a la derecha donde iran los productos.

Código HTML:
<div id="zonacontenidos_izq">
						
				<div id="menuizq">
							
				<div id="separacioniz"></div>
					<div id="navizq">
						<ul>
							<li><a href="index.php">Protección Cabeza</a></li>
							<li><a href="index.php">Protección Tronco</a></li>
							<li><a href="index.php">Protección Extremidades</a></li>
							<li><a href="index.php">Protección Auxiliar</a></li>
							<li><a href="index.php">Protección Entorno</a></li>
						</ul>
					</div>
							
				</div>
				<div id="separacioniz"></div>
				<div id="buscador">buscador</div>
</div>
<div id="zonacontenidos_der"></div>

y el css

Código HTML:
#zonacontenidos_izq {
	height: 435px;
	width: 185px;
	float:left;
}

#zonacontenidos_der {
	float:right;
	width: 542px;
	background-color: #FFFF00;
	text-align:center;
	background-position:center;
}


/* ------------------------------------------------------------

	Menu izquierda

------------------------------------------------------------ */

#separacioniz {
	height:25px;	
	width: 185px;
}


#menuizq {
	background-color: #fafafa;
	text-align: left;
	}
#navizq {
	color: #fafafa;
	font-size: 10px;
	}
	
#navizq ul {
	margin: 0 auto;
	list-style: none;
	padding: 0px;
	}
	
#navizq li {
	text-indent: 15px;
	line-height: 2.55;
	border-bottom: 1px solid #cbc9c6;
	font-size: 10px;
	}
__________________
asp, php, .net, adaptandose a las necesidades
  #5 (permalink)  
Antiguo 19/05/2007, 17:27
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: montar una pagina en css y div

Hola:
revisa bien todo, empieza por las matemáticas simples, tienes un contenedor de 820px de ancho en donde metes tres cajas de 29+62+740=831px, pués como que no cabe. Corrige esos detallitos y suerte con el acomodo de esas cajas, que el puñetero ie empezará a hacer de las suyas cuando uses márgenes y rellenos. Un saludo, Jorge H.
  #6 (permalink)  
Antiguo 19/05/2007, 18:37
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
Re: montar una pagina en css y div

si, je, lo he puesto mal en el momento de ponerlo aqui, bueno eso ya he coregido, pero si tienes razón entre explorer y firefox, pues como que no queda igual , es un poco asco, coñe con tablas era mas facil.

si quereis ver el diseño es este:

http://club.telepolis.com/haven66/boceto.png

lo que llevo de montaje es esto:

Código HTML:
<div id="contenedor">

	<div id="lateralizq"></div>
	
	
	<div id="centro">
	
		<!-- zona cabecera --->
		<div id="cabecera">
		
			<div id="cabecera_foto"></div>
			<div id="nav">
				<div id="navInner">
						  <ul>
							<li><a href="index.php">La empresa</a></li>
							<li><a href="index.php">Servicios</a></li>
							<li><a href="index.php">Productos</a></li>
							<li><a href="index.php">Documentaci&oacute;n</a></li>
							<li><a href="index.php">Contacto</a></li>
						  </ul>
				</div>
			</div>
			<div id="zonagris"></Div>
		
		</div>
		<!-- fin zona cabecera --->
		
		
		
		<!-- zona contenidos --->
		<div id="zonacontenidos">
		
			<div id="zonacontenidos_izq">
						
				<div id="menuizq">
							
				<div id="separacioniz"></div>
					<div id="navizq">
						<ul>
							<li><a href="index.php">Protección Cabeza</a></li>
							<li><a href="index.php">Protección Tronco</a></li>
							<li><a href="index.php">Protección Extremidades</a></li>
							<li><a href="index.php">Protección Auxiliar</a></li>
							<li><a href="index.php">Protección Entorno</a></li>
						</ul>
					</div>
							
				</div>
				<div id="separacioniz"></div>
				<div id="buscador">buscador</div>
						
			</div>
			
			<div id="zonacontenidos_der">
			
				<div id="contenidoder">
			
			
				<div id="tituloproducto">
				
					
						<a href="index.php">Titulo producto</a> </div>


				
				<div id="descipproducto">
				
					<div id="despizq"><img src="img/productos/grandes/casco1.png" width="260" height="162"></div>
				
					<div id="despder"><p><h2>Casco FF EUROPEAN auténtico JSP</h2></p>
					<p>Casco de Obra Gama Alta en Polietileno de Alta Densidad.<br />
					Resistente a Rayos Ultravioleta (UV) y sustancias químicas.<br />
					Arnés Textil de Nylon con 6 puntos de ajuste y 2 alturas.<br />
					Cinta regulable por ruleta de precisión para adaptación.<br />
					Posibilidad de acoplar gafas de protección y/o barboquejo con mentonera<br />
					Aislamiento eléctrico de hasta 440 VAC<br />
					Incluye bolsa de transporte.<br />
					Incorpora cinta textil de desudoración recambiable.<br />
					Casco con zona frontal amplia para serigrafía o pegar logotipo.<br />
					</p>
					</div>
				
				</div>
				
				
				
				
			
			</div>
			
<div id="catalogo">catalogo</div>

				<div id="legal">

					<ul>
						<li><a href="index.php">Mapa web</a></li>
						<li><a href="index.php">Legal</a></li>
						<li><a href="index.php">Creditos</a></li>
					 </ul>
					
				</div>
				
				
				<div id="direccion">direccion
				</div>


			</div>
		
		</div>
		<!-- fin zona contenidos --->
	
	
	
	</div>
	
	
	<div id="lateralder"></div>


</div> 
Y el css es este:

Código HTML:
/* ------------------------------------------------------------

	Zona inicio

------------------------------------------------------------ */

body {
	margin: 0px;
	padding:0px;
	font-family: verdana;
	color:#333333;
	text-align:center;
	background-repeat:repeat;
	background-position:center;
	background-image: url(../img/fondounto.png);
	}

#contenedor {
	width: 820px;
	height: 435px;
	margin:0 auto 0 auto;
	/*ponemos 720/2  y 410/2
	position: absolute;*/
}


#lateralizq {
	width: 29px;
	height: 397px;
	background-image: url(../img/lateralizq.png);
	float:left;
}

#lateralder {
	width: 62px;
	height: 397px;
	background-image: url(../img/lateralder.png);
	float:left;
}


#centro {
	width: 729px;
	background-color:#FFFFFF;
	float:left;
	height: 435px;
}

/* ------------------------------------------------------------

	Zona cabecera

------------------------------------------------------------ */

#cabecera {
	width: 729px;
	height: 190px;
}

#cabecera_foto {
	width: 729px;
	height: 166px;
	background-image: url(../img/cabecera.png);
}

/* ------------------------------------------------------------

	Menu Cabecera

------------------------------------------------------------ */

a:link, a:visited {color: #125DA1; text-decoration: none;}
a:hover {color: #002F5E;}

#nav {
	width: 100%;
	overflow: hidden;
	height: 14px;
	/*_height: 1%;*/
	margin: 0 auto;
	background: #FFF;
	}
	
#nav a {
	color: #015484;
	font-family: "Trebuchet MS", serif;
	font-size: 82%;
	}
	
#nav a:hover {
	color: #015484;
	text-decoration: underline;
	}

#navInner {
	text-align: center;
	color: #847740;
	font-size: 82%;
	margin: 0 auto;
	}
	
#navInner ul {
	list-style: none;
	margin: 0 auto;
	text-align: center;
	padding: 0px;
	}
	
#navInner li {
	display: inline;
	margin: 10px 0 10px 8px;
	padding-right: 10px;
	}
	
#navInner .noBorder {
	display: inline;
	margin: 10px 0 10px 8px;
	padding-right: 0;
	border-right: none;
	}
	
#zonagris {
	background-color: #d9d9d9;
	padding: 5px;
}

/* ------------------------------------------------------------

	Zona contenidos

------------------------------------------------------------ */

#zonacontenidos {
	height: 435px;
	width: 729px;
}



#zonacontenidos_izq {
	height: 435px;
	width: 185px;
	float:left;
}

#zonacontenidos_der {
	float:right;
	width: 542px;
	background-color: #FFFF00;
	text-align:center;
	background-position:center;
}


/* ------------------------------------------------------------

	Menu izquierda

------------------------------------------------------------ */

#separacioniz {
	height:25px;	
	width: 185px;
}


#menuizq {
	background-color: #fafafa;
	text-align: left;
	}
#navizq {
	color: #fafafa;
	font-size: 10px;
	}
	
#navizq ul {
	margin: 0 auto;
	list-style: none;
	padding: 0px;
	}
	
#navizq li {
	text-indent: 15px;
	line-height: 2.55;
	border-bottom: 1px solid #cbc9c6;
	font-size: 10px;
	}
	
/* ------------------------------------------------------------

	Catalogo producto

------------------------------------------------------------ */
	
#contenidoder {
	float:right;
	width:520px;
	height:350px;
	background-color: #ffffff;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D9D9D9;
}

#tituloproducto {
	text-align: left;
	width:520px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-transform: uppercase;
	color: #000000;
	font-style: normal;
	font-weight: bold;
	background-color: #FFFFFF;
	height: 49px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D9D9D9;
}




h1 {
	font-size: 10px;
}


/* ------------------------------------------------------------

	Descripcion producto

------------------------------------------------------------ */

#despizq {
	background-color: #FFFFFF;
	width: 288px;
	float:left;
	height: 150px;
	text-align: center;
}

#despder {
	background-color: #D9D9D9;
	width: 230px;
	float:right;
	height: 250px;
	text-align:left;
	font-size:10px;
}

h2 {
	font-size: 10px;
}

/* ------------------------------------------------------------

	Catelogo

------------------------------------------------------------ */

#catalogo {
	background-color: #ccffee;
	width: 520px;
}

/* ------------------------------------------------------------

	Legal

------------------------------------------------------------ */
#legal {
	background-color: #5194E5;
	color: #ffffff;
	width: 542px;
}



/* ------------------------------------------------------------

	Dirección

------------------------------------------------------------ */

#direccion {
	width: 542px;
	color: #5194E5;
	font-size:11px;
	background-color: #aaccdd;
}
Y la verdad se ve muy diferente en explorer y en firefox, alguien m epuede ayudar con esto?.

Un saludo
__________________
asp, php, .net, adaptandose a las necesidades
  #7 (permalink)  
Antiguo 20/05/2007, 06:56
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
Re: montar una pagina en css y div

Bueno esto ya va saliendo poco a poco.

Un saludo
__________________
asp, php, .net, adaptandose a las necesidades
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 09:28.