1. #1
    fromalk's Avatar
    Registered
    21/07/03
    Location
    Alken / hasselt
    Posts
    3,725
    iTrader
    145 (97%)
    Mentioned
    0 Post(s)
    Reputation
    0/1

    tekst over meerdere divs plaatsen

    hallo allemaal,

    ik ben zonet wat aan het prullen geweest aan nieuw persoonlijk siteje. Ik heb echter een probleem bij de laatste div.

    Het is de bedoeling dat tekst in een vierkant geplaatst wordt, dit vierkant heeft een soort inner shadow aan zijn buitenste randen. Ik heb daarom 3 afbeeldingen gesliced;

    top (met 2 bovenste hoeken)
    middenstuk (repeat-y)
    onderstuk (2 onderste hoeken)

    de top afbeelding is 21px hoog, de bottom afbeelding 19px

    Nu wil ik dat de tekst niet pas na 21px (vanaf het bovenste van de topdiv) begint maar gewoon meteen bij de eerste pixel als het ware.

    foto probleem

    Zoals je kan zien op de foto heb ik 3 divs in elkaar geplaatst (heb meerdere methodes geprobeerd hiervoor). Nu wil ik dat de tekst in de bovenste div begint (bovenste cel) vervolgens de middelste cel vergroot naarmate dat nodig is en zich enkele pixels onder de ondergrens van de onderste lijn stopt.

    Is er geen mogelijkheid om een div met tekst over deze 3 layers heen te plaatsen?

    mijn code tot nu toe:
    PHP Code:
    #container #one{ 
            
    border 1px solid #F00;
            
    width100%; 
            
    margin 0;
            
    padding0
            
    padding-bottom19px/* Height of bg image */ 
            
    backgroundurl('layout/images/cont_bot.jpg'bottom no-repeat
            } 
            
    #container #two{ 
            
    border 1px solid #F00;
            
    width100%;  
            
    margin 0;
            
    padding0
            
    padding-top21px/* Height of bg image */ 
            
    backgroundurl('layout/images/cont_top.jpg'top no-repeat
            } 
            
    #container #three{ 
            
    border 1px solid #F00;
            
    width100%; 
            
    margin 0;
            
    height303px
            
    padding0
            
    backgroundurl('layout/images/cont.jpg'top repeat-y
            }


    <
    div id="one">
                <
    div id="two">
                    <
    div id="three">
                        
    test
                    
    </div>
                </
    div>
            </
    div
    alvast bedankt
    no votes  

  2. #2
    fromalk's Avatar
    Registered
    21/07/03
    Location
    Alken / hasselt
    Posts
    3,725
    iTrader
    145 (97%)
    Mentioned
    0 Post(s)
    Reputation
    0/1
    even toevoegen;

    met de volgende methode ben ik het dichtste bij;

    PHP Code:
    div.test {
                
    background-imageurl('layout/images/cont_top.jpg'), url('layout/images/cont.jpg'), url('layout/images/cont_bot.jpg');
                
    background-repeatno-repeatrepeat-yno-repeat;
                
    background-positiontoptopbottom;
                
    width100%;
                
    height1000px;
                
    border1px solid #000000;
            
    }

    <
    div class="test">test</div

    het enige probleem is nu dat de onderkant niet klopt. Door de repeat-y gaat die eigenlijk de bottom afbeelding overlappen. Ik zou dus eigenlijk ervoor moeten kunnen zorgen dat hij wel repeat-y doet maar dan - de hoogte van de onderste afbeelding (zijnde 19px)


    edit; dit werkt enkel op mijn safari blijkbaar
    no votes  

  3. #3
    brecko's Avatar
    Registered
    23/11/03
    Location
    Kruishoutem
    Posts
    657
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    2/3
    Div voor background, overlappende div voor tekst?
    Denk niet dat er (bij mijn weten) een manier bestaat om die te laten overeenkomen..
    no votes  

  4. #4
    j design's Avatar
    Registered
    19/05/08
    Location
    Sjellebelle
    Posts
    731
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Lukt dat niet me Z-indexen of span of dergelijke?

    edit: Maar hoe zorg je dan dat alle2 de divs vergroten?

    Ik heb een idee maar weet niet ofdat zoiets lukt
    Je zet de 3divs top-midden-foot in een omsluitende div, de 3divs laat je zakken via de Zindex en dan ga je in de omsluitende typen.
    Je kan dan de top en foot div een absolute height meegeven en dan het midden laat je variabel

    2) overflow?
    Last edited by j design; 31-08-2008 at 10:39.
    Evulgo Media Where magic begins
    no votes  

  5. #5

    Registered
    29/11/04
    Location
    My attic
    Posts
    5,936
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    12/15
    negatieve marge?
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in