Foros del Web » Creando para Internet » CSS »

Maquetacion, cajas DIV alineacion de una plantilla

Estas en el tema de Maquetacion, cajas DIV alineacion de una plantilla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/07/2007, 12:46
 
Fecha de Ingreso: julio-2007
Mensajes: 5
Antigüedad: 10 años, 4 meses
Puntos: 0
Maquetacion, cajas DIV alineacion de una plantilla

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!

Última edición por mathcv; 28/07/2007 a las 13:29
  #2 (permalink)  
Antiguo 27/07/2007, 12:54
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Maquetacion, cajas DIV alineacion de una plantilla

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

Saludos
  #3 (permalink)  
Antiguo 28/07/2007, 13:30
 
Fecha de Ingreso: julio-2007
Mensajes: 5
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: Maquetacion, cajas DIV alineacion de una plantilla

Cita:
Iniciado por DragonX Ver Mensaje
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!
  #4 (permalink)  
Antiguo 30/07/2007, 08:04
 
Fecha de Ingreso: julio-2007
Mensajes: 5
Antigüedad: 10 años, 4 meses
Puntos: 0
Mensaje Re: Maquetacion, cajas DIV alineacion de una plantilla

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 =)
  #5 (permalink)  
Antiguo 30/07/2007, 09:37
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Maquetacion, cajas DIV alineacion de una plantilla

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
  #6 (permalink)  
Antiguo 31/07/2007, 07:44
 
Fecha de Ingreso: julio-2007
Mensajes: 5
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: Maquetacion, cajas DIV alineacion de una plantilla

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 !
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 19:14.