Tekst rond menu

[henk653]

heb een vraagje ik heb een menu gemaakt in css nu wil ik rond dit menu mijn tekst hebben weet alleen niet hoe dat moet kan iemand mijn een beetje op de goede weg helpen a.u.b

#navigatie {
 font-family: verdana, Helvetica, Arial, sans-serif;
 font-size: 14px;
 font-weight: bold;
 width:20%;
 border-right: 1px solid #666;
 padding: 0;
 margin-bottom: 1em;
 color: #333;

}
#navigatie ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navigatie ul li {
 margin: 0;
 border-top: 1px solid #003;
}
#navigatie ul li a {
 display: block;
 padding: 2px 2px 2px 4px;
 border-left: 10px solid #369;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #036;
 color: #fff;
 text-decoration: none;
 width: 80%;
}
 #navigatie ul li a {
 width:auto;
}
#navigatie ul li a:hover {
 border-left: 10px solid #036;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #69f;
 color: #fff;
}

dus de tekst moet beginnen naast het menu

 

[csshunter]

Hoi henk653,
Dat kan door het menu te laten "floaten" (drijven) aan de linkerkant. De tekst van de inhoud komt er dan naast te staan ter hoogte van het menu. En de tekst van de inhoud gaat dan onder het menu doorlopen, zodra er geen menu meer is.
Om dat laatste te vermijden, kan van de inhoud een aparte <div> gemaakt worden met altijd een bepaalde afstand tot de linkerkant van het scherm.
De css wordt dan zoiets als:

#navigatie {
   float: left;
   width: 20%;
   ...
}
#inhoud {
   margin-left: 21%;
}

met als volorde in de html:

<div id="navigatie">
   ...
</div>

<div id="inhoud">
   <h1>Steef bouwt</h1>
   ...
</div>

Succes!

Met vriendelijke groet,
CSShunter

PS: Ken je deze cursus? Is erg goed! - Je kunt ook hier eens een kijkje nemen, waar een aantal float-voorbeelden gegeven worden.

 

[henk653]

bedankt

oke heel erg bedankt he het is gelukt en de link van webgarde staat in me favorieten


bedankt :thumb: