Hi!
Ich habe drei DIVs: content, menu1 und menu2. So soll sie auch nebeneinander auf der Seite erscheinen.
Dabei soll immer 100% der Seite genutzt werden, der Content soll sich also strecken.
Bis her habe ich das so gelöst: Content nimmt sich die ganze Breite, rechts daneben setzte ich per position:absolute die beiden Menus. Der Content wird durch ein padding-right dann nach rechts begrenzt, dass der immer Platz für die Menüs lässt.
Nun habe ich das Problem, dass sich die Menus über den Content schieben, wenn den Anzeigebereich verkleiner. Hier demonstriert durch min-width. Dabei will ich erreichen, dass der Browser ab einer bestimmten Fensterbreite immer horizontal scrollt. Allerdings sollen sich die Menus nicht über den Content schieben.
Wie kann das lösen? Dazu finde ich keine Möglichkeit, das ohne position:absolute umzusetzen.
Hier das Beispiel:
Alles anzeigen
Ich habe drei DIVs: content, menu1 und menu2. So soll sie auch nebeneinander auf der Seite erscheinen.
Dabei soll immer 100% der Seite genutzt werden, der Content soll sich also strecken.
Bis her habe ich das so gelöst: Content nimmt sich die ganze Breite, rechts daneben setzte ich per position:absolute die beiden Menus. Der Content wird durch ein padding-right dann nach rechts begrenzt, dass der immer Platz für die Menüs lässt.
Nun habe ich das Problem, dass sich die Menus über den Content schieben, wenn den Anzeigebereich verkleiner. Hier demonstriert durch min-width. Dabei will ich erreichen, dass der Browser ab einer bestimmten Fensterbreite immer horizontal scrollt. Allerdings sollen sich die Menus nicht über den Content schieben.
Wie kann das lösen? Dazu finde ich keine Möglichkeit, das ohne position:absolute umzusetzen.
Hier das Beispiel:
Quellcode
- <html>
- <head>
- <style type="text/css">
- #frame {
- }
- #content {
- background: #eee;
- padding-right: 400px;
- min-width: 500px;
- }
- #menu1, #menu2 {
- width: 200px;
- }
- #menu1 {
- background: #ccc;
- position: absolute;
- right: 200px;
- top: 0px;
- }
- #menu2 {
- background: #ddd;
- position: absolute;
- right: 0px;
- top: 0px;
- }
- </style>
- </head>
- <body>
- <div id="frame">
- <div id="content">
- Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
- Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
- Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
- Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
- </div>
- <div id="menu1">
- Menu 1<br>Menu 1<br>Menu 1<br>Menu 1<br>Menu 1
- </div>
- <div id="menu2">
- Menu 2<br>Menu 2<br>Menu 2<br>Menu 2<br>Menu 2
- </div>
- </div>
- </body>
- </html>
Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.
so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.