DIV div.... dije DIV?

FreezeLAN · 13 de Noviembre de 2010, 17:49:09 PM

Holaw!

Bueno, directo al grano, necesito ayuda con esto (para no hacer copy/paste, pongo el Link que ya mismo redacté)
mas soluciones vendría siendo lo ideal, ya que, tengo que hacer una pagina web para una escuela de surfeo y ya me gaste 2 semanas maqueando, sin tener éxito.
igual desespera esta cosa.

http://www.furry.cl/public/style_emoticons/<#EMO_DIR#>/xD.png\' class=\'bbc_emoticon\' alt=\'xD\' />!

Link externo con el tema

Gracias.

Dogo · 13 de Noviembre de 2010, 20:04:34 PM

No entiendo que es lo que quieres hacer. Por lo que dice el link tratas de alinear DIV's. Esto se hace jugando con CSS y las propiedades: Width, Height, Clear, Align, Margin, Padding y todas esas que permiten el centrado.

Explicate un poco mejor o manda el codigo para poder ayudarte mejor.

Richard Wolf VI · 13 de Noviembre de 2010, 23:20:28 PM

Es mejor que mandes ejemplo de código de cómo lo estás haciendo, así es mejor hacernos idea qué falla.

Ofioro · 14 de Noviembre de 2010, 12:35:13 PM

¿Desarrollo Web?, el orden de los Divs a veces llega a ser algo traicionero, pero principalmente si quieres que sus posicionamientos queden bien empieza por experimentar de forma previsa con width, height, clear, align, margin, padding, etc. Solo recuerda que a veces aplicar ciertas opciones pueden afectar el posicionamiento de otros DIVs cercanos si es que están con mediadas especificas, para mí eso de los DIVs es como el arte del orden en una pagina web, si quieres ayuda más especifica te recomiendo lo que dicen los dmeás acerca del código... ¡muestralo!

http://www.furry.cl/public/style_emoticons/<#EMO_DIR#>/tongue.gif\' class=\'bbc_emoticon\' alt=\':P\' />

Alexei Humeniy · 14 de Noviembre de 2010, 14:47:37 PM

Tengo mis dudas sobre cómo debería fluir el diseño. ¿La página tiene un margen izquierdo menor al derecho? ¿el rectángulo ese que dice "logotipo" debe salir sobre o debajo del contenido principal? ¿lo de la derecha es una columna con contenido?

Así con lo que veo se me ocurre algo mas o menos así:

Código [Seleccionar]

<!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 content="es-cl" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">

body {
	background-color: #3D3D3D;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
}
.CabezaFuera {
	background-color: #0E9E9F;
	height: 70px;
	padding: 10px 95px 10px 60px;
}
.MenuFuera {
	background-color: #0DD0FE;
	padding: 10px 95px 10px 60px;
}
.MenuFuera a {
	color: #ffffff;
	text-decoration: none;
	background-color: #0E9E9F;
	padding: 0px 15px;
}
.MenuFuera div {
	float: left;
	margin-right: 5px;
	padding: 2px 2px 2px 2px;
	border: 1px #ffffff dotted;
}
.ContenidoFuera {
	clear: both;
	padding: 10px 95px 10px 60px;
}
.PieFuera {
	padding: 10px 95px 10px 60px;
}
.ContenidoDerecha {
	float: right;
	width: 255px;
	margin-left: 10px;
}
.ContenidoPrincipal {
	margin-right: 280px;
}
</style>
</head>

<body>

<div class="CabezaFuera">
	LOGOTIPO</div>
<div class="MenuFuera" style="height: 25px">
	<div>
		<a href="#">Inicio</a></div>
	<div>
		<a href="#">Acerca de</a></div>
	<div>
		<a href="#">Contactos</a></div>
</div>
<div class="ContenidoFuera">
	<div class="ContenidoDerecha">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis 
		gravida elit, nec pellentesque dui consectetur eget. Ut in nisi elit. Proin 
		in erat a turpis fermentum posuere. Quisque tellus risus, consectetur eu 
		vestibulum at, scelerisque non urna. Proin ut libero massa, id egestas dolor. 
		Nunc adipiscing tristique eros ac convallis. Praesent id vehicula leo. Suspendisse 
		sem magna, tristique at accumsan sed, tempus vel neque. Sed vulputate convallis 
		pellentesque. Suspendisse in rhoncus nisl. Donec ac nisl orci, sit amet 
		ornare lacus. Nulla facilisi. Duis pellentesque, lacus condimentum interdum 
		congue, dolor mi imperdiet lorem, eu bibendum ante sapien quis sem. Donec 
		nec egestas purus. Nam ut mauris mauris. Nam enim enim, vulputate at cursus 
		luctus, adipiscing ac nunc. Suspendisse sapien nibh, blandit non tempor 
		ac, pulvinar eget ante. Sed a ligula ac arcu tempus tincidunt. Class aptent 
		taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
		Vestibulum auctor</p>
	</div>
	<div class="ContenidoPrincipal">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis 
		gravida elit, nec pellentesque dui consectetur eget. Ut in nisi elit. Proin 
		in erat a turpis fermentum posuere. Quisque tellus risus, consectetur eu 
		vestibulum at, scelerisque non urna. Proin ut libero massa, id egestas dolor. 
		Nunc adipiscing tristique eros ac convallis. Praesent id vehicula leo. Suspendisse 
		sem magna, tristique at accumsan sed, tempus vel neque. Sed vulputate convallis 
		pellentesque. Suspendisse in rhoncus nisl. Donec ac nisl orci, sit amet 
		ornare lacus. Nulla facilisi. Duis pellentesque, lacus condimentum interdum 
		congue, dolor mi imperdiet lorem, eu bibendum ante sapien quis sem. Donec 
		nec egestas purus. Nam ut mauris mauris. Nam enim enim, vulputate at cursus 
		luctus, adipiscing ac nunc. Suspendisse sapien nibh, blandit non tempor 
		ac, pulvinar eget ante. Sed a ligula ac arcu tempus tincidunt. Class aptent 
		taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
		Vestibulum auctor, eros ac suscipit accumsan, dui felis mollis dui, id adipiscing 
		lectus odio quis elit.</p>
		<p>Mauris ultrices dictum dui, pretium vehicula mi egestas in. Aenean lorem 
		velit, imperdiet venenatis tristique at, fringilla ut tellus. Vivamus consectetur 
		nisl sed diam porttitor tempor. Nam at elit urna. Phasellus luctus, elit 
		id fringilla pretium, quam est ultricies libero, non mattis est dui sed 
		lacus. Etiam vehicula, nibh et aliquam sagittis, arcu neque feugiat metus, 
		non euismod arcu neque vitae diam. Nam sagittis mi non ligula lobortis in 
		volutpat metus imperdiet. Curabitur feugiat molestie augue id tempor. Suspendisse 
		eleifend nisi venenatis ligula vulputate a porttitor ipsum auctor. Sed pellentesque 
		elit a erat dapibus faucibus. Phasellus faucibus ullamcorper risus, vitae 
		iaculis sem tincidunt a. Quisque ultrices mattis posuere.</p>
		<p>Duis in gravida velit. Curabitur rhoncus suscipit lobortis. Integer ac 
		magna ipsum. Duis vel risus velit, vestibulum ullamcorper dolor. Donec ut 
		semper purus. In vel enim arcu. In et mi nec leo sollicitudin porttitor 
		ut sit amet sem. Duis commodo, eros in varius eleifend, lectus velit volutpat 
		lectus, ac venenatis diam tortor in sem. Praesent sem augue, convallis at 
		vestibulum quis, posuere in lacus. Donec nec metus tellus, in egestas turpis. 
		Aliquam erat volutpat. Cras malesuada sodales nunc eu mollis. Vestibulum 
		ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
		Aliquam vulputate tempus ipsum non blandit. Integer eros erat, blandit et 
		luctus vel, semper eu massa. Pellentesque habitant morbi tristique senectus 
		et netus et malesuada fames ac turpis egestas. Curabitur interdum nunc in 
		mi cursus ullamcorper. Proin ac urna vitae tortor fringilla consectetur.</p>
		<div class="MedioAbajo">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis 
			gravida elit, nec pellentesque dui consectetur eget. Ut in nisi elit. 
			Proin in erat a turpis fermentum posuere. Quisque tellus risus, consectetur 
			eu vestibulum at, scelerisque non urna. Proin ut libero massa, id egestas 
			dolor. Nunc adipiscing tristique eros ac convallis. Praesent id vehicula 
			leo.</div>
	</div>
	<div style="clear: both; height: 1px; overflow: hidden">
&nbsp;</div>
</div>
<div class="PieFuera">
	Pie de página, info Copyright (©) y esas cosas.</div>

</body>

</html>

Noticias:

DIV div.... dije DIV?

FreezeLAN

Dogo

Richard Wolf VI

Ofioro

Alexei Humeniy