[HTML] Breedte tabel 100% met een minimum van 1000

[JorisPenders]

Hallo,

ik ben bezig met een website.
Nu heb ik een tabel met breedte 100%
Dit werkt prachtig, maar als ik onder de 700 pixels kom, komen bepaalde div's over elkaar heen. Dit wil ik dus niet hebben, want de layout wordt door elkaar gegooid. Dit wil ik beveiligen

Kan ik zeg maar iets van table breedte is 100% maar met een minimum van 1000px bijv.

Joris

[Borizz]

CSS2 kent de property: min-width, maar helaas negeert internet explorer deze property.

Het is ook niet aan te raden om je website zo op te zetten dat deze een minimale breedte van 1000 pixels beslaat (er zijn nog steeds mensen die op 800x600 werken).

[JorisPenders]

Dat weet ik wel, maar deze scrollen dan maar 200px.
Aan de rechterkant staan toch maar een paar infoblokken.
Hier heb ik al over nagedacht

Is er nog een andere mogelijkheid?

[Borizz]

De andere mogelijkheid is om met JavaScript de breedte van het venster te checken, als deze kleiner is dan 1000px zet je de breedte vast op 1000px, is deze groter dan 1000px, dan zet je de breedte op 100%.

Toch zou ik je aanraden om die horizontale scrollbar te vermijden (misschien de infoblokken niet laten zien als het venster kleiner is dan 1000px), zie ook http://www.macromedia.com/devnet/mx/dreamweaver/articles/horizontal_scroll.html.

Als je even zoekt is hier trouwens genoeg over te vinden..

[ Voor 6% gewijzigd door Borizz op 23-04-2005 19:01 ]

[JHS]

MSIE behandelt width op het moment als min-width, dus zou je het zo kunnen oplossen.

Cascading Stylesheet:

div#bla { width: 100%; min-width: 1000px;
    _width: 1000px; /* voor IE */
}

Overigens zou ik dit natuurlijk wel in een aparte IE-only stylesheet zetten met een conditional statement:

HTML:

<!--[if lt IE 6]>
<link rel="stylesheet" href="iestyle.css">
<![endif]-->

.

[JorisPenders]

Heb het al anders...
Als je een tabel in een <td> zet, pakt ie daar wel de goede max-with van.
Dus de <td width> negeert ie en <table with=> niet

Mijn opzet is nu zo
----------------------------------------------------------------------------------------------------- (tabel 100%)
| <td>tabel 123px</td> | <td>tabel 100%</td> | <td>tabel 123px</td> |
-------------------------------------------------------------------------------------------------------</table>

Nu doet ie het netjes.

Hij draait ook op 800x600, behalve als er een afbeelding instaat die groter is dan 600px.
Voor 800x600 zal ik de menubalken weghalen, maar op 800x600 draait ie op zich nog wel redelijk

[Borizz]

JHS schreef op zaterdag 23 april 2005 @ 19:18:
MSIE behandelt width op het moment als min-width, dus zou je het zo kunnen oplossen.

Cascading Stylesheet:

div#bla { width: 100%; min-width: 1000px;
    _width: 1000px; /* voor IE */
}

Overigens zou ik dit natuurlijk wel in een aparte IE-only stylesheet zetten met een conditional statement:

HTML:

<!--[if lt IE 6]>
<link rel="stylesheet" href="iestyle.css">
<![endif]-->

.

Het probleem is dan wel dat je altijd de breedte van 1000px hebt in IE, ook als beschikbare resolutie groter is!

[Rowanov]

Goed, dan begrijp je ook vast wel dat tabellen niet bedoeld zijn voor de layout? Daar hebben we nu een mooie pagina met uitleg voor:
http://home.parse.nl/~michiel/semantiek.html

[BramT]

Dirty maar het werkt:

maak je table gewoon 100%, maar zet er ergens een <tr colspan=X><td></td></tr> in. Zo *kan* je table niet smaller dan 1000 worden.

Moet wel zeggen dat dit hele idee gewoon niet lekker is als je sites aan het maken bent hoor....

[JHS]

Borizz schreef op zaterdag 23 april 2005 @ 19:37:
[...]Het probleem is dan wel dat je altijd de breedte van 1000px hebt in IE, ook als beschikbare resolutie groter is!

True, maar dat was nu eenmaal de vraag van de TS .

[JorisPenders]

JHS schreef op zaterdag 23 april 2005 @ 19:45:
[...]
True, maar dat was nu eenmaal de vraag van de TS .

Bij mij is dit nu niet het geval hoor.

Kleiner dan 1000px kan niet en groter kan wel.
Onder de 1000px krijg je nu een scrollbar.

[JHS]

Dan snap ik eerlijkgezegd echt niet wat je nu wil, wat je gedaan hebt en wat er nu gebeurt .

[T-MOB]

JHS schreef op zaterdag 23 april 2005 @ 21:42:
Dan snap ik eerlijkgezegd echt niet wat je nu wil, wat je gedaan hebt en wat er nu gebeurt .

Wat hij wil is toch niet moeilijk, minimaal 1000px en meer als daar ruimte voor is. Zoals min-width hoort te werken dus. In IE werkt width niet geheel als als min-width:

Cascading Stylesheet:

element { width: 100%; min-width: 400px; }
/* wordt in IE altijd 100% breed (ook als dat minder dan 400px is) tenzij
een child van element breder is dan 100% */

element  { width: 100%; min-width: 400px; _width: 400px; }
/* wordt in IE altijd 400px breed, tenzij een child 
van element breder is dan 400px; */

/* ofwel om: */
element { width: 100%; min-width: 400px; }
/* te laten werken in IE heb je nodig: */
element child { width: 400px; }

Dit laatste heeft als beperking dat child altijd 400px breed is. Als je dat niet wil moet je dus een dummy element toevoegen (jeuh spacer.gif \0/ ) of met javascript aan de slag. TS heeft soort van het eerste gedaan. Zij het door de specifieke eigenschappen van de table-cell te gebruiken...

[wicher|IA]

Op zich lijkt een spacer.gif van 1000px breed me nog wel de makkelijkste oplossing. Oke, helemaal 'correct' is dit niet, maar dat wordt veroorzaakt doordat IE de correcte codes niet correct behandeld. Dan mag het wmb wel.