Hi zusammen.

Ich habe ein Haupttdiv, in welchem 3 Divs sind (nebeneinander). Nun möchte ich, dass wenn das Browserfenster verkleinert wird (oder jemand eine tiefe Auflösung besitzt), das rechte Div als erstes verschwindet.
Wie kann ich sowas realisieren? Zur Zeit verschwindet das linke und rechte div gleichzeitig.

Grüsse
mooon

anbei der quellcode:

css:

div.main {width: 926px; height: 100%; position: absolute; left: 50%; margin-left: -463px; }
div.left {float:left; width:145px; height: 100%; border-style: solid; border-width: 0px 2px 0px 1px; border-color: #666666 #33dd33 #666666 #666666 ; }
div.right {float:right; width:145px; height: 100%; border-style: solid; border-width: 0px 1px 0px 2px; border-color: #666666 #666666 #666666 #33dd33; }
div.middle {width: 636px; height: 100%; position:absolute; left: 50%; margin-left: -318px; }

php:

echo "<div class='main'>";

echo "<div class='left'>";
echo "<table>";
echo "<tr>";
echo "<td class='left'>" "</td>";
echo "</tr>";
echo "</table>";
echo "</div>";

echo "<div class='right'>";
echo "<table>";
echo "<tr>";
echo "<td class='right'>" "</td>";
echo "</tr>";
echo "</table>";
echo "</div>";

echo "<div class='middle'>";
echo "<table>";
echo "<tr>";
echo "<td class='header'>" "</td>";
echo "</tr>";
echo "<tr>";
echo "<td class='menu'>" "</td>";
echo "</tr>";
echo "<tr>";
echo "<td class='middle'>" "</td>";
echo "</tr>";
echo "</table>";
echo "</div>";

echo "</div>";

Wenn Du vernünftig zentrierst, muß gar keins verschwinden. margin: 0 auto;.

hat ja nichts mit zentrieren zu tun. wenn die breite des ganzen 926px ist und man ne auflösung von 800x600 hat sieht man trotzdem nicht alles. und deshalb möchte ich, dass dann div.right als erstes verschwindet...
wie kann man sowas machen ?!


grüsse

Mit CSS oder HTML wird das wohl kaum möglich sein. Da musst du von JavaScript gebrauchmachen. Damit kannst du die Bildschirmgröße abfragen und dann je nach bedarf die divs ausblenden.
Aber ich würde heiko_rs zustimmen das ist überflüssig. JavaScript ist sehr unzuverlässig, du solltest lieber gleich auf 800x600 als minimale auflösung optimieren.

__________________
[SIGPIC][/SIGPIC]

Natürlich hat es mit Deiner unsinnigen Zentrierung zu tun:

Wirf diesen position: abolute;-Kram raus, das ist totaler Pfusch. Zentriere vernünftig, dann bekommst Du einen horizontalen Scrollbalken und keinen abgeschnitten Inhalt.

hmh... welche positionen muss ich denn alle ändern ? und wie ?
danke für eure hilfe


grüsse

hab nun den code überarbeitet:

css:

div.main {width: 926px; height: 100%; position: relative; margin: 0 auto; }
div.left {float:left; width:140px; height: 100%; border-style: solid; border-width: 0px 2px 0px 1px; border-color: #666666 #33dd33 #666666 #666666 ; }
div.right {float:right; width:140px; height: 100%; border-style: solid; border-width: 0px 1px 0px 2px; border-color: #666666 #666666 #666666 #33dd33; }
div.middle {width: 636px; height: 100%; position:absolute; left: 50%; margin-left: -318px; }
div.header {height: 90px; position:absolute; padding: 10px 15px 0 15px;}
div.menu {width: 100%; height: 30px; position:absolute; top: 90px; z-index: 100; border-width: 0 0 3px 0; border-style: solid; border-color: #666666;}
div.page {position:absolute; top: 140px; padding: 0 10px 0 10px;}
div.member {width: 120px; position:relative; top: 10px; left: 10px; right: 10px; }
div.werbung {width: 120px; position:relative; top: 10px; left: 10px; right: 10px; }


allerdings ist nun das ganze im ff super zentriert, im ie linksbündig

Nimm doch alles an absoluter positionierung heraus. Wenn es sich dabei um angaben zur zentrierung handeln kannst du es durch margin:0px auto; ersetzten.

__________________
[SIGPIC][/SIGPIC]

hmmh. hab ich eigentlich gemacht. ff versteht es, ie nicht .

hier der link zur page:

http://www.lifesquare.ch/page/

wäre super wenn jemand zeit hätte um das anzuschauen (und mir mitteilen könnte was ich ändern muss)...

herzlichen dank

grüsse

Man hat leider nicht die rechte sich das stylesheet anzusehen.

__________________
[SIGPIC][/SIGPIC]