[css] stacking layers

[Verwijderd]

ik heb op mijn site http://www.eelke.com een aantal layers [tab] naast elkaar gepositioneerd en daarover heen weer een nieuwe layer [content] gemaakt voor de content van mijn pagina.

Probleem is nu dat het er in IE mooi uitziet, in mozilla OK maar in Opera klopt er geen bal van ik gebruik voor de positionering van de content layer

code:

position:absolute;
top:-460px;

Maar kennelijk wordt dit in het Opera renderer totaal anders geinterpreteerd en wordt er in het [content] frame 460 pixels margin aan de bovenkant ingeruimd waardoor de content van mijn pagina alleen maar te vinden is door naar beneden te scrollen. erg irritant en onnodig.

Weet iemand hoe ik dit op kan lossen?

het heeft ook iets te maken met de layer overflow op de een of andere manier positioneerd opera de layer wel op de goede plaats maar dan de text in de layer gaat verder op de plek zonder rekening te houden met de herpositionereing van de layer

[ Voor 15% gewijzigd door Verwijderd op 31-12-2005 01:45 ]

[Boelie-Boelie]

Als je het volgende artikel goed toepast, dan moet het centreren van #container volgens mij lukken:
www.wpdfd.com/editorial/thebox/deadcentre2.html
Zorg dan wel dat #container niet groter is dan breedte van #content en dan de hoogte van het menu plus #content (ook geen padding en margins toepassen op #container, behalve voor de positionering die in het WPDFD-artikel worden beschreven).

Over het menu: een id is uniek, dus je kunt niet vier keer id="tab" meegeven. Dat zou dan een class moeten zijn. Probeer niet alles met div'jes te maken, een menu maak je bijv. zo:
http://css.maxdesign.com.au/listutorial/

Werken met z-index en position is helemaal niet nodig (dat is het heel vaak niet).

[Verwijderd]

hee boelie bedankt voor de tips.

het centreren van die container is niet echt het probleem. Het probleem zit in die "correctie" van -460 om het content layer over de tab layers heen te krijgen. Deze correctie werkt wel goed behalve dat deze niet wordt meegegeven aan text aan de binnenkant van de layer in opera. waardoor deze dus 460 pixels lager begint.

Ik zit er over te denken om dan maar gewoon die 4 vlakken in de achtergrond te verwerken.

[Boelie-Boelie]

Ik heb mijn oplossing ook ff in Opera 7.6 en Opera 8.5 getest, daar werkt het gewoon.

Belangrijk is om niks in een 'layer' te zetten, dus geen z-index etc. gebruiken om layers te stapelen. Stapelen van layers is niet nodig, het kan allemaal in hetzelfde vlak gepositioneerd worden. Je was goed op weg door zowel je navigatie als je content in één div te stoppen, #Container in jouw geval. Om de gegeven oplossing te laten werken, geef je die #Container afmetingen mee (in jouw geval 550px bij 470px ofzo). Vervolgens kun je #Container positioneren (zie link).

Daarna kun je aan de gang met alles binnen #Container een plekje geven. Elke div die je in #Container gooit, neemt vanzelf de breedte van #Container aan. Je hoeft dus geen divs een breedte mee te geven.

Als je een tweede div plaatst, komt die tweede div automatisch onder de eerste div (onder als in 'meer naar de onderkant van het scherm'). In jouw geval hoeft #content dus geen positie mee te krijgen; die moet gewoon onder de navigatie en als je geen positie meegeeft, gebeurt dat ook vanzelf.
(Tip voor het bouwen van een navigatiemenu: Listutorial.)

Verder neemt elke div vanzelf een hoogte aan. Hoe meer inhoud, hoe meer hoogte. Die hoef je dus ook niet altijd in te stellen. In jouw geval is het wel handig om #content een hoogte mee te geven, opdat het binnen #Container past; dat heb je goed ingesteld.

Overflow: auto zorgt ervoor dat er alleen een scrollbalk verschijnt waar nodig. Zoals je het nu hebt ingesteld, krijg ik ook een verticale scrollbalk, da's denk ik niet de bedoeling. Zie http://www.quirksmode.org/css/overflow.html voor meer uitleg over overflow.

Hopelijk kom je hier wat verder mee...

[ Voor 9% gewijzigd door Boelie-Boelie op 03-01-2006 21:58 ]

[Verwijderd]

Als ik het in de zo snel goed zag sluit je een div te weinig af. Dit kan ook altijd voor vreemde resultaten zorgen....

[Verwijderd]

nogmaal bedankt voor de feedback.

ik heb nog even naar je oplossing gekeken maar ik maar ik plak toch echt layers over elkaar heen. die content layer ligt namelijk over die 4 gekleurde vlakken. die vlakken zijn als layers gedefinieerd
doordat ze floaten kan je ze naast elkaar zetten. en dan plak je die content layer er over heen. (zodat de vlakken erboven en eronder uitsteken). Ik denk zelf niet dat het probleem in het centreren zit. (de container layer is namelijk al gecentreerd met die margin 0px auto;)

heb jij een werkende oplossing die het in opera wel goed doet? met die 4 gekleurde vlakken als layer? en de content layer er over heen geplakt?

Ik kan die 4 vlakken ook in de achtergrond verwerken maar dan ziet het er alleen goed uit in 1024 * 768. tenzij je die achtergrond centreert. hmmm dat is nog niet eens zo'n slecht idee.

maar dan zit je wel weer dat je een menu layer moet maken die dan precies op die 4 vlakken moet komen is weer lastig....

[Boelie-Boelie]

Ah, nu je je gedachten zo uittypt, snap ik pas wat je bedoelt. En nu ik het in IE bekijk, zie ik blijkbaar hoe het zou moeten zijn.
Tip: zorg dat het eerst in Opera en Firefox goed werkt en later pas in IE, want IE vergeeft een hoop fouten. IE geeft vaak het misleidende idee dat bepaalde manieren goed werken, terwijl het in feite een verkeerde werkwijze is.

Verwijderd schreef op woensdag 04 januari 2006 @ 01:40:
tenzij je die achtergrond centreert. hmmm dat is nog niet eens zo'n slecht idee.

maar dan zit je wel weer dat je een menu layer moet maken die dan precies op die 4 vlakken moet komen is weer lastig....

Dat idee is goed, de kleuren in de achtergrond zetten. Die achterground zet je dan als achtergrond van #Container (alleen die vier kleuren dus). body kan dan de huidige achtergrond behouden (zoals het nu is, gaat het overigens niet goed op 1152x864).

Dat menu vervolgens positioneren is meer een kwestie van spelen met margins/paddings, maar vormt volgens mij niet een groot probleem. Nogmaals, dat hoeft niet in een 'layer'! In deze layout hoeft niks in een layer met z-index.

[Verwijderd]

ik heb het al opgelost; ik heb gewoon die tabs 470 pixels naar boven geschoven aangezien daar geen tekst in staat kan opera de text niet meer verkloten. Ik heb nog wel even wat opera specifieke code geschreven vanwege de width en height.

Al met al --> opera zuigt.