Creando cajas y dandoles estilo

mccid · #1 (**permalink**) 28/07/2011, 21:09

Buenas noches, hoy vengo con dos dudas, la primera: no se si este tema corresponde aqui, si no, por favor disculpenme.
La segunda:

Deseo hacer una pagina con; Cabecera, slider, 2 sidebar, y en el centro 4 o muchas mas cajas en donde cada una sea una foto independiente y cada vez que pase el mouse por una foto, se abra una descripcion de la misma. Dejo esta foto para que vean mas o menos como va (La hice en paint, no se como hacerla tan bien como la hacen otros)

O algo como se ve en esta pagina

[URL="http://www.theimport.co.uk/"]http://www.theimport.co.uk/[/URL]

(en la parte de abajo, la de los post)

Solo que se vea solo la imagen, y cuando pase el cursor, salga una especie de "tooltipe" informando, asi como aparecen en las galerias de imagenes

Se que es de lo mas sencillo, pero estoy muy verde aun en estos temas, apenas estoy leyendo un libro sobre Javascript (que para nada he puesto en practica) Ya luego leere uno de CSS, es que inicie el otro sin saber que necesitaba CSS primero.

Muchas gracias,

un gran saludo

andresdzphp · #2 (**permalink**) 28/07/2011, 23:28

Te dejo un ejemplo rápido basado en tu imagen, para que entiendas más o menos como hacerlo.

Código HTML:

Ver original<!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>Ejemplo</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">Cabecera</div>     
<div id="slider">Slider</div>  
<div id="sidebar1">Sidebar 1</div> 
<div id="contenido">      
<p>Caja 1</p> <p>Caja 2</p> <p>Caja 3</p>     
<p>Caja 4</p> <p>Caja 5</p> <p>Caja 6</p>       
<p>Caja 7</p> <p>Caja 8</p> <p>Caja 9</p>
<p>Caja 10</p> <p>Caja 11</p> <p>Caja 12</p>      
</div>
<div id="sidebar2">SideBar 2</div>
</div>
</body>
</html>

estilos.css

Código CSS:

Ver originalbody {
    margin: 0;
    font-family: Tahoma, Geneva, sans-serif;
    background: #FFF;
    color: #000;
}
 
#contenedor {
    width: 960px;
    margin: 0 auto;
    background: #cccc00;
    height: 1000px;
}
 
#cabecera {
    height: 120px;
    background: #99ccff;
}
 
#slider {
    height: 200px;
    background: #ff9900;
}
 
#sidebar1, #sidebar2 {
    float: left;
    height: 680px;
    background: #cccccc;
    width: 200px;
}
 
#contenido {
    width: 560px;
    float: left;
}
 
#contenido p {
    margin: 40px 0 0 50px;
    width: 120px;
    height: 120px;
    float: left;
    background: #fff;
    text-align: center;
}

mccid · #3 (**permalink**) 29/07/2011, 07:17

Cita:

Iniciado por andresdzphp

Te dejo un ejemplo rápido basado en tu imagen, para que entiendas más o menos como hacerlo.

Código HTML:

Ver original<!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>Ejemplo</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">Cabecera</div>     
<div id="slider">Slider</div>  
<div id="sidebar1">Sidebar 1</div> 
<div id="contenido">      
<p>Caja 1</p> <p>Caja 2</p> <p>Caja 3</p>     
<p>Caja 4</p> <p>Caja 5</p> <p>Caja 6</p>       
<p>Caja 7</p> <p>Caja 8</p> <p>Caja 9</p>
<p>Caja 10</p> <p>Caja 11</p> <p>Caja 12</p>      
</div>
<div id="sidebar2">SideBar 2</div>
</div>
</body>
</html>

estilos.css

Código CSS:

Ver originalbody {
    margin: 0;
    font-family: Tahoma, Geneva, sans-serif;
    background: #FFF;
    color: #000;
}
 
#contenedor {
    width: 960px;
    margin: 0 auto;
    background: #cccc00;
    height: 1000px;
}
 
#cabecera {
    height: 120px;
    background: #99ccff;
}
 
#slider {
    height: 200px;
    background: #ff9900;
}
 
#sidebar1, #sidebar2 {
    float: left;
    height: 680px;
    background: #cccccc;
    width: 200px;
}
 
#contenido {
    width: 560px;
    float: left;
}
 
#contenido p {
    margin: 40px 0 0 50px;
    width: 120px;
    height: 120px;
    float: left;
    background: #fff;
    text-align: center;
}

Exactamente lo que necesitaba, MUCHAS GRACIAS!