Foros del Web » Creando para Internet » CSS »

Ayuda Maquetacion Layout Css

Estas en el tema de Ayuda Maquetacion Layout Css en el foro de CSS en Foros del Web. Saludos!!! Me gustaria hacer un layout con las siguientes cajas (en css) correctamente ordenadas. el caso esque yo kiero un layout ke kede tal que ...
  #1 (permalink)  
Antiguo 27/10/2008, 07:52
 
Fecha de Ingreso: abril-2008
Ubicación: http://biowar.es
Mensajes: 41
Antigüedad: 9 años, 8 meses
Puntos: 0
Ayuda Maquetacion Layout Css

Saludos!!!

Me gustaria hacer un layout con las siguientes cajas (en css) correctamente ordenadas.



el caso esque yo kiero un layout ke kede tal que asi:


------------- HEADER -------MENU1
------------ HEADER 2 -------------
- BOX 1 ------- BOX 2 ------- MENU 2 -
- BOX 3 ------- BOX 4 ------- MENU 2 -
- BOX 5 ------- BOX 6 ------- MENU 2 -
- BOX 7 ------- BOX 8 ------- MENU 2 -
------------- FOOTER --------------
------------- FOOTER 2 ------------



Pero solo consigo k me kede asi:

------------- HEADER --------------
------------ HEADER 2 -------------
BOX 1 ------- BOX 2 ------- BOX 3 - MENU 1
BOX 3 BOX 3 BOX 3 BOX 3 BOX 3 MENU 2 MENU 1
BOX 4 ----- BOX 5 BOX 3 BOX 3 MENU 2
BOX 6 BOX 6 BOX 6 BOX 6 BOX 6
------------- FOOTER --------------
------------- FOOTER 2 ------------




Alguien me podria echar una mano?

si pudieses pegarme un codigo rapido, os lo agradeceria con toda mi alma. yebo to la mañana intenntando corregir esto, pero no puedorl !! mis conocimientos no me dan pa mas!!!
  #2 (permalink)  
Antiguo 27/10/2008, 08:25
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Maquetacion Layout Css

Yo estoy empezando y no creo que te lo pueda resolver, aunque lo intento que así practico...
Lo que estaría bien, es que pusieras el código que ya tienes porque trabajaríamos menos...
A ver si lo consigo...
Por cierto, como lo quieres con pixeles...con tantos por cientos... centrado... a la izda...

Aresillo!!
  #3 (permalink)  
Antiguo 27/10/2008, 09:29
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Maquetacion Layout Css

Bueno, pues al final si que he podido...aunque llevo una hora...
Te pongo el código, como no has dicho nada lo he hecho para 800 px.
Aquí el html:
Código PHP:
<div id="contenedor">
    <
div id="titulo">
        <
div id="header"HEADER</div>
        <
div id="menu">   
        <
ul>
          <
li><a href="#">Enlace 1</a>
          <
li><a href="#">V&#237;nculo 2</a>
          
<li><a href="#">Otro enlace</a>
          <
li><a href="#">Link chulo</a>
        </
ul>
       </
div>
   </
div>
   <
div id="header2">Header 2</div>
   <
div id="cuerpo">
       <
div id="boxodd">
       <
h2 class="titlat">BOX 1</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div><h2 class="titlat">BOX 3</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div><h2 class="titlat">BOX 5</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div>
        <
h2 class="titlat">BOX 7</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div></div>
      <
div id="menu2"><ul>
             <
li><a href="#">Enlace 1</a>
             <
li><a href="#">V&#237;nculo 2</a>
             
<li><a href="#">Otro enlace</a>
             <
li><a href="#">Link chulo</a>
             <
li><a href="#">M&#225;s enlaces</a>
             
<li><a href="#">Otro &#250;ltimo</a>
      
</ul></div>
       <
div id="boxeven"><h2 class="titlat">BOX 2</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div><h2 class="titlat">BOX 4</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div><h2 class="titlat">BOX 6</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div><h2 class="titlat">BOX 8</h2>
        <
div id="registro" class="cuerpolateral">
        
Contenido caja.
        </
div></div>
  </
div>
    <
div id="footer">
       &
#169; 2008 patatin patatan
    
</div>
    <
div id="footer2">
       &
#169; 2008
    
</div>
</
div
Aquí el css:
Código PHP:
BODY {
    
font8pt VerdanaGenevaArialHelveticasans-serif;
    
margin0;
    
padding:0;
    
text-aligncenter;
    
background-color#ebebeb;
}
#contenedor{
    
text-alignleft;
    
width800px;
    
marginauto;

#titulo{
    
margin0;
    
height:150px;
}
#header{
    
text-aligncenter;
    
width600px;
    
height:150px;
    
marginauto;
    
float:left;
    
background-color#00CCFF;
    
color#333300;
    
font-size:12pt;
    
font-weightbold
}
#menu{
   
width200px;
   
height:150px;
   
background-color#0099FF;
   
float:right;
   
text-align:center;
}
#menu ul{
   
margin 0 0 0 0px;
   
padding0 0 0 0px;
   list-
stylenone;
}
#menu li{
   
background-color#0099FF;
   
margin2 2 2 2px;
   
padding2 2 2 2px;
   
font-weightbold;
}
#menu a{
   
color#3333cc;
   
text-decorationnone;
}
#header2{
    
background-color#d0d0ff;
    
color#333300;
    
font-size:12pt;
    
font-weightbold;
    
padding:0px;
    
text-align:center;
}
#cuerpo{
    
margin0;
    
background-color:#ffffcc;
}
#boxodd{
    
width275px;
    
floatleft;
    
margin:0;
    
background-color#99FFFF;
}
.
titlat{
background-color:#68729E;
color:#ffffff;
font-size:8pt;
text-transform uppercase;
padding7px 3px 7px 8px;
font-weight normal;
letter-spacing 2px;
margin0px 0px 8px 0px;
}
.
cuerpolateral{
padding5px 4px 13px 10px;

#menu2{
    
width250px;
    
background-color#999999;
    
float:right;
    
margin:0;
    
text-align:center;
}
#menu2 ul{
    
margin 0 0 0 0px;
    
padding0 0 0 0px;
    list-
stylenone;
}
#menu2 li{
    
background-color#ffffcc;
    
margin2 2 2 2px;
    
padding2 2 2 2px;
    
font-weightbold;
}
#menu2 a{
    
color#3333cc;
    
text-decorationnone;
}
#boxeven{
    
margin-left275px;
    
background-color#ffffff;
    
width275px;
}
#footer{
    
background-color#cccccc;
    
text-align:right;
    
clearboth;

#footer2{
    
background-color#cccccc;
    
text-align:right;
    
clearboth;


Y aquí el resultado:
http://cursos.anfap.com/60user0874/fdw/prueba.html

A ver si te convence...
Seguro que estos jefales...lo pueden hacer mejor y con menos código pero aquí hasta donde puedo llegar yo... y a duras penas...

Un saludo!

Aresillo!!
PD: Acabo de ver que con el explorer se descoyunta un poco...a ver si alguien sabe resolverlo...puto explorer!! lo odio!
  #4 (permalink)  
Antiguo 27/10/2008, 09:30
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Ayuda Maquetacion Layout Css

Prueba este codigo , como no dijiste dimensiones, imaginé que eran 700px

Cita:
<html><head>

<style type="text/css">
<!--
body {font-family:Trebuchet MS;font-size:12px;}

#estructura {width:700px;}

#header1
{background-color:#000;color:#FFF;}

#menu1
{background-color:#CCC;float:right;}

#header2
{background-color:#888;}

#contenedor {margin-right:200px;}

#contenido1
{background-color:#900;color:#FFF;width:250px;float:left;}

#contenido2
{background-color:#009;color:#FFF;margin-left:250px;}

#menu2
{background-color:#066;float:right;width:200px;}


#footer1
{background-color:#E84;}

#footer2
{background-color:#000;color:#FFF;}
-->
</style>

</head>
<body>


<div id="estructura">

<div id="menu1">Contactanos | Foro | Login</div>
<div id="header1">Cabecera<br />Cabecera<br />Cabecera<br /></div>


<div id="header2">Cabecera Numero Dos</div>


<div id="menu2">
Articulos<br />
Comentarios<br />
Informaciones<br />
Aportanos<br />
</div>

<div id="contenedor">

<div id="contenido1">
Este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero

uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido

numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el

contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este es el contenido numero uno este...
</div>

<div id="contenido2">
Este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero

dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido

numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el

contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es el contenido numero dos este es

el contenido numero dos este...
</div>

</div>

<div id="footer1">Pie de Pagina?</div>
<div id="footer2">Copyright © Todos los derechos Reservados</div>

</div>

</body>
</html>
Suerte :D
  #5 (permalink)  
Antiguo 27/10/2008, 09:34
 
Fecha de Ingreso: abril-2008
Ubicación: http://biowar.es
Mensajes: 41
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Ayuda Maquetacion Layout Css

Muxisimas Gracias!!!!

Última edición por EL_CID_CAMPEADOR; 27/10/2008 a las 09:41
  #6 (permalink)  
Antiguo 27/10/2008, 09:37
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Maquetacion Layout Css

Que guay! mucho mas claro que el mio!
Gracias Null!

Aresillo!!
  #7 (permalink)  
Antiguo 27/10/2008, 09:45
 
Fecha de Ingreso: abril-2008
Ubicación: http://biowar.es
Mensajes: 41
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Ayuda Maquetacion Layout Css

Aresillo, Me gusto mas el tuyo :P Muchas gracias A los dos Por las molestias
  #8 (permalink)  
Antiguo 27/10/2008, 12:23
 
Fecha de Ingreso: abril-2008
Ubicación: http://biowar.es
Mensajes: 41
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Ayuda Maquetacion Layout Css

aunke tb voi a usar el tuyo Null
  #9 (permalink)  
Antiguo 27/10/2008, 18:59
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Ayuda Maquetacion Layout Css

Gracias y suerte en tu web
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:04.