Foros del Web » Creando para Internet » CSS »

Creando cajas y dandoles estilo

Estas en el tema de Creando cajas y dandoles estilo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/07/2011, 21:09
 
Fecha de Ingreso: junio-2011
Mensajes: 8
Antigüedad: 6 años, 1 mes
Puntos: 0
Creando cajas y dandoles estilo

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

Última edición por mccid; 28/07/2011 a las 21:26
  #2 (permalink)  
Antiguo 28/07/2011, 23:28
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 6 años
Puntos: 793
Respuesta: Creando cajas y dandoles estilo

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

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ejemplo</title>
  6. <link href="estilos.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <div id="contenedor">
  9. <div id="cabecera">Cabecera</div>    
  10. <div id="slider">Slider</div>  
  11. <div id="sidebar1">Sidebar 1</div>
  12. <div id="contenido">      
  13. <p>Caja 1</p> <p>Caja 2</p> <p>Caja 3</p>    
  14. <p>Caja 4</p> <p>Caja 5</p> <p>Caja 6</p>      
  15. <p>Caja 7</p> <p>Caja 8</p> <p>Caja 9</p>
  16. <p>Caja 10</p> <p>Caja 11</p> <p>Caja 12</p>      
  17. </div>
  18. <div id="sidebar2">SideBar 2</div>
  19. </div>
  20. </body>
  21. </html>

estilos.css

Código CSS:
Ver original
  1. body {
  2.     margin: 0;
  3.     font-family: Tahoma, Geneva, sans-serif;
  4.     background: #FFF;
  5.     color: #000;
  6. }
  7.  
  8. #contenedor {
  9.     width: 960px;
  10.     margin: 0 auto;
  11.     background: #cccc00;
  12.     height: 1000px;
  13. }
  14.  
  15. #cabecera {
  16.     height: 120px;
  17.     background: #99ccff;
  18. }
  19.  
  20. #slider {
  21.     height: 200px;
  22.     background: #ff9900;
  23. }
  24.  
  25. #sidebar1, #sidebar2 {
  26.     float: left;
  27.     height: 680px;
  28.     background: #cccccc;
  29.     width: 200px;
  30. }
  31.  
  32. #contenido {
  33.     width: 560px;
  34.     float: left;
  35. }
  36.  
  37. #contenido p {
  38.     margin: 40px 0 0 50px;
  39.     width: 120px;
  40.     height: 120px;
  41.     float: left;
  42.     background: #fff;
  43.     text-align: center;
  44. }
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #3 (permalink)  
Antiguo 29/07/2011, 07:17
 
Fecha de Ingreso: junio-2011
Mensajes: 8
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Creando cajas y dandoles estilo

Cita:
Iniciado por andresdzphp Ver Mensaje
Te dejo un ejemplo rápido basado en tu imagen, para que entiendas más o menos como hacerlo.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ejemplo</title>
  6. <link href="estilos.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <div id="contenedor">
  9. <div id="cabecera">Cabecera</div>    
  10. <div id="slider">Slider</div>  
  11. <div id="sidebar1">Sidebar 1</div>
  12. <div id="contenido">      
  13. <p>Caja 1</p> <p>Caja 2</p> <p>Caja 3</p>    
  14. <p>Caja 4</p> <p>Caja 5</p> <p>Caja 6</p>      
  15. <p>Caja 7</p> <p>Caja 8</p> <p>Caja 9</p>
  16. <p>Caja 10</p> <p>Caja 11</p> <p>Caja 12</p>      
  17. </div>
  18. <div id="sidebar2">SideBar 2</div>
  19. </div>
  20. </body>
  21. </html>

estilos.css

Código CSS:
Ver original
  1. body {
  2.     margin: 0;
  3.     font-family: Tahoma, Geneva, sans-serif;
  4.     background: #FFF;
  5.     color: #000;
  6. }
  7.  
  8. #contenedor {
  9.     width: 960px;
  10.     margin: 0 auto;
  11.     background: #cccc00;
  12.     height: 1000px;
  13. }
  14.  
  15. #cabecera {
  16.     height: 120px;
  17.     background: #99ccff;
  18. }
  19.  
  20. #slider {
  21.     height: 200px;
  22.     background: #ff9900;
  23. }
  24.  
  25. #sidebar1, #sidebar2 {
  26.     float: left;
  27.     height: 680px;
  28.     background: #cccccc;
  29.     width: 200px;
  30. }
  31.  
  32. #contenido {
  33.     width: 560px;
  34.     float: left;
  35. }
  36.  
  37. #contenido p {
  38.     margin: 40px 0 0 50px;
  39.     width: 120px;
  40.     height: 120px;
  41.     float: left;
  42.     background: #fff;
  43.     text-align: center;
  44. }
Exactamente lo que necesitaba, MUCHAS GRACIAS!

Etiquetas: cajas, estilo
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 22:48.