[CSS] Krijg marge tussen plaatje en onderschrift niet weg - Softwareontwikkeling

vrijdag 30 december 2005 12:58

Acties:

Hopla!

Topicstarter

Ik probeer naar het voorbeeld van Sun.com schaalbare boxen te maken voor in de rechtermarge van mijn website. Hieronder een voorbeeld van Sun. Het principe is eenvoudig: de div onder het plaatje heeft een gradient achtergrond op de bottom. De achtergrondkleur van de div is oranje. Naarmate de tekst lager is, wordt de div uitgerekt:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/ad1.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/ad1.gif

De css die ik hiervoor heb is als volgt. NB: de plaatjes "generic_bl.gif" en "generic_bl.gif" zijn transparante gifjes met een hoekje eruit, om de onderkant af te ronden:

Cascading Stylesheet:

.orangev1 {
  background          : #E76F00 url("../newfiles/bg_sunorange.gif") repeat-x left bottom;
  margin-bottom       : 10px;
  width               : 170px;
}

.orangeimg {
  margin: 0;
  padding: 0;
}

.orangev1 div.copy {
  color               : #fff;
  padding             : 2px 8px 0 8px;
}

.orangev1 div.cornerBL {
  width               : 170px;
  height              : 8px;
  background          : url("../newfiles/generic_bl.gif") no-repeat bottom left;
  padding             : 0;
}

.orangev1 div.cornerBR {
  width               : 170px;
  height              : 8px;
  background          : url("../newfiles/generic_br.gif") no-repeat bottom right;
  padding             : 0;
}

En de HTML die erbij hoort:

HTML:

<div class="orangeimg">
  [img]"newfiles/scott.jpg">
</div>
<div[/img]
  <div class="copy">Lorem<br>ipsum<br>dolor</div>
  <div class="cornerBL"><div class="cornerBR"></div></div>
</div>

Ik heb twee problemen die ik maar niet opgelost krijg (links FF, rechts IE):

Afbeeldingslocatie: http://www.danandan.luna.nl/got/gotsunads.gif

FF zet tussen het plaatje en de "tekst-div" een witruimte. Ik heb alle marges en paddings al eens op 0 gezet, maar de marge blijft
De marge aan de onderkant van de tekst is bij IE groter dan bij FF. De marge in FF klopt - die is volgens de css. Die in IE niet. Hoe komt die marge groter?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 30 december 2005 13:14

Acties:

Sappie

De Parasitaire Capaciteit!

ik heb zowel in IE en FF die witruimte tussen het plaatje en de "orangevl" div. Dit los je op door display: block toe te passen op de img. De div met class "orangeimg" is bovendien overbodig.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">      
        .orangev1 {
              background          : #E76F00;
              margin-bottom       : 10px;
              width               : 170px;
            }
            
            .orangeimg {
                display: block;
            }
            
            .orangev1 div.copy {
              color               : #fff;
              padding             : 2px 8px 0 8px;
            }
            
            .orangev1 div.cornerBL {
              width               : 170px;
              height              : 8px;
              background          : url("../newfiles/generic_bl.gif") no-repeat bottom left;
              padding             : 0;
              font-size                     : 0;
            }
            
            .orangev1 div.cornerBR {
              width               : 170px;
              height              : 8px;
              background          : url("../newfiles/generic_br.gif") no-repeat bottom right;
              padding             : 0;
              font-size                     : 0;
            }
    </style>
</head>
<body>
    [img]"test.gif">
    <div[/img]
      <div class="copy">Lorem<br>ipsum<br>dolor</div>
      <div class="cornerBL"><div class="cornerBR"></div></div>
</div>
</body>
</html>

Edit:

Beide problemen opgelost; het "marge" probleem heeft te maken met de font-size property, zet deze maar eens op 0 voor de betreffende divs (de hoekjes dus).

Voorbeeld code ff aangepast.

nog een edit

als je toch altijd een vaste breedte van 170px hebt kun je die ronde hoeken net zo goed uit één plaatje toveren, scheelt je weer wat markup.

[ Voor 105% gewijzigd door Sappie op 30-12-2005 13:29 ]

Specs | Audioscrobbler

vrijdag 30 december 2005 13:39

Acties:

crisp

Devver

Pixelated

display:block op je image zetten is 1 mogelijkheid, maar het probleem wordt veroorzaakt door het feit dat replaced elements op de baseline worden uitgelijnt; een vertical-align:bottom lost het probleem dus ook op.

Het marge-probleem heeft inderdaad te maken met de default font-size/line-height

Intentionally left blank

vrijdag 30 december 2005 13:44

Acties:

Sappie

De Parasitaire Capaciteit!

Oké.. dat wist ik niet; de baseline is dus de baseline van tekst en die "marge" wordt dan veroorzaakt doordat er letters zijn zoals die onder de baseline vallen (zoals de 'g' bijv). Of interpreteer ik dat nu verkeerd?

Verder hier nog ff een nettere versie met dus ook vertical-align: bottom als oplossing (ja ik verveel me):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>test</title>
  <style type="text/css">      
      .box {
        background: url("gradient.gif") repeat-x 0 100px; /* ervanuitgaande dat je img 100px hoog is */
        margin-bottom: 10px;
        width: 170px;
      }
      
      .box img { vertical-align: bottom; }

      .box .copy {
        color: #fff;
        padding: 2px 8px 0 8px;
      }
      
      .box .corner {    
        width: 170px;
        height: 8px;
        font-size: 0;
      }
         
      .box .leftCorner { background: url("left.gif") no-repeat bottom left; }
      .box .rightCorner { background: url("right.gif") no-repeat bottom right; }
    </style>
</head>
<body>
  <div class="box">
    [img]"test.gif">
[/img]Lorem<br>ipsum<br>dolorLorem<br>ipsum<br>dolor</div>
    <div class="corner leftCorner"><div class="corner rightCorner"></div></div>
  </div>
</body>
</html>

[ Voor 77% gewijzigd door Sappie op 30-12-2005 13:47 ]

Specs | Audioscrobbler

vrijdag 30 december 2005 14:06

Acties:

crisp

Devver

Pixelated

Sappie schreef op vrijdag 30 december 2005 @ 13:44:
Oké.. dat wist ik niet; de baseline is dus de baseline van tekst en die "marge" wordt dan veroorzaakt doordat er letters zijn zoals die onder de baseline vallen (zoals de 'g' bijv). Of interpreteer ik dat nu verkeerd?

Nee, dat is correct

Intentionally left blank

vrijdag 30 december 2005 14:14

Acties:

Reveller

Hopla!

Topicstarter

@Sappie - ik had net je advies opgevolgd om dan maar 1 plaatje in de footer te plaatsen. Ik zal nu ook de vertical-align aanpassen. Toch zit ik nog met een probleem: is er een mogelijkheid om een link en vetgedrukte tekst een boven- en ondermarge mee te geven? Als je naar het beginplaatje van Sun kijkt, zie je dat er een marge zit tussen de witte titel en de zwarte tekst en de tekst en de link onderaan. Sun doet dit door de titel en de link in een aparte div te stoppen, die ze een marge meegeven. Maar je moet toch ook een element tussen <b> of <a> tags kunnen stylen? Het kan in ieder geval met line-height, maar dan heb je de marge aan de boven- en onderkant. Ik wil alleen aan de bovenkant (bij een link) en de onderkant (bij de titel tussen <b> tags). Iemand een idee?

Cascading Stylesheet:

.orange {
  background          : #E76F00 url("../newfiles/bg_sunorange.gif") repeat-x left bottom;
  margin-bottom       : 10px;
  width               : 170px;
  text-align          : left;
}

.orangeimg {
  display             : block;
}

.orange div.copy {
  color               : #000;
  padding             : 6px 8px 0 8px;
}

.orange div.copy b {
  color               : #fff;
  padding             : 0 0 10px 0;
}

.orange div.copy a {
  color               : #396B8C;
  text-decoration     : none;
  padding:            : 10px;
}

.orange div.corners {
  width               : 170px;
  height              : 8px;
  background          : url("../newfiles/b170.gif") no-repeat bottom left;
  padding             : 0;
  font-size           : 0;
}

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 30 december 2005 14:28

Acties:

Sappie

De Parasitaire Capaciteit!

Je kan aan elk block-level element margin-bottom en top meegeven. En van elk inline-level element kun je een block-level element maken. Echter gebruik je hiervoor beter de header elementen (<hx>, de x hangt hier dus af van de rest van je structuur) en alinea elementen (<p>). zoiets dus:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>test</title>
  <style type="text/css">      
      .box {
        background: url("gradient.gif") repeat-x 0 100px; /* ervanuitgaande dat je img 100px hoog is */
        margin-bottom: 10px;
        width: 170px;
      }
      
      .box img { vertical-align: bottom; }

      .box p, .box h4, .box a  { padding: 0 8px; margin: 5px 0; }
      
      .box p { color: #000; }
      .box h4 { color: #fff; font-weight: bold; }
      .box a { color: #555; }
      
      .box .corners {   
        width: 170px;
        height: 8px;
        font-size: 0;
        background: url("corners.gif") no-repeat bottom left;
      }
    </style>
</head>
<body>
  <div class="box">
    [img]"test.gif">
[/img]titel</h4>
    <p>lorem ipsum lorem ipsum</p>
    <a href="#">linkje</a>
    <div class="corners"></div>
  </div>
</body>
</html>

en mocht er altijd een link onderaan staan, dan kun je het allemaal nog ff netter maken; de div "corners" kan dan namelijk weg en je kan het als volgt oplossen:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>test</title>
  <style type="text/css">      
      .box {
        background: url("gradient.gif") repeat-x 0 100px; /* ervanuitgaande dat je img 100px hoog is */
        margin-bottom: 10px;
        width: 170px;
      }
      
      .box img { vertical-align: bottom; }

      .box p, .box h4, .box a  { padding: 0 8px; margin: 5px 0; }
      
      .box p { color: #000; }
      .box h4 { color: #fff; font-weight: bold; }
      
      .box a { 
        color: #555; 
        display: block; 
        margin: 5px 0 0 0; 
        height: 30px; 
        width: 154px; 
        background: url("corners.gif") no-repeat bottom left; 
      }
    </style>
</head>
<body>
  <div class="box">
    [img]"test.gif">
[/img]titel</h4>
    <p>lorem ipsum lorem ipsum</p>
    <a href="#">linkje</a>
  </div>
</body>
</html>

[ Voor 131% gewijzigd door Sappie op 30-12-2005 14:38 ]

Specs | Audioscrobbler