[Ovillo] problema con el posicionamiento de los DIVs

Mar Nov 14 17:30:04 UTC 2006

Buenas,

         Siguo dando pasitos hacia la maquetacion de mi propio blog pero con
las CSS me estoy volviendo loco. Os cuento:

         Tenia un diseño donde los div tenian posicion absoluta. Al estar
asi al div contenedor le tenia que poner el height y el witdh en pixeles
pero como prefiero que esten % pense que la mejor manera seria ponerlos
todos con posicion relativa. Los cambie y algunos divs se solapan y otros
aparecen uno debajo del otro. Tambien probe sin ponerles ninguna posicion y
aparecen igual de mal. Os dejo el HTML y el CSS para ver si me podeis echar
un cable.

HTML
-------------------

<body>
<div class="nagusi" id="orokor">
	<div class="buru">
		<div id="map" class="mapa">
			<a href="http://aitiba.net"><img src="img/logo3.jpg" title="Hasiera
orria" alt="Hasiera orria" class="logo"/></a>

                </div>
		<div id="imagina" class="imagina">
			<img src="img/haika_logo.jpg" title="debianen logoa" class="imagin"
alt="debianen logoa" />
		</div>
	</div>

	<div class="gorputz">
		<div class="behe_erdia">
			<p>Behe_erdia</p>

		</div>		
		<div class="behe_eskubi">
			<h3>notizia1</h3><p>resumen1 resumen1 resumen1 resumen1 resumen1
resum</p>		 	<div>
		   		<p onclick="fontsize('100%')" class="par">+++</p>
			</div>
                	<div>
		   		<p onclick="fontsize('90%')" class="par">---</p>

			</div>
                </div>
	</div>
	<div class="behe">
	</div>
</div>
</body>

CSS (los divs estan sin ninguna posicion
-------------

body{
	text-align: center;
	margin:10px 0 0 0;
	background-color: #ccc;
	padding:0;
}

.nagusi{
	margin:0;
	padding:10px 0 0 10px;
	width: 94%;
	height:100%;
	margin: 0 auto;
	background-color: #fff;
	border:2px solid black;
	 font-size: 90%;	
}
.buru{
	height: 120px;

	padding:0;
}

.mapa{
	width: 750px;
	height: 120px;
}

.imagina{
	border:2px dotted black;
	width:200px;
	height:120px;
}

.logo{
	width:680px;
	height:120px;
}
.imagin{
	width:200px;
	height:120px;
}
.gorputz{
	padding: 0;
}
.eskubi{
	float: right;
	width: 465px;
}
.ezker{
	float: left;
	width: 215px;
	margin: 11px 0 10px 0;
}

.infoa{
	margin: 10px 20px 0 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	width: 190px;
	text-align: right;
}

.par {
	font-size: 90%;
}

.garbitu{
clear:both;
}

.behe_erdia{
	margin:0 0 0 -6px;
	height: 445px;
	width: 673px;
	border:1px solid black;
}

.behe_eskubi{
	margin:0;
        padding:0;
	height: 445px;
	width: 210px;
	border:1px solid black;
}
.behe{
	margin: 0 0 0 20px;
	border:1px solid yellow;	
	height:20px;
        width:900px;
}
.behe_textu{
	text-align: right;
	margin: 0 30px 0 0;
	padding: 22px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
}

Gracias. Un saludo. aitiba