Witruimte onder Header (H3) aanpassen

Opgelost

(@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)

1 2 →

Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden
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.
Thread starter maikel9112
(@maikel9112)

6 jaren, 4 maanden geleden

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!

Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden

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.

Thread starter maikel9112
(@maikel9112)

6 jaren, 4 maanden geleden

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.
Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden
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
Thread starter maikel9112
(@maikel9112)

6 jaren, 4 maanden geleden

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.
robelia
(@robelia)

6 jaren, 4 maanden geleden
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;
}
```
Thread starter maikel9112
(@maikel9112)

6 jaren, 4 maanden geleden

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.

Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden

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.

robelia
(@robelia)

6 jaren, 4 maanden geleden

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

Thread starter maikel9112
(@maikel9112)

6 jaren, 4 maanden geleden

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>
robelia
(@robelia)

6 jaren, 4 maanden geleden
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 6 jaren, 4 maanden geleden door robelia.
- Deze reactie is gewijzigd 6 jaren, 4 maanden geleden door robelia.
Thread starter maikel9112
(@maikel9112)

6 jaren, 4 maanden geleden

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?

Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden

h3 + p { margin-top: 0; }
Thread starter maikel9112
(@maikel9112)

6 jaren, 4 maanden geleden
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 6 jaren, 4 maanden geleden door maikel9112.