[CSS] div centreren + min width - Softwareontwikkeling

dinsdag 9 oktober 2007 10:24

Acties:

Topicstarter

Ik wil dat mijn site wordt gecentreerd. Hiervoor maak ik gebruik van de "margin:0px auto + width:...px" fix. Echter geef je hierbij een breedte op waardoor dit vast staat.
Nu wil ik dat de width een minimum waarde heeft. Wordt er in de div een blok geplaatst die breder is, moet de site mee scalen, dus breder worden. Weet iemand of dit mogelijk is?

You cannot not communicate

dinsdag 9 oktober 2007 10:33

Acties:

Little Penguin

Met div-layout is dat volgens mij niet mogelijk, het enige alternatief dat ik kan bedenken dat is:
http://www.w3.org/TR/REC-CSS2/tables.html

Door je layout op een grid te baseren zou het eventueel wel mogelijk kunnen zijn - alleen heb ik dat niet getest (is dus alleen maar een idee) en wordt dit niet door IE ondersteund.

Hopenlijk dat IE8 wel aan de volledige CSS2 standaard voldoet, maar daar heb je dus niets aan...

dinsdag 9 oktober 2007 10:35

Acties:

Janoz

Moderator Devschuur®

!litemod

Ondersteund IE met versie 7 nog steeds niet de min-width property?

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

dinsdag 9 oktober 2007 10:35

Acties:

X-trace

Topicstarter

De table method had ik ook al in gedachte, maar heb liever de div. Verder moet het 100% IE proof zijn, en ook IE6 (*zucht ja...)

You cannot not communicate

dinsdag 9 oktober 2007 10:51

Acties:

Little Penguin

X-trace schreef op dinsdag 09 oktober 2007 @ 10:35:
De table method had ik ook al in gedachte, maar heb liever de div. Verder moet het 100% IE proof zijn, en ook IE6 (*zucht ja...)

Verwar de table/grid layout niet met het gebruik van het table-element - het zijn 2 hele verschillende zaken. (Layout vs. semantics).

Maar als je IE6/7 compatible moet zijn is een CSS2 layout dmv de table-eigenschappen inderdaad geen optie. Het enige dat eventueel mogelijk zou zijn (mijns inziens) dat is d.m.v. javascript dynamisch de breedte van de inhoud bepalen en daarna de breedte van de container instellen...

dinsdag 9 oktober 2007 11:41

Acties:

Padschild

Kan het even niet uitproberen in Firefox, maar werkt dit niet?

* html hack voor IE6 (en misschien 7?), dit werkt bij mij in ieder geval in IE6. Zit op m'n stageplek, kan nu dus niet kijken of dit werkt in IE7 en Firefox.

HTML:

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

<head>
    <title>Test</title>
    <style>
    div.test
    {
    margin: 0 auto;
    min-width: 50px; /* minimale breedte voor FF (en IE7?) */
    border: 1px solid blue;
    }

    * html div.test
    {
    width: 50px; /* minimale breedte voor IE6 (en IE7?) */
    }
    </style>
</head>
<body>
    <div class="test">Hoi</div>
    <div class="test">Hoiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
</body>

</html>

[ Voor 8% gewijzigd door Padschild op 09-10-2007 11:46 . Reden: Comments en tagje vergeten ]

dinsdag 9 oktober 2007 11:56

Acties:

X-trace

Topicstarter

Padschild schreef op dinsdag 09 oktober 2007 @ 11:41:
Kan het even niet uitproberen in Firefox, maar werkt dit niet?

* html hack voor IE6 (en misschien 7?), dit werkt bij mij in ieder geval in IE6. Zit op m'n stageplek, kan nu dus niet kijken of dit werkt in IE7 en Firefox.

Even getest maar helaas. Werkt in beide browsers (IE7 & FF) niet

You cannot not communicate

dinsdag 9 oktober 2007 11:58

Acties:

Padschild

X-trace schreef op dinsdag 09 oktober 2007 @ 11:56:
[...]

Even getest maar helaas. Werkt in beide browsers (IE7 & FF) niet

Rotstreek, met de hoogte werkte dit namelijk altijd wel

Javascript is inderdaad nog wel een mogelijkheid, maar een beetje een ranzige oplossing...

Waarvoor wil je het eigenlijk gaan gebruiken?

dinsdag 9 oktober 2007 12:21

Acties:

X-trace

Topicstarter

Javascript doe ik liever niet. Is voor een spelletjes website. Veel bezoekers dus, en ook mensen die misschien een oudere pc hebben.

You cannot not communicate

dinsdag 9 oktober 2007 14:04

Acties:

Kiphaas7

http://www.cssplay.co.uk/boxes/width.html

En dit dan? Gewoon gegoogled op min-width IE....

dinsdag 9 oktober 2007 14:34

Acties:

Goku33

Ownage!

Als je nou gewoon jouw div maakt met een breedte van 100% zodat ie als ie in een grotere div wordt geplaatst gewoon meeschaalt. In jouw div zet je dan weer een andere div met een vaste breedte (bv 200px als dat je minimum waarde moet zijn). Kleiner dan 200px zal jouw div dan toch niet worden maar als de mogelijkheid er is, wel groter?

dinsdag 9 oktober 2007 14:45

Acties:

Blue-eagle

Hmm. Dit werkt bij mij.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Flexible DIV with min-width</title>
<style type="text/css">
    body { text-align: center; }
    #main { width: 70%; margin: 0 auto; background: #aaa; border: 1px solid black; min-width: 500px; height: 500px; }
    #min-width { float: left; clear: all; width: 500px; height: 1px; font-size: 1px; overflow: hidden; }
</style>
</head>

<body>

<div id="main">
    <div id="min-width"> </div>
</div>

</body>
</html>

Edit: getest in IE6, IE7, Firefox, Safari en Opera. Het werkt

Edit2: Ik zou zelf trouwens die "foute" #min-width toevoegen via JS als de browser dit vereist. Dan blijft je HTML schoon, en die JS functie kan je later weer heel makkelijk uitzetten.. over 20 jaar.. als Firefox 99% van de markt in handen heeft

[ Voor 21% gewijzigd door Blue-eagle op 09-10-2007 14:57 ]