[CSS] wrapping, maar de top-padding moet groter zijn.

[Mastermind]

Ik heb een regel, die als hij te lang wordt doorgaat op de volgende regel.
Nu heb ik de border-top van deze regel alsvolgt:
border-top: 1px dashed #C0C0C0;

Hierdoor krijg je dit effect, de stippellijntjes is de dashed border aan de bovenkant:

-------------------------
lorem ipsum dolor
sit amet

Na dolor wordt de regel dus afgebroken omdat het het einde van de table is.
Nu wil ik die bovenste border eigenlijk nog een stuk hoger hebben, want hij zit nu te dicht op de bovenste regel.
Als ik echter
line-height:200%;
doe, staat de stippellijn wel op de juiste grotere afstand van de bovenste regel, maar de onderste regel staat ook op een grotere afstand van deze regel. De onderste regel moet er gewoon onder blijven zonder padding.

Nu heb ik een display:block geprobeerd, een padding-top maar ik krijg het niet voor elkaar..
Hoe maak ik het dat hij zo wordt:

-------------------------

lorem ipsum dolor
sit amet

p.s. Als je op de site in mijn homepage kijkt, kun je zien wat de reden is waarom ik dat wil.

[ Voor 4% gewijzigd door Mastermind op 19-09-2006 23:09 ]

[user109731]

Wat lukt er niet met display:block; en padding-top? Dat zou gewoon moeten werken nl.

Als ik echter
line-height:200%;
doe, staat de stippellijn wel op de juiste grotere afstand van de bovenste regel, maar de onderste regel staat ook op een grotere afstand van deze regel. De onderste regel moet er gewoon onder blijven zonder padding.

Hier zou je :first-line voor kunnen gebruiken eventueel.

[Mastermind]

Grote prutser schreef op dinsdag 19 september 2006 @ 23:20:
Wat lukt er niet met display:block; en padding-top? Dat zou gewoon moeten werken nl.

[...]

Hier zou je :first-line voor kunnen gebruiken eventueel.

Ja, volgens mij ook maar het werkt dus niet..

En wat je zegt heb ik geprobeerd maar er gebeurt niks.. Ik heb wel het juiste bestand ge-edit en CTRL-F5 gedaan.

Cascading Stylesheet:

.contentheading:first-line
{
         color: #000000;
         text-indent: 0px;
         font-weight: bold;
         line-height:200%;
         font-size: 18px;
}

.contentheading {
       color: #000000;
       text-indent: 0px;
       font-weight: bold;
        border-top: 1px dashed #C0C0C0;
        padding-bottom: 5px;

/*        display: block;
        padding-top: 30px;
        vertical-align: bottom; */
        font-size: 18px;
}

[user109731]

Ah okee, het gaat om een tabel... Volgens mij moet een padding-top voldoende zijn dan, is ook geen display:block ofzo voor nodig. Net getest met de webdeveloper toolbar in firefox btw (inline style padding-top:1em), en dat werkte. Aangezien een inline style wel werkt en een inline style altijd zwaarder weegt dan andere rules (specificity), lijkt het mij dat die regel .contentheading 'overschreven' word door een andere regel. Kijk dus even of je niet ergens anders de padding/margin instelt.

En het is first-line, niet firstline

[ Voor 26% gewijzigd door user109731 op 19-09-2006 23:42 ]

[Mastermind]

Het is geen tabel
Als je op de site kijkt kun je het zien. Het gaat om de headers van de nieuwsitems, dit zijn divjes op de tekst heen die het bold maken.

Maar er stond inderdaad een typefout in, alleen nu staat er nog steeds een dikke ruimte tussen de regels, en de top-border is ook niet meer te zien.

Cascading Stylesheet:

.contentheading:first-line
{
    color: #000000;
    text-indent: 0px;
    font-weight: bold;
         line-height:50px;
         font-size: 18px;
         border-top: 1px dashed #C0C0C0;
}

.contentheading {
        color: #000000;
        text-indent: 0px;
        font-weight: bold;
         padding-bottom: 5px;
         display: block;
         vertical-align: bottom;
         font-size: 18px;
         line-height:18px;
}

[user109731]

Ik zie toch echt dat op de site die ingesteld staat in je profiel .contentheading een td is, en geen div?

Vergeet dat first-line. Doe gewoon een padding-bottom op die .contentheading. Dat die niet werkt komt omdat in deze code::

Cascading Stylesheet:

table.content_table td {
  padding: 0px;
}
.contentheading {  
  padding-top:10px;
}

de eerste regel zwaarder weegt, zodat de padding op 0 word ingesteld. Maak je selector dus specifieker door extra elementnamen toe te voegen aan .contentheading in je css. Zoiets: table.content_table td.contentheading. edit: of maak de eerste minder specifiek natuurlijk

[ Voor 13% gewijzigd door user109731 op 19-09-2006 23:56 ]

[Mastermind]

Thanx zo werkt ie idd

Cascading Stylesheet:

table.contentpaneopen td.contentheading {
         border-top: 1px dashed #C0C0C0;
         color: #000000;
         text-indent: 0px;
         font-weight: bold;
         padding-top: 20px;
         display: block;
         font-size: 16px;
}