CSS vaste layout zonder position:absolute - Softwareontwikkeling

maandag 12 december 2005 20:19

Acties:

Es gibt keine kleinen Punkte!

Topicstarter

Goedendag,

Voor de lol ben ik vanavond een beetje aan spelen met css. Eén ding wil me echter niet lukken.

De sites waaraan ik werk hebben vaak een vaste layout (zie voorbeeld code). Divs positioneer ik waarnodig met de float en clear properties. Het nadeel hiervan is dat de floats afhankelijk zijn van de beschikbare ruimte en dus de afmetingen van het browser venster. Dus wanneer het browser venster te klein wordt verspringt de layout. De oplossingen welke ik dan gebruik zijn een container div of absolute positioning.

Voorbeeld code:

code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
    <head>
        <title>CSS positioning</title>
        <style>
            div#header
            {
                background-color:  gray;
                width:           600px;
                height:          100px;
                clear:            both;
            }
            
            div#menu
            {
                background-color:  red;
                float:             left;
                width:           100px;
            }
            
            div#content
            {
                background-color:  blue;
                float:             left;
                width:           500px;
            }
            
            div#footer
            {
                background-color:   green;
                width:             600px;
                clear:             both;
            }
        </style>
    </head> 
    <body>
        <div id="header">
            header
        </div>
        <div id="menu">
            menu
        </div>
        <div id="content">
            content
        </div>
        <div id="footer">
            footer
        </div>
    </body>
</html>

Graag zou ik willen weten of m.b.v. css floats en zonder div containers / absolute positioning hetzelfde gerealiseerd kan worden en hoe. Dit lijkt een code request, maar dat is het niet aangezien ik al twee oplossingen heb. Echter deze oplossingen vind ik beide niet optimaal.

Waarom wil ik geen container div gebruiken:
- Minder code (ik ben een zeurkees I know

)
Waarom wil ik geen absolute position gebruiken:
- Elementen staan vaak los van elkaar en kunnen hierdoor overlappen.

Tot nu kan ik over dit onderwerp niks vinden, dus wie kan me uit de brand helpen.

[ Voor 9% gewijzigd door DerKleinePunkt op 12-12-2005 20:20 ]

Ein kleiner Punkt in einer grossen Welt

maandag 12 december 2005 21:48

Acties:

Verwijderd

M.i. zal toch de specificatie van een container met een vaste breedte nodig zijn. Immers, standaard is de beschikbare breedte de (flexibele) breedte van de browser en daar wil je van afwijken. De vraag lijkt of alternatieven beschikbaar zijn voor een div container.

Voor Firefox en Opera kan dit het element body zijn, waar de eigenschap width een waarde kan worden gegeven, maar helaas doet Internet Explorer daar vooralsnog niets mee. Dus niet cross browser en daardoor niet optimaal.

Een ander container dan een div element zou nog een table element kunnen zijn

. Scoort goed op cross browser-compatibliteit, maar vereist meestal toch meer karakters en is semantisch gezien natuurlijk onjuist. Helaas dus geen beter cross browser alternatief

maandag 12 december 2005 21:58

Acties:

DerKleinePunkt

Es gibt keine kleinen Punkte!

Topicstarter

Verwijderd schreef op maandag 12 december 2005 @ 21:48:
M.i. zal toch de specificatie van een container met een vaste breedte nodig zijn. Immers, standaard is de beschikbare breedte de (flexibele) breedte van de browser en daar wil je van afwijken. De vraag lijkt of alternatieven beschikbaar zijn voor een div container.

Voor Firefox en Opera kan dit het element body zijn, waar de eigenschap width een waarde kan worden gegeven, maar helaas doet Internet Explorer daar vooralsnog niets mee. Dus niet cross browser en daardoor niet optimaal.

Een ander container dan een div element zou nog een table element kunnen zijn . Scoort goed op cross browser-compatibliteit, maar vereist meestal toch meer karakters en is semantisch gezien natuurlijk onjuist. Helaas dus geen beter cross browser alternatief

Kort maar krachtig, das dan mooi kloten...alhoewel een tables

p.s.
bedankt voor de reactie, maar had liever toch wat anders gehoord

Ein kleiner Punkt in einer grossen Welt

maandag 12 december 2005 23:11

Acties:

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op maandag 12 december 2005 @ 21:48:
M.i. zal toch de specificatie van een container met een vaste breedte nodig zijn. Immers, standaard is de beschikbare breedte de (flexibele) breedte van de browser en daar wil je van afwijken. De vraag lijkt of alternatieven beschikbaar zijn voor een div container.

Voor Firefox en Opera kan dit het element body zijn, waar de eigenschap width een waarde kan worden gegeven, maar helaas doet Internet Explorer daar vooralsnog niets mee. Dus niet cross browser en daardoor niet optimaal.

Een width opgeven voor de body werkt ook in Internet Explorer prima. Check bijvoorbeeld onderstaande code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>test</title>
        <style type="text/css">
            html { width: 100%; height: 100%; background: #EEEEEE; }
            
            body {
                width: 600px;
                min-height: 100%;
                margin: 0 auto;
                background: white;
                border-left: 1px solid black;
                border-right: 1px solid black;
            }       
        </style>
        <!--[if lt IE 7]>
            <style type="text/css"> body { height: 100%; } </style>
        <![endif]-->
</head>
<body>
    
</body>
</html>

edit:
Let er wel op dat je IE niet in quirksmode forceert. In de code van de ts gebeurt dat door middel van de (niet verplichte) xml declaratie, die je dus beter weg kan laten ten einde IE in standards mode te laten renderen.

[ Voor 15% gewijzigd door Sappie op 12-12-2005 23:15 ]

Specs | Audioscrobbler

maandag 12 december 2005 23:35

Acties:

Verwijderd

render modes.. Sorry Punkt, thx Sappie! $_/-\o_$
Ik dacht na een test met de voorbeeldcode met MSDN te voor de zekerheid te controleren of Internet Explorer wel/niet de eigenschap width kent voor het element body. Kennelijk ten onrechte, arf.

[ Voor 14% gewijzigd door Verwijderd op 12-12-2005 23:50 ]

dinsdag 13 december 2005 11:34

Acties:

DerKleinePunkt

Es gibt keine kleinen Punkte!

Topicstarter

Sappie schreef op maandag 12 december 2005 @ 23:11:
[...]

Een width opgeven voor de body werkt ook in Internet Explorer prima. Check bijvoorbeeld onderstaande code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>test</title>
        <style type="text/css">
            html { width: 100%; height: 100%; background: #EEEEEE; }
            
            body {
                width: 600px;
                min-height: 100%;
                margin: 0 auto;
                background: white;
                border-left: 1px solid black;
                border-right: 1px solid black;
            }       
        </style>
        
</head>
<body>
    
</body>
</html>
edit:
Let er wel op dat je IE niet in quirksmode forceert. In de code van de ts gebeurt dat door middel van de (niet verplichte) xml declaratie, die je dus beter weg kan laten ten einde IE in standards mode te laten renderen.

Had het voorstel van onezero ook niet geprobeerd

(my bad). De declaratie is inderdaad niet verplicht, maar het ter volledigheid en het definieren van de encoding-type (wat ze in mijn ogen wel mogen verplichten). Maar bedankt voor de tip $_/-\o_$

Ein kleiner Punkt in einer grossen Welt

dinsdag 13 december 2005 11:45

Acties:

Sappie

De Parasitaire Capaciteit!

Dit kan op verschillende manieren en is uiteraard wel verplicht: http://www.w3.org/International/O-charset.html

Specs | Audioscrobbler

dinsdag 13 december 2005 11:52

Acties:

DerKleinePunkt

Es gibt keine kleinen Punkte!

Topicstarter

Was onduidelijk, bedoelde verplicht als via (de in mijn ogen) juiste manier bij xml. Maar had inderdaad de in jouw link gebruikte methode toegepast.

Ein kleiner Punkt in einer grossen Welt