Margin-Top de CSS, una dudilla

varuk

Hola.

Mirad esta imagen:

Bien, donde va lo rojo, en verdad irá una imagen con granulado de blanco (arriba) hacia ese azul para que parezca que la tabla azul, que se ve en la imagen, empieza suavemente. Vale, mi duda es, que como se ve, la palabra "Photostream" aun parece que podria pegarse mas al margen, y así justo empezar donde ya el granulado llega a ser totalmente azul.

El codigo del Style CSS de la parte azul (la roja ahi no interviene) es este:

.SR .photostream { overflow: hidden; background: #9ed5e1 url(images/photostream-bkg.png) no-repeat bottom left; padding: 15px 0px 25px 15px;}
/**/ *html .SR .photostream { height: 1%;} /**/ 
.SR .photostream h3 { font-size: 24px; letter-spacing: -1px; color:#102a30;}
.SR .photostream ul { float: left; margin-top: 10px;}
.SR .photostream li { background: url(images/photostream-li-bkg.png) no-repeat left top; list-style-type: none; display: inline; padding: 5px; float: left; margin: 0px 3px 5px 0px;}
.SR .photostream li a img, .SR .photostream li a:visited img { border: solid 1px #fff; width: 54px; height: 54px;}
.SR .photostream li a:hover img { border: solid 1px #000;}

El codigo de la web es este:

<div class="photostream">
<h3>Photostream</h3>
<!-- Start Flickr Photostream -->
<?php if (function_exists('get_flickrrss')) { ?>
  <ul>
   <?php get_flickrrss(); ?> 
  </ul>
<?php } ?>
</div>

He probado tocar el Style CSS y a meter dentro de la etiqueta "<h3>" un "margin-top: 0px; . También he probado a meter eso en la etiqueta del CSS que pone ".SR .photostream". Pero nada, ahí no se sube la letrita para arriba. Además, le he quitado a esas dos lineas el prefijo ".SR" para que no interviniera las propiedades de ".SR" pero no sirve de nada.

¿Dónde creeis que puede estar la solución? Gracias.

guner

.SR .photostream { overflow: hidden; background: #9ed5e1 url(images/photostream-bkg.png) no-repeat bottom left; padding: 15px 0px 25px 15px;}

padding-top: 15px; Puede estar ahí la cuestión. El h3 está heredando ese padding, no margin.
Puede que te funcionara mejor quitando el padding top de .photostream y poniendo margin a h3.

También puede ser cosa del line-height del h3. Míralo.

varuk

Muchas gracias guner, era el padding del photostream. No cai. ^U

Usuarios habituales

  • varuk
  • guner