[css] inzoomen zonder terugloop

[Mr_Kite]

Ik heb bovenaan een site een menu-balk, waarin een aantal links staan. De site is gemaakt voor 1024x768, maar ik wil niet dat hij HELEMAAL vervormd als hij op 800x600 bekeken wordt.

http://extrapuur.nl/doorga/

wat er nu gebeurt als ik zoom, of een kleiner venster heb, dan loopt de tekst uit het menu terug, dwz het komt op de volgende regel te staan. Ik begrijp wel hoe het komt. de div waar hij in staat is namelijk 100% breed, en dat is de 100% van het venster. Ik wil echter dat hij gewoon zo groot is als de inhoud lang is, maar heb geen idee hoe...

dan heb ik nog een ander klein probleempje: Ik heb voor de hover een randje links en rechts van de link gedefinieerd, maar als ik er niet overheen ga, wil ik dat je geen randje ziet. Als ik het randje weglaat, springt alles heen en weer, en dat wil ik niet. een transparant randje doet hij weer niet in IE, en een dotted of dashed komt alleen soms goed uit. En als ik hem solid doe dan gaat hij sowieso in de onderkant van het menu-streepje zitten (alleen voor de Mozilla gebruikers, en goed kijken)

[faabman]

je moet ff van je absolute breedtes overstappen op relative breedtes...

[Not Pingu]

Het probleem is dat zijn contentbalk naar onderen schuift als je het window verkleint.
Volgens mij helpt het in dit geval om de body een breedte in pixels mee te geven, bijv: body{width: 1000px;}

Ik neem aan dat je gebruikmaakt van floating divs, probeer het eens dmv. absoluut positioneren.

[edit]

Positioneer je div#left en div#content absoluut binnen div#main, en geef div#main een breedte van 750px oid..
Dan blijft je footer ook gewoon onderaan.

[ Voor 22% gewijzigd door Not Pingu op 31-08-2004 18:23 ]

[Mr_Kite]

Als ik de breedte van de body opgeef, dan wordt de menu balk ook maximaal zo groot, ik wil dat hij op grote schermen gewoon doorloopt, maar 100% van de body als ik die een breedte van 60em geef, is natuurlijk gewoon 60em.....

Als ik binnen de main left en content absoluut plaats, dan komen ze helemaal bovenin de pagina te staan, terwijl ik ze toch ECHT binnen de main div heb staan... Snap ik niet helemaal.

Het hover probleempje blijft nog steeds overigens.

_{Voor mozilla is de oplossing eenvoudig trouwens, daar kan ik aan div#menu gewoon een min-width meegeven, maar die kent IE dus weer niet}

[Not Pingu]

Als je de div#left en div#content absoluut positioneert moet je ze natuurlijk wel een top: en left: meegeven he.
Het helpt ook als je je div#main een breedte en hoogte geeft en op position: relative zet, de divs binnenin worden dan absoluut gepositioneerd adhv. de main div ipv. aan het document window.

[Mr_Kite]

Ok, dit heb ik ook geprobeerd (had ik ook al eerder, ik geloof dat ik nu bijna alles behalve de oplossing heb gezien), maar wat er gebeurt is het volgende:
Ik kan de main wel een hoogte geven, naar deze is natuurlijk altijd variabel, niet echt handig dus, aangezien de footer altijd onderaan de main komt te staan. Dat heeft als nadeel dat wanneer de content erg klein wordt, de footer wel heel erg eenzaam onderaan staat, en wanneer de content erg groot is, staat de footer dwars door de content.

Zoals ik het nu had was het mooi, omdat main mooi meerekte met z'n inhoud, zodra ik de content absoluut maak doet hij dat niet meer.

om het nog een keer op te sommen hier de 3 problemen:

1. Het menu zou ik graag een minimale breedte mee willen geven, zodat deze nooit terugloopt naar een volgende regel. (alleen een probleem in IE nu)

2. Alles wat binnen main staat wil ik naast elkaar houden, ook als het venster erg smal is of er ver ingezoomd is (een probleem dat niet meer bestaat zodra het menu een minimale breedte heeft)

3. Het menu is nu op zich niet heel lelijk, maar in mozilla en opera heb ik stipjes die ik weg wil. De stipjes komen er omdat ik er een streepje neerzet bij de mouseover, en ik wil niet dat alles gaat springen. Daarom zit er nu een streepje met de achtergrond kleur. Voor mozilla kan ik een transparant streepje gebruiken, maar die wordt zwart in IE.

[Not Pingu]

Menuitems geef je whitespace: nowrap mee.
De div#main hoef je geen vaste hoogte mee te geven, dan doe je gewoon height: auto.
Voor positionering is het van belang dat er iets in de hoogte property wordt opgegeven, ook zoiets als 100% of auto.

je hoeft div#content maar het volgende mee te geven:

div#content
{
position: relative;
margin-left: [breedte van div#left]px;
}

Ik denk dat dat het em al doet.

[ Voor 26% gewijzigd door Not Pingu op 01-09-2004 22:45 ]

[Mr_Kite]

Hulde ende bravo!

Nog 1 mierenneuk dingetje (maar ik denk dat dat een IE bug is), de padding die ik gebruik voor de menu-items, valt weg in IE als ik het venster smaller maak, alleen slechts bij het eerste item de linker padding. Niet onoverkomelijk, maar ook niet echt mooi en vooral een vaag gedrag...

ik heb nu ook een oplossing gevonden voor het 'stipjes'-probleem: ipv een border met de achtergrondkleur te gebruiken, heb ik #menu a een margin van 1px meegegeven, die ik reset in de gevallen waarbij er daadwerkelijk een border zit.