div 100% height resizen ifv resolutie

[twiceav]

Hallo, ik ben een website aan het maken voor een restaurant en zit met een probleem met de navigatiebalk. Deze is opgebouwd uit een div met height 100%, en alle parent items hebben ook height 100% zodat de div in het browservenster dus wel volledig de hoogte van het browservenster heeft, maar als er in de div 'content' ernaast een langere inhoud staat dan het browservenster waardoor je dus moet scrollen, dan verlengt de navigatie div dus niet mee...



Tweede (iets minder belangrijk probleem): om aan te duiden op welke pagina je zit, heb ik in de css een text-decoration underline aangegeven als de body-id en de li-id van de navigatie samen zichtbaar zijn. Dit werkt ook, maar ik zou dit eigenlijk niet onderlijnd willen, maar gewoon de tekst die wit blijft op het moment dat je op die pagina zit, maar dat werkt blijkbaar niet. Ook met het a:active-element werkt dit niet.

/*/ test pagina aanduiding waar je zit /*/
body#menu li#navmenu,
body#alacarte li#navalacarte,
body#lunch li#navlunch,
body#feesten li#navfeesten, 
body#fotogalerij li#navfotogalerij,
body#contact li#navcontact,
body#route li#navroute,
body#nieuwsbrief li#navnieuwsbrief,
body#openingsuren li#navopeningsuren
{
	text-decoration: underline;
	color: #FFF;
}
body#frissevoorgerechten li#navalacarte, body#warmevoorgerechten li#navalacarte, body#visgerechten li#navalacarte, body#vleesgerechten li#navalacarte, body#nagerechten li#navalacarte, body#kindergerechten li#navalacarte,
body#frissevoorgerechten li#navfrissevoorgerechten,
body#warmevoorgerechten li#navwarmevoorgerechten,
body#visgerechten li#navvisgerechten,
body#vleesgerechten li#navvleesgerechten,
body#nagerechten li#navnagerechten,
body#kindergerechten li#navkindergerechten
{
	text-decoration: underline;
	color: #FFF;
}

Weet iemand hier een oplossing voor?

http://twiceav.be/N/menu.php

 

[csshunter]

Hoi twiceav,

Vraag 1
Kijk eens hier: dat is met een faux column op te lossen.

Vraag 2
Was:

/*/ test pagina aanduiding waar je zit /*/
body#menu li#navmenu,
body#alacarte li#navalacarte,
body#lunch li#navlunch,
body#feesten li#navfeesten, 
body#fotogalerij li#navfotogalerij,
body#contact li#navcontact,
body#route li#navroute,
body#nieuwsbrief li#navnieuwsbrief,
body#openingsuren li#navopeningsuren
{
	text-decoration: underline;
	color: #FFF;
}

Kan worden:

/*/ pagina aanduiding waar je zit /*/
#menu         #navmenu a,
#alacarte     #navalacarte a,
#lunch        #navlunch a,
#feesten      #navfeesten a, 
#fotogalerij  #navfotogalerij a,
#contact      #navcontact a,
#route        #navroute a,
#nieuwsbrief  #navnieuwsbrief a,
#openingsuren #navopeningsuren a
{
	color: #FFF !important;
}

Toelichting:

• Een <a> is specifieker dan de <li> waar hij in zit, dus hier moet de <a> (waar de menu-teksten in zitten) de witte kleur krijgen, en niet de <li>; anders krijgt de <a> z'n gewone kleuren die elders gedefinieerd staan.
• Elders staat voor de <a>'s in het menu al de text-decoration: none; dus die hoeft er nu niet bij.
• De !important bij de color is om de gewone zwarte kleur te overrulen bij de paginanaam van het menu, als dat de geopende pagina is.
• Verder kan je ook alleen #menu in plaats van body#menu enz.gebruiken, dat maakt niets uit (er is toch maar één #menu, en die zit altijd op de body van de menu-pagina, enz.). Op dezelfde manier kan ook de li voor de #navmenu enz. gesloopt worden.
• En voor het rijtje met de #frissevoorgerechten enz. gaat alles analoog.

Met vriendelijke groet,
CSShunter

 

[twiceav]

@ csshunter: heel hard bedankt voor de info voor de aanduiding in de navigatie! Dat probleem is opgelost

Het probleem met de div's is nog niet opgelost. Ik ken het systeem van de faux colums om dmv een achtergrondafbeelding 2 div's op gelijke hoogte te laten komen, maar het feit is dat de navigatie-div altijd de hoogte van het browservenster (100%) moet hebben, ook al scroll je als gebruiker. Met die faux colums krijg je dit resultaat: (achtergrondplaatje is niet wat het moet zijn, enkel een test genomen om 2 kolommen weer te geven) http://twiceav.be/N/openingsuren.php Je ziet dus dat de navigatie hier het meest inhoud heeft in de lengte, en na die inhoud stopt het achtergrondplaatje. Dit is niet de bedoeling, de achtergrond van de navigatie moet doorlopen tem de bodem van het browservenster.

Plus dat ik niet met vaste breedtes werk voor de "2 kolommen", de navigatie heeft een vaste breedte naargelang de resolutie, heeft een percentage padding en de content-div heeft als breedte 50% van het browservenster. Dus hoe bouw je dan een correct achtergrondplaatje op dat altijd juist wordt weergegeven??

 

[csshunter]

Hoi twiceav,
De <html> heeft een hoogte van 100%, maar ook een margin-top van -5% (via de mediaqueries): dat trekt de pagina omhoog, en dan komt onderaan altijd een strook van 5% hoog waar de <body> (=pagina) niet bij kan komen, en evenmin wat er binnen de body aan background-images in zit.

Verder heb je de #wrapper, waar de faux.gif in zit, een hoogte van 100% gegeven. De faux.gif kan dus niet lager komen dan 100% van de schermhoogte: ook als de inhoud van de #wrapper hoger is dan de schermhoogte, en er gescrolld moet worden. Zonder de 100% zal het beter gaan.

Waarom heeft de #wrapper eigenlijk een absolute positie? Abs. posities zorgen vaak voor problemen, en de faux-columns kunnen ook heel goed zonder: dan moet er onderaan onder de floats nog een clear-div'je bij komen en alles draait altijd goed, ook bij scrollen.

Dat wat betreft de hoogte.
=====
Nu de breedte.

Plus dat ik niet met vaste breedtes werk voor de "2 kolommen", de navigatie heeft een vaste breedte naargelang de resolutie, heeft een percentage padding en de content-div heeft als breedte 50% van het browservenster.
Dus hoe bouw je dan een correct achtergrondplaatje op dat altijd juist wordt weergegeven??

Hoe? Met driehoek, passer, liniaal, potlood & gummetje! :d
Oftewel: je moet eerst precies in tekening brengen hoe je het gehad wilt hebben:

• Bv. waar zit de 50% breedte van de content-div? Wordt die met een margin cq. padding vanaf de linkerkant van het scherm of vanaf de rechterkant van het scherm berekend?
• Welke varianten zijn er voor de navigatie, die "een vaste breedte" (welke?) heeft "naargelang de resolutie" (welke mogelijkheden?)?
• Hoe zit "het percentage padding van de navigatie" in elkaar? Waarvan is dat een percentage?
• Zit dat % padding links en/of rechts van de navigatie-kolom?
• Komen er in de breedte ook nog margins tussen de verschillende onderdelen? (en: in px, of in %?)
• Enz.

Dat levert dan een systeem-schema op voor elke variant van de resolutie.
Heb je dat, dan kan gekeken worden naar een oplossing voor de faux-columns, dwz. waarschijnlijk ook een paar varianten (en eventueel zijn er verschillende faux.gif's nodig, met uiteenlopende breedte).

Wat ik trouwens zou doen, is eerst de site voor één resolutie bouwen, dan voor een andere, enz. Als je ze allemaal hebt, kan je ze dan in
mediaqueries stoppen, want nu dreigt alles een beetje door elkaar te gaan lopen en mis je al gauw het overzicht (ik wel tenminste ).

Wat ik ook zeker zou doen, is de signalen van de html-validator ter harte nemen, en er eerst valid html van maken: dat voorkomt brokken, en ook browser-verschillen.

Met vriendelijke groet,
CSShunter