div menu's met "headers"

[Mopperman]

Ben bezig met een website voor onze opkomende lan party - nu werkte ik in het verleden nogal vaak en makkelijk met een standaard CMS

nu ben ik helemaal van voor af aan begonnen en ben ik me gaan verdiepen in css en div's, dit geheel verwerk ik uiteindelijk in een zelf gescript "cms systeem". Het gaat me goed af maar ik zit toch met 1 klein probleempje - ik wil nu "headers" in me menu's/blokken echter nu ik dat doe krijg ik mijn div's niet meer goed en netjes naast elkaar.

Ik snap er geen snars van - en ben nu al anderhalve week aan t pogen dit goed te krijgen met de hulp van google... Waarschijnlijk is t een klein foutje, maar ik zie door de bomen 't bos niet meer

hier de codes:

CSS:

Cascading Stylesheet:

*snip*

de html:

HTML:

*snip*

[ Voor 95% gewijzigd door RobIII op 11-08-2010 10:28 ]

[Ssander]

Als je #left een "float:left;" geeft (ipv. de inherit) staan ze weer netjes naast elkaar. Een erg nuttige site is de volgende;

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Hier staat duidelijk beschrijven (kijk naar de source) hoe een site te maken met drie kolommen, twee kolommen of met één kolom. Afhankelijk van hoever je wilt gaan met het leren van HTML / CSS zou je ook even hiernaar kunnen kijken;

http://www.webreference.com/programming/css_style2/

Hier wordt uitgelegd hoe je een menu maakt met behulp van een lijst. Jouw methode werkt in dit geval ook goed, maar als je echt meer wilt doen met HTML / CSS is het beter om lijsten te gebruiken. Naast dat het semantisch correct is heb je ook veel meer vrijheid over hoe je menu er uitziet.

In plaats van de hele rits aan elementen in je eerste css regel, kun je ook het sterretje * gebruiken.

De headers van de kolommen wil je in de kolommen zelf stoppen. Wanneer je dat niet doet heb je veel meer kans dat de headers zich ook nog eens los van de kolommen gaan bewegen. Kijk naar de eerste site die ik noem voor een goed voorbeeld.

[RobIII]

Euh, 242 regels CSS en 100 regels HTML is een beetje veel van 't goede. Begin eens met je te beperken tot enkel relevante(!) code en een "uitgeklede" testcase om je probleem te demonstreren

[Mopperman]

mijn excuses - zal vanavond een en ander even online plempen en aanpassen - had beetje haast vanochtend