| Autor |
Nachricht |
m.meinen
Threadersteller
Dabei seit: 24.04.2003
Ort: Spielplatz
Alter: 38
Geschlecht: 
|
Verfasst Do 09.11.2006 15:51
Titel [CSS Layout] An Fenstergröße anpassendes Layout |
  |
|
Hi Leute,
ich versuche schon seit einigen Stunden ein Layout mit CSS zu verwirklichen, bekomme das aber nicht hin.
Ich zeige erstmal was ich bereits habe:
Mein Versuch
Erstmal bitte ich um Entschuldigung für die Farben, die werden nachher durch Grafiken ausgetauscht.
Jetzt die Erklärung was ich eigentlich haben möchte:
- Die türkiese Ecke oben links steht soweit richtig
- Die grüne Ecke oben rechts auch (soll immer an der rechten Kante bleiben)
- Die schwarze Fläche dazwischen soll sich allerdings in der Breite anpassen. Erstes Problem: Wie mache ich das?
- Der gelbe "content" steht auch soweit ganz richtig, Die Fläche vergrößert sich bei mehr Ihnhalt und schiebt damit die unteren Flächen weiter nach unten. Sehr gut so. Wäre allerdings auch schön, wenn die Fläche bis nach rechts zu dem violetten Kasten laufen würde
- Da sind wir dann auch schon bei den nächsten Problemen. Die Flächen rechts (violett) und links (graue Navigation). Diese Flächen sollen immer genauso hoch sein wie der "Content" Bereich. Damit die Grafiken nachher an die anderen Grafiken anschließen.
- Die Flächen unten links (rotbraun) und unten rechts (dunkel violett) sind auch in ordnung so.
- Nur die schwarze Fläche dazwischen soll sich natürlich genauso anpassen wie die schwarze Fläche oben.
Ich hoffe es ist einigermaßen verständlich was ich möchte. Kann mir jemand helfen? Ich kann die Flächen die sich anpassen sollen ja nicht auf 100% stellen. Das funktioniert ja nicht.
Jetzt noch der Code der CSS-Datei:
| Code: | body { margin: 0; padding: 0; }
.oben_links { background-color: aqua; width: 260px; height: 130px; float: left; }
.oben_mitte { background-color: black; height: 130px; float: left; }
.oben_rechts { background-color: green; width: 380px; height: 130px; float: right; }
.mitte { background-color: orange; width: 100%; clear: both; }
.mitte_links { background-color: silver; width: 260px; float: left; }
.content { background-color: yellow; float: left; }
.mitte_rechts { background-color: fuchsia; width: 50px; float: right; }
.unten_links { background-color: maroon; width: 260px; height: 130px; float: left; clear: both; }
.unten_mitte { background-color: black; height: 130px; float: left; }
.unten_rechts { background-color: purple; width: 380px; height: 130px; float: right; } |
Und falls sich noch jemand für den HTML-Code interressieren sollte:
| Code: | <body>
<div class="oben_links"></div>
<div class="oben_mitte">oben mitte</div>
<div class="oben_rechts"></div>
<div class="mitte">
<div class="mitte_links">
<ul>
<li>Menü 1</li>
<li>Menü 2</li>
<li>Menü 3</li>
<li>Menü 4</li>
</ul>
</div>
<div class="content">
<br>
<br>
<br>
<br><b>content</b>
<br>
<br>
<br>
<br>
</div>
<div class="mitte_rechts">
rechts
</div>
</div>
<div class="unten_links"></div>
<div class="unten_mitte">unten mitte</div>
<div class="unten_rechts"></div>
</body> |
Schonmal vielen Dank im Vorraus.
Gruß
M.
|
|
| |
  |
 |
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst So 12.11.2006 19:49
Titel Re: [CSS Layout] An Fenstergröße anpassendes Layout |
|
|
| m.meinen hat geschrieben: | Hi Leute,
ich versuche schon seit einigen Stunden ein Layout mit CSS zu verwirklichen, bekomme das aber nicht hin.
Ich zeige erstmal was ich bereits habe:
Mein Versuch
Erstmal bitte ich um Entschuldigung für die Farben, die werden nachher durch Grafiken ausgetauscht.
Jetzt die Erklärung was ich eigentlich haben möchte:
- Die türkiese Ecke oben links steht soweit richtig
- Die grüne Ecke oben rechts auch (soll immer an der rechten Kante bleiben)
- Die schwarze Fläche dazwischen soll sich allerdings in der Breite anpassen. Erstes Problem: Wie mache ich das?
|
hallo, kein bock mir jetzt jedes einzelne deiner probleme anzugucken, aber prinzipiell ein lösungsansatz:
du kannst die DIVs mit den verschiedenen farben doch einfach verschachteln. das heißt ein schwarzes div über die komplette (100% width) breite und dann in dieses div n türkis-farbenes links und ein grünes rechts. somit verdecken die beiden farbigen das schwarze, klemmen immer am rand und der rest der fläche, egal wie groß is schwarz. das sollte helfen, nicht?
grüße
.//th
|
|
| |
|
|
|
Anzeige
|
|
|
m.meinen
Threadersteller
Dabei seit: 24.04.2003
Ort: Spielplatz
Alter: 38
Geschlecht:
|
Verfasst Mo 13.11.2006 18:32
Titel
|
|
|
Vielen Dank für den Tipp. Das hat schonmal einen großen Teil meiner Probleme gelöst. Jetzt habe ich nur noch 1 Problem. Hier mein neuer Ansatz
Oben und unten funktioniert jetzt wunderbar. Allerdings hätte ich jetzt noch gerne, dass die roten Kästen links und rechts immer so hoch sind, wie der gelbe content-Bereich (der abhängig vom Textinhalt ist). Naja oder wie der dunkelgraue, der sich ja mit dem gelben zusammen vergößert.
Hat dafür vielleicht auch noch jemand einen Tipp?
Vielen Dank
gruß
M.
//edit
Achso. Noch etwas vergessen: Lässt sich verhindern, dass sich die DIV-Elemente untereinander anordnen, wenn man das Fenster verkleinert?
Zuletzt bearbeitet von m.meinen am Mo 13.11.2006 18:34, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 13.11.2006 19:36
Titel
|
|
|
Für moderne Browser könntest Du es ungefähr so schreiben:
| Code: | body { margin: 0; padding: 0; }
.oben { position:absolute; top:0; background-color: black; background-repeat: repeat-x; width: 100%; height: 130px; overflow:hidden }
.oben_links { background-color: silver; width: 260px; height: 130px; float: left; }
.oben_rechts { position:absolute; right:0; background-color: silver; background-repeat: no-repeat; width: 380px; height: 130px; }
.mitte { position:absolute; overflow:auto; top:130px; right:0px; left:0px; bottom:130px; background-color: green; width: 100%; float: left; }
.mitte_links { height: 100%; background-color: red; width: 260px; float: left; }
.content { height: 100%; background-color: yellow; float: left; }
.mitte_rechts { height:100%; background-color: red; width: 50px; float: right; }
.unten { position:absolute; bottom:0; background-color: black; width: 100%; height: 130px; overflow:hidden }
.unten_links { background-color: silver; width: 260px; height: 130px; float: left; }
.unten_rechts { position:absolute; right:0; background-color: silver; background-repeat: no-repeat; width: 380px; height: 130px; }
|
*theoretisch - ohne ausgemistet zu haben.
Für die alten IE's funktioniert dieser Weg allerdings nicht.
da müsstes Du mal googlen. Für den IE gibts einen Hack
oben und unten borders in der Höhe des Headers/Footers
zu vergeben und den Container dann mit einer Height:100%
reinzunehmen mit negativen Margins (also margin-top:-130px
etc. in deinem Fall) wenn ich mich recht erinnere.
|
|
| |
|
|
haselnusstafel
Dabei seit: 27.06.2006
Ort: -
Alter: 57
Geschlecht: 
|
Verfasst Di 14.11.2006 00:22
Titel Fenster verkleinern |
|
|
|
wenn Du das Fenster verkleinerst und alles an seinem Platz bleiben soll, solltest Du keine fixen Breiten benutzen sondern auf % oder em gehen.
|
|
| |
 |
|
m.meinen
Threadersteller
Dabei seit: 24.04.2003
Ort: Spielplatz
Alter: 38
Geschlecht:
|
Verfasst Mi 15.11.2006 13:38
Titel
|
|
|
@Raumwurm
Danke für den Code. Das Ergebnis sieht so aus. Das mit den roten Flächen klappt ja so recht gut, aber ich will nicht, dass die Fußzeile immer am unteren Bildschirmrand ist, da es sonst mehrere Scrollbalken gibt usw. Die Fußzeile soll sich einfach unter den content setzen.
Ich habe mal das Groblayout eingefügt, damit man sich das evtl. besser vorstellen kann. Und zwar hier 
Ich hoffe, es wird deutlich, wie ich es gerne hätte. Der Content-Bereich soll immer zwischen dem rechten Bereich (mit der einen roten Linie) und dem linken Bereich (Menü) bleiben und nicht nach unten rutschen, wenn das Fenster verkleinert wird, sondern Zeilenumbrüche machen und die Fußzeile nach unten verschieben.
Wenn noch jemand eine Idee wäre ich froh, wenn er sie hier schreiben würde.
@haselnusstafel
Mit %-Werten kann ich nicht arbeiten, weil die Grafiken eine bestimmte Breite haben.
Danke und Gruß
Marco
//edit
Ok, nachdem ich jetzt noch 2 Tage lang rumprobiert und rumgetestet habe, sieht es SO aus.
So wollte ich es haben. Falls jemand irgendwann mal wissen möchte, wie ich das gemacht habe, CSS-Datei runterladen, oder PN an mich.
Nochmal danke für eure Ansätze
gruß
M.
Zuletzt bearbeitet von m.meinen am Fr 17.11.2006 18:09, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[Dreamweaver MX] Layout Fenstergröße ...
Website mit festen Layout in dynamisches Layout umbauen
Probleme mit Layout - div im layout height="100%"
CSS-Layout.. wie?
CSS Layout
CSS Layout
|
|
Willkommen auf dem Portal für Mediengestalter
