Foros del Web » Creando para Internet » CSS »

Maquetación con float left

Estas en el tema de Maquetación con float left en el foro de CSS en Foros del Web. Hola chicos les traigo un tutorial para maquetar el sitio web usando el float: left; A continuación les dejo la explicación paso por paso 1) ...
  #1 (permalink)  
Antiguo 26/12/2010, 00:40
Avatar de Drakerz  
Fecha de Ingreso: marzo-2010
Mensajes: 182
Antigüedad: 7 años, 8 meses
Puntos: 12
Maquetación con float left

Hola chicos les traigo un tutorial para maquetar el sitio web usando el float: left; A continuación les dejo la explicación paso por paso

1) Creamos una hoja de estilos con el nombre que queramos en mi caso como ejemplo usare el siguiente nombre estilos.css

2) Creamos un html con el nombre index.html y a dicho html le adjuntamos la hoja de estilos

3) Ahora haremos lo siguiente creamos un Id con el siguiente nombre wrap, Luego nos vamos a la solapa código y dentro del wrap crearemos el div header afuera del wrap creamos los otros 2 divs que son contenedor y botonera

Es importante seleccionar el cierre de la etiqueta del wrap y ponerlo al final del último div en este caso después del cierre del div contenedor.

El cierre de la etiqueta del contenedor lo pondremos debajo del </div> botonera para que contenga la botonera y lo que queramos contener.

Nos deberá quedar como el código que deje de ejemplo.

Código HTML:
<!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=utf-8" />
<title>Maquetación con float left</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
Colocar aquí el contenido para  id "wrap"
<div id="header">Colocar aquí el contenido para  id "header"</div>
<div class="contenedor">
Colocar aquí el contenido para  class "contenedor"
  <div class="botonera">Colocar aquí el contenido para  class "botonera"</div>
</div>
</div>
</body>
</html> 
4) CSS: Para que este método funcione debemos seguir los pasos del css que observamos abajo

Código:
@charset "utf-8";
/* CSS Document */

#wrap {
	margin-right: auto;
	margin-left: auto;
	width: 586px;
	background-color: #099;
}
#header {
	float: left;
	background-color: #0CC;
	width: 586px;
}
.contenedor {
	float: left;
	margin-right: auto;
	margin-left: auto;
	background-color: #09F;
}
.botonera {
	background-color: #0C6;
	float: left;
	width: 586px;
}
5) Vista previa del navegador

__________________
Founder and CEO en Edition Designs
http://www.edition-designs.com.ar/

Última edición por Drakerz; 26/12/2010 a las 00:50

Etiquetas: float, left
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 12:11.