Plaatje verticaal centeren op variabele hoogte

Status
Niet open voor verdere reacties.
T

turbojohn

Gebruiker
Lid geworden
26 jun 2007
Berichten
262
Hoi,

Weet iemand hoe je een plaatje (/div) verticaal kan centreren ten op zichte van een variabele achtergrond? (Dus de achtergrond staat op: auto-height).

Groetjes en alvast bedankt!:thumb:
 
Ik gebruik altijd dit om verticaal te centreren:

Code: 
#element {

  position: absolute; // of fixed als het ten opzicht van het scherm moet
  top: 50%;
  margin-top: -100px; ( - de helft van de hoogte van je element );
  height: 200px;

}
 
Ja zoiets ja...
En dan het plaatje op de 'in-hoogte-verschillende-div' positioneren dus.

Ik ga het eens proberen.
Thnx!
 
Dit is mijn stukje uit mijn indexpagina:
HTML: 
<div id="center">
		
			<div id="centertext">
			<div id="logo_kaars"></div>

En dit is het bijbehorend .css-filetje:

HTML: 
#logo_kaars {
	background-image: url('../Logo/vlam-links-rechts.png');
	position: absolute;
	top: 50%;
	left: 50%;
	height: 128px;
	width: 900px;
	margin-left: -450px;

}

#center {
	
	background-image: url('../Logo/kaars_center.png');
	background-repeat: repeat-y;
	margin-top: 0;
	font-family: arial;
	color: #DAA520;
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	min-height: 300px;
	
}

#centertext{

        margin-left: 150px;
	width: 600px;
        

}

Toch blijft het plaatje mooi bovenin staan (absolute dus?) En ik wil het precies in het midden hebben... Kan dat niet?
 
Je kunt nog proberen om aan #center even position: relative toe te voegen. Als dat ook niet werkt, zet het geheel dan even online.
 
Is online... www.ambachtelijkkaarslicht.nl
Dat plaatje blijft lekker bovenaan steken.
Als ik refresh overigens niet, dan schiet ie wel naar het midden toe, om daarna doodgemoedereerd bovenaan te gaan hangen.
Ik denk dat dat komt doordat ik er ook nog relatieve afmetingen bij hebt staan, dat de browser dat niet accepteerd ofzo.
 
Om welk plaatje gaat het dan? Die twee wapenschilden die 'hangen' hier mooi in het midden hoor.
 
:thumb: thnx voor je snelle reactie!
Ja dat klopt.
Maar ga eens naar producten... dan blijven die wapenschilden bovenaan hangen en blijven niet in het midden.
Ik ben denk ik niet duidelijk genoeg geweest in mijn vraag.

Die pagina (div center) verschilt in hoogte en betreft dus die kaarsen aan weerszijde.
Die verlengen naar gelange er meer tekst is.. logisch dus.
Nu wil ik hebben dat die schildjes dus mooi altijd op het midden van de kaars blijven, dus altijd in het midden van het venster ook.
En dat is bij mij niet zo.

Een oplossing daarvoor?
 
Ja, dat komt omdat je geen position: relative; aan #center hebt gegeven zoals ik zei :p

Als je iets absoluut positioneert, dan is dat altijd ten opzichte van het dichtstbijzijnde parent-element waarvan de position niet op static staat (default, als je geen position opgeeft is het static.).

Als je #center dus geen position geeft, is het window het eerste element ten opzichte waarvan het gepositioneerde element zich gaat positioneren. Dan staat het dus altijd in het midden van het scherm in plaats van in het midden van de content.
 
Hoi,

T'is nu gelukt! Thnx man!
Moet ik in principe in elke css-container aangeven of het relative of absoluut is?
Want waarom werkt het nu wel, en zonder #center relative te maken niet?
 
Jep sorry.
Ik las het een beetje te snel dus vatte het woord 'window' niet:p

Heb het nu;)

Ik ben voor even uit de brand.
Owja, wat ik nog wel graag zou willen weten:
Je kunt in principe op deze manier ook vanuit de bottom positioneren?
Als je nu op www.ambachtelijkkaarslicht.nl kijkt, is het goed, het schild staat vlak boven de standaard, zoals het moet.
Alleen ga ik naar 'producten' dan staat ie mooi in het midden, zoals het in het cssfile beschreven staat.
Alleen eigenlijk moet het daar ook vlak boven de standaard komen (iets hoger dan als op de index). Hmm.. ingewikkeld wordt het;)

Weet je toevallig hier ook een oplossing voor?

Ik moet zeggen, van mij mag helpmij lang blijven bestaan, ik leer er elke minuut bij:thumb:
 
Tsja, je kunt in plaats van top: 50% en margin-top: - nog wat ook gewoon

Code: 
bottom: {yy}px;

gebruiken. Vervang {yy} door het aantal pixels dat je hem van onderen wilt hebben.
 
Oké, toppie!
Ik ga zo eens stuntelen ermee.
Thnx voor je hulp ErikBooy007!
Keigaaf dat je me even geholpen hebt! :)
 
Anti-verspring tip voor Firefox

Hoi TurboJohn,
Niet over het centreren, maar wel over de site (leuk ontwerp, trouwens) nog een tip.
Als je even in je stylesheet toevoegt
Code: 
[font=courier]html { height: 101%; }[/font]
ben je er van af dat de pagina bij hoge resoluties in Firefox links-rechts verspringt, als je wisselt tussen "Home" of "Agenda" en de andere tabbladen. :)

Verklaring: bij pagina's die volledig op het scherm passen, laat Firefox de rechter-scrollbar helemaal weg, en benut de hele schermbreedte als bruikbaar voor de pagina.
Als een pagina te lang wordt, komt de scrollbar erbij: maar dan is de pagina smaller, en bij een links-rechts gecentreerde pagina schuift dus ook het horizontale midden een stukje naar links op.

Bij andere browsers blijft de rechter scrollbar "aan" staan, ook als het een korte pagina is - de scrollbar is dan "uitgegrijsd" en er zit geen schuifje op. Zo blijven alle pagina's, lang of kort, altijd even breed.

Om Firefox te forceren er óók altijd een scrollbar naast te zetten (waarmee het verspringen onmogelijk gemaakt wordt), geef je 1% extra hoogte aan de <html> tag. De scrollbar-rechts verschijnt nu ook in FF, met een schuifje dat bijna zo hoog is als de schuifjesruimte: dat is die 1% speling.

Bij een meer dan scherm-grote pagina heb je geen last van die 101%, want als de <body> geen vastgestelde hoogte meekrijgt, past die zich aan. En de rechter scrollbar ook: het schuifje wordt net zo groot als nodig is om de pagina volledig te kunnen scrollen.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan