Foros del Web » Creando para Internet » CSS »

una duda de maquetacion...

Estas en el tema de una duda de maquetacion... en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 12/03/2011, 13:51
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
una duda de maquetacion...

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;
}
  #2 (permalink)  
Antiguo 12/03/2011, 14:50
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: una duda de maquetacion...

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
  #3 (permalink)  
Antiguo 12/03/2011, 15:01
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: una duda de maquetacion...

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>
  #4 (permalink)  
Antiguo 12/03/2011, 15:26
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: una duda de maquetacion...

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?
  #5 (permalink)  
Antiguo 12/03/2011, 15:50
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: una duda de maquetacion...

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
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #6 (permalink)  
Antiguo 12/03/2011, 16:18
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: una duda de maquetacion...

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.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 12/03/2011, 18:09
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: una duda de maquetacion...

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...
  #8 (permalink)  
Antiguo 13/03/2011, 01:58
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: una duda de maquetacion...

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?
  #9 (permalink)  
Antiguo 13/03/2011, 03:17
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: una duda de maquetacion...

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??
  #10 (permalink)  
Antiguo 13/03/2011, 03:34
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: una duda de maquetacion...

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?
  #11 (permalink)  
Antiguo 13/03/2011, 04:55
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: una duda de maquetacion...

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?

Última edición por 00israel; 13/03/2011 a las 05:01
  #12 (permalink)  
Antiguo 13/03/2011, 05:23
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: una duda de maquetacion...

Hola:

Cita:
Iniciado por 00israel Ver Mensaje
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.


Etiquetas: maquetacion
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 14:59.