anoniem Geplaatst: 26 juli 2004 Delen Geplaatst: 26 juli 2004 Dag allemaal, Ik kom niet uit het volgende: ik wil een layer (met gif) mbv z-index>1 'boven' een aantal opmaak-div's plaatsen. Op zich geen probleem, met position:absolute kan ik 'm overal zetten waar ik wil. Ik wil echter dat de afbeeldingslayer linksboven in het zichtbare browserdeel verschijnt, ook bij 800x600's etc. Dit betekent dat de layer linksbovenin een (al bestaande) gecentreerde div moet komen. Met position: relative lukt dit, maarrrr.... de andere div's binnen die centrale div schuiven naar beneden, i.p.v. zich niets aan te trekken van die z-index>1 layer. Hoe zorg ik er nu voor dat binnen die centrale div de layer 'bovenop' de bestaande div's komt zonder deze naar onderen te verplaatsen?? Alvast bedankt, P.S. Als iemand de code nodig heeft plaats ik 'm. Ik probeer het eerst even met een tekst van behapbare grootte... Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 Hoi Thud, Doe maar even de code, dat maakt het vast wat duidelijker. Heb je er wel rekening mee gehouden dat elke positionering (absoluut en relatief) altijd geldt ten opzichte van het containerblok? Pyrrus Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 De pagina in kwesie staat helaas niet on-line, hopelijk valt iemands oog toch op de fout. De pagina bestaat uit een gecentreerde div 'frame' waarbinnen een horizontale balk (div 'contentheader') met daaronder drie kolommen staan (div's 'contentleft', 'contentcenter' en 'contentright'). html: ---------------------------------------------------------- <html> <head> <title></title> <link rel="stylesheet" href="index.css" type="text/css"/> </head> <body marginwidth="0px" marginheight="0px" leftmargin="0px" topmargin="0px"> <div id="frame"> <div id="logofloat"><img src="images/float.gif" width="350" height="350"></div> <div id="contentheader"></div> <div id="contentleft"> <h1>contentleft</h1> </div> <div id="contentcenter"> <h1>contentcenter</h1> </div> <div id="contentright"> <h1>contentright</h1> </div> <br clear="all" /> </div> </body> </html> css: --------------------------------------- body { text-align:center; } #frame { width:775px; height:599px; margin-right:auto; margin-left:auto; margin-top:0px; padding:0px; text-align:left; } #contentleft { width:140px; height:484px; padding:10px 5px 5px 10px; float:left; background:#fff; } #contentcenter { width:460px; height:484px; padding:10px 5px 5px 10px; float:left; background:#eee; } #contentright { width:130px; height:484px; padding:10px 5px 5px 10px; float:left; background:#fff; } #contentheader { width:775px; height:100px; padding:0px; background:#fff; } #logofloat { position:relative; top:0px; right:0px; width:350px; height:350px; padding:0px; margin:0px; z-index:5; } ------------------------------------------------- Het is dus de bedoeling dat div 'logofloat' linksboven in de gecentreerde div genaamd 'frame' verschijnt, daarbij de div's 'contentheader', 'contentleft' en 'contentcenter' overlappend welke op hun beurt binnen div 'frame' vallen. Met bovenstaande css wordt 'logofloat' linksboven in 'frame' geplaatst en 'contentheader' direct eronder en daaronder de 3 kolommen: left, center en right Hopelijk wordt mijn bedoeling nu iets duidelijker... Alvast bedankt!. Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 Sorry, maar ik begrijp nog steeds niet precies wat je nu wilt bereiken. Dat plaatje moet toch niet alle contentblokken overlappen? Als dat wel is wat je wilt, moet je ook de contentheader en de kolommen relatief positioneren met een negatieve waarde voor top. Doe anders nog eens een poging om uit te leggen wat nu precies de bedoeling van de overlappende plaatje is :o Pyrrus Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 Het is ook een beetje lastig uit te leggen maar dat plaatje moet inderdaad deels de contentblokken overlappen, (het is een transparante gif). Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 In dat geval lukt het toch met de relatieve positionering van alle blokken? Pyrrus Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 Sorry dat het zo lang duurt.. anyway: mij is het niet gelukt, zou ik om laatzeggen het bovenste contentdeel 'onder' het plaatje te schuiven het contentdeel een negativieve relative position moeten geven? Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 Ja. Als je die contentblokken onder je plaatje wilt schuiven, geef je ze allemaal een negatieve top-waarde, zoiets dus: #contentheader { position: relative; top: -300px; ... } #contentleft { position: relative; top: -300px; ... } Enzovoort. De juiste waarde vind je wel door te experimenteren. Met [i:9bf1dab10b]position: relative[/i:9bf1dab10b] komt elk blok eerst op zijn oorspronkelijke plek terecht en daarna wordt het verplaatst ten opzichte van die positie. Vandaar: relatief. Pyrrus Quote Link naar reactie
anoniem Geplaatst: 26 juli 2004 Auteur Delen Geplaatst: 26 juli 2004 OK, Dan ga ik trial&errorren om de juiste positionering te vinden... Heel erg bedankt!! Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen