Pagina 1 van 2 12 Laatste

Discussie: Center div

  1. #1

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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
    profound's schermafbeelding
    Lid sinds
    13/12/08
    Locatie
    Dendermonde
    Berichten
    3.901
    iTrader
    5 (100%)
    voeg eens position: relative toe. En heb je een doctype gedeclareerd?

  3. #3

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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
    dendaak's schermafbeelding
    Lid sinds
    1/07/04
    Berichten
    6.396
    iTrader
    2 (100%)
    Plaats het eens ergens online aub. Dan kunnen we het waarschijnlijk sneller vinden.
    Ward.

  5. #5

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    iTrader
    4 (100%)

  6. #6

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

  7. #7
    dendaak's schermafbeelding
    Lid sinds
    1/07/04
    Berichten
    6.396
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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

    Lid sinds
    14/08/10
    Locatie
    Diest
    Berichten
    2.420
    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
    gille's schermafbeelding
    Lid sinds
    2/12/03
    Locatie
    Wortegem/Gent
    Berichten
    2.106
    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
    Scissor's schermafbeelding
    Lid sinds
    14/09/02
    Berichten
    1.124
    iTrader
    0
    Om te centreren in IE moet je text-align:center; toevoegen

  12. #12
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.822
    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
    Scissor's schermafbeelding
    Lid sinds
    14/09/02
    Berichten
    1.124
    iTrader
    0
    Tbh is zijn vraag ook niet echt duidelijk geformuleerd

  14. #14
    gille's schermafbeelding
    Lid sinds
    2/12/03
    Locatie
    Wortegem/Gent
    Berichten
    2.106
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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 !

Pagina 1 van 2 12 Laatste

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
  •  

Inloggen

Inloggen