LinkBack URL
About LinkBacks
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:
Maar dit lijkt niet te lukken. Waarschijnlijk door de width...HTML-code:#header{ background:url(../images/header.jpg) no-repeat; width: 1920px; height:577px; margin:0 auto; }
Iemand enig idee ?
voeg eens position: relative toe. En heb je een doctype gedeclareerd?
Nope werkt niet.
HTML-code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML-code:background:url(../images/header.jpg) no-repeat; width: 1920px; height:577px; margin-left:auto; margin-right:auto; position:relative;
Plaats het eens ergens online aub. Dan kunnen we het waarschijnlijk sneller vinden.
Ward.
Het toont uiteraard wel deftig op een resolutie van 1920px of hoger...
Paste dit eens in uw CSS.
.fl { float: left; } .fr { float: right; } .clear { clear: bo - Pastebin.com
Echt maar rap rap gedaan maar dat zou moeten werken? Weet wel niet x-browser.
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...
Waarom? Altijd die position: relatives. Nergens voor nodig.Oorspronkelijk geplaatst door profound
Logische zou zijn
#header{
background:url(../images/header.jpg) no-repeat top center;
width: 100%;
height:577px;
margin:0 auto;
}
Om te centreren in IE moet je text-align:center; toevoegen
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. ^^
Tbh is zijn vraag ook niet echt duidelijk geformuleerd
Hehe, trueHad 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.
Dit werkt perfect ! Ik heb enkel nog een scroll-probleemHehe, true
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.
Body staat op overflow-x:hidden; maar op kleinere scherm kan ik nog steeds horizontaal scrollen (zonder scrolbar).
Alvast enorm bedankt !
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.
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...
Het is in orde dankzij Zero Grav zijn max-width tip
Hier is de code:
HTML-code:background:url(../images/header.jpg) no-repeat scroll top; max-width: 1920px; height:615px; margin:0 auto; position:relative;
Op dit moment bekijken 1 gebruikers deze discussie. (0 leden en 1 gasten)
Regels voor berichten
Met citaat reageren