Gebruik van layers op website...?

[anoniem]

Hoi, Ik zit met een probleem. Ik heb nu ongeveer een uur door het forum zitten kijken en lezen, hier en daar wel iets gezien wat er op lijkt, maar toch kom ik er niet helemaal uit. Oplossing zal vast heel makkelijk zijn, maar wat hulp zou ik appreciëren. Probleem: Ik ben begonnen met de maak van een website (voor een vriend). Eerst grafische gedeelte in Fireworks wat gedaan, daarna export naar Dreamweaver. Oa. een pop-up menuutje gemaakt etc. Dat is allemaal aardig gelukt (vind ik zelf). Zie zelf: [url=http://members.chello.nl/~r.nijhuis/cyberclan/dreamweaver/index.htm]Klik[/url] Nu komt het 2e gedeelte, namelijk tekst op de website. En dat wil me niet helemaal lukken. Wat is de beste manier om dat te doen (ik dacht zelf aan layers, die je kunt "hiden" en "showen"). Maar dan lukt het me niet om die layer te centeren ten opzichte van die grafische achtergrond (die is gecentered) Dan gebeurt er dit: [url=http://members.chello.nl/~r.nijhuis/cyberclan/dreamweaver/test.htm]Klik[/url] En maak nu het venster maar eens groter of kleiner... Dat gaat dus niet goed. Hoe los ik dit op? Of weet iemand waar ik meer hierover kan vinden? Ik heb namelijk al heel wat nagezocht, maar specifieke dingen krijg ik niet echt gevonden. Wat voor zoektermen moet ik gebruiken?? Alvast bedankt, Met vriendelijke groet, Arthur

[anoniem]

Mooi design zeg. Ik denk dat dit ongeveer is wat je wil: [code:1:e8daf5d672] <div style="position: absolute; width:100%;left:0px; top: 241px;text-align:center;z-index: 1;"><div id="Layer1" style="margin-left:auto;margin-right:auto; background-color:green;padding-left:35px;padding-right:35px;text-align:left;width: 700px; box-sizing: border-box;-moz-box-sizing:border-box;height: 300px; overflow:auto;"> <p><font color="#999999">Test</font></p> <p><font color="#999999">Hi everyone...</font></p> </div></div> [/code:1:e8daf5d672] Die background-color:green heb ik er nog in gelaten, kun je zelf nog een beetje zien of de posities die ik gekozen heb ongeveer is wat jij wil. Ik heb trouwens wel het idee dat het eigenlijk helemaal anders moet, maar goed, het werkt wel. In de mm_menu.js zou ik na dit: l.style.cursor = "hand"; ook nog een regeltje met dit: if (!document.all).style.cursor='pointer'; plaatsen. Zo krijg je ook een handje in Mozilla.

[anoniem]

Ik ken dit probleem. Ik ben zelf ook al een tijdje aan het worstelen met het posisioneren van layers. Ik volg dus met grote interesse de topics over tabels vs layers, helaas de discussie wordt op een te geavanceerd niveau gevoerd en beperkt zich bovendien te veel tot het pro vs tegen argument. Kortom ik volg deze draad vanaf nu met zeer veel interesse wellicht is er een pro(f) die in heldere bewoordingen een eenvoudige oplossing kan bieden. Tabels zijn beperkt en star maar wel handig voor positionering, Layers zijn flexibel maar (voor mij althans nog) wat grillig in gedraging. Ik heb het vermoeden dat de layers streng gedefinieerd moeten worden in een css. Dus de css bepaald waar en met welk uiterlijk de layers geposisioneerd worden. Als ik het allemaal een beetje begrepen heb vormt de css het stramien of het raster, kader waarbinnen de content zich dient te gedragen. Maar misschien zit ik er gruwelijk naast. Wie helpt ons verder?

[anoniem]

De layer zelf is eik helemaal niet zo belangrijk. Een div element (voorbeeld van een layer) kun je bijvoorbeeld gebruiken om een groep p elementen te groeperen. De positionering van elementen, zoals bijv: - div - p - ul Ook de opmaak van deze elementen gebeurt met css. http://simon.incutio.com/categories/csstutorial/ > Serie tutorials over css. De beste manier om te leren hoe je met dingen om moet gaan is kijken hoe andere mensen dit soort dingen hebben gedaan ( http://www.glish.com/css/ ). Maar misschien zou het leuk zijn als we een soort topic openen en daar gewoon zo'n soort site ontwerpen van de grond af, waarbij we een tabelgebaseerde layout als voorbeeld nemen. -termin8or

[anoniem]

[quote:a36fe70a9c="termin8or"]Maar misschien zou het leuk zijn als we een soort topic openen en daar gewoon zo'n soort site ontwerpen van de grond af, waarbij we een tabelgebaseerde layout als voorbeeld nemen. -termin8or[/quote:a36fe70a9c] Ik heb nog wel een goed voorbeeld voor je. ;)

[anoniem]

[quote:3bde59593f="Phrea"]Ik heb nog wel een goed voorbeeld voor je. ;)[/quote:3bde59593f]LOL :D Arthur, Ik heb even een snelle blik in je code genomen en ik zie dat je de 'content'-layer absolute gedefineerd hebt. [code:1:3bde59593f]position:absolute; left:197px; top:241px; width:651px; height:353px;[/code:1:3bde59593f]Op deze manier kan de div zich niet aanpassen aan de rest... En zoiezo zou ik je opbouw veranderen in bv: [code:1:3bde59593f]<body> <div id="menu"> <img src="../Export/cyberclan.gif" name="cyberclan" width="700" height="500" border="0" usemap="#m_cyberclan"> <map name="m_cyberclan">...*knip*... </map> </div> <div id="content"> <p>Test</p> <p>Hi everyone...</p> </div> </body>[/code:1:3bde59593f] Alleen je werkt in Dreamweaver in de WYSIWYG-modus en dit is niet bevoordelijk als CSS goed wil doen (100% controle wil hebben), dus misschien toch verstandig om in tabellen te werken tot je goed in HTML en CSS kan werken. (ja, tabellen ja :wink: )

[anoniem]

Ik zou gewoon de div relatief centreren. Voor het centreren kan je onderstaande code gebruiken, het is getest en werkend bevonden in Opera 4+, Netscape 6+, IE5.5+ en Mozilla dus het wordt vrij standaard ondersteund. Gebruikte CSS:[code:1:eb7c4d4cfd] body{ text-align: center; /* Voor IE5.5 en eerder */ } div.center{ margin-left: auto; margin-right: auto; width: 500px; border: 1px dashed #f00; }[/code:1:eb7c4d4cfd] Gebruikte XHTML:[code:1:eb7c4d4cfd]<body> <div class="center"> <p>Tekst enzo...</p> </div> </body>[/code:1:eb7c4d4cfd]Een werkend voorbeeld is tijdelijk [url=http://www.basje.com/test/centereddiv.html]hier[/url] te zien. [b:eb7c4d4cfd]Edit:[/b:eb7c4d4cfd] Verschillen in hoogte van de box en plaatsing van de tekst binnen de box komen door verschillen in de standaarden die browsers hanteren indien een expliciete regel ontbreekt. Deze zijn allemaal te ondervangen met CSS zoals margin en padding. - Bas

[anoniem]

Bedankt, heel fijn dat jullie mij allemaal op weg willen helpen. Ik ga kijken wat ik ermee kan doen, en hou jullie op de hoogte. Dat van basje ziet er erg goed uit (voorbeeldje) en ook de andere stukjes code zal ik even checken. Bedankt alvast! MVG, Arthur

[anoniem]

Ik heb nu dit: [url=http://www.chello.nl/~r.nijhuis/cyberclan/dreamweaver/test1.htm]Klik[/url] Er valt natuurlijk al meteen iets op :P Dus nog even een vraag: Hoe krijg ik die tekst nu op de goede plaats in die image? (ik heb bij bovenstaande site nog geen layer gebruikt waarin het plaatje staat). Als ik namelijk begin met de image in een layer te plaatsen, dan weet ik niet hoe ik die image gecentered krijg t.o.v. de browser. Ik wil die image (met uiteindelijk tekst erin) namelijk in het midden van de browser hebben (dus bij alle soort resoluties). Ik bedoel dus: Ik kan wel een layer maken, en daarin de image zetten, en dan een 2e layer, met daar die tekst in en erboven op zetten, MAAR die 1e layer, die moet een W en H hebben... En dan is de centering van de image niet in alle resoluties hetzelfde... Snappie? Heeft iemand hier een oplossing voor? Of zie ik iets over het hoofd?

[anoniem]

je kunt bv de positie van de tekts aanpassen: div.fullcenter{ position : absolute; top : 180px; left : 60px; wimb

[anoniem]

Ja op zich is dat wel de bedoeling WimB, maar dan zit ik weer met het probleem wat ik in 1e instantie had, namelijk dat de tekst vrij beweegt t.o.v. de grafische achtergrond (waar die dus in moet blijven zitten, ook al wordt de browser kleiner of groter gemaakt). Ik wil de grafische achtergrond (de image) in het midden van de pagina hebben, hoe groot de browser ook is, en daar moet een layer in met de inhoud, die OOK op die plek moet blijven zitten, hoe groot de browser ook is. Ik heb nu 2 situaties gehad (met hulp van jullie onder andere), 1 waarin ik een layer heb die WEL gecentered is maar die niet op de grafische achtergrond zit: [url=http://www.chello.nl/~r.nijhuis/cyberclan/dreamweaver/test1.htm]Zie dit[/url] [code:1:410f1539d5] div.fullcenter{ position: center; margin-left: auto; margin-right: auto; width: 656px; height: 360px; border: 1px dashed #009; [/code:1:410f1539d5] en dus die van WimB, waarbij de tekst WEL in de grafische achtergrond komt te zitten, maar waarbij de tekst niet hetzelfde meebeweegt (als men de browser kleiner zou willen maken, om wat voor reden dan ook) met die achtergrond: [code:1:410f1539d5] div.fullcenter{ position: absolute; top: 204px; left: 228px; width: 656px; height: 360px; border: 1px dashed #009; [/code:1:410f1539d5] Ik moet dus eigenlijk een soort van combinatie van deze twee stukjes code hebben, maar wat precies? Kan dat wel begin ik me af te vragen :p MVG, Arthur

[anoniem]

probeer dit eens: div.fullcenter{ position : relative; top : -400px; left : 0px; dan zit de bovenkant van de text div vast aan de onderkant van de voorafgaande div wimb