-
31-08-2008, 01:26 #1Member
- 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:
alvast bedanktPHP Code:#container #one{
border : 1px solid #F00;
width: 100%;
margin : 0;
padding: 0;
padding-bottom: 19px; /* Height of bg image */
background: url('layout/images/cont_bot.jpg') bottom no-repeat;
}
#container #two{
border : 1px solid #F00;
width: 100%;
margin : 0;
padding: 0;
padding-top: 21px; /* Height of bg image */
background: url('layout/images/cont_top.jpg') top no-repeat;
}
#container #three{
border : 1px solid #F00;
width: 100%;
margin : 0;
height: 303px;
padding: 0;
background: url('layout/images/cont.jpg') top repeat-y;
}
<div id="one">
<div id="two">
<div id="three">
test
</div>
</div>
</div>
no votes
-
-
31-08-2008, 01:36 #2Member
- 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-image: url('layout/images/cont_top.jpg'), url('layout/images/cont.jpg'), url('layout/images/cont_bot.jpg');
background-repeat: no-repeat, repeat-y, no-repeat;
background-position: top, top, bottom;
width: 100%;
height: 1000px;
border: 1px 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
-
31-08-2008, 04:03 #3Member
- 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
-
31-08-2008, 10:22 #4
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 beginsno votes
-
01-09-2008, 02:45 #5Member
- Registered
- 29/11/04
- Location
- My attic
- Posts
- 5,936
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 12/15
negatieve marge?
no votes
