• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[CSS] Probleme mit Layout

I

Iltis

Lounge-Member
Hallo zusammen,

ich bin daran mein erstes Projekt nach meiner fast einjährigen Pause umzusetzen. Und ich bin am verzweifeln, denn ich musste feststellen, das von meinem bescheidenen Webdesign-Wissen einiges nicht mehr abrufbar ist und ich vieles nachschlagen muss. Und ich komme bei diesem Problem einfach auf keine Lösung.

Ich möchte folgende Struktur mit div-Layers und CSS umsetzen (mit Frames wäre dies sehr einfach umzusetzen, aber ich will es nicht mit Frames umsetzen, auch nicht mit Tabellen):



Ich bin dabei von folgenden div-Layers ausgegangen:

Code: 
  <body bgcolor="#ffffff">
	  <div id="layoutbox">
	    <div id="top">a</div>
	    <div id="middle">
	      <div id="menu_left"></div>
	      <div id="content"></div>
	      <div id="menu_right"></div>
	    </div>
	    <div id="bottom">a</div>	
      </div>
  </body>

Meine konkrete und wahrscheinlich nicht ganz einfache Frage ist: Ich habe "top" und "bottom" die je 100px hoch sind, wie bringe ich dann middle dazu, den Rest auszufüllen?
Ein Gedanke der mir schon gekommen ist, ist middle einfach auf 100% zu stellen und alle anderen Layer darüber zu legen, aber diesen Gedanken habe ich verworfen, da mich das keine gute Lösung dünkt.

Es ist für mich vor allem wichtig, dass bottom mindestens am unteren Bildschirmrand ist, so dass unterhalb von bottom keine weisse Leerfläche ist, es kann aber auch, wenn mehr Inhalt vorhanden ist sein, dass bottom weiter nach unten rutscht. Denn ich möchte sowohl auf Frames wie auch auf iFrames verzichten.
Wie seht ihr übrigens den Einsatz von overflow:scroll (Selfhtml) wird das wirklich von allen gängigen Browser unterstützt oder soll man das lieber lassen?

Vielen Dank im voraus

Iltis
 
Zuletzt bearbeitet:
Dein Layout ist ein Tabellenlayout. Selbst wenn es technisch machbar wäre, verschenkst du mit deinen fixen Größen viel von den vorteilen eines richtigen HTML/CSS Layouts. Auch Spalten sind so nicht ohne weiteres machbar mit CSS, dass ist eine Eigenschaft von Tabellen, daher sind auch dein Header und footer tabellenreihen, die mit colspan zusamengeführt wurden.

Schau dir mal CSS designs an, die die sich von der Größe anpassen lassen fließend sind und sehr leicht zu ändern.

http://www.csszengarden.com/ zeigt z.b. wie du mit einem einzigen HTML code mit Hilfe von CSS das Design immer wieder anders darstellen kannst.

vielleicht auch das http://cssdesign.e-workers.de/

und es gibt viele Artikel wie man mit HTML/CSS arbeitet, auch in selfhtml stehen mehr infos als nur Beispiel. Das Problem für Umsteiger ist immer wieder die starren Design vorstellungen bzw. das Tabellenlayout im Kopf, wenn du wirklich mit CSS vernüftig arbeiten willst solltest du dich davon verabschieden.
 
@Zeitgeist und schlauer: Vielen Dank für eure Hilfe. Ich weiss, das dies nicht unbedingt das geeignete Design für CSS ist, aber ich habe das Design so erhalten und muss es so umsetzen. Ich hätte es auch lieber, wenn der untere Balken nicht wäre und auf Frames will ich nicht zurückgreifen.

Aber ich bin, glaube ich zumindest, dank Zeitgeist's Link auf die Lösung gestossen. Wenn ich
margin: 100px 100px 100px 100px;
für middle verwende und diese 100% breit und hoch mache, dann sollte es gehen, werde ich heute Nachmittag mal ausprobieren.

Gruss Iltis
 
Hallo zusammen,

ich bin schon ziemlich viel weiter gekommen. Doch ich habe noch ein Problem und zwar wachsen die Spalten links und rechts nicht mit der mittleren mit.

Ich habe folgenden HTML-Code:


HTML: 
<body bgcolor="#ffffff">
	<div id="top"></div>
	<div id="left_menu">Menu</div>
	<div id="content">Titel</div>
	<div id="right_menu">Downloads<br /><br /></div>
	<div id="bottom"></div>
	</body>

und verwende dazu folgendes CSS:

Code: 
#top { 
background-color: #246cda; 
background-image: url(../img/background/top_background.gif); 
background-repeat: repeat-x; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100px; 
margin: 0; 
padding: 0;
 }

#left_menu { 
background-color: #246cda; 
background-image: url(../img/background/left_background.gif); 
background-repeat: repeat-y; 
position: absolute; 
top: 100px; 
left: 0; 
width: 150px; 
margin: 0; 
padding: 0; 
}

#content { 
background-color: #FFFFFF; 
margin: 100px 150px 0; 
padding: 0; 
}

#right_menu { 
background-color: #246cda; 
background-image: url(../img/background/right_background.gif); 
background-repeat: repeat-y; 
position: absolute; 
top: 100px; 
right: 0; 
width: 150px; 
margin: 0; 
padding: 0;
 }

#bottom {
 background-color: #246cda; 
background-image: url(../img/background/bottom_background.gif); 
background-repeat: repeat-x; 
position: absolute; 
left: 0; 
width: 100%; 
height: 100px; 
margin: 0; 
padding: 0;
 }

Kann mir da jemand noch den nötigen Tipp geben?

Vielen Dank
Iltis
 
@dkdenz: Das heisst, wenn ich im content viel Text habe, dann sollte left_menu und right_menu die gleiche Höhe haben, wie content. Weil ich eine Hintergrundgrafik verwenden muss, sieht das sonst komisch aus (unten abgeschnitten).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben