Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

CSS prob met tab menu

Pagina: 1
Acties:

Verwijderd

Topicstarter
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_
  • Registratie: Februari 2004
  • Laatst online: 18-11 15:20
(jarig!)
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 :P

There is no replacement for displacement!


  • Bozozo
  • Registratie: Januari 2005
  • Laatst online: 20-02 16:10

Bozozo

Your ad here?

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:
1
2
3
4
5
6
7
#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:
1
2
3
ul#navigation {
...
}


Ik denk dat hiermee je probleem ook is opgelost.

TabCinema : NiftySplit


  • DeZzL
  • Registratie: November 2002
  • Laatst online: 18-11 06:48

DeZzL

Rocket surgeon

Er zit waarschijnlijk nog margin/padding op bepaalde elementen.
Als je bovenaan in je CSS beide op 0 zet voor alle elementen
Cascading Stylesheet:
1
2
3
4
* { 
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:
1
2
3
div.tabs {
height:18px;
} 

Dan ben je denk ik al een heel eind. ;)

Verwijderd

Topicstarter
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
  • Registratie: November 2001
  • Laatst online: 01-07 22:34
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:
1
2
3
4
* { 
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
  • Registratie: September 2006
  • Laatst online: 18-11 19:30

Sebazzz

3dp

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.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07 22:34
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

Topicstarter
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

Topicstarter
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!
Pagina: 1