een horizontaal menu links uitlijnen

[Matlock]

Ik heb in de .html een div gemaakt met een id="link".

Er zijn in die div 7 links die ik horizontaal uitlijn.

Dus <p><a href......>item1></a></p ---> zo 7 maal

In de .css heb ik staan:

#link

{padding:20px 0px 30px 0px;

}

#link p

{display:inline;

}

#link p a

{text-decoration:none;

}

Ik zou graag het menu links tegen de kant uitlijnen en dan de overige items verdelen over de lengte zodanig dat de tussenruimte tussen de items gelijk is.

Graag zou ik ook de bezochte links een andere kleur geven, zet ik dan gewoon achter #link p a:visited?

Ik zit in de war met de padding denk ik. Moet ik nog iets instellen met margin?

Met dank voor jullie reactie.

Groetjes

Matlock

[stegisoft]

Je kan in css zo doen:

#wrapper {

width: 720px; <--geeft hier de breedte

margin: 0 auto;

text-align: left;

background-color: #dbd3d3;

}

Indien je een bovenstuk wilt dan zo:

#header {

margin: 0 0 0 0;

background: #b95c5c;

font-size: 18px;

font-style: italic;

line-height: normal;

font-weight: bold;

text-align:center;

color: #f2d4d4;

}

#colomlinks {

float: left;

width: 150px; <--geeft hier de breedte

background-color: #cfbcbc;

margin: 0;

}

#colommidden {

margin: 0;

float: left;

background-color: #e8e1bd;

width: 420px; <--geeft hier de breedte

margin: 0;

}

#colomrechts {

margin: 0;

float: left;

background-color: #cfbcbc;

width: 150px; <--geeft hier de breedte

margin: 0;

}

Indien je onder ook een balk wilt dan zo doen:

#footer {

clear: both;

background: #b95c5c;

font-size: 16px;

font-style: italic;

line-height: normal;

font-weight: bold;

text-align:center;

color: #f2d4d4;

}

<div id="wrapper">

<div id="header">Boven</div>

<div id="colomlinks">Links</div>

<div id="colommidden">Midden </div>

<div id="colomrechts">rechts</div>

<div id="footer">Onder</div>

</div>

Nu kan je de hoogte opgeven van div enz.

Je kan tussen <div></div> nog eens een <div></div> gebruiken

[Matlock]

Dank U Stegisoft voor uw snelle reactie! Hetgeen u schrijft in uw reactie volg ik helemaal, maar onder die header wil ik een horizontaal menu en graag zou ik het zo willen:

Item1 item2 item3 item4 item5 item6 item7 ----> dit over de volledige breedte(720px) in uw voorbeeld.

De ruimte bepalen tussen item1 en item2 en item3 enz door iets in de css te zetten. Item1 zou links tegen de kant moeten staan en item 7 rechts tegen de kant.

Volstaat misschien: text-align:center; ?

Met dank voor uw raad

Matlock

[stegisoft]

Maakt eens een tekening hoe je zou willen hebben en dat is voor ons beter.

Tekening kan je maken met een tekenprogramma.

[leroy]

Ik denk dat je dit het beste met list-items aan moet pakken.

Je broncode wordt dan dit:

<div id="menu">
<ul>
	<li><a href="home.html">home</a></li>
	<li><a href="pagina1.html">pagina 1</a></li>
	<li><a href="pagina2.html">pagina 2</a></li>
	<li><a href="pagina3.html">pagina 3</a></li>
</ul>
</div>

Je stylesheet wordt het volgende:

#menu{
text-align:left;
}
#menu ul{
margin:0px;
padding:0px;
}
#menu ul li{
display:inline;
margin:0px 10px;
}
#menu ul li a{
text-decoration:none;
color:#000000;
}

Even korte uitleg:

Je div met id: menu krijgt dan een text-align die staat op left. Dat wilt zeggen dat alles aan de linkerkant uitgelijnd staat in die div.

de ul (unordered list) geef je een margin en padding van 0px. Hiermee wordt het menu in alle browsers fatsoenlijk weergegeven.

De li (listitems) hebben dan een display: inline. Dat wilt zeggen dat ze niet onder elkaar maar naast elkaar opgesteld worden. (een horizontaal menu).

Hierop geef je nog een margin links en rechts van 10px. waardoor de menuitems een klein stukje uit elkaar staan.

De a (anchor oftewel link tags) geef je dan geen text-decoratie zodat er geen streepje onder komt te staan, en een vaste kleur. Dit omdat wanneer je een link hebt bezoekt het mogelijk is dat de linkkleur van blauw naar paars veranderd wordt.

Als het goed is is dit hetgeen wat je wilt.

Groeten,

Leroy

[Matlock]

Leroy,

Bedankt voor de uitleg, dat is exact wat ik wou!

Ook mijn dank aan Stegisoft voor de reactie en uitleg!

Groeten.