mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 11.12.2016 09:35 Benutzername: Passwort: Auto-Login

Thema: [CSS Layout] An Fenstergröße anpassendes Layout vom 09.11.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS Layout] An Fenstergröße anpassendes Layout
Autor Nachricht
m.meinen
Threadersteller

Dabei seit: 24.04.2003
Ort: Bocholt
Alter: 34
Geschlecht: Männlich
Verfasst Do 09.11.2006 14:51
Titel

[CSS Layout] An Fenstergröße anpassendes Layout

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
fuchsbau

Dabei seit: 15.08.2005
Ort: .//root
Alter: 33
Geschlecht: Männlich
Verfasst So 12.11.2006 18:49
Titel

Re: [CSS Layout] An Fenstergröße anpassendes Layout

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
m.meinen
Threadersteller

Dabei seit: 24.04.2003
Ort: Bocholt
Alter: 34
Geschlecht: Männlich
Verfasst Mo 13.11.2006 17:32
Titel

Antworten mit Zitat Zum Seitenanfang

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 17:34, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 13.11.2006 18:36
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
haselnusstafel

Dabei seit: 27.06.2006
Ort: -
Alter: 49
Geschlecht: Weiblich
Verfasst Mo 13.11.2006 23:22
Titel

Fenster verkleinern

Antworten mit Zitat Zum Seitenanfang

wenn Du das Fenster verkleinerst und alles an seinem Platz bleiben soll, solltest Du keine fixen Breiten benutzen sondern auf % oder em gehen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m.meinen
Threadersteller

Dabei seit: 24.04.2003
Ort: Bocholt
Alter: 34
Geschlecht: Männlich
Verfasst Mi 15.11.2006 12:38
Titel

Antworten mit Zitat Zum Seitenanfang

@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 Guck links!

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 Guck links! 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 17:09, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [Dreamweaver MX] Layout Fenstergröße ...
Website mit festen Layout in dynamisches Layout umbauen
css layout
CSS Layout
CSS Layout
CSS Layout
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.