una duda de maquetacion...

00israel · #1 (**permalink**) 12/03/2011, 13:51

Estoy empezando a maquetar con CSS y tengo algunas dudas. ME he creado una pagina de prueba en la que estoy trasteando para ir aprendiendo. Y me surgen algunas dudas. Siguiendo un tutorial (en ingles, por eso de no haberlo pillado todo bien, os pregunto) he visto que para meter una linea de texto donde hay un texto a la izquierda y otro a la derecha, y que van en unos div (en mi caso, "creditos-left" y "creditos-right") antes crea un div vacio, que en este caso yo le he llamado "creditos". Y que me he dado cuenta de que sin este div vacio no se colocan donde deberian. Pero no entiendo porque. Es decir no entiendo porque necesito poner este div vacio llamado "creditos". Mirar tengo este xhtml:

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>Pilar Migallón</title>
<style type="text/css">
<!--
-->
</style>
<link href="css/layout-2.css" rel="stylesheet" type="text/css" />
</head>

<body class="fondo">
<div id="contenedor">
  <div id="logo"><img src="links/Safari.png" width="256" height="256" /></div>
  <div id="cuerpo-1"></div>
  <div id="cuerpo-2"></div>
  <div id="cuerpo-3"></div>
  <div id="crditos"></div>
  <div id="creditos-left">fdgsdfgdsfgdsfgdsfgsdfgdfgdsfgdfg</div>
  <div id="creditos-right">Colocar aquí el contenido para  id "creditos-right"</div>
</div>
</body>
</html>

y este CSS:

Código:

@charset "UTF-8";
* {
	margin: 0px;
	padding: 0px;
}
#contenedor {
	width: 734px;
	margin-top: 300px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#contenedor #logo {
	height: 256px;
	width: 256px;
	position: absolute;
	right: -50px;
	top: -215px;
}
#contenedor #cuerpo-1 {
	background-color: #FF0000;
	height: 54px;
	width: 734px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000000;
}
#contenedor #cuerpo-2 {
	background-color: #CCCCCC;
	height: 54px;
	width: 734px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000000;
}
#contenedor #cuerpo-3 {
	background-color: #0000CC;
	height: 54px;
	width: 734px;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
}
#contenedor #creditos-left {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align: left;
	padding-top: 7px;
	padding-left: 12px;
	float: left;
	width: 354px;
}
#contenedor #creditos-right {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	float: right;
	width: 356px;
	text-align: right;
	padding-top: 7px;
	padding-right: 12px;
}

sanxuan · #2 (**permalink**) 12/03/2011, 14:50

Yo tampoco veo la necesidad de un div vacío y sin propiedades css.
He probado tu código en Firefox y en IE8 y no aprecio diferencia entre eliminarlo o mantenerlo.
Por aquí suelen recomendar este tutorial en castellano:
http://www.librosweb.es/css/index.html

IsaBelM · #3 (**permalink**) 12/03/2011, 15:01

aunque yo también recien que empiezo en la maquetación, el html está mal. ha de ser así

Cita:

<div id="crditos">
<div id="creditos-left">fdgsdfgdsfgdsfgdsfgsdfgdfgdsfgdfg</div>
<div id="creditos-right">Colocar aquí el contenido para id "creditos-right"</div>
</div>

para un caso tan básico como el que muestras, realmente no hace falta. pero para una maquetación mas compleja es recomendabel usarlo.
algo mas complejo

Cita:

<!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>Pilar Migallón</title>
<style type="text/css">
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
#contenedor {
width: 734px;
margin-top: 300px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#contenedor #logo {
height: 256px;
width: 256px;
position: absolute;
right: -50px;
top: -215px;
}
#contenedor #cuerpo-1 {
background-color: #FF0000;
height: 54px;
width: 734px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
}
#contenedor #cuerpo-2 {
background-color: #CCCCCC;
height: 54px;
width: 734px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
}
#contenedor #cuerpo-3 {
background-color: #0000CC;
height: 54px;
width: 734px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
}

#creditos {
margin-top: 10px;
padding: 2em 0;
overflow: hidden;
background-color: pink;
}

#creditos-left {
background-color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: left;
padding-top: 7px;
padding-left: 12px;
float: left;
width: 40%;
}
#creditos-right {
background-color: yellow;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
float: right;
width: 30%;
text-align: right;
padding-top: 7px;
padding-right: 12px;
}
</style>
</head>
<body class="fondo">
<div id="contenedor">
<div id="logo"><img src="links/Safari.png" width="256" height="256" /></div>
<div id="cuerpo-1"></div>
<div id="cuerpo-2"></div>
<div id="cuerpo-3"></div>
<div id="creditos">
<div id="creditos-left">fdgsdfgdsfgdsfgdsfgsdfgdfgdsfgdfg</div>
<div id="creditos-right">Colocar aquí el contenido para id "creditos-right"</div>
</div>
</div>
</body>
</html>

00israel · #4 (**permalink**) 12/03/2011, 15:26

gracias a los dos por vuestros comentarios y aportes.

lo que me has puesto isabelm, es curioso. Porque lo he probado en el dreamweaver y en el programa lo muestra desubicado los creditos pero luego lo previsualizo en el navegador y se ve bien.

Para que sierve la etiqueta "overflow"?

HE suprimido lo de top para que fuera pegado arriba, y lo de overflow y el color del background. Y me funciona igualmente. La unica diferencia es que deberia de añadirle el cierre de la etiqueta despues de las etiquetas creditos-left y creditos-right no?

Porque es como si fuera un nuevo div dentro de contenedor al cual le voy a meter dos div distintos no?

mdk · #5 (**permalink**) 12/03/2011, 15:50

El overflow, sería el scroll, aplicable tanto a divs, como a la propia página. Aquí te explica su uso y las opciones http://www.desarrolloweb.com/articul...rflow-css.html

C2am · #6 (**permalink**) 12/03/2011, 16:18

Como recomendación, no utilices la vista diseño del dreamweaver, usa la vista código, y para visualizar tu html hazlo directamente en el navegador, o mejor en los navegadores, ya que es ahí donde se mostrarán al mundo, y no en el dreamweaver.

alexk · #7 (**permalink**) 12/03/2011, 18:09

el uso del overflow en este caso seria para limpiar los floats... como te indican en el #2 el sitio en cuestion es muy bueno para realizar tus primeras practicas...

00israel · #8 (**permalink**) 13/03/2011, 01:58

gracias a todos por vuestra ayuda. Son buenisimos los enlaces que me habeis aportado.

y lo que estoy buscando, es que creo que no he sabido explicaros lo que queria. Me he confundido y he puesto overflow, cuando realmente estaba pensando en otra propiedad. Yo me refiero a, creo que en ingles su propiedad es "Clear". En el dreamweaver esta debajo de la propiedad "float" en el panel para definir un style CSS.

Y que puedes elegir izquierda, derecha, ambos o ninguno. ¿para que sirve esta propiedad?

00israel · #9 (**permalink**) 13/03/2011, 02:17

por lo que acabo de ver por ahi... ¿La propiedad "Clear" nos sirve para poder colocar un nuevo div debajo de los div que he flotado a izquierda y derecha respectivamente?. Y que pasaria si no se pone??

es asi esto que digo??

00israel · #10 (**permalink**) 13/03/2011, 02:34

Hay otra duda que tengo. Y que ya que he colocado aqui el codigo os lo pregunto. Siguiendo el tutorial que os comentaba anteriormente, cree un id llamado "*" con la unica propiedad de margen 0 y padding 0. Y entiendo que es aqui donde se van a colocar dentro todo el diseño de la pagina. Pero es necesario crearlo?

Y segundo podria meter la imagen que he colocado de fondo dentro del codigo que comienzo con el "*". Es mas podria añadirle al id "*" una imagen de fondo y me evitaria las lineas que he metido para el fondo no?

00israel · #11 (**permalink**) 13/03/2011, 03:55

Acabo de probar lo que os comentaba de añadir el fondo al id "*" pero me da un error. Se me descoloca el cuerpo central donde van las barras. ¿porque?

Lo he solucionado creando un id llamado "#fondo" que directamente se le he aplicado al body. Y de forma automatica se me ha añadido en la linea del body esto: <body id="fondo">

igual esto no es una solucion pero parece que funciona. Seria valido?

jomaruro · #12 (**permalink**) 13/03/2011, 04:23

Hola:

Cita:

Iniciado por 00israel

Hay otra duda que tengo. Y que ya que he colocado aqui el codigo os lo pregunto. Siguiendo el tutorial que os comentaba anteriormente, cree un id llamado "*" con la unica propiedad de margen 0 y padding 0. Y entiendo que es aqui donde se van a colocar dentro todo el diseño de la pagina. Pero es necesario crearlo?

Obligatorio no es, pero si conveniente. Sirve para inicializar los valores por defecto que los distintos navegadores aplican a cada selector lo que en algunos casos produce resultados insospechados. Para enterarte mejor busca información sobre reset css.

Si prefieres los tutoriales en castellano echa un vistazo en www.librosweb.es

Saludos.