Divs

bex · #1 (**permalink**) 12/09/2008, 20:04

Hola maestros,

Estoy maquetando mi primera página con divs en vez de tablas y me van surgiendo dudas a medida que avanzo. Este es el código:

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=iso-8859-1" />
<title>Clases de computaci&oacute;n</title>
<style type="text/css">
<!--
#header {
	width: 720px;
	height: 125px;
	z-index: 1;
}
#contenedor3 {
	float: right;
	width: 180px;
	height: 600px;
}
#colum-izq {
	width: 175px;
	float: left;
	height: 600px;
}
#sombra-der {
	width: 5px;
	float: right;
	height: 600px;
}
#sombra-izq {
	width: 5px;
	height: 600px;
	float: left;
}
#titulo {
	width: 330px;
	z-index: 5;
	position: absolute;
	top: 30px;
	height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: normal;
	font-size: 20pt;
}
#contenedor {
	width: 730px;
	margin: 0 auto;
}
body {
	text-align: center;
}
#contenedor2 {
	width: 550px;
	height: 600px;
	float: left;
	text-align: left;
}
#cuerpo-part {
	width: 525px;
	float: right;
	height: 600px;
	padding-left: 20px;
}
-->
</style>
</head>

<body>
<div id="contenedor">
 <div id="titulo">Clases de computaci&oacute;n</div>
 <div id="header">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="720" height="110" title="Clases de computacion - Header">
      <param name="movie" value="header.swf" />
      <param name="quality" value="high" />
      <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="110"></embed>
    </object>
 </div>
 <div id="contenedor2">
   <div id="sombra-izq">
   </div>
   <div id="cuerpo-part">Capa clases particulares</div>
 </div>
 <div id="contenedor3">
   <div id="colum-izq"></div>
   <div id="sombra-der"></div>
 </div>
</div>
</body>
</html>

Como verán, tengo un contenedor para todo, un header y abajo dos contenedores secundarios. Esos dos contenedores a su vez tienen dos divs cada uno adentro. Es esta la correcta forma de hacerlo? Con tablas para hacer eso, creaba una fila con cuatro columnas y listo. Pero como en css sólo hay rigth y left. Gracias!

Nathan_1979 · #2 (**permalink**) 12/09/2008, 20:28

Vamos a ver...

¿Cómo que solo hay leftt y right ?

Maquetar con div mola... pero de ahí a pasar a maquetar todooo...

Tranquilo, tienes el tipico problema de divitis / clasitis.

En primer lugar el titulo... porque una capa??

No existen los <h2> ??

Una lista <ul> o <ol> para comentarios por ejemplo o para un menu...

La propiedad z-index fuera no te hace falta para nada *

Los que estamos aquí aprendimos ( en mi caso ) viendo otras páginas, su estructura y como estaban maquetadas. Te sorprenderá ver como se las ingenian para lograr la forma del contenido con un poco de imaginación!

Te recomiendo aardvark de firefox, cssviewer, webdeveloper --> Control+mayus+Y :D , y otras muchos addons que puedes descargar sin problemas :)

Un saludo.

Con la práctica llegarás lejos, vas por el buen camino ;)

* Edito!: Sorry! no me di cuenta que z-index era por el flash :) ok ok ok

Nathan_1979 · #3 (**permalink**) 12/09/2008, 20:39

Lo que no entiendo es lo de sombra inquierda O.o

No será más fácil usar la propiedad border al contenedor2 y te quitas de encima 2 div

Código HTML:

#contenedor2 {
border-left:5px solid #4f4f4f;
}

Así "Capa clases particulares" iría dentro del contenedor2 con un <h3> si es un titulo para una lista de menu o algo parecido.

Salu2!

bex · #4 (**permalink**) 13/09/2008, 00:21

Nathan, gracias por tus repuestas. Lo del título lo estaba probando para ponerlo encima de una animación flash, para que siguiera siendo texto y pudiera ser leído por los buscadores, eventualmente lo pondría h1. Pero decidí sacarlo del todo. Y lo de la sombra, sí, esa es una opción, pero voy a usar una imagen para hacerla más realista.

Tengo otro problema ahora. En Firefox se me ven desfasados los divs y en IE no. Compruébenlo entrando a la URL. Acá dejo el código actualizado.

Gracias!

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=iso-8859-1" />
<title>Clases de computaci&oacute;n</title>
<style type="text/css">
<!--
#header {
	width: 720px;
	height: 110px;
	z-index: 1;
}
#contenedor3 {
	float: right;
	width: 180px;
	height: 600px;
}
#colum-der {
	width: 175px;
	float: left;
	height: 600px;
	background-color: #00FF33;
}
#sombra-der {
	width: 5px;
	float: right;
	height: 600px;
}
#sombra-izq {
	width: 5px;
	height: 600px;
	float: left;
}
#titulo {
	width: 330px;
	z-index: 5;
	position: absolute;
	top: 30px;
	height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: normal;
	font-size: 20pt;
}
#contenedor {
	width: 730px;
	margin: 0 auto;
}
body {
	text-align: center;
}
#contenedor2 {
	width: 550px;
	height: 600px;
	float: left;
	text-align: left;
}
#cuerpo-part {
	width: 545px;
	float: right;
	height: 600px;
}
#cuerpo-part-1 {
	width: inherit;
	height: 150px;
}
-->
</style>
</head>

<body>
<div id="contenedor">
 <div id="titulo">Clases de computaci&oacute;n</div>
 <div id="header">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="720" height="110" title="Clases de computacion - Header">
      <param name="movie" value="header.swf" />
      <param name="quality" value="high" />
      <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="110"></embed>
    </object>
 </div>
 <div id="contenedor2">
  <div id="sombra-izq">
  </div>
  <div id="cuerpo-part">
  	<div id="cuerpo-part-1"><img src="naranja.png" width="545" height="150" /></div>
  </div>
 </div>
 <div id="contenedor3">
   <div id="colum-der"></div>
   <div id="sombra-der"></div>
 </div>
</div>
</body>
</html>

bex · #5 (**permalink**) 13/09/2008, 00:36

Otra cosa que acaba de pasar, puse un padding y en IE se ve perfecto pero en Firefox no.

Nathan_1979 · #6 (**permalink**) 13/09/2008, 01:59

Antes de ponerte a trabajar con esa web deberías usar el selector universal (famoso en todo el mundo):

Código HTML:

* {
    margin:0;
    padding:0;
}

A partir de ahí, podremos dar los pasos con firmeza

Un salu2.

PD: Aunque odio el flash (quizás por que se

), me gustó mucho la cabecera.

PD2: Dame unos minutos y te desarrollo la plantilla

pero no te me acostumbres ! ;)

Nathan_1979 · #7 (**permalink**) 13/09/2008, 02:23

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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">

* {
	padding:0;
	margin:0;
}

#cabecera {
	margin:20px auto 0 auto;
	width:730px;
	height:110px;
	background-color:#c8c8c8;
}

#cabecera h1 {
}

#contenedor {
	overflow:hidden;
	width:730px;
	margin:0 auto;
}
#colI {
	float:left;
	width:545px;
	height:600px;
	background-color:#9c9999;
}

#colI h2 {
	height: 130px;
	text-align: right;
	font-size: 30pt;
	color: #f0f0f0;
}
#colD{
	float:left;
	width:185px;
	height:600px;
	background-color:#4f4f4f;
}
</style>
</head>

<body>


<div id="cabecera">
<h1>flash</h1>
</div>

<div id="contenedor">

	<div id="colI">
		<h2>
				Clases particulares y a domicilio
		</h2>
asfa</div>

	<div id="colD">derecha!</div>

</div>


</body>
</html>

No te compliques, lo que quieres es eso.

Un saludo.

bex · #8 (**permalink**) 13/09/2008, 09:58

Nathan, gracias por tu tiempo, realmente. Pero en esa planilla que hiciste (gracias de vuelta) me estaría faltando el lugar para las imgs de las sombras. Si no me equivoco, es lo mismo que tenía pero sin esos divs, puede ser?

Y si no uso padding, cómo ubico los elemento dentro de los divs. Gracias!!

PD: Leí el manual de CSS de desarrolloweb, parece un poco anticuado. Algún otro para recomendar más al día?

bex · #9 (**permalink**) 13/09/2008, 15:40

Ah, Nathan, acabo de notar que tanto la columna izquierda, como la derecha tiene el atributo float: left. No deberían encimarse o que una se ponga abajo de otra? Gracias!

Nathan_1979 · #10 (**permalink**) 13/09/2008, 23:17

Cita:

Iniciado por bex

Nathan, gracias por tu tiempo, realmente. Pero en esa planilla que hiciste (gracias de vuelta) me estaría faltando el lugar para las imgs de las sombras. Si no me equivoco, es lo mismo que tenía pero sin esos divs, puede ser?

Y si no uso padding, cómo ubico los elemento dentro de los divs. Gracias!!

PD: Leí el manual de CSS de desarrolloweb, parece un poco anticuado. Algún otro para recomendar más al día?

Esos divs no te sirven para nada lo único que harán es ensuciar el código si quieres utiliza la técnica de "Columna falsa" que es ni mas ni menos que con ponerle una imagen con la propiedad

Código HTML:

background:

que se repita hacia abajo ( la imagen seria de de la anchura del div y de alto un pixel. Me explico ?

Y la sombra la dibujas como quiera en la imagen que al repetirla hacia abajo parecerá continua.

En cuanto al padding... tienes un lío !! No entiendo lo que me quieres decir con: Y si no uso padding, cómo ubico los elemento dentro de los divs

O_o

Estudia el modelo de cajas:
http://www.librosweb.es/css/capitulo4.html

librosweb.es está genial y es un tutorial "fresco" ;)

Nathan_1979 · #11 (**permalink**) 13/09/2008, 23:23

Cita:

Iniciado por bex

Ah, Nathan, acabo de notar que tanto la columna izquierda, como la derecha tiene el atributo float: left. No deberían encimarse o que una se ponga abajo de otra? Gracias!

NO

Solo pasaría eso si el contenedor que los "engloba" es más fino/estrecho que las dos columnas que tiene dentro.

Si te fijas un poco veras que están en la medida exacta.

Ahora que tienes el manual que te enseñe[ no tienes escusa para no aprender!

Un saludo y bienvenido al mundo CSS ;)

bex · #12 (**permalink**) 14/09/2008, 03:02

Gracias por todo Nathan. Muy buena la idea de la sombra, voy a hacer eso. Y gracias por el manual! Saludos.

Nathan_1979 · #13 (**permalink**) 14/09/2008, 03:27

Un placer.

Saludos.