Weergegeven resultaten: 1 t/m 18 van 18

Discussie: Center div

  1. #1
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    283
    iTrader
    4 (100%)

    Center div

    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-code:
    #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 ?

  2. #2
    Member profound's schermafbeelding
    Lid sinds
    13/12/08
    Locatie
    Dendermonde
    Berichten
    3.712
    iTrader
    5 (100%)
    voeg eens position: relative toe. En heb je een doctype gedeclareerd?

  3. #3
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    283
    iTrader
    4 (100%)
    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;

  4. #4
    Member dendaak's schermafbeelding
    Lid sinds
    1/07/04
    Berichten
    6.377
    iTrader
    2 (100%)
    Plaats het eens ergens online aub. Dan kunnen we het waarschijnlijk sneller vinden.
    Ward.

  5. #5
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    283
    iTrader
    4 (100%)

  6. #6
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    283
    iTrader
    4 (100%)
    Het toont uiteraard wel deftig op een resolutie van 1920px of hoger...

  7. #7
    Member dendaak's schermafbeelding
    Lid sinds
    1/07/04
    Berichten
    6.377
    iTrader
    2 (100%)
    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.

  8. #8
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    283
    iTrader
    4 (100%)
    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...

  9. #9
    Member BramVanroy's schermafbeelding
    Lid sinds
    14/08/10
    Locatie
    Diest
    Berichten
    2.362
    iTrader
    1 (100%)
    Citaat Oorspronkelijk geplaatst door profound Bekijk bericht
    voeg eens position: relative toe.
    Waarom? Altijd die position: relatives. Nergens voor nodig.

  10. #10
    Approved 9-lifer gille's schermafbeelding
    Lid sinds
    2/12/03
    Locatie
    Wortegem/Gent
    Berichten
    2.100
    iTrader
    35 (95%)
    Logische zou zijn

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

  11. #11
    Member Scissor's schermafbeelding
    Lid sinds
    14/09/02
    Berichten
    1.122
    iTrader
    0
    Om te centreren in IE moet je text-align:center; toevoegen

  12. #12
    Crew Member Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.815
    iTrader
    18 (100%)
    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. ^^

  13. #13
    Member Scissor's schermafbeelding
    Lid sinds
    14/09/02
    Berichten
    1.122
    iTrader
    0
    Tbh is zijn vraag ook niet echt duidelijk geformuleerd

  14. #14
    Approved 9-lifer gille's schermafbeelding
    Lid sinds
    2/12/03
    Locatie
    Wortegem/Gent
    Berichten
    2.100
    iTrader
    35 (95%)
    Hehe, true 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.

  15. #15
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    283
    iTrader
    4 (100%)
    Citaat Oorspronkelijk geplaatst door gille Bekijk bericht
    Hehe, true 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.
    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 !

  16. #16
    Crew Member Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.815
    iTrader
    18 (100%)
    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.

  17. #17
    Approved 9-lifer gille's schermafbeelding
    Lid sinds
    2/12/03
    Locatie
    Wortegem/Gent
    Berichten
    2.100
    iTrader
    35 (95%)
    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...

  18. #18
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    283
    iTrader
    4 (100%)
    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;

Discussie informatie

Users Browsing this Thread

Op dit moment bekijken 1 gebruikers deze discussie. (0 leden en 1 gasten)

Regels voor berichten

  • Je mag geen nieuwe discussies starten
  • Je mag niet reageren op berichten
  • Je mag geen bijlagen versturen
  • Je mag niet je berichten bewerken
  •