divje wil niet blijven staan

[jeel2008]

hallo, ik ben in dreamweaver aan het proberen in een pagina een divje op zn plaats te houden
maar het ding wil niet luisteren.
zie image divje.jpg

nu moet , ongeacht de tekst die er op diverse paginas in verschijnt, dat ding altijd 20px rechtsonder aan marge hebben, tov de rand van de achtergrondfoto, en 20px vd bottom. dus dacht ik: leg ik die div in de maindiv en plaats 'm relative met een bottom van 20, en een rightmarge van 20. de grootte is dan auto, zodat ie zich naar believen kan uitstrekken in de ruimte die nog boven en links van 'm ligt.

zal het even bijvoegen, of liever even uploaden: http://www.jeelsites.nl/staanblijven/blijf.html (zie paginabron)

dit divje moet op diverse paginas terugkeren , maar nu krijg ik het , ivm diverse groottes vh divje, alleen steeds voor elkaar door een margintop STYLE bij te voegen in de divtag.

hoe zit dat precies?

 

[Naarling]

Voeg allereerst aan de CSS voor div #achtergrondfoto, position:relative; toe.

Uit de CSS voor .tekst moet je dan de marges weghalen en de volgende code toevoegen

position:absolute;
right:20px;
bottom:20px;

Dit zorgt er voor dat .tekst altijd 20 pixels van de onderkant en 20 pixels van de rechterkant komt te staan.

 

[jeel2008]

div

hallo naarling,
ik geloof dat ik ergens in de verte, en dan nog zeer vaag, en zeker weten doe ik het niet, een belletje hoorde rinkelen ja, toen ik las over relative en absolute.
in ieder geval bedankt. het werkt!
mvg jeel2008

 

[jeel2008]

midden

hmmm, het ging zo lekker maar ik loop helemaal vast in uitlijnen van datzelfde divje in het midden

ik snap er niks van

margin-left: auto;
	margin-top: 20px;
	margin-right: auto;

dit moet toch voldoende zijn om een div met de class=tekst naar het midden te bonjouren?

zie : http://www.jeelsites.nl/staanblijven/a3.html

 

[Naarling]

In dat geval moet je juist geen position:absolute; meegeven.

 

[jeel2008]

afmeting

hmm, bedankt , werkt ook
maar kijk nu nog eens op http://www.jeelsites.nl/staanblijven/a3.html,
1. hij moet nog zakken...
2. en het kader moet zich aanpassen aan de tekst, nu istie veel te breed

---

kijk, zo ongeveer zou het er een keer uit moeten zien:

 

[csshunter]

Hoi jeel,
Ben ik even verdwaald in de CMS-afdeling, zie ik deze opmaak-vraag staan!

Als je èn de hoogte èn de breedte van het middenstukje niet tevoren kunt weten, dan kan je een midden-midden positie op 3 manieren bekokstoven:

1. Met javascript (laten uitrekenen hoe breed & hoog het ding is, en met de uitkomst de margin-top en margin-left vaststellen).
   Met javascript? Hmmm, brrr!
   
   
2. Met een tabel (dambord met 3 of 9 blokjes, en het middenstukje in het middelste blokje).
   Met een tabel? Hmmm, brrr!
   
   
3. Of ... met css een tabel-opmaak nabootsen!

<div id="achtergrondfoto">
	<div id="tablefaker" style="height: 100%; margin: 0 auto; display: table; border: 1px dotted fuchsia;">
		<div id="cellfaker" style="display: table-cell; vertical-align: middle; border: 1px dotted blue;">
			<div id="middenkader" style="border: 5px solid green; padding: 0 20px; background: #B7C4BD;">
				<p>middenin, alstublieft</p>
				<p>en je breedte aangepast aan de tekst</p>
			</div>
		</div>
	</div>  
</div>

Gemaakt met Firebug in Firefox, dus andere ordentelijke browsers zullen het ook wel doen.

• Dwz. attentie voor IE7, IE8 en IE9: als die het niet doen, dan (via CC's) wellicht toch een echte tabel of javascripten...

Met vriendelijke groet,
CSShunter
___________
PS: Hij/zij is ook in- en uitzoombaar!

Een door de bezoeker ingesteld groter of kleiner letterformaat kan dus geen kwaad.

 

[jeel2008]

table cell

hallo csshunter
aha...:

1. http://www.w3schools.com/cssref/pr_class_display.asp
table The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like <colgroup>)
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group

dit , bovenstaande, heeft altijd al bestaan of is dit een css3-dingetje?

2. The element is displayed as a table cell. wat houdt dat in?
ik neem aan dat het hier puur om de positionering gaat...? maar dan nog: wat is het verschil met een los divje?
die zou je toch ook opdracht kunnen geven zich daar te vestigen?

hoe dan ook bedankt uiteraard!

groeten jeel2008

 

[csshunter]

Hoi jeel2008,

1. dit, bovenstaande, heeft altijd al bestaan of is dit een css3-dingetje?

De {display: table;} enz. zat altijd al gewoon in css2.1: [url]www.w3.org/TR/CSS2/visuren.html#display-prop[/URL].

• En het is ook niet van de laatste jaren. Het was al begonnen in de oertijd van de Working Draft versie van CSS2 in 1998 (specificatie hier), en staat er sindsdien in. Bestaat dus al bijna 15 jaar!

Maar ... in de praktijk was het slecht toepasbaar, omdat Internet Explorer (wie anders?) dit niet ondersteunde: t/m versie IE7 niet.
Met ingang van IE8 is daar verbetering in gekomen: [url]www.quirksmode.org/css/display.html[/URL]

=======

2. The element is displayed as a table cell. wat houdt dat in?
ik neem aan dat het hier puur om de positionering gaat...? maar dan nog: wat is het verschil met een los divje?
die zou je toch ook opdracht kunnen geven zich daar te vestigen?

Een tabel-cel heeft eigenaardigheden die een gewone div niet kent. Bv. het opduwen van naastliggende cellen, het verdelen van de horizontale en/of verticale ruimte tussen de rijen/kolommen/cellen onderling, enz. als de inhoud van 1 of meer cellen toeneemt, enz. *)

Bij die eigenaardigheden van tabel-cellen hoort ook de {vertical-align: middle;}. Een gewone <div> of <p> kan zijn inhoud niet verticaal centreren (tenminste niet los van z'n paddings of line-height), een tabel-cel wel. **)
Dat is wat we hier nodig hadden, want horizontaal centreren van een <div> lukt altijd wel.

Met vriendelijke groet,
CSShunter
___________
*) Daarom is een tabel in het algemeen ook ongeschikt voor de opmaak van een webpagina (behalve de html-vervuiling met veel te veel elementen): zodra er in 1 cel iets gebeurt, rekt en trekt het hele conglomeraat mee: waar je meestal niet mee gediend bent.
Vooral cellen met achtergrondafbeeldingen kunnen drastisch dwars gaan liggen en alles verstieren.

**) Alleen images kan je een {vertical-align: middle;} meegeven om halverwege een regel te komen.