CSS prob met tab menu

[Verwijderd]

Beste,

Tijdens het ontwerpen van mijn website dacht ik er aan tabs te gebruiken als navigatie. Op deze site http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml vond ik goede informatie. Deze gebruikte ik dan ook. Zoals u op mijn testpagina kunt zien, zit er ruimte tussen de tabs en de rode balk. Dit is echter niet de bedoeling. Weet iemand hoe ik van die ruimte af raak? Ik kan er eigenlijk niet echt meer aan uit.

theknight003

[_eXistenZ_]

Je doet wel een beetje raar positioneren imho
Probeer je site eerst op z'n plek te zetten met postiion: absolute: en left: en top:, ipv met margins.
Waarschijnlijk gaat dit probleem ook voorbij dan.
Als je hier geen zin aan hebt kan je je div waar de ul met alle tabs in staan 1px hoog maken, werkt in Fx maar is wel een lelijke manier

[Bozozo]

Welnee, absoluut positioneren is juist minder goed dan werken met margins. Ik vind het een nette site.

Wel heb ik de indruk dat je je eigen CSS niet helemaal goed begrijpt. Voorbeeldje:

Cascading Stylesheet:

#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}

Hiermee zeg je: voor alle elementen van het type 'Unordered list' binnen het element met ID 'navigation', doe dit: ...

Wat je bedoelt is: voor 'unordered list' met ID 'navigation' doe dit: ....

Dat schrijf je zo:

Cascading Stylesheet:

ul#navigation {
...
}

Ik denk dat hiermee je probleem ook is opgelost.

[DeZzL]

Er zit waarschijnlijk nog margin/padding op bepaalde elementen.
Als je bovenaan in je CSS beide op 0 zet voor alle elementen

Cascading Stylesheet:

* { 
margin:0;
padding:0;
}

Of je importeerd b.v. eerst een reset.css.
En daarnaast vul je de goede hoogte in voor div.tabs in

Cascading Stylesheet:

div.tabs {
height:18px;
} 

Dan ben je denk ik al een heel eind.

[Verwijderd]

Het is me gelukt! Als ik correct positioneerde in FF was er een witte rand van 1px tussen de tabs en de rode balk. Mijn (geniale) inval: De h2 een margin-top van 1px geven en de tabhoogte 1px kleiner maken en het werkte!! Check het resultaat maar! Bedankt voor jullie hulp!

[Fuzzillogic]

DeZzL schreef op zaterdag 01 maart 2008 @ 21:04:
Er zit waarschijnlijk nog margin/padding op bepaalde elementen.
Als je bovenaan in je CSS beide op 0 zet voor alle elementen

Cascading Stylesheet:

* { 
margin:0;
padding:0;
}

Die 'truuk' moet je je toch heel snel afleren, want je schiet er niets mee op. Pas alleen die stijlen aan die je aan wilt passen.

[Sebazzz]

Verwijderd schreef op zondag 02 maart 2008 @ 14:04:
Het is me gelukt! Als ik correct positioneerde in FF was er een witte rand van 1px tussen de tabs en de rode balk. Mijn (geniale) inval: De h2 een margin-top van 1px geven en de tabhoogte 1px kleiner maken en het werkte!! Check het resultaat maar! Bedankt voor jullie hulp!

Nu nog voor Firefox 3 Je pagina titel neemt hier een kwart van de pagina in beslag.
Je CSS en je XHTML is wel valide. Zeker een bug in Firefox ofzo.

[Fuzzillogic]

Ook in Opera hoor. Maar de

div.headingcontainer {
height: 300px;
}

verklaart al veel

Beide div-containers, en de width: 100% zijn trouwens overbodig hier, je kunt alles ook wel gewoon in de heading kwijt.

[Verwijderd]

Fuzzillogic schreef op zondag 02 maart 2008 @ 14:26:
Ook in Opera hoor. Maar de

div.headingcontainer {
height: 300px;
}

verklaart al veel

Beide div-containers, en de width: 100% zijn trouwens overbodig hier, je kunt alles ook wel gewoon in de heading kwijt.

In Opera klopt het toch? Ik heb het net even geïnstaleerd (9.26) en alles is perfect...

EDIT: Ik zie net dat er nog steeds een wit randje zichtbaar is in Opera... Any ideas?

[ Voor 9% gewijzigd door Verwijderd op 02-03-2008 17:41 ]

[Verwijderd]

Als je nou van h2.pagetitle de margin-top in padding-top veranderd, dan is alvast dat randje in Opera weg. Daarna zul je ook nog je menu (die staat nog steeds op float:left) moeten 'clearen', door aan je 'headingcontainer' een 'clear:both' mee te geven. (anders vliegt je titel naar rechts) Dan zou hij het overal goed moeten doen. Ik vroeg me trouwens af waarom je bij 'html' een hoogte van 100% meegeeft. Voor zover ik het kan zien voegt dat niets toe (maar ik kan het mishebben )

[ Voor 15% gewijzigd door Verwijderd op 03-03-2008 14:13 ]

[Verwijderd]

Kijk, daar kan ik nu iets mee doen!! Heb het even uitgetest, en het ziet er naar uit alsof het perfect werkt! Die html --> heigth: 100% komt nog uit een vorige fase van de site, dit heb ik alvast even gestript. Scheelt weer bandbreedte en snelheid voor de user. Echt bedankt iedereen!