Archief - tekst over meerdere divs plaatsen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
f

fromalk

Legacy Member
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: 
#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>

alvast bedankt
f

fromalk

Legacy Member
even toevoegen;

met de volgende methode ben ik het dichtste bij;

PHP: 
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 :D
b

brecko

Legacy Member
Div voor background, overlappende div voor tekst?
Denk niet dat er (bij mijn weten) een manier bestaat om die te laten overeenkomen..
j

j design

Legacy Member
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?
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan