[CSS] max-width + min-width + centreren in IE - Softwareontwikkeling

donderdag 6 januari 2005 01:47

Acties:

Druivensuiker.be

Topicstarter

Met simpele javascript kan je dus max-width en min-width simuleren.
Eén van de mogelijkheden is (div in de body):

Cascading Stylesheet:

div {
  max-width:1000px;
  min-width: 600px;
  /* enkel voor IE */
  width:expression(document.body.clientWidth > 1000? "1000px": (document.body.clientWidth < 600? "600px" : "auto") );
  margin: 0 auto;
}

Het probleem is nu dat het centreren van deze div in de body niet meer lukt met die margin: 0 auto;
Heeft iemand hier een oplossing voor?

donderdag 6 januari 2005 01:53

Acties:

iain

Full Flavor

probeer eens je width eerst absoluut te specificiëren, vervolgens die expressie toe te passen....

Cascading Stylesheet:

div {
  max-width:1000px;
  min-width: 600px;
  width: 600px;
  /* enkel voor IE */
  width:expression(document.body.clientWidth > 1000? "1000px": (document.body.clientWidth < 600? "600px" : "auto") );
  margin: 0 auto;
}

Het is namelijk zo dat margin: auto alleen werkt als er een absolute waarde als breedte is ingesteld bij width... Hoe het allemaal (niet) kan, is mij verder een raadsel.

I used to be an atheist, until I realised I was god.

donderdag 6 januari 2005 15:04

Acties:

Dextro

Druivensuiker.be

Topicstarter

met een vaste width zit je dus weer met problemen dat je div niet beweegt tussen de min-width en de max-width.

Ik zit vast en ik vrees dat hier geen goede oplossing voor is.

donderdag 6 januari 2005 15:35

Acties:

iain

Full Flavor

Mijn IE crasht als je de pagina te klein maakt!

In Firefox werkt het wel, zoals je bedoeld hebt... ook is het wel zo dat centreren hier geen probleem levert... Wat ik zou doen is het probleem laten varen. Eventueel kan je ervoor kunnen kiezen om het met losse javascript aan te pakken.

I used to be an atheist, until I realised I was god.

vrijdag 7 januari 2005 10:54

Acties:

Dextro

Druivensuiker.be

Topicstarter

Firefox ondersteunt dan ook gewoon standaard die max-width en min-width

Het trucje met de expression is dan ook enkel voor internet explorer, die zoals zoveel dingen brak werkt.

vrijdag 7 januari 2005 21:45

Acties:

Dextro

Druivensuiker.be

Topicstarter

Ik denk dat ik het gevonden heb. Het geraakt niet door een validator maar werkt alleszins in firefox, opera en IE. Zowel een min-width als een max-width.

HTML:

<!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">
    body {
      margin: 0;
      padding: 0;
    }

    div#container {
      border: 1px solid red;
      margin: 0 auto;
      width: 1000px;
      width: expression(document.body.clientWidth>1030?"1000px": (document.body.clientWidth<680?"650px":"auto"));
      padding: 0;
    }

    body > div#container {
      width: auto;
      min-width: 650px;
      max-width: 1000px;
    }
  </style>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
  <div id="container">
    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  </div>
</body>
</html>

Wil iemand het nog es testen in minder gebruikte browsers zoals safari, ie op mac, ...?

dinsdag 2 mei 2006 16:02

Acties:

Vecodo

Kan je dit ook toepassen @ een form element ?

dinsdag 2 mei 2006 16:04

Acties:

Rowanov

Kop eens wat anders...

Wat weerhoud je ervan om het te proberen?

[ Voor 4% gewijzigd door Rowanov op 02-05-2006 16:05 ]