Ik heb een kort geleden een topic geopend over het verticaal centreren van tekst, maar ik zag pas nadat mijn topic was gesloten dat ik mijn vraag verkeerd had gestald. 
stom van mij. Ik heb nog eens een paar uur naar een oplossing gezocht, zowel op Google als tussen de al geplaatste topics.
Ik heb een paar topics gevonden waarin het zelfde probleem als wat ik had stond vermeld. Echter werkte deze oplossingen bij mij niet.
Ik ben bezig met het maken van een menubalk. De website waar menubalk in komt te staan moet ook geschikt zijn voor tablets, vandaar dat ik duidelijk de scheiding tussen de menu items heb weergegeven (de menu items lijken dan meer op knoppen). Ook heb ik vanwege deze reden gezorgd dat de breedte van elk menu zich aanpast aan de breedte van het browservenster.
Het probleem is dat bij het menu item "boomtechnisch advies" het tweede woord "advies" onder het eerste woord "technisch" wordt weergegeven als het browservenster wordt verkleint. Dit past niet in het listitem. Als ik de breedte van het listitem vergroot dan past dit wel, maar dan staan de andere menu items weer niet verticaal gecentreerd. Dit kan ik oplossen door een line-height toe te voegen, maar dan passen de twee woorden technisch en advies niet meer onder elkaar. Als ik de display verander in table en data-cell dan klopt mijn indeling met de strepen als scheiding niet. Waarom deze indeling verpest wordt snap ik niet.
Weet iemand hoe ik kan voorkomen dat de indeling verpest wordt als ik de display naar table en data-cell verander of hoe ik op een andere manier de tekst verticaal kan centreren?
Dit is mijn html:
<!DOCTYPE html>
<html>
<head>
<link href="tweakers.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id=menu>
<ul>
<li>Home</li>
<li>Boomspecialist</li>
<li>Boomverzorging</li>
<li>Boomtechnisch advies</li>
<li>Overig</li></a>
<li id=laatste>contact</li
</ul>
</div>
</body>
</html>
Dit is mij CSS:
body {
margin:0;
padding:0;
}
#menu ul {
background:RGB(154,202,52);
width:100%;
height:2em;
padding:0;
margin:0;
border-style:solid;
border-color:RGB(28,66,57);
border-width:0.5em 0 0.5em 0;
}
#menu li {
display:block;
position:relative;
bottom:0.5em;
background:RGB(28,66,57);
list-style:none;
float:left;
width:16.5%;
height:1em;
text-align:center;
color:RGB(154,202,52);
font-family:sans-serif;
margin:0 0.2% 0 0;
padding:1em 0 1em 0;
}
li#laatste {
margin:0;
}
stom van mij. Ik heb nog eens een paar uur naar een oplossing gezocht, zowel op Google als tussen de al geplaatste topics.Ik heb een paar topics gevonden waarin het zelfde probleem als wat ik had stond vermeld. Echter werkte deze oplossingen bij mij niet.
Ik ben bezig met het maken van een menubalk. De website waar menubalk in komt te staan moet ook geschikt zijn voor tablets, vandaar dat ik duidelijk de scheiding tussen de menu items heb weergegeven (de menu items lijken dan meer op knoppen). Ook heb ik vanwege deze reden gezorgd dat de breedte van elk menu zich aanpast aan de breedte van het browservenster.
Het probleem is dat bij het menu item "boomtechnisch advies" het tweede woord "advies" onder het eerste woord "technisch" wordt weergegeven als het browservenster wordt verkleint. Dit past niet in het listitem. Als ik de breedte van het listitem vergroot dan past dit wel, maar dan staan de andere menu items weer niet verticaal gecentreerd. Dit kan ik oplossen door een line-height toe te voegen, maar dan passen de twee woorden technisch en advies niet meer onder elkaar. Als ik de display verander in table en data-cell dan klopt mijn indeling met de strepen als scheiding niet. Waarom deze indeling verpest wordt snap ik niet.
Weet iemand hoe ik kan voorkomen dat de indeling verpest wordt als ik de display naar table en data-cell verander of hoe ik op een andere manier de tekst verticaal kan centreren?
Dit is mijn html:
<!DOCTYPE html>
<html>
<head>
<link href="tweakers.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id=menu>
<ul>
<li>Home</li>
<li>Boomspecialist</li>
<li>Boomverzorging</li>
<li>Boomtechnisch advies</li>
<li>Overig</li></a>
<li id=laatste>contact</li
</ul>
</div>
</body>
</html>
Dit is mij CSS:
body {
margin:0;
padding:0;
}
#menu ul {
background:RGB(154,202,52);
width:100%;
height:2em;
padding:0;
margin:0;
border-style:solid;
border-color:RGB(28,66,57);
border-width:0.5em 0 0.5em 0;
}
#menu li {
display:block;
position:relative;
bottom:0.5em;
background:RGB(28,66,57);
list-style:none;
float:left;
width:16.5%;
height:1em;
text-align:center;
color:RGB(154,202,52);
font-family:sans-serif;
margin:0 0.2% 0 0;
padding:1em 0 1em 0;
}
li#laatste {
margin:0;
}
/u/379725/helloworld.png?f=community)
/u/262310/ava.png?f=community)
/u/88456/crop5bf2f0f12fa48_cropped.png?f=community)
