login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Prob met tab menu (Opgelost)

Offline nvp007 - 01/03/2008 16:13
Avatar van nvp007Nieuw lid Beste,

Tijdens het ontwerpen van mijn website dacht ik er aan tabs te gebruiken als navigatie. Op deze site http://www.webc...ners.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.

NVP007

13 antwoorden

Gesponsorde links
Offline Tanchelyn - 01/03/2008 17:10
Avatar van Tanchelyn Nieuw lid Als ge de margin van uw div.headingcontainer instelt op

margin: -35px auto 0 auto

meen ik dat het probleem opgelost is.


Als ge dus ergens een waarde van 35 px gebruikt hebt, zou die u wel eens parten kunnen spelen. Het lijkt dus wel alsof de hoogte van uw tabs verdubbelt.

Ik moet nu weg, en kan spijtig genoeg niet verder zoeken, maar ik denk dat dit toch de richting is om te zoeken.

Tussen twee haakjes: uw code is een plezier om te lezen!

succes!
Offline nvp007 - 01/03/2008 17:38
Avatar van nvp007 Nieuw lid Met de margin van div.headingcontainer te wijzigen is het probleem helaas niet opgelost.

Bedankt voor het compliment m.b.t. mijn code!
Offline Tanchelyn - 01/03/2008 19:31 (laatste wijziging 01/03/2008 20:07)
Avatar van Tanchelyn Nieuw lid Ik heb de WebDeveloper Toolbar in Firefox geïnstalleerd (een onvoorstelbaar handig gereedschap) en kon hiermede de ruimte tussen de tabs en de rode ruimte verwijderen door de margin-top op -35px te zetten.

Het is duidelijk een probleem met uitstekende margins. Als ge de height van div.tabs of 1px zet, zijt ge er bijna. Zet ge de height op nul, dan vallen de tabs plots in de rode rechthoek.

Een oplossing (hier) is om div.tabs een height van 1px te geven en de top margin op -1px te zetten.
Offline nvp007 - 01/03/2008 19:53 (laatste wijziging 01/03/2008 19:53)
Avatar van nvp007 Nieuw lid Dit werkt idd in firefox, maar in internet explorer (7) is op deze manier het menu helemaal verdwenen (ik denk dat deze achter de rode balk zit). Ik gebruik ook de Webdeveloper toolbar  
Offline Tanchelyn - 01/03/2008 20:11 (laatste wijziging 01/03/2008 20:22)
Avatar van Tanchelyn Nieuw lid ahhh...Exploder!

het eeuwige probleem. Ik heb al véél meer uren doorgebracht om methodes to zoeken om iets in IE te laten werken dan om originele code te schrijven.

Ik heb IE7 niet (ik blijf bij XPPro) maar meestal is het voor IE een probleem met het boxmodel. Wat zeggen de paddings?

(Ik heb tussen haakjes de tekst en oplossing boven aangepast)


Zover ik weet is het moeglijk dat de oorzaak voor IE ligt in het feit dat er een h element binnen een div staat.
Door specifiek margin en padding voor die h op nul te zetten, kan het zijn dat het opgelost is.
Soms moet ge ook uw divs echt aaneensluiten met het volgende element, bv. :

<div>tekst</div
><div>tekst2</div
><div>tekst3

omdat ie gaten laat waar de code niet aaneensluit. Of dit nog geldt voor IE7 weet ik niet.
Offline nvp007 - 01/03/2008 21:15 (laatste wijziging 01/03/2008 21:17)
Avatar van nvp007 Nieuw lid Geen van de oplossing lijken effect te hebben. Trouwens, IE7 is er ook voor XP Pro hoor, zoals bij mij (ben wel FF user).

EDIT: De padding en margin van het h2-element wissen heeft de dubbele space van ie gewist, nu hebben FF en IE exact hetzelfde probleem.
Offline Tanchelyn - 01/03/2008 21:30
Avatar van Tanchelyn Nieuw lid Er is een oplossing, maar ik herinner me niet exact hoe.

Het is hoe dan ook een probleem met margings die, van binnen een div wiens eigen margin op nul staat, uitsteken.

Ik weet dat ik IE7 zou kunnen installeren, maar dan ben ik Mistre Problem IE6 kwijt. En, om een gekend amerikaans lied te parafraseren: "If it's working there, it should be working everywhere."

Mijn mening: IE en FF samen vormen zo'n 99% van alle browsers. Ik zou persoonlijk niet wakker liggen van IE op mac, daar de Appel clan Safari en Firefox gebruiken. Evenmin als de beruchte NN4.7 . Wie daar nog mee surft, die zoekt problemen.

Ik ga hoe dan ook verder zoeken daar dit me erg intrigeert. En er is geen probleem dat niet oplosbaar is.
Offline nvp007 - 01/03/2008 22:43
Avatar van nvp007 Nieuw lid Alvast bedankt voor je motivatie! Ook ik zoek verder naar de oplossing!

Het is mogelijk om IE6 en IE7 op hetzelfde systeem te draaien: klik Werkt bij mij ook  
Offline Tanchelyn - 01/03/2008 23:04
Avatar van Tanchelyn Nieuw lid Ik kan niet testen in IE, maar, verderwerkend op dat allereerste idee heb ik in div.tabs de height op 100% gezet ipv 35 px.
In FF werkt dit pico bello. Het isn ook logisch, daar 100% de ruimte volledig opvult zonder tot een vaste maat te verplichten.

Misschien eens proberen in IE?


Bedankt voor die link, maar ik heb echt een hartsgrondige hekel aan IE. Ik geef mijn sites dan ook steeds twee externe css bladzijden, één voor IE en één voor de betere browsers.
Op die manier kan ik rustig de bladschikking ontwerpen en hoef ik de code niet te "bevuilen" met de noodzakelijke trukendoos voor IE.

In feite vind ik het best dat IE niet evolueert. Dat die dus in zgn. quirks mode werkt. Op die manier kan ik ook 5 nog bereiken zonder al té veel werk. En elke seconde die aan IE gespendeerd wordt is een verloren seconde.
Offline nvp007 - 02/03/2008 14:05 (laatste wijziging 02/03/2008 17:43)
Avatar van nvp007 Nieuw lid 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!

EDIT: In Opera (wit randje ertussen) en Firefox 3 klopt het nog steeds niet. Ideeën?
Offline Tanchelyn - 02/03/2008 19:54
Avatar van Tanchelyn Nieuw lid Die witte pixelrand heb ik ook ontmoet. (zie hoger)

hebt ge al eens geprobeerd met de div.tabs height op 100% te zetten ipv 35px? Ik zou wel willen weten wat dat doet.
Offline DarkImpact - 02/03/2008 19:57
Avatar van DarkImpact Nieuw lid Ik zie de ruimte niet of is dit een ff probleem?
Offline nvp007 - 03/03/2008 19:35
Avatar van nvp007 Nieuw lid Via Fluzzz van tweakers.net is mijn probleem toch nog opgelost geraakt: bij h2 de margin-top in padding-top veranderen en een clear: both bij de headingcontainer plaatsen. Echt bedankt voor jullie hulp!
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.376s