[div's / CSS] Achtergrond met behulp van een div - Softwareontwikkeling

maandag 21 juli 2008 23:31

Acties:

Bug Killer

Topicstarter

Ik ben redelijk nieuw met div-layouts, na jaren lang table layouts gemaakt te hebben. Deze week ben ik het toch maar eens gaan proberen, aangezien table layouts toch hun limitaties hebben.

Ik heb in de pagina een soort wrapper-div die gecentreerd is in de pagina en waar dus alles in komt te staan. Deze div wil ik een background-color meegeven. In IE7 werkt dit wel, maar in andere browsers zoals FF, Safari en Opera niet.

Als ik een height opgeef, werkt het wel, net zo als dat ik float op bijv. left zet. Met beide oplossingen ben ik natuurlijk niet geholpen, omdat deze andere effecten hebben. Het zou ook goed (en misschien wel beter) als de achtergrond van boven tot onderaan het scherm zou lopen (en ook goed door blijft lopen bij scrollen).

De betreffende pagina: http://dev.evpwebdesign.nl/ll_test/

IE7:

Afbeeldingslocatie: http://dev.evpwebdesign.nl/ll_test/screenshots/ll_ie7_small.jpg

FF:

Afbeeldingslocatie: http://dev.evpwebdesign.nl/ll_test/screenshots/ll_ff_small.jpg

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
        <div id="maindiv">           <!-- HIER GAAT HET OM -->
            <div id="header">
                Header image
            </div>
            <div class="menu">
                <ul>
                    <li>
                        <a href="index.html">Item 1</a>
                    </li>
                    <li>
                        <a href="index.html">Item 2</a>
                    </li>
                    <li>
                        <a href="index.html">Item 3</a>
                    </li>
                    <li>
                        <a href="index.html">Item 4</a>
                    </li>
                    <li>
                        <a href="index.html">Item 5</a>
                    </li>
                    <li>
                        <a href="index.html">Item 6</a>
                    </li>
                </ul>
            </div>
            <div id="centerdiv">
                <div class="contentdiv">
                    Primary Content
                </div>
            </div>
            <div id="rightdiv">
                <div id="utgadget"></div>
                <div class="sidecontentdiv">Secondary Content</div>
                <div class="trackerdiv">Forum Tracker</div>
            </div>
            <div id="copyright">
                [ ...: <span class="highlighted">...</span> ]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 2008 <span class="highlighted">...</span> ]
            </div>
        </div>
    </body>
</html>

Cascading Stylesheet:

...

div#maindiv {
     position: relative;
     width: 1320px;

     margin: 0px auto;
    
     background-color: #999999;
}

...

Heeft er iemand een idee?

maandag 21 juli 2008 23:49

Acties:

Juup

Waarom heb je 'm position relative gegeven?
deze div heeft geen "echte" inhoud omdat z'n kinderen floaten. Daarom neemt hij niet de hoogte van de content aan.
Oplossing: position niet meer relative en height (of top + bottom) hard opgeven.

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.

dinsdag 22 juli 2008 00:00

Acties:

ERIKvanPAASSEN

Bug Killer

Topicstarter

Ik heb hem 'position: relative' gegeven, omdat ik het gevaarte dan kan centreren met 'margin: 0px auto;'. Op die manier blijft wanneer het venster te klein is voor de nogal brede pagina, de linkerkant van de div in beeld (alleen de rechterkant wordt afgesneden), wat ook de bedoeling is.

En de pagina's wordt als template aan een cms gehangen. Ik heb dus geen idee hoe hoog de pagina gaat worden, anders was er geen probleem.

dinsdag 22 juli 2008 00:08

Acties:

crisp

Devver

Pixelated

ERIKvanPAASSEN schreef op dinsdag 22 juli 2008 @ 00:00:
Ik heb hem 'position: relative' gegeven, omdat ik het gevaarte dan kan centreren met 'margin: 0px auto;'. Op die manier blijft wanneer het venster te klein is voor de nogal brede pagina, de linkerkant van de div in beeld (alleen de rechterkant wordt afgesneden), wat ook de bedoeling is.

Daar heb je geen relative positioning voor nodig (kwaad kan het ook niet though, en het is handig voor eventuele absoluut gepositioneerde elementen binnen je container).

En de pagina's wordt als template aan een cms gehangen. Ik heb dus geen idee hoe hoog de pagina gaat worden, anders was er geen probleem.

Je zal nogthans wel je floats* binnen je container moeten clearen als je wilt dat je container deze floats omspant. Een alternatief is je container overflow:hidden of auto te geven, dat triggert een soort vorm van 'auto-clearing' (wat IE al standaard doet, maar wat niet volgens de CSS richtlijnen is).

* althans, ik hoop maar dat je je kolommen laat floaten en deze niet absoluut positioneert. In het laatste geval staan ze helemaal buiten de 'flow' (behalve dan dat ze vanwege de position:relative je container als referentiepunt nemen) en kunnen geen invloed uitoefenen op de hoogte van je container.

[ Voor 12% gewijzigd door crisp op 22-07-2008 00:11 ]

Intentionally left blank

dinsdag 22 juli 2008 00:10

Acties:

Arjen Tempel

Je kunt de #maindiv div in Firefox de juiste hoogte geven door de laatste div (#copyright) niet te floaten, maar juist een clear te geven:

code:

div#copyright {
  clear:both;
  color:#FFFFFF;
  font-size:10px;
  padding-bottom:10px;
  text-align:center;
  width:100%;
}

dinsdag 22 juli 2008 21:32

Acties:

ERIKvanPAASSEN

Bug Killer

Topicstarter

crisp schreef op dinsdag 22 juli 2008 @ 00:08:
Daar heb je geen relative positioning voor nodig (kwaad kan het ook niet though, en het is handig voor eventuele absoluut gepositioneerde elementen binnen je container).

Ik heb zitten zoeken hoe ik div's moest centreren, en de meest geboden oplossing was toen door de positioning op relative te zetten (is relative eigenlijk niet standaard?) en margin op 0px auto. Wat is de gangbare manier dan?

crisp schreef op dinsdag 22 juli 2008 @ 00:08:
* althans, ik hoop maar dat je je kolommen laat floaten en deze niet absoluut positioneert.

Dat had ik dan net nog wel begrepen, dus ze floaten inderdaad.

Al met al is het dus opgelost door de boel te clearen (weer wat geleerd, want ik wist even niet waar ik het zoeken moest) en de copyright-layer niet te laten floaten, zoals jullie aangaven. Nu renderen de diverse browsers netjes hetzelfde. In ieder geval bedankt voor de duidelijke en snelle reacties! $_/-\o_$

dinsdag 22 juli 2008 22:18

Acties:

Borizz

ERIKvanPAASSEN schreef op dinsdag 22 juli 2008 @ 21:32:
[...]

Ik heb zitten zoeken hoe ik div's moest centreren, en de meest geboden oplossing was toen door de positioning op relative te zetten (is relative eigenlijk niet standaard?) en margin op 0px auto. Wat is de gangbare manier dan?

Het centreren van een div doe je inderdaad met 2 gelijke waardes voor margin-left en margin-right, daar wordt dan vaak als waarde 'auto' voor gebruikt inderdaad. Maar het element hoeft niet relatief gepositioneerd te zijn.

Dat had ik dan net nog wel begrepen, dus ze floaten inderdaad.

Al met al is het dus opgelost door de boel te clearen (weer wat geleerd, want ik wist even niet waar ik het zoeken moest) en de copyright-layer niet te laten floaten, zoals jullie aangaven. Nu renderen de diverse browsers netjes hetzelfde. In ieder geval bedankt voor de duidelijke en snelle reacties! $_/-\o_$

Het clearen kan je ook op #maindiv zelf doen, door de overflow hiervan op hidden of auto te zetten.

If I can't fix it, it ain't broken.

woensdag 23 juli 2008 12:38

Acties:

Cartman!

ERIKvanPAASSEN schreef op dinsdag 22 juli 2008 @ 21:32:
[...]
is relative eigenlijk niet standaard?

static

en met een clear element kun je het dus oplossen zoals aangegeven... of inderdaad je container op overflow:auto te gooien.

[ Voor 10% gewijzigd door Cartman! op 23-07-2008 12:38 ]