problema con maquetación

tokiodata · #1 (**permalink**) 07/10/2012, 17:09

buenas tardes tengo un problema al maquetar una plantilla

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="stile.css" type="text/css" />
</head>
<body>
<div id="masthead">
<h1 id="siteName">logo del portal </h1>
<div id="globalNav">menu del portal </div>

</div>
<div id="navBar">
<p>texto</p>
<p> </p>
<p>  </p>
</div>

<div id="headlines">
<p>bloque izquierdo</p>
<p>  </p>
</div>

<div id="content">
<div id="title">
title
</div>
El concepto

Sus clientes suelen realizar muchas actividades en línea: realizan búsquedas, hacen compras, leen las noticias y navegan por sitios web interesantes. Por lo tanto, creemos que usted debe ser capaz de llegar a sus clientes, independientemente de lo que estén haciendo en la web. Nuestra respuesta: la Red de Google, el nombre que le damos a los lugares donde pueden aparecer sus anuncios de AdWords, incluidos los sitios de Google, las páginas web que se asocian con Google y otras ubicaciones, como las aplicaciones para teléfonos celulares. Es como si presentara su mensaje ante un estadio lleno de seguidores: Google reúne un grupo de personas interesadas y las lleva al estadio, y luego usted comienza con el espectáculo.

Este paquete de sitios que llamamos Red de Google se divide en grupos para brindarle más control sobre los lugares en donde le gustaría que apareciera su anuncio:
</div>

<div id="siteInfo">pie </div>
<br />
</body>
</html>

lo que quiero es poner el contenido en el centro entre el bloque izquiero y derecho pero no lo puedo lograr no se que error tengo, en el css tengo esto

Código:

#masthead{
	padding: 10px 0px 0px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar{


  float:left;
	width: 20%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-right: 10px;
}

#headlines{
  float:right;
	width: 20%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-right: 10px;
}

#content{
	float:left;
}
	#itle{
	 float:right;
	width: 20%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-right: 10px;
}

no se si me puedan ayudar para que el content aparesca en el centro entre el bloque izquiero y derecho

C2am · #2 (**permalink**) 07/10/2012, 19:12

Para ayudarte en serio, pero en serio, no hay nada mejor que esto:

www.librosweb.es

Luego que leas, sobre todo Introducción la xhtml, e introducción al Css, podrás lograr lo que buscas, sin tener que recurrir a un foro.

Mientras tanto te dejo algo rápido: http://jsfiddle.net/c2am/V3ePk/20/embedded/result/

Ahora si además quieres que las columnas sean del mismo alto deberás buscar "columnas equilibradas", y hay varias formas de lograrlo.

Saludos

tutorias · #3 (**permalink**) 21/10/2012, 14:46

Un saludo. Puedes usar css para ello. Te dejo un bosquejo

Código HTML:

<!DOCTYPE HTML>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>tutorias.co</title>
  <style type="text/css">
    section{
    position      : relative;
    vertical-align: top;
    }
    section article{
    border        : 1px solid #555;
    display       : inline-block;
    margin        : .2em;
    max-width     : 29%;
    vertical-align: top;
    }
    </style>
</head>
<body>
  <section>
    <article>izquierdo</article>
    <article style="width:40%">
      <div>
      El concepto

Sus clientes suelen realizar muchas actividades en línea: realizan búsquedas, hacen compras, leen las noticias y navegan
por sitios web interesantes. Por lo tanto, creemos que usted debe ser capaz de llegar  sus clientes, independientemente
de lo que estén haciendo en la web. Nuestra respuesta: la Red de Google, el nombre que le damos los lugares donde pueden
aparecer sus anuncios de AdWords, incluidos los sitios de Google, las páginas web que se asocian con Google y otras
ubicaciones, como las aplicaciones para teléfonos celulares. Es como si presentara su mensaje ante un estadio lleno de
seguidores: Google reúne un grupo de personas interesadas y las lleva al estadio, y luego usted comienza con el espectáculo.
      </div>
    </article>
    <article>derecho</article>
  </section>
</body>
</html>