Maquetacion, cajas DIV alineacion de una plantilla

mathcv · #1 (**permalink**) 27/07/2007, 11:46

Hola, se que el tema de la alineación o maquetacion y sus problemas es mas que conocido, por eso estuve revisando por el foro pero no logro encontrar una solucion a mi plantilla...
Una vez que tenga la estructura, agregarle estilos no me resulta complicado...

Dibujo la plantilla que estoy tratando de armar:

( URL de la imagen: http://www.hepatitisc2000.com.ar/maqueta.jpg )

Tengo progblemas con la alineacion de las cajas.... a la numero 1 le doy float:left y ala numero 2 float:rigth .... la tercera con float:left (hasta aqui todo bien) pero la cuarta con float:rigth se corre y asi las demas tambien...

Ojala alguien me pueda dar una mano, para terminar de armar esta estructura, y ponerme a trabajar con colores, imagenes y demas

Desde ya gracias!

DragonX · #2 (**permalink**) 27/07/2007, 11:54

no se ve tu dibujo. podrás ponernos alguna URL donde podamos ver esto?

Saludos

mathcv · #3 (**permalink**) 28/07/2007, 12:30

Cita:

Iniciado por DragonX

no se ve tu dibujo. podrás ponernos alguna URL donde podamos ver esto?

Saludos

Gracias por avisar, yo lo veo bien, pero dejo la URL de todas formas:

http://www.hepatitisc2000.com.ar/maqueta.jpg

Si se sigue sin ver la subo a algun lugar de estos que hay Online...
Graicas!

mathcv · #4 (**permalink**) 30/07/2007, 07:04

Dejo tambien el codigo que pude armar con mis pocos conocimientos de css, pero en el que sigo con problemas para alinear las cajas que quiero armar....

Código:

<html><head>
body {margin: 0;
padding: 0;
font-family: sans-serif;
font-size: .7em;
line-height: 1.4em;}

div#header {padding: 2%;
text-align: center;
background-color: #ffffff;
color: #4b4842;
margin-bottom: 0px;
border-bottom: solid #739341 3px;}

div#footer {padding: 2%;
text-align: center;
clear: both;
border-top: solid #739341 3px;
background-color: #ffffff;}

div#maincontent {
    padding: 1%;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

div#rightcolumn {padding: 2%;
float: right;
background-color: #ffffff;
border-left:solid #739341 3px;
width: 250px;}
</head>
<body>
<div id="header">CABECERA</div>

<div id="rightcolumn"> <p>Texto Texto<br>
Links Links<br>
Texto Texto<br>
    Links Links<br>
    Texto Texto<br>
    Links Links<br>
    Texto Texto<br>
    Links Links<br>
  </p>
</div>
<div id="maincontent"> <p>Texto..............................</p>
  <p>&nbsp;</p>
  <div style="width: 45%;    float: left;">CAJA 1 </div>
  <div style="width: 45%;    float: right;">CAJA 2 </div>
<div style="width: 45%;    float: left;">CAJA 3 </div>
  <div style="width: 45%;    float: right;">CAJA 4 </div>
</div>
<div id="footer">PIE</div>
</body></html>

Agradezco cualquier clase de ayudaaa =)

demiurgo_daemon · #5 (**permalink**) 30/07/2007, 08:37

Hola,

tu diseño me parece un poquito esotérico

pero creo que te puede servir si usas clear: del mismo modo que float; por ejemplo:

Código HTML:

<div style="width: 45%; float: left; clear: left;">CAJA 1 </div>
<!-- o si es a la derecha... -->
<div style="width: 45%; float: right; clear: right;">CAJA 1 </div>

También te recomiendo mucho usar el DOM Inspector de Firefox por si algo se te está desalineando.

saludos

mathcv · #6 (**permalink**) 31/07/2007, 06:44

jajajaj sisi es algo raro... pero original al fin no?

Estuve navegando un poco y encontre la posibilidad de armar estas cajas como un menu de lista... que opinas? este es el codigo:

Código:

<style>
#menu ul { margin:0; padding:0; }
#menu {   
     border: 2 #FFFFFF; 
     list-style-type: none;
	 display:inline;
	 padding: 0;
	 margin:0;
	 }
#menu a {   
   text-decoration: none; 
  	display: block;	
	width: 270px;
    color: #000;
	 
   }  
#menu li:hover { 
   text-decoration: none; 
  	display: block;
	width: 250px;
	border:2px #138CA6 solid;
	background-color:#EEFCFD;
}
#menu li {
   display:inline;
   float:left;
   width:250px;
   background-color: none;
   padding:2px;
   margin:3px;
   text-align: left;
   padding-left: 47px;
   border:2px #FFFFFF solid;
}
.seccion1 {
	background-image: url(http://www.hepatitisc2000.com.ar/img/queeshcv.gif);
	background-position: 1% 40%;
	background-repeat:no-repeat;
}

.Estilo1 {
	font-size: 24px;
	font-weight: bold;
	font-family: Arial, Tahoma, sans-serif;
}
</style>
</head>

<body>
<div id="menu">
  <ul>
      <li class="seccion1"><a href="#"><span class="Estilo1">Que es el HCV?</span><br />
        <span>Descripci&oacute;n de la imagen</span></a></li>
      <li class="seccion1"><a href="#"><span class="Estilo1">Blog de HC 2000</span><br />
        <span>Descripci&oacute;n de la imagen</span></a></li>
      <li class="seccion1"><a href="#"><span class="Estilo1">Que es el HCV?</span><br />
        <span>Descripci&oacute;n de la imagen</span></a></li>
      </ul>
  <ul>
    <li class="seccion1"><a href="#"><span class="Estilo1">Que es el HCV?</span><br />
          <span>Descripci&oacute;n de la imagen</span></a></li>
  </ul>
  <ul>
    <li class="seccion1"><a href="#"><span class="Estilo1">Que es el HCV?</span><br />
          <span>Descripci&oacute;n de la imagen</span></a></li>
  </ul>
  <ul>
    <li class="seccion1"><a href="#"><span class="Estilo1">Que es el HCV?</span><br />
          <span>Descripci&oacute;n de la imagen</span></a></li>
  </ul>
  <ul>
    <li class="seccion1"><a href="#"><span class="Estilo1">Que es el HCV?</span><br />
          <span>Descripci&oacute;n de la imagen</span></a></li>
  </ul>
  <ul>
    <li class="seccion1"><a href="#"><span class="Estilo1">Que es el HCV?</span><br />
          <span>Descripci&oacute;n de la imagen</span></a></li>
  </ul>
</div>
</body>

No se que método compatibiliza mejor con los navegadores, este de listas o el que me recomiendas, con "clear"....

Me recomendaron el DOM hace un tiempol, voy a probarlo....

Gracias !