Tema: Posicion vertical de etiqueta dentro de otra..
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/09/2009, 12:17
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Posicion vertical de etiqueta dentro de otra..
Hola Nico
Tan importante como el css es el código html que utilizas.
Sin él es difícil responder exáctamente a tu consulta.
Así que te pongo un código a ver si te sirve como orientación y base.

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <title>Kseso? jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. * {margin: 0; padding:0; outline: none; border: 0;}
  8. body {
  9.     background-color: #444;
  10.     margin:20px;
  11. }
  12. h3 {
  13.     color:#838c98;
  14. }
  15. img {
  16.     border:1px solid #EEE;
  17. }
  18. #principal {
  19.     margin:0 auto;
  20.     position: relative;
  21. }
  22. .contenedorfoto {
  23. background-color:#F5F7F9;
  24. border-bottom:1px solid #A5A7AA;
  25. border-right:1px solid #A5A7AA;
  26. float:left;
  27. margin:10px;
  28. padding:5px 5px 0;
  29. text-align:left;
  30. display: inline!important;
  31. width: auto;
  32. }
  33. .contenedorfoto a {
  34.     text-decoration: none;
  35. }
  36. .contenedorfoto a img {
  37.     border:1px solid #EEE;
  38.     display: block;
  39.     opacity: .5;
  40. }
  41. .contenedorfoto a:hover img {opacity: 1;}
  42.  
  43. .contenedorfoto p {
  44. font-size: 1em;
  45. padding-top: 5px;
  46. }
  47.  
  48. .contenedorfoto p a  {
  49. color:#515151;
  50. font-family:Trebuchet MS;
  51. font-size:.9em;
  52. padding: 5px;
  53. display:block;
  54. text-align:right;
  55. }
  56. .contenedorfoto p a:hover {border: 0; color: #FF6600;}
  57. </style>
  58. </head>
  59.  
  60. <body>
  61. <div id="principal">
  62.     <h3>GALER&Iacute;A CSS</h3>
  63.     <div class="contenedorfoto">
  64.   <a href="#" title="ver en grande"><img src="http://img299.imageshack.us/img299/9726/96830574.jpg" alt="jardín"/></a>
  65.   <p>Jardín en flor y torre de ladrillo
  66.   <a href="#" title="Ver descripción ampliada de la imagen">Ampliar información</a>
  67.   </p>
  68.   </div>
  69.     <div class="contenedorfoto">
  70.   <a href="#" title="ver en grande"><img src="http://img299.imageshack.us/img299/5328/42058383.jpg" alt="jardín"/></a>
  71.   <p>Edificio envuelto
  72.   <a href="#" title="Ver descripción ampliada de la imagen">Ampliar información</a>
  73.   </p>
  74.   </div>
  75.     <div class="contenedorfoto">
  76.   <a href="#" title="ver en grande"><img src="http://img4.imageshack.us/img4/4127/79357863.jpg" alt="jardín"/></a>
  77.   <p>Arbol y lago en parque
  78.   <a href="#" title="Ver descripción ampliada de la imagen">Ampliar información</a>
  79.   </p>
  80.   </div>
  81. </div>
  82. </body>
  83. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++