Foros del Web » Creando para Internet » CSS »

Divs

Estas en el tema de Divs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/09/2008, 20:04
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Divs

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!
  #2 (permalink)  
Antiguo 12/09/2008, 20:28
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Divs

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

Última edición por Nathan_1979; 12/09/2008 a las 20:43
  #3 (permalink)  
Antiguo 12/09/2008, 20:39
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Divs

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!
  #4 (permalink)  
Antiguo 13/09/2008, 00:21
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Respuesta: Divs

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> 
  #5 (permalink)  
Antiguo 13/09/2008, 00:36
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Respuesta: Divs

Otra cosa que acaba de pasar, puse un padding y en IE se ve perfecto pero en Firefox no.
  #6 (permalink)  
Antiguo 13/09/2008, 01:59
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Divs

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 ! ;)
  #7 (permalink)  
Antiguo 13/09/2008, 02:23
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Divs

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.
  #8 (permalink)  
Antiguo 13/09/2008, 09:58
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Respuesta: Divs

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?
  #9 (permalink)  
Antiguo 13/09/2008, 15:40
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Respuesta: Divs

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!
  #10 (permalink)  
Antiguo 13/09/2008, 23:17
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Divs

Cita:
Iniciado por bex Ver Mensaje
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" ;)

Última edición por Nathan_1979; 13/09/2008 a las 23:24
  #11 (permalink)  
Antiguo 13/09/2008, 23:23
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Divs

Cita:
Iniciado por bex Ver Mensaje
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 ;)
  #12 (permalink)  
Antiguo 14/09/2008, 03:02
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Respuesta: Divs

Gracias por todo Nathan. Muy buena la idea de la sombra, voy a hacer eso. Y gracias por el manual! Saludos.
  #13 (permalink)  
Antiguo 14/09/2008, 03:27
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Divs

Un placer.

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 21:09.