[CSS] probleem met margins: FF vs IE - Softwareontwikkeling

zaterdag 24 september 2005 15:13

Acties:

Topicstarter

Beste mensen, ik loop al heel lang te klooien met een stukje CSS en kom er gewoon niet uit. Na veel zoekwerk op o.a. w3schools.com snap ik wel wat er aan de hand is, alleen niet hoe ik het op moet lossen.

Een tekstuele omschrijving van het probleem: ik heb een pagina met een achtergrond die verticaal getiled wordt. Bovenin de pagina staat een blok van 779 pixels breed. Hieronder staat een ander blok van 749 pixels breed. De bedoeling is dat het onderste blok horizontaal gecentreerd staat onder het bovenste blok. Dit heb ik heel simpel opgelost met een automagische margin. Echter: wanneer ik het browservenster horizontaal kleiner maak gaat, als je maar lang genoeg doorgaat met kleiner maken, het blok ten opzichte van de achtergrond verschuiven. Dit is logisch: door de automatische margin wil hij hem in het midden houden. Het gekke is dat dit alleen in Firefox gebeurt.

Dit is mijn CSS:

Cascading Stylesheet:

body,html
        {
            margin: 0px;
            padding: 0px;
            height: 100%;
            background: url(backtotaal.gif);
            background-position: top center;
            background-repeat: repeat-y;
        }

#canvas
        {
            margin: auto;
            width: 779px;
            height: 100%;
        }

#top
        {
            padding-left: 250px;
            padding-top: 17px;
            padding-bottom: 13px;
            background: url(top.gif);
        }

#main
        {
            margin: auto;
            width: 749px;
            background: url(1px.jpg);
            background-repeat: repeat-y;
            min-height: 90%;
            _height: 90%;
        }

Dit is mijn HTML:

HTML:

<body>

    <div id="canvas">

        <div id="top">
            <a href="http://www.posttoast.nl" target="_blank">[img]"banner.gif"[/img]</a>
        </div>

        <div id="main">
            Hier komt content
        </div>

    </div>

</body>

Een werkend (of dus eigenlijk niet werkend

) voorbeeld kun je hier bekijken.

Heeft iemand enig idee wat ik moet doen? Eventueel ander commentaar over mijn stylesheet is welkom (want leerzaam), commentaar over de vormgeving mag je voor je houden (want nu nog afwezig)

omniscale.nl

zaterdag 24 september 2005 15:43

Acties:

Gwaihir

Gebruik hiervoor een negatieve marge -- achtergrond artikel te vinden op A List Apart.

code:

position:absolute;
left:50%;
width:749px;
margin-left:-375px;

zaterdag 24 september 2005 16:33

Acties:

posttoast

Topicstarter

Ik doe ongetwijfeld iets verkeerd, maar als ik dit in mijn stylesheet zet:

Cascading Stylesheet:

#main
        {
            position: absolute;
            left: 50%;
            width: 749px;
            margin-left: -375px;
            width: 749px;
            background: url(1px.jpg);
            background-repeat: repeat-y;
            min-height: 90%;
            _height: 90%;
        }

verandert er wel iets maar is het probleem niet opgelost. Sterker: iets soortgelijks treedt nu ook in Internet Explorer op. Zie het online voorbeeld.

omniscale.nl

zaterdag 24 september 2005 21:16

Acties:

Gwaihir

Hmm.. praten we denk ik langs elkaar heen.

Zei je in de openingspost niet juist dat alleen Firefox het in eerste instantie goed deed? Ik dacht dat je het hinderlijk vond dat de onderste box niet zo lang mogelijk in het midden bleef (bij het kleiner maken van je window). Kennelijk bedoelde je iets anders?

Maar één keertje "width" staat wat netter btw

zaterdag 24 september 2005 21:57

Acties:

posttoast

Topicstarter

Birdie schreef op zaterdag 24 september 2005 @ 21:16:
Hmm.. praten we denk ik langs elkaar heen. Zei je in de openingspost niet juist dat alleen Firefox het in eerste instantie goed deed? Ik dacht dat je het hinderlijk vond dat de onderste box niet zo lang mogelijk in het midden bleef (bij het kleiner maken van je window). Kennelijk bedoelde je iets anders?

Maar één keertje "width" staat wat netter btw

Die dubbele width is een beetje overkill ja

Ik denk dat ik het dan inderdaad niet helemaal goed uitgelegd heb: in het voorbeeld in mijn openingspost gaat het wel goed in IE maar niet in FF. Ik heb het probleem nog niet op kunnen lossen, dus als je me verder kunt helpen zou dat heel fijn zijn. Geldt ook voor andere toevallige voorbijgangers natuurlijk

omniscale.nl

zondag 25 september 2005 03:40

Acties:

Gwaihir

Je wilt 'm dus juist niet laten schuiven t.o.v. je top? Ehm.. wat is er dan nog auto aan? Is dan een margin-left: 15px; (i.p.v. auto) niet alles wat je zoekt?

Birdie vermoedt dat hij 't probleem nog altijd niet begrepen heeft

zondag 25 september 2005 12:49

Acties:

posttoast

Topicstarter

Birdie schreef op zondag 25 september 2005 @ 03:40:
Je wilt 'm dus juist niet laten schuiven t.o.v. je top? Ehm.. wat is er dan nog auto aan? Is dan een margin-left: 15px; (i.p.v. auto) niet alles wat je zoekt?

Birdie vermoedt dat hij 't probleem nog altijd niet begrepen heeft

Ik zal het nog eens proberen uit te leggen

Ik heb een achtergrond in de vorm van een breed plaatje met een zwart vlak in het midden. Over dat zwarte vlak moet een blok komen waardoor je dat zwarte vlak dus niet meer ziet. Wanneer ik echter mijn browservenster kleiner maak gaat de boel op een gegeven moment schuiven waardoor het zwarte vlak tóch zichtbaar wordt.

margin-left: 15px; heb ik al geprobeerd maar dan gebeurt er gek genoeg precies hetzelfde...

Sorry dat mijn uitleg misschien niet helemaal helder is, maar als je mijn eerste voorbeeld opent en vervolgens je browser horizontaal kleiner maakt zie je als het goed is wat ik bedoel.

omniscale.nl

zondag 25 september 2005 21:23

Acties:

twopack

Post eens een PhotoShop screenie van je gewenste situatie, want volgens mij kan je dit veel handiger oplossen.

specs

maandag 26 september 2005 09:25

Acties:

posttoast

Topicstarter

twopack schreef op zondag 25 september 2005 @ 21:23:
Post eens een PhotoShop screenie van je gewenste situatie, want volgens mij kan je dit veel handiger oplossen.

Das een beetje lastig omdat mijn gewenste situatie gewoon al zichtbaar is. Het gaat mis als je gaat schuiven.

Zit er hier geen enkele CSS guru die mij kan vertellen hoe ik dit op moet lossen? Wat mij betreft gooi ik de hele stylesheet over hoop, als het resultaat maar goed is

omniscale.nl

maandag 26 september 2005 11:13

Acties:

Sappie

De Parasitaire Capaciteit!

Ik heb even snel wat in elkaar gegooid. Kijk maar of je hier wat aan hebt:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <style type="text/css">
        html {
            height: 100%;
            background: red url("background1.gif") repeat-y top left;
        }
        
        body {
            position: relative;
            width: 700px;
            margin: 0 auto;
            min-height: 100%;
            _height: 100%;
            background: yellow url("background2.gif") repeat-y top left;
        }
        
        #header {
            position: absolute;
            background: green;
            width: 750px;
            height: 100px;
            top: 0;
            left: -25px;            
        }
        
        #container { padding: 100px 0 0 0; }    
    </style>
    <title>test</title>
</head>
<body>
    <div id="header"></div>
    <div id="container">blaat</div>
</body>
</html>

Specs | Audioscrobbler

maandag 26 september 2005 12:00

Acties:

posttoast

Topicstarter

Sappie schreef op maandag 26 september 2005 @ 11:13:
Ik heb even snel wat in elkaar gegooid. Kijk maar of je hier wat aan hebt:
[knip]

Ja, dat deed het hem!

Bedankt voor deze oplossing.

omniscale.nl