vaste afstand tussen vakken in CSS

[niekfct]

hoi,

ik heb een vraag cool: )

ik heb met css een vak gemaakt:

#Inhoud {
background: black;
border: 1px dashed #FFCC99;
position: absolute;
margin-left: 152px;
padding: 0 10px;
top: 258px;
width: 527px;
}

nu wil ik er een vak onder maken, en dan moet ik handmatig aftasten hoeveel pixels de top dan moet zijn. Is hier geen makkelijkere manier voor, zodat alle vakken een vaste afstand tot elkaar hebben?

alvast bedankt,

 

[Johantrax]

misschienlukt het met position:relative; ipv absolute

met relative verplaats je een element tov zijn normaal bedoelde plaats
beschrijving relatief & absoluut positioneren (de 2 volgende items zijn dat)

--Johan

 

[niekfct]

kijk eens hier

als ik nu relative doe, dan komt het vakje met 'nieuws' ten opzichte van het plaatje bovenaan te staan, en niet van het vakje met 'welkom'. dus daar schiet ik nog niet heel veel mee op..

 

[jeroendenoot]

Je kunt het inderdaad op een makkelijkere manier doen. Je maakt een div die je positioneert met CSS en daarin zet je meerdere vakjes. Zo dus ongeveer:

<div id="inhoud">
<div class="vakje">Vak 1</div>
<div class="vakje">Vak 2</div>
</div>

Succes! :thumb:

 

[niekfct]

als ik dat doe, komen de twee zijkanten heel ergens anders te staan, en die 2 middelste vakken komen in 1 vak, en dat laatste wil ik nou juist niet (dat eerste natuurlijk ook niet )

 

[jeroendenoot]

Als je het goed doet niet hoor...

CSS:

#inhoud {
background: black;
position: absolute;
margin-left: 152px;
top: 258px;
width: 527px;
}

.vak {
border: 1px dashed #FFCC99;
padding: 0 10px;
margin: 10px 0;
}

HTML:

<div id="inhoud">

<div class="vak">
<p>
<IMG SRC="images/welkom.gif" HEIGHT=30px><BR><BR>
</p>
</div>

<div class="vak">
<p>
<IMG SRC="images/nieuws.gif" HEIGHT=30px><BR><BR>
</p>
</div>

</div>

Werkt het zo niet?

 

[niekfct]

jaa dit werkt :thumb:

en hoe moet het als ik de navigatie en de links op dezelfde manier wil doen dan? want dan komt het er bij mij niet echt lekker uit..

 

[jeroendenoot]

Ja dan doe je zoiets:

CSS:

#linkerkant {
position: absolute;
top: 258px;
width: 142px;
}

#navigatie {
list-style: none;
}

HTML:

<div id="linkerkant">
<div id="navigatie" class="vak">

	<h1><center>
		<IMG SRC="images/menu.gif" HEIGHT=30px><BR><BR>

		<A HREF="../index.htm" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')">
		<IMG SRC="images/home.jpg" NAME="image1" BORDER="0" WIDTH="124px"></a>

		<A HREF="bestuur.htm" onMouseOver="turnOn('image2')" onMouseOut="turnOff('image2')">
		<IMG SRC="images/bestuur.jpg" NAME="image1" BORDER="0" WIDTH="124px"></a>

		<A HREF="contact.htm" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')">
		<IMG SRC="images/contact.jpg" NAME="image1" BORDER="0" WIDTH="124px"></a>

		<A HREF="gastenboek.htm" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')">
		<IMG SRC="images/gastenboek.jpg" NAME="image1" BORDER="0" WIDTH="124px"></a>

		<A HREF="forum.htm" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')">
		<IMG SRC="images/forum.jpg" NAME="image1" BORDER="0" WIDTH="124px"></a>

		<A HREF="agenda.htm" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')">
		<IMG SRC="images/agenda.jpg" NAME="image1" BORDER="0" WIDTH="124px"></a>


		</center></h1>
</div>
<div class="vak">
<p>
links
</p>
</div>
</div>

 

[niekfct]

jaaaaa... gelukt !
bedankt!