Foros del Web » Creando para Internet » CSS »

Duda sobre el diseño

Estas en el tema de Duda sobre el diseño en el foro de CSS en Foros del Web. Hola chicos he conseguido hacer un pequeño diseño el cual tengo dos dudas correspondientes http://kfernandez.comuf.com/ El div "otros" contendrá el contenido de la pagina , ...
  #1 (permalink)  
Antiguo 16/05/2012, 07:03
 
Fecha de Ingreso: diciembre-2011
Mensajes: 414
Antigüedad: 12 años, 3 meses
Puntos: 1
Duda sobre el diseño

Hola chicos he conseguido hacer un pequeño diseño el cual tengo dos dudas correspondientes

http://kfernandez.comuf.com/

El div "otros" contendrá el contenido de la pagina , y quiero que este vaya descendiendo,sin modificar el resto que solo se mueva él.

content:principal

Alguna idea?

#content {
width:724px;
height:100%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -377px;
margin-left: -377px;
}

#otros {
float:rigth;;
margin-left:250px;
background-color:#CC99CC;
width:474px;
height:510px;
}
  #2 (permalink)  
Antiguo 16/05/2012, 07:48
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Duda sobre el diseño

No se por que estás haciendo que el contenedor principal tenga position:absolute, no es necesario, pienso yo.

Hize una pequeña modi a tu code, a ver que te parece, cualquier cosa me comentas.

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>Documento sin título</title>
<style type="text/css">
	@charset "utf-8";
/* CSS Document */

#content { width:724px; height:100%; position: relative; margin:0 auto; }
.left{ widht	: 250px; float: left;}
.right{width:474px; float: left;}
#profileimage { position:relative;width:250px; height:250px; background-color:#FFCC00; }
#datos1 { position:relative; height:40px; background-color:#F30; }
#datos2{ position:relative; height:40px; background-color:#36C; }
#datos3 { position:relative;  height:40px; background-color:#9CC; }
#otros { background-color:#CC99CC; width:474px; }
#friends { position:relative;width:250px; height:380px; background-color:#0066FF; }
</style>
</head>

<body>
<div id="content">
	<div class="left">
		<div id="profileimage">Colocar aquí el contenido para  id "profileimage"</div>
		<div id="friends">Colocar aquí el contenido para  id "friends"</div>
	</div>	
	<div class="right">	
		<div id="datos1">Colocar aquí el contenido para  id "datos1"</div>
  		<div id="datos2">Colocar aquí el contenido para  id "datos2"</div>
  		<div id="datos3">Colocar aquí el contenido para  id "datos3"</div>
		<div id="otros">
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
			Colocar aquí el contenido para  id "otros"<br />
		</div>
	</div>
</div>
</body>
</html> 
__________________
WFC
codigo82

Etiquetas: contenido, diseño, fondo
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 02:28.