Foros del Web » Creando para Internet » CSS »

maquetar pagina con css

Estas en el tema de maquetar pagina con css en el foro de CSS en Foros del Web. Holas, quiero preguntarles se me pueden ayudar a solventar esta inquietud, deseo hacer una web con css, que tenga la siguiente estructura: un encabezado, menu ...
  #1 (permalink)  
Antiguo 19/01/2007, 10:53
 
Fecha de Ingreso: enero-2007
Mensajes: 20
Antigüedad: 10 años, 11 meses
Puntos: 0
Sonrisa maquetar pagina con css

Holas, quiero preguntarles se me pueden ayudar a solventar esta inquietud, deseo hacer una web con css, que tenga la siguiente estructura:
un encabezado, menu orizontal, y el contenido divido en tres columnas (izquierda, centro y derecho) abajo una zona de contactos, luego abajo un submenu orizontal y por último el pie de pagina.

he creado una, pero la columna de la derecha a la hora de verlo en el I.E no se me ajusta. en Fire si se ajusta pero el menu sale sobre el encabezado. le envio el codigo para que me ayuden.


deantemano muchas gracias:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "direccion">
<head>
  <title>Prueba</title> 
<style>
   body {
    margin:0;
    padding:0;
   /* text-align:center; */
   }

   #content {
    text-align:left;
    margin:auto;
    background-color:#ffffff;
    width:800px;
    height: auto;
   }

   #cabecera {
    width: 800px;
    height:100px;
    background-color:#fffff;
   }

   #navegador{
   background : #F5F4C3 url(images/fondonav.gif);
   padding : 3px 10px 5px 10px;
   border-top : 1px solid #cccccc;
   border-bottom : 1px solid #cccccc;
   margin-top: 0px;
   }
 
     .columna-1 {
  float:left;
  padding:0px 15px 10px 0;
  width:200px;
  line-height:normal;
  border-right:solid #8c953b 1px;
  }
 
  .columna-2 {
  float:left;
  padding:0px 0 10px 15px;
  width:300px;
  line-height: normal;
  }
  .columna-3 {
  float:right;
  width:200px;
  height:110px; 
  margin-top: 0px;
  }

   #pie {
    clear:both;
    width:800px;
    height:50px;
    background-color:#cccccc;
   }
.Estilo1 {color: #FFFFFF}
.titulo {font-size: 20px}
.style4 {font-size: 12px}
.style5 {font-size: 16px}
.titulo-verde-12pt {font-size: 12px; font-weight: bold; }
</style>
<!--<style type="text/css">




#thicktabs{
margin: 0 auto;
width: 800px; /* or whatever */
padding: 0;
font: bold 13px Tahoma;
}

#thicktabs li{
display: inline;
}

#thicktabs li a{
float: left;
color: black;
padding: 8px 11px; /*padding of tabs*/
text-decoration: none;
background: transparent url(plantillas/pinkbg.gif) top right no-repeat;
border-top: 1px solid #d3bdbe; /*top border style*/
border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/
}

#thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/
border-left: 1px solid #d3bdbe; /*left border style*/
}

#thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/
border-right: 1px solid #d3bdbe; /*right border style*/
background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
}

#thicktabs li a:visited{
color: black;
}

#thicktabs li a:hover{
color: black;
background-image: url(plantillas/pinkbgover.gif); /*background image swap on hover*/
}

</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->

</head>
<body>
<span class="Estilo1"></span>
<div id="content"> 
<div id="cabecera"><img src="imagenes2/izalco.JPG" width="800px" height="179" border="0"></div>
  <!--  <ul id="thicktabs">
<li><a id="leftmostitem" href="dirección">Home</a></li>
<li><a href="dirección">Instituci&oacute;n</a></li>
<li><a href="dirección">Proyectos</a></li>
<li><a href="dirección">Areas de Trabajo </a></li>
<li><a href="dirección">Foros</a></li>
<li><a href="dirección">Gallery</a></li>
</ul>
<br style="clear: left" /> <p class="iepara">Paragraph that follows... </p> -->

  <div id="navegador">
  <div class="swfcentro" align="middle">
         <td width="800" height="120" valign="top" bgcolor="#FFFFFF"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="dirección" width="786" height="120">
          <param name="movie" value="barramenu.swf">
          <param name="quality" value="high">
          <embed src="barramenu.swf" quality="high" pluginspage="dirección" type="application/x-shockwave-flash" width="786" height="120"></embed>
          </object></td>
  </div>
  </div> 
  
 <!--  <div id="contiene">
    <div id="Izquierda"><strong>Zona Exclusiva </strong></div>
    <div id="Central"><strong> Presentación de la Empresa </strong></div>
    <div align="Derecha"><strong> Noticias</strong></div>
  </div> -->
  
<!--  <div id="contenido"></div> -->

<div class="columna-1">
<h1 align="left" class="titulo-verde-12pt">&nbsp;</h1>
<h1 align="center"><span class="titulo-verde-12pt">Zona Exclusiva</span></h1>
<p align="left">Login 
  <input type="text" name="textfield">
</p>
<p align="left">Password <input type="text" name="textfield2">
</p>
<p align="left">&iquest;Olvido su contrase&ntilde;a 

<p align="left">
<hr style="border:1px dashed #999999; width:360px" />
&nbsp;</p> 
<h1 align="center"><span class="titulo-verde-12pt">Licitaciones</span></h1>
<p align="left"></p>
</div>
<div class="columna-2">
<h1 align="left" class="titulo-verde-12pt">&nbsp;</h1>
<h1 align="center"><span class="titulo-verde-12pt">Presentación de la Empresa</span></h1>
<p align="left"></p>
<p align="left">

<hr style="border:1px dashed #999999; width:360px" />&nbsp;</p>
<h1 align="center"><span class="titulo-verde-12pt">Empresas Asociadas</span></h1>
<p align="left"></p>
<p align="left"></p>
</div>
<div class="columna-3">
  <div class="text-imagen"><h1 align="center" class="titulo-verde-12pt">&nbsp;</h1>
    <h1 align="center" class="titulo-verde-12pt"><span class="style4">Noticias</span></h1>
    <h1 align="center" class="titulo-verde-12pt">&nbsp;</h1>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <p align="center" class="titulo-verde-12pt">&nbsp;</p>
    <h1 align="center"><span class="titulo-verde-12pt"><br />
        </span><br />
        <span class="link"> </span></h1>
  </div>
</div>

  <div id="pie">
    <p align="center">Agencia de Desarrollo Economico Local Sonsonate.</p>
    <p align="center">Sonsonate, El Salvador</p>
  <Adel sonsonate></div>
</div>

</body>
</html> 
  #2 (permalink)  
Antiguo 19/01/2007, 11:58
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: maquetar pagina con css

Hay muchos manuales y plantillas por internet.

Yo lo que suelo hacer es lo siguiente:

1. Creo los bloques y le doy colores que contrasten en la hoja de estilos, de esta manera los tengo identificados.
2. Voy a la página html y escribo los divs y voy probando. Si algo no va bien pues reviso, pero hasta que no este solucionado no empiezo a meter contenido.

El problema del copiar código de otros sitios es que ya te lo dan todo hecho, pero cada uno tiene su manera de programar.

En tu caso yo haría algo asi:

El html:

Cita:
<html>
<body>
<div id="encabezado"></div>
<div class="menuhor"></div>
<div id="derecha"></div>
<div id="centro"></div>
<div id="izquierda"></div>
<div class="menuhor"></div>
<div id="pie"></div>
</body>
</html>
Luego tendrías que ver el tema de la hoja de estilos, ve dandole propiedades y probando de que queda como a ti te gusta.
  #3 (permalink)  
Antiguo 19/01/2007, 15:17
 
Fecha de Ingreso: enero-2007
Mensajes: 20
Antigüedad: 10 años, 11 meses
Puntos: 0
Re: maquetar pagina con css

Eourus gracias por el consejo lo tomare encuenta
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 04:08.