Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] relatief positioneren layer binnen div

Anoniem
Thud
8 antwoorden
  • 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…
  • 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
  • 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!.
  • 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
  • Het is ook een beetje lastig uit te leggen maar dat plaatje moet inderdaad deels de contentblokken overlappen, (het is een transparante gif).
  • In dat geval lukt het toch met de relatieve positionering van alle blokken?

    Pyrrus
  • 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?
  • 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

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.