Ondersteuning Volgende » CSS / opmaak vragen Volgende » Witruimte onder Header (H3) aanpassen

  • Opgelost maikel9112

    (@maikel9112)


    Ik gebruik een H1 en H2 welke een witruimte onder de titel geeft, nu wil ik een H titel maken. Dat heb ik gedaan maar deze moet juist geen witruimte mee krijgen. Hoe realiseer ik dit? Ik heb nu dit, werkt allemaal maar de H3 moet dus geen extra witruimte onder de titel….

    h1,h2,h3,h1 a,h2 a,h3 a,h1 a:visited,h2 a:visited,h3 a:visited{font-weight:normal;font-style:normal;text-decoration:none;}
    h1,h1 a,h1 a:link,h1 a:visited{font-family:Arial,Helvetica,Sans-Serif;font-size:22px;font-style:normal;font-weight:bold;text-align:left;color:#202020;}
    h2,h2 a,h2 a:link,h2 a:visited{font-family:Arial,Helvetica,Sans-Serif;font-size:22px;font-style:normal;font-weight:bold;text-align:left;color:#202020;}
    h3,h3 a,h3 a:link,h3 a:visited{font-family:Arial,Helvetica,Sans-Serif;font-size:13px;font-style:normal;font-weight:bold;text-align:left;color:#202020;}
15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  • Allereerst, zorg dat je css overzichtelijker is. Ik doe dit bijvoorbeeld door jouw css als volgt te schrijven:

    h1,
    h2,
    h3,
    h1 a,
    h2 a,
    h3 a,
    h1 a:visited,
    h2 a:visited,
    h3 a:visited { font-weight: normal; font-style: normal; text-decoration: none; }
    
    h1,
    h1 a,
    h1 a:link,
    h1 a:visited,
    h2,
    h2 a,
    h2 a:link,
    h2 a:visited,
    h3,
    h3 a,
    h3 a:link,
    h3 a:visited { font-family: Arial, Helvetica,Sans-Serif; font-size: 22px; font-style: normal; font-weight: bold; text-align: left; color: #202020; }
    
    h3,
    h3 a,
    h3 a:link,
    h3 a:visited { font-size: 13px; /*toevoeging:*/ margin-bottom: 0; padding-bottom: 0; }

    Wat er dus na ‘/*toevoeging*/’ komt is dus het weghalen van een eventuele padding of margin van onder die op h3 gedefinieerd staat.

    Helaas is dit niet de oplossing, er lijkt dus iets anders in de weg te zitten…
    Wat betreft het structureren van de code geef ik je gelijk!

    Misschien is het handiger dat je even een url geeft met daarin de verwijzing wat je nu precies wilt doen. Kan best zijn dat iets anders de css tegenwerkt omdat we niet het gehele plaatje zien.

    Bijvoorbeeld: http://www.landenkompas.nl/alaska

    Alle kopjes zoals Algemene informatie, reisadvies, reisaanbod enz. zijn nu gewoon geplaatst als titel.
    Graag wil ik hier een H3 titel van maken.
    Het werkt wel maar er wordt witruimte toegevoegd net zoals bij h1 en h2, die je bijvoorbeeld op http://www.landenkompas.nl/reisaanbod ziet. Reisaanbod is een H1 titel, Reissoorten en Reisonderdelen een H2 titel.

    Ik zie al wat je bedoelt. De H3 heeft standaard een margin boven en onder. Die verwijder je door onderin je CSS het volgende te typen:

    h3,
    p > h3,
    .PostContent > p > h3 { margin: 0; }

    Door de H3 op deze manier te benaderen zorg je ervoor dat ie op verschillende manieren goed wordt meegenomen (is een stukje zekerheid).

    Je moet dan alleen nog af van die <br> die onder je titel standaard wordt geplaatst: zie screenshot hieronder. Die zorgt namelijk ook voor een ruimte tussen titel en tekst.

    Screenshot break

    Beste Ruud, helaas lijkt ook dit niet te helpen.
    Of moet ik het combineren met de code die je eerder heb gegeven?
    Ik zie wel dat als ik een h3 maak dat er automatisch een <p> element voor de tekst wordt geplaatst de volgt, wat dus een witruimte geeft.

    Dit werkt wel

    h1, h2, h3, h1 a, h2 a, h3 a, h1 a:visited, h2 a:visited, h3 a:visited {
    	font-weight: normal;
    	font-style: normal;
    	text-decoration: none;
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    maikel9112

    (@maikel9112)

    Bedankt voor het meedenken. Het gaat niet lukken omdat WordPress automatisch een <p> element voor de tekst onder de titel plaatst met bijbehorende witruimte. Als ik deze witruimte uitschakel, verdwijnt deze overal ook op plaatsen waar deze wel gewenst is.

    Allicht is het handiger dat je even 1 pagina inricht met de titels zoals je die wilt? We zijn nu aan het speculeren over een opmaak die niet bestaat. Zodra je dit hebt gedaan help ik je graag verder.

    Bij het H2 element wordt geen p geplaatst. Het is de H2 die een margin onder en boven heeft.

    maikel9112

    (@maikel9112)

    Op http://www.landenkompas.nl/aland heb ik nu drie kopjes als h3 geplaatst; reisadvies, reisaanbod en reisgidsen. Die witruimte die onder de titel komt, moet weg. Maar zover ik kan zien ontstaat dit door het p element. Eerst werd deze zo geplaatst door WordPress:
    <p>Titel</strong
    tekst</p>

    En met h3 titel zo:
    <h3>Titel</h3>
    <p>tekst</p>

    Volgens mij haal je alles door de war. De witruimte die ontstaat komt nu door

    .article img, img.article {
        margin: 1em;

    In firefox kun je eenvoudig rechtermuisknop/inspecteren zien wat de css doet en eventueel veranderen.
    1em is best veel voor onder een image.
    Begrijp ook niet dat je zo ’n ouderwets thema gebruikt.
    Niks schaalbaar of responsive. geen gezicht op een tablet.
    Eerste uitgave is uit 2009…

    • Deze reactie is gewijzigd 1 maand geleden door  robelia.
    • Deze reactie is gewijzigd 1 maand geleden door  robelia.
    maikel9112

    (@maikel9112)

    1. De titels die ik noem hebben niets met de img te maken.
    2. De ruimte rondom de plaatjes is bewust voor gekozen.
    3. Het thema is inderdaad uit 2009, toen ben ik met de website gestart. Omzetten geeft grote problemen, heb dit al eens geprobeerd.
    4. Ik zie niets vreemds op de i-pad. Wat voor tablet gebruik jij?

    h3 + p { margin-top: 0; }

    maikel9112

    (@maikel9112)

    Ik ben eruit! Bedankt voor alle hulp.

    Oplossing was:
    p{margin-top:0;}
    h3,h3 a,h3 a:link,h3 a:visited{font-family:Arial,Helvetica,Sans-Serif;font-size:13px;font-style:normal;font-weight:bold;text-align:left;color:#202020;margin-bottom:0;}

    • Deze reactie is gewijzigd 1 maand geleden door  maikel9112.
15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)