Archief - Center div

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.
m

meuh

Legacy Member
Ik heb een div header waar die een background image heeft met een width van 1920px. Deze div zou op enkel scherm resolutie perfect gecentreerd moeten staan.

Normaal zou ik dit zo doen:

HTML: 
#header{
	background:url(../images/header.jpg) no-repeat;
	width: 1920px;
	height:577px;
	margin:0 auto;
}

Maar dit lijkt niet te lukken. Waarschijnlijk door de width...
Iemand enig idee ?
p

profound

Legacy Member
voeg eens position: relative toe. En heb je een doctype gedeclareerd?
m

meuh

Legacy Member
Nope werkt niet.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML: 
background:url(../images/header.jpg) no-repeat;
	width: 1920px;
	height:577px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
d

dendaak

Legacy Member
Plaats het eens ergens online aub. Dan kunnen we het waarschijnlijk sneller vinden.
Ward.
m

meuh

Legacy Member
Het toont uiteraard wel deftig op een resolutie van 1920px of hoger...
m

meuh

Legacy Member
Mja die header op den body plaatsen zal sowieso wel werken. Maar ik wil die persé in nen div omdat deze achteraf nog moet geanimeerd worden met jquery...
g

gille

Legacy Member
Logische zou zijn

#header{
background:url(../images/header.jpg) no-repeat top center;
width: 100%;
height:577px;
margin:0 auto;
}
Z

Zero Grav

Legacy Member
Maar allé, lees eens wat hij vraagt. Tot nu toe heeft blijkbaar alleen Gille dat gedaan.
Maar die margin: 0 auto; en width: 100% moogt ge wegdoen, Gille. Is sowieso een block-element dus zal de volledige breedte al opvullen, en een margin om te centreren op een element van de volledige breedte zal ook niet veel doen. ^^
g

gille

Legacy Member
Hehe, true :D Had gwoon rap de code aangepast. Code is vrij duidelijk, zelfde principe als hier op 9lives, de achtergrond.

Mocht hij toch altijd een element willen centeren, moet hij trouwens position: absolute gebruiken

{
position: absolute;
width: 1920px;
left: 50%;
margin-left: -960px;
}

Zou ervoor zorgen dat hij gecentered blijft, ook al is het browser scherm kleiner dan 1920px. Dunno of je dan scrollbars hebt, nog niet geprobeerd, maar is wel een mouw aan te passen.
m

meuh

Legacy Member
gille zei:
Hehe, true :D Had gwoon rap de code aangepast. Code is vrij duidelijk, zelfde principe als hier op 9lives, de achtergrond.

Mocht hij toch altijd een element willen centeren, moet hij trouwens position: absolute gebruiken

{
position: absolute;
width: 1920px;
left: 50%;
margin-left: -960px;
}

Zou ervoor zorgen dat hij gecentered blijft, ook al is het browser scherm kleiner dan 1920px. Dunno of je dan scrollbars hebt, nog niet geprobeerd, maar is wel een mouw aan te passen.
Klik om te vergroten...

Dit werkt perfect ! Ik heb enkel nog een scroll-probleem

Body staat op overflow-x:hidden; maar op kleinere scherm kan ik nog steeds horizontaal scrollen (zonder scrolbar).

Alvast enorm bedankt !
Z

Zero Grav

Legacy Member
Zolang ge die 1920px width gaat laten staan gaat dat zo zijn. Die moet gewoon weg. Ge kunt wel max-width: 1920px; zetten en dan die margin: 0 auto; om het gecentreerd te laten in browsers met een hogere resolutie.
g

gille

Legacy Member
Eventueel kun je wat media queries gebruiken? Is toch het eerste wat in mij opkomt...

En geef eens een link? Want is nog altijd vaag wat je precies wilt...
m

meuh

Legacy Member
Het is in orde dankzij Zero Grav zijn max-width tip :)

Hier is de code:

HTML: 
background:url(../images/header.jpg) no-repeat scroll top;
	max-width: 1920px;
	height:615px;
	margin:0 auto;
        position:relative;
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