[CSS]Kleine blokjes onder elkaar

[Verwijderd]

Ik wil 12 kleine blokje onder elkaar hebben (h20-h160) ik had dit voorheen met breaks gedaan alleen na lettertype verandering klopt de afstand niet meer tussen de blokken. Kan iemand me vertellen hoe ik dit kan doen? Ik heb gekeken op verschillende pagina's maar kan niks vinden.
Ik heb dus <br> geprobeerd maar ook dingen met position die niet werkte.

Ik wil ook niet 12 blokken maken die ik met position onder elkaar moet zetten want dat zou klote zijn.

(bedoeling is dus 12 blokje onder elkaar, met de de boven en onder randen tegen elkaar aan)


Alvast bedankt

[BtM909]

Waarom maak je niet een container div met een bepaalde breedte

[Verwijderd]

die blokjes zitten al in een container met een vaste breedte (nl. net zo breed als de blokken) maar ze moeten onder elkaar dus dat veradnerd de zaak niet, als ze neit in een container zouden zitten krijg ik hetzelfde.

[TeeDee]

Cascading Stylesheet:

clear:both;
margin:0px;
padding:0px;

Zoiets?

[BtM909]

Verwijderd schreef op 30 september 2004 @ 14:28:
die blokjes zitten al in een container met een vaste breedte (nl. net zo breed als de blokken) maar ze moeten onder elkaar dus dat veradnerd de zaak niet, als ze neit in een container zouden zitten krijg ik hetzelfde.

Ah, dus je hebt code, laat eens zien wat je hebt. Want, mijn inziens, klopt mijn antwoord wel degelijk

[dream0r]

Is een list geen optie? Geef je die li's een vaste breedte + hoogte.

[ Voor 50% gewijzigd door dream0r op 30-09-2004 14:45 ]

[Verwijderd]

Dit is een stukje CSS

code:

.nav_blokblauw
{
    background-color:#000066;
    position:absolute;
    left:1px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bolder;
    height:20px;
    width:163px;
    text-shadow:Gray;
    color:#FFFFFF;
    border-top: 2px solid #CBCBCB;
    border-left: 2px solid #CBCBCB;
    border-right: 2px solid #CBCBCB;
    border-bottom: 0px solid #CBCBCB;
}

.nav_blokken
{
    position:absolute;
    left:1px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    height:20px;
    width:163px;
    color:#000000;
    border-top: 2px solid #CBCBCB;
    border-left: 2px solid #CBCBCB;
    border-right: 2px solid #CBCBCB;
    border-bottom: 0px solid #CBCBCB;

}

.nav_blokbottom
{
    position:absolute;
    left:1px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    height:20px;
    width:163px;
    border-top: 2px solid #CBCBCB;
    border-left: 2px solid #CBCBCB;
    border-right: 2px solid #CBCBCB;
    border-bottom: 2px solid #CBCBCB;
}

Dit is de html code (het stukje waar het om gaat dan)

code:

<div class="nav_bedrijven">
<div class="nav_blokblauw">Bedrijven</div>
<br>
<div class="nav_blokken"><a href="404.htm">Media</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Horeca</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Auto</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Sport</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Handel</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Muziek</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Tuin</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Toerisme</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Onderwijs</a></div>
<br>
<div class="nav_blokken"><a href="404.htm">Overheid</a></div>
<br>
<div class="nav_blokbottom"><a href="404.htm">Woning</a></div>
  </div>

de blokjes zaten precies goed voordat ik lettertype ging veranderen, dus het heeft waarschijnlijk met de line-height te maken ofzow.

[Verwijderd]

dream0r schreef op 30 september 2004 @ 14:44:
Is een list geen optie? Geef je die li's een vaste breedte + hoogte.

Kun je met list ook tekst in een blok zetten dus dat je opsommingstekens ook je kader worden voor de teklst? lijkt me niet he.

toch bednakt voor de reacties

[TeeDee]

1: ranzige HTML
maar als je toch zo wil werken:
2: haal tussen al je divjes de <br> weg
3: zet bij de bovenstaande css overal een "clear:both;" bij
4: haal de absolute positie weg.
5: maak 1 "container" div om je "nav" heen. en position die.
6: gebruik een list
7: gebruik een list
en 8, je raadt het al: gebruik een list.

6, 7 en 8 schelen je een hoop onnodige code!

Kun je met list ook tekst in een blok zetten dus dat je opsommingstekens ook je kader worden voor de teklst? lijkt me niet he.

Jawel, display:block;

[ Voor 32% gewijzigd door TeeDee op 30-09-2004 14:58 ]

[BtM909]

Verwijderd schreef op 30 september 2004 @ 14:56:
[...]


Kun je met list ook tekst in een blok zetten dus dat je opsommingstekens ook je kader worden voor de teklst? lijkt me niet he.

toch bednakt voor de reacties

Jazeker wel

Ik snap nu iig niet meer wat je probleem is, want het werkt gewoon bij mij (ja zonder <br>). Het enige wat ik weggehaald hebt, is die position: absolute en left: 1.

In welke browsers test je en wat is precies je probleem

code:

border-top: 2px solid #CBCBCB;
border-left: 2px solid #CBCBCB;
border-right: 2px solid #CBCBCB;
border-bottom: 0px solid #CBCBCB;

Kan je ook herschrijven als:

code:

border: 2px solid #CBCBCB;
border-bottom: 0;

[Verwijderd]

de html layout is verneukt door de code maar anyhow, bednakt voor de reactie ik zal ff kijken of het werkt.

[TeeDee]

Verwijderd schreef op 30 september 2004 @ 14:59:
de html layout is verneukt door de code maar anyhow, bednakt voor de reactie ik zal ff kijken of het werkt.

Wat ga je nu proberen?
Een list?

Zo ja, zou je dan je oplossing kunnen posten, zodat we er wat aan hebben voor het "archief".

offtopic:
@BtM909: uhuh, maar toch, persoonlijk vind ik het irritant als mensen de oplossing niet posten. Vandaar dat ik het even "verzoek"

[ Voor 19% gewijzigd door TeeDee op 30-09-2004 15:05 ]

[BtM909]

TeeDee schreef op 30 september 2004 @ 15:01:
[...]

Wat ga je nu proberen?
Een list?

Zo ja, zou je dan je oplossing kunnen posten, zodat we er wat aan hebben voor het "archief".

Geloof me, de oplossing is al meerdere keren gegeven in vele topics over dit soort menu's.


Handige links om een menu te positioneren met een List:
• http://www.simplebits.com...styling_nested_lists.html
• http://css.maxdesign.com.au/listutorial/index.htm
• http://css.maxdesign.com.au/listamatic2/
• http://www.alistapart.com/articles/taminglists/

[ Voor 3% gewijzigd door BtM909 op 30-09-2004 15:03 ]

[Verwijderd]

ik ben eerst ff dat aan het proberen van TDM nogiets, als dat niet werkt dat van jou, als het wel werkt ga ik kijken wat al die dingen kunne die jij zei want ik ben een CSS n00b (ja joh??) dus alle tips zijn welkom.

Als je toevallig tips hebt hoe ik mijn css en html schoner kan houden zijn ze welkom want ik merk dat dat een struikelblok is bij fouten opsporen.