[CSS][HTML] schalen max breedte div

[Vinzzz243]

Ik heb nu al zo veel topics erover gelezen, maar vindt maar niet de oplossing voor mijn probleem.

Ik wil graag de volgende code omzetten in divs en css.

HTML:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td>&nbsp;</td>
    <td width="975" align="center">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr style="background:yellow">
          <td width="200" bgcolor="red">1234567890</td>
      <td width="400" bgcolor="orange">1234567890</td>
      <td>s1</td>
      <td width="100" bgcolor="green">12345</td>
    </tr>
      </table>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>

Het probleem zit hem in de cell waar s1 nu staat.
Alle overige cellen krijgen een vaste breedte met images erin (en mogen dus ook niet overlapt worden wanneer het scherm kleiner wordt), maar ik wil een ruimte hebben die meeschaalt wanneer de pagina kleiner wordt.

Waarom?
Ik wil een 1024 design ook tonen als 1024 met een marge van een aantal pixels, zodat 800x600 viewers geen balken krijgen. Als de resolutie echter groter wordt dan 1024 moet de pagina maximaal 975 breed en gecentreerd weergegeven worden.

Die marge krijg ik niet voor elkaar met divs.
Ik heb al zoveel code geprobeerd dat het volgens mij geen nut heeft om hier wat te tonen ervan.

Wie kan me helpen of zie ik iets over het hoofd?

[ Voor 36% gewijzigd door Vinzzz243 op 13-06-2004 12:31 ]

[Verwijderd]

'max-width' wil je dus hebben. Er zijn wel een paar "simpele" IE hacks in de omloop die dat kunnen regelen denk ik. Voor de rest is het een kwestie van 'position:absolute' en 'margin'.

[Vinzzz243]

Ik heb het nu voor 80% voor elkaar met idd een IE hack voor max-width:

HTML:

<style type="text/css">
BODY
{  margin: 0;
    padding:15px 0 0 0;
    width: 100%;
    text-align: center; }

TD 
{  font: bold 13pt Verdana;
    color: black; }

#pagina
{  padding: 0 10px 0 10px; }

#header
{  position: relative;
    margin: 0;
    padding: 0;
    background: #004A7A;
    text-align: left;
    height: 80px;
    max-width:975px;
    width:expression(document.body.clientWidth > 975? '975px': 'auto' ); }

#header .logo
{  min-width:185px;
    width:expression(document.body.clientWidth < 185? '185px': 'auto' );
    position: absolute; }

#header .foto_balk
{  position: absolute;
    top:0;
    right:0; }
</style>

en

HTML:

<div id="pagina">
  <div id="header">
    <div class="logo">
      [img]"spacer.gif"[/img]
    </div>
    <div class="foto_balk">
      [img]"spacer.gif"[/img]
    </div>  
  </div>
</div>

Voorbeeld te zien hier

Probleem is nu dat alleen het blauwe gedeelte mag schalen, en dus niet dat de "foto_balk"-div (als je het venster kleiner maakt) OVER de "logo"-div heen gaat.

[ Voor 55% gewijzigd door Vinzzz243 op 13-06-2004 17:58 ]

[Verwijderd]

Dan voeg je toch even een 'min-width' toe?

[Vinzzz243]

Verwijderd schreef op 13 juni 2004 @ 18:25:
Dan voeg je toch even een 'min-width' toe?

die staat er toch, of mis ik iets?

[Verwijderd]

Aan #header natuurlijk. #logo kan gewoon width:150px oid krijgen.

[Vinzzz243]

gelukt

nog een en ander eruit gehaald en wat gesleuteld maar t werkt nu.
Enige wat niet vlekkeloos werkt, is als je padding of margin toevoegt, dan verspringt de boel heel even als je je venster kleiner maakt, maar ik heb nu toch geen margin of padding aan de buitenkant meer nodig.
(alleen nog ff kijken of t op andere browsers ook werkt.

linkje

thx

[ Voor 36% gewijzigd door Vinzzz243 op 13-06-2004 19:44 ]

[Verwijderd]

offtopic:
Anne, kan jij op dhtmlcentral.com binnenraken (ik heb voortdurend 404 door een of ander dns prob van DC)?

[Verwijderd]

Vinzz, mooi!

offtopic:
Geen idee waarom je het aan mij vraagt, maar iemand die daar actief is vertelde me op IRC: "<markwubben> jep, dns probs <markwubben> http://neo.dzygn.com/archive/2003/11/accessing-dhtmlcentral <markwubben> doe m de groeten van me :)"

[Verwijderd]

offtopic:
[stop slowchat]
Ik had al geprobeerd om gewoon het ip adres in te geven, maar blijkbaar zit dc met nog andere websites op hetzelfde ip (met headers). Ik zal mijn hosts-file maar aanpassen zoals mark (neo). [stop slowchat]

[Vinzzz243]

toch nog ff een vraag.

De oplossing werkt niet met het volgende doctype:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE hangt zich zelfs op als ik het venster kleiner maak (volgens mij door de clientwidth 760 regel)

zonder doctype

met doctype

edit: wanneer ik <?xml version="1.0" encoding="ISO-8859-1"?> erboven zet, werkt ie wel...??

[ Voor 45% gewijzigd door Vinzzz243 op 15-06-2004 22:27 ]