# Layout mit 3 Hintergrundgrafiken



## lisali (11. Dezember 2009)

Hallo,

also, ich kenne es bisher nur mit Tabellen und ich weiß nicht, ob der Weg, den ich mir jetzt denke der gleiche ist, aber ich möchte mit CSS in folgendem Format den Content-Bereich bauen:

[1111]
[2222]
[1111]

Also bei 1111 ist jeweils die selbe Hintergrundgrafik und dieser Bereich bleibt eigentlich ganz unberührt. Er soll einfach nur dargestellt werden. Und 2222 ist der Bereich, wo der Inhalt ist. Von Tabellen her wäre das ja eher simpel und ich würde dort einfach die Hintergrundgrafik für jede Zeile bestimmen, aber bei CSS bin ich mir jetzt unsicher.
Müsste ich da ebenfalls 3 divs machen und Hintergrundgrafik + Höhe bestimmen?

Liebe Grüße,

Lisa


----------



## Jan-Frederik Stieler (11. Dezember 2009)

Hi,
ja. 
Und schau dir das Floaten mal an.

Gruß


----------



## Maik (11. Dezember 2009)

Moin,

wenn du mit drei einzelnen Grafiken arbeitest, werden die beiden äußeren Spaltenhintergründe  in der Höhe nicht mitwachsen, da diese Blöcke  ja inhaltsleer sind, und zudem keinen Bezug zum Inhaltsumfang des benachbarten mittleren Blocks besitzen. Dies ist nämlich der kleine, aber entscheidende Unterschied gegenüber einer Tabellenkonstruktion.

Schau dir hierzu mal meine beiden CSS-Tutorials an, in denen ich solch ein dreispaltiges Layout mit einem einzigen Hintergrundbild belegt habe:


Zentriertes Layout mit drei Spalten
CSS-Layout mit 100%-Höhe

Der Vorteil der hier angewandten "Faux Columns-Technik" liegt darin, dass sich die Spaltenhintergründe unabhängig von ihrem Inhaltsumfang in der Höhe optisch automatisch angleichen.

Da aber bei dir die beiden äußeren Spalten keinen Inhalt aufnehmen sollen, sondern lediglich zur Erzeugung und Ausschmückung der "Randbereiche" dienen, wären sie im HTML-Code gänzlich überflüssig, und das Hintergrundbild liesse sich alleinig für den mittleren Spaltenblock nutzen, der mit der padding-Eigenschaft einen  linken und rechten Innenabstand erhält, der sich an der Breite der "Randbereiche" orientiert, damit sie von seinem Inhalt  nicht überdeckt werden.

Das bis hierher Geschriebene geht von einem Layout mit fester Breite aus. 

Falls es sich aber um ein Layout mit relativer Breite handeln sollte, hilft dir der folgende Lösungsansatz weiter, den ich kürzlich in dem Thema repeat in verschachtelten div boxen angehängt habe, und der für dieses Modell zwei Hintergrundbilder nutzt.

mfg Maik


----------



## rd4eva (11. Dezember 2009)

Also wenn ich das richtig verstehe redet ihr grade an einander vorbei.

lisalis Beitrag liest sich so als würde sie eine vertikale Aufteilung wollen

also 
[Oben]
[Mitte]
[Unten]

und nich das von euch vorgeschlagene typische 
[Links][Mitte][Rechts]

Falls ich mich Irre sag ich schonmal sry.

Die konstruktive CSS Hilfe überlasse ich in beiden Fällen lieber Maik


----------



## lisali (11. Dezember 2009)

@rd4eva: Ja, genau... so meinte ich das!

Ähm... vielleicht habe ich mich auch zu voreilig entschieden bei meiner Fragestellung und dachte ich würde dann von der Logik her alleine auf das kommen, um das komplette Design in CSS zu gestalten, aber da gibt es folgendes Problem, das ich im Anhang im Bild beschrieben habe.

Wovon ich nämlich bei meinem ersten Beitrag ausging war ja "einfach nur" der Content-Bereich meiner Seite. Aber da ich denke, dass das Grundgerüst insgesamt etwas komplexer ist, aufgrund des mit dem Content-Bereich "mitkommenden" Menüs (siehe Bild), dachte ich, dass ich das direkt auch hier mal frage.

Ich hoffe ihr könnt nachvollziehen was ich so meine, ansonsten kann ich nochmal irgendwie eine Veranschaulichung machen.

Vielen Dank und Liebe Grüße,

Lisa


----------



## Maik (11. Dezember 2009)

Upps, sorry für die Fehlantwort :-(

Nun denn, was das Mitwachsen des Menü- und Inhalthintergrunds betrifft, bleibt es dennoch bei meiner Aussage von heute Morgen, dass hierfür beispielsweise ein gemeinsames Hintergrundbild vonnöten wäre, das in einem übergeordneten DIV-Block genutzt wird, damit sich dieser bei zunehmenden Inhalt automatisch angleicht.

Diese Technik kannst du in diesem Fall aber gleichermaßen in meinen beiden CSS-Tutorials studieren 

Neben dieser  "Faux Columns"-Technik gibt es aber noch weitere Lösungsansätze, damit sich die Spaltenhöhen, unabhängig von ihrem jeweiligen Inhaltsumfang, automatisch angleichen. 

Diese kannst du dem Artikel AnyColumnLongest entnehmen, und die für dich geeignete Technik auswählen.

Was mich noch interssieren würde: Handelt es sich hier um ein Layout mit absoluter oder relativer Breite?

mfg Maik


----------



## lisali (11. Dezember 2009)

Dankeschön! Also, ich versuche da erstmal durchzusteigen, denn ich verstehe ehrlichgesagt gerade nicht so viel. Und dann melde ich mich nochmals.

Vielleicht hilft mir ja auch die Antwort auf die Frage wie viele Container bzw. divs ich für so ein Layout (wie in meinem Anhang) bräuchte!?

Es handelt sich um absolute Breite beim Menü sowie beim Content. Also, die Pixelbreite ist jeweils fest und sollte nicht in % angegeben werden.

LG,

Lisa


----------



## Maik (11. Dezember 2009)

Lass mich mal kurz durchzählen:


```
<div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
</div>
```

4 

Alternativ +1, falls noch ein Footerbereich erwünscht ist.

mfg Maik


----------



## lisali (11. Dezember 2009)

Und dieser Footer käme dann nach dem div "content"?

Ja, ich wollte schon einen Footer machen, aber bin noch unschlüssig, ob der im Content-Bereich in über der "abschließenden" Hintergrundgrafik sein soll oder darunter.

Und das ist echt nur so wenig? Was ist denn mit den Hintergrundgrafiken? Müssen die nicht extra in ein div rein?

LG,

Lisa


----------



## Maik (11. Dezember 2009)

Wo du den Footer-Block im HTML-Code einbindest, hängt davon ab, ob er sich über die gesamte Breite (= *#wrapper*), oder nur über die Breite von *#content* erstrecken soll:


Variante 1:


```
<div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>
```

Variante 2:


```
<div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content">
        <div id="footer"></div>
    </div>
</div>
```

Die Hintergrundbilder würden direkt in *#wrapper* (ein Hintergrundbild für *#menu* und *#content*), und *#header* eingebunden werden 

mfg Maik


----------



## lisali (11. Dezember 2009)

Also, der Footer soll sich auf jeden Fall nur über die Content-Breite erstrecken. Was wäre dann richtig?



Maik hat gesagt.:


> Die Hintergrundbilder würden direkt in *#wrapper* (ein Hintergrundbild für *#menu* und *#content*), und *#header* eingebunden werden
> 
> mfg Maik



Wirklich? Aber es handelt sich ja um insgesamt 7 Hintergrundgrafiken. 1 für den Header. 1 für Menü oben, 1 für Menü-Inhalt, 1 für Menü unten. Das selbe beim Content: 1 für Content oben, 1 für Content-Inhalt und 1 für Content unten.

Und da diese Inhalts-Hintergrundgrafik jeweils (also vom Menü und Content) sich ja ständig vertikal wiederholen muss/sollte, versteh ich das nicht so ganz! Besonders dann, wenn eben noch dadrüber eine Hintergrundgrafik sein soll. Da bräuchte man doch ein div dafür, oder?

LG,

Lisa


----------



## Maik (11. Dezember 2009)

lisali hat gesagt.:


> Also, der Footer soll sich auf jeden Fall nur über die Content-Breite erstrecken. Was wäre dann richtig?



Siehe hierzu meinen eben editierten Beitrag, der dir wohl entgangen ist. 

Liegen die sieben Grafiken schon in ihrem gewünschten Format (Dimension) vor?

Dann lad sie hier doch bitte als ZIP-Datei hoch, damit ich mir dazu was überlegen kann 

Achja, hoffentlich besitzen sie Dateinamen, aus denen ich ihren Verwendungszweck ableiten kann 

mfg Maik


----------



## lisali (11. Dezember 2009)

Ja, die sind alle da... also, ich möchte ungern die Original-Bilder hochladen, aber ich kann gerne ähnlich wie bei meinem vorigen Anhang nochmals sowas "blank" erstellen, damit man das besser versteht!

Es ist im Anhang. Danke für deine Mühe!

Also, c1 und c2 sind jeweils dann diese Hintergrundgrafik-Dateien, die ich meine. Genauso beim Menü und m1 und m2.

LG,

Lisa





Edit: Was vielleicht noch wichtig ist zu erwähnen, ist, dass dieser Content Bereich sozusagen am Menü angeheftet wird und dabei noch ein Padding-Top und Padding-Bottom besitzt von etwa 20 Pixeln oder so.


----------



## Maik (11. Dezember 2009)

lisali hat gesagt.:


> Ja, die sind alle da... also, ich möchte ungern die Original-Bilder hochladen


Wenn du sie mir hier zum Download bereitstellst, kannst du den Anhang anschliessend wieder entfernen (oder auch ich als Mod ), damit sie der Öffentlichkeit nicht länger zugänglich sind 

Ich tue mich mit ihnen dann leichter, da ich aus ihnen die Dimensionen der einzelnen Boxen entnehmen kann.

Überleg's dir nochmal 

mfg Maik


----------



## lisali (11. Dezember 2009)

Gut. Also, zu beachten ist aber, dass es trotzdem nur 2 Bilddateien sind, weil ich das ganze per CSS Positionen angeben wollte dann.

Lisa


----------



## Maik (11. Dezember 2009)

Der Anhang ist entfernt 

Und wo sind die übrigen 5 Grafiken?

Und was genau sollen mir die beiden Grafiken nun konkret sagen? 

Ich seh da jeweils eine "Box" mit abgerundeten Ecken (menu.gif ist 19px hoch, und content.gif 42px).

mfg Maik


----------



## lisali (11. Dezember 2009)

Naja, der Header ist ja nicht so wichtig. Und wie gesagt möchte ich anhand CSS Positionsangaben sagen wo der Bereich von der Bilddatei ist, der für das und das bestimmt ist. Also für Inhalt, unten und oben. Das heißt eine Grafikdatei entspricht 3 Grafiken.


----------



## Maik (11. Dezember 2009)

Sind also die jeweiligen drei Bereiche (oben - mitte - unten) in den beiden hochgeladenen Grafiken enthalten?

Und ergibt sich durch ihre Bildbreiten die Gesamtbreite des Layouts (664px + 225px = 889px)? Oder soll zwischen dem Menü und Inhaltsbereich ein Abstand existieren, womit das Gesamtlayout einen Tick breiter ist?

mfg Maik


----------



## lisali (11. Dezember 2009)

Ja, ist alles enthalten. Die Positionen müsste ich nur noch ausrechnen.

Genau, das ist die gesamte Bildbreite! Nee, da gibt es keinen Abstand. Jedenfalls nicht horizontal. Aber der Content-Bereich soll ein padding-top und padding-bottom Abstand haben.

LG,

Lisa


----------



## Maik (11. Dezember 2009)

Okay, ich werde mal schauen, was ich damit stricken kann, und melde mich dann wieder.

Ich hoffe, du hast es nicht eilig, denn das wird eine Weile in Anspruch nehmen.

mfg Maik


----------



## lisali (11. Dezember 2009)

Okay, vielen vielen Dank schonmal!

Nee, ich gehe jetzt dann wohl erstmal an die frische Luft, was essen. 

Danke!

Lisa


----------



## Maik (11. Dezember 2009)

Sodele, die Strickstunde ist beendet 

Ich hoffe, dass du mit meinem Konzept zurechtkommst, und damit etwas anfangen kannst.

mfg Maik


----------



## Maik (11. Dezember 2009)

Update-Time 

In dieser Variante hab ich der Grafik "2colsBottom.gif" anstelle des weißen Hintergrunds einen transparenten gegönnt.

mfg Maik


----------



## Maik (11. Dezember 2009)

Aller guten Dinge sind drei 

Bislang hatte ich in der Grafik "2colsBottom.gif" den gewünschten vertikalen Versatz zwischen dem unteren Ende des Menüs und Inhalts nicht beachtet.

*fixed* 

mfg Maik


----------



## lisali (11. Dezember 2009)

Hey, vielen Dank, Maik!

Also, das dritte ist echt gut. Ich müsste es jetzt nur noch linksbündig machen.

Aber ich will es jetzt noch nicht als erledigt markieren, weil ich erstmal den Rest hinzufügen möchte und gucke, ob ich auf weitere Probleme oder so stoße.

Eins fällt mir dabei jetzt schon ein. Also, ich möchte gaanz unten im Menü (jedoch noch vor der Menü-unten-Grafik) so nen kleinen Text hinmachen, dass zwar auch "im Inhalt" drin ist, jedoch irgendwie eher wie unten angeheftet ist und sich vom eigentlich Inhalt (darüber) trennt. Wie kriege ich das hin? Ich denke immernoch in Tabellen... leider.


----------



## Maik (11. Dezember 2009)

Das Layout bekommst du linksbündig ausgerichtet, indem die margin:auto-Deklaration für *#wrapper* entfernt wird, mit der ich das Layout im Fenster horizontal zentriert hatte.

Was den Text am Ende des Menüs betrifft, so gibt es hierfür zwar eine CSS-Positionierungstechnik (siehe hierzu  	
meinen Webmaster FAQ-Artikel Wie richte ich eine Box am unteren Rand der Elternbox aus?), blos wird der Text in seiner Ausgangsposition verharren, wenn der Inhalt im benachbarten Block *#content* zunimmt, und den Inhaltsumfang (Zeilenanzahl) in der Menüleiste überschreitet.

Da aber das Footer-Hintergrundbild "2colsBottom.gif" bedingt durch den vertikalen Versatz für das Menü gegenüber dem Inhalt einen gewissen Bereich des senkrechten Rahmens enthält, hast du aber die Möglichkeit, den Text im Footerbereich einzubetten 

Das erweiterte Demo lad ich hier wie gewohnt hoch.

mfg Maik


----------



## lisali (11. Dezember 2009)

Hey, also das ist jetzt echt fast perfekt!

Ich hätte gerade nur noch das Problem, dass der Header etwa 104px groß ist und ich gern so nen kleines Space hätte sozusagen zwischen Head und Menü-Bereich.

Ich hab das so:


```
#header {
height:111px;
background:#eee;
background:url(img/head.jpg) no-repeat;
}
```

Aber das sieht dann so aus wie im Anhang.


----------



## Maik (11. Dezember 2009)

Normalerweise wäre hier eine margin-top-Deklaration für das Menü und den Inhalt die Lösung.

Da aber deren mittleres Hintergrundbild "2colsMiddle.gif" im DIV *#wrapper* genutzt wird, käme es an dieser Stelle zum Vorschein.

Also hab ich in "v5" das Markup um einen weiteren DIV-Block namens *#innerwrapper* ergänzt, der die beiden Spaltenblöcke in sich aufnimmt, sowie das angesprochene Hintergundbild erhält. Diesen Block hab ich dann mit margin-top:10px formatiert.

Damit es nun in den standardkonformen Browsern wegen der beiden umfliessenden Spaltenblöcke zu keinem Darstellungsfehler führt, bei dem die Box bzw. deren Hintergrundbild nicht in  der vollen Höhe angezeigt wird, habe ich desweiteren die Klasse *.clearfix* eingeführt (siehe  Warum passt sich die Boxenhöhe nicht dem Inhalt an?), die im DIV-Block *#innerwrapper* aufgerufen wird.

mfg Maik


----------



## lisali (11. Dezember 2009)

Dankeschön! Ich hab jetzt mal etwas weitergemacht und bin an zwei weitere Fragen gestoßen, die sich vielleicht in dem Bild klären?

http://s8.directupload.net/images/091211/w7p7uuff.png

Und dazu hätte ich vielleicht noch die Frage: Man sieht ja ein Suchfeld dort. Da kann ich ja dann einfach ein fixed div mit Form+Inputfeld später reinmachen, genauso wie für das schwarze Feld für den Navigations-Inhalt der Seite, oder?


Edit: Ohh... noch was ganz wichtiges... ist mir gar nicht aufgefallen.... ach, ich zeig einfach die Grafik der Seite... Moment.


----------



## Maik (11. Dezember 2009)

Ich kann dem Bild gerade nicht so recht folgen 

Soll sich das graue Hintergrundbild nach rechts "strecken", oder wiederholen?

"Unendlich" wird aber nicht funktionieren, da ja *#outerwrapper* (ehemals *#wrapper*) eine feste Breite besitzt.

Wie lautet denn dein dazugehöriger HTML-/CSS-Code?

mfg Maik


----------



## lisali (11. Dezember 2009)

Also, diese Bilddatei ist noch wichtig:

http://s3.directupload.net/images/091211/5hy2jwa9.png

Da habe ich ja diese eine Status-Leiste, wo man gerade auf der Seite ist.

Da müsste ja dieser Content-Bereich auch von Oben gesehen etwas nach unten geschoben werden, damit Platz dafür ist.

Und dazu hätte ich noch die Frage, ob diese "Grafik" rechts neben dieser Status-Leiste (nach samantha) auch einfach mit einem extra div positioniert werden sollte? Oder gibt es da resourcensparendere Möglichkeiten? Das wäre z.B. dann eine Grafikdatei mit repeat-x, was ebenfalls auch abhängig wäre von diesem Statustext, aber immer bis zum maximalen Ende des Content-Bereiches geht.


----------



## lisali (11. Dezember 2009)

Maik hat gesagt.:


> Ich kann dem Bild gerade nicht so recht folgen
> 
> Soll sich das graue Hintergrundbild nach rechts "strecken", oder wiederholen?
> 
> ...



Damit meinte ich das, was ich jetzt nochmal hiermit verdeutlichen möchte:

http://s1.directupload.net/images/091211/9v9lmljw.png

Das, was ich da rot markiert habe ist dieser Hintergrund, der bis ins Unendliche gehen sollte. Eben diese Hintergrundgrafik sollte ganz durchlaufen... repeat-x-mäßig.


----------



## Maik (11. Dezember 2009)

Naja, wie du da oben ebenfalls einen vertikalen Versatz zwischen Menü und Inhalt einrichten, und darin die Breadcrumb-Navigation unterbringen kannst, hab ich dir ja im Footer-Bereich demonstriert.

Was den grafischen Balken angeht, würde ich diesen als Hintergrundbild in dem DIV-Block nutzen, der die Breadcrumb-Navigation  in sich aufnimmt, und für sie einen weißen Hintergrund festlegen, damit sie das Hintergrundbild überdeckt.

mfg Maik


----------



## Maik (11. Dezember 2009)

lisali hat gesagt.:


> Das, was ich da rot markiert habe ist dieser Hintergrund, der bis ins Unendliche gehen sollte. Eben diese Hintergrundgrafik sollte ganz durchlaufen... repeat-x-mäßig.


Wie soll denn der (rosa)rote Teil nach rechts ins unendliche gehen, wenn das Layout eine absolute Breite (889px) besitzt?

Eventuell kannst du es ja als Hintergrund für das <body>-Element verwenden.

Steht die Seite mittlerweile online zur Verfügung, um dort mal einen Blick drauf werfen zu können?

Mir ist nämlich z.B. nicht bekannt, wie sich dieses Hintegrundbild überhaupt konkret darstellt.

mfg Maik


----------



## lisali (11. Dezember 2009)

Ja, das ist mir jetzt eingefallen, dass ich doch einfach im body-Element das ganze als Hintergrundgrafik bestimmten könnte. Kann ich denn per Positionsangaben einer jpg Datei dabei auch bestimmen was diese Hintergrundgrafik angeht?

Das mit dem Abstand bzw. padding-top vom Content-Bereich versuche ich jetzt noch hinzukriegen.
Ja, also momentan ist erstmal alles localhost auf meinem PC, aber ich lad es dann gerne hoch, wenn ich fertig bin!

Kannst du mir bitte erklären was du mit Breadcrumb meinst? Und welchen Div-Block genau meinst du dabei?


----------



## Maik (11. Dezember 2009)

lisali hat gesagt.:


> Ja, das ist mir jetzt eingefallen, dass ich doch einfach im body-Element das ganze als Hintergrundgrafik bestimmten könnte. Kann ich denn per Positionsangaben einer jpg Datei dabei auch bestimmen was diese Hintergrundgrafik angeht?


Die CSS-Eigenschaft  background-position ermöglicht es, ein Hintergrundbild in seinem Anzeigebereich zu positioneren, falls du darauf hinaus willst.

Aber beachte hierbei, dass für ein auf der X-Achse zu wiederholendes Hintergrundbild keine horizontale Positionsangabe  möglich ist. Gleiches gilt  im Umkehrschluß für die vertikale Position, wenn das Hintergrundbild auf der Y-Achse wiederholt werden soll.



lisali hat gesagt.:


> Ja, also momentan ist erstmal alles localhost auf meinem PC, aber ich lad es dann gerne hoch, wenn ich fertig bin!


Du darfst die Problemseite ruhig, oder gerade wegen dem problembehafteten  Stadium, jetzt schon hochladen, damit man auch im Bilde ist, was du da konkret versuchst umzusetzen. Das ist im Hinblick auf den Quellcode wesentlich aufschlußreicher, als deine Schnappschüsse.



lisali hat gesagt.:


> Kannst du mir bitte erklären was du mit Breadcrumb meinst? Und welchen Div-Block genau meinst du dabei?


"Breadcrumb-Navigation" nennt sich in deutscher Sprache Brotkrümelnavigation.

Naja, die Umsetzung deines Vorhabens hab ich vorhin  lediglich theoretisch abgehandelt, denn dein aktueller HTML- und CSS-Code ist mir ja (noch immer) nicht bekannt, und somit auch kein bestimmter DIV-Block, in dem sich das Szenario abspielen soll  

mfg Maik


----------



## lisali (11. Dezember 2009)

Okay, ich lade es jetzt regelmäßig auf http://www.yiao.de hoch.

Irgendwie kommen ganz viele verzweifelnde Sachen zustande. Du kannst ja mal einen Blick drauf werfen. Irgendwie kriege ich es nicht hin diese Content-Top BG-Datei runterzukriegen. Das mit background-position habe ich noch nicht probiert, aber mache ich jeden Moment.
Und ich muss gerade noch rausfinden wie ich ein eingefügtes Bild für die Navigationsleiste den Text nicht dazu bringe dann am bottom zu sein.

Edit 1: Der Background geht jetzt, jedoch habe ich das nicht mittels background-position lösen können, sondern eigener Bilddatei. Ich fühl mich irgendwie bei sowas immer schlecht, weil ich denke, dass ich zu viele Resourcen verwende. Also, es kommt ja bestimmt noch einiges hinzu.

Edit 2: Also, ich versuche momentan wie man sieht immernoch irgendwie das mit der Content-Verschiebung und auch diese Trenn-Bilddatei zwischen dem Text in der Navigation hinzukriegen, aber das klappt nicht so wirklich. Was anderes außer float: left fällt mir da auch nicht ein, aber wenn ich das mache macht es das Menü kaputt sozusagen.

Edit 3: Wie man jetzt sieht habe ich es hingekriegt, dass da ein Abstand erzeugt wird beim Content, aber trotzdem bleibt diese Content-Inhaltsgrafik weiterhin ganz oben. Wie bekomme ich die da weg? Und kann ich es irgendwie "ausschalten", dass alles (sowohl im Menü als auch im Content) zu 100% breit ist?


----------



## Maik (11. Dezember 2009)

Mach es doch einfach so:


```
<div id="outerwrapper">
     <div id="header">
          ...
     </div>
     <div id="innerwrapper" class="clearfix">
          <div id="menu">
               ...
          </div>
          <div id="breadcrumb">
               <ul>
                   <li>yiao.de</li>
                   <li>/</li>
                   <li>Benutzer</li>
                   <li>/</li>
                   <li>samantha</li>
               </ul>
          </div>
          <div id="content">
               ...
          </div>
     </div>
     <div id="footer">
          ...
     </div>
</div>
```


```
#breadcrumb {
float:right;
width:664px;
height:40px;
background:#fff url(img/stripe.png) repeat-x right 15.5px;
}

#breadcrumb ul {
list-style:none;
padding:10px;
float:left;
height:20px;
background:#fff;
}

#breadcrumb ul li {
float:left;
margin-right:8px;
font-size:.9em;
}
```
Und im Anhang die dazugehörige Grafikdatei "stripe.png".

Sobald du nämlich für *#content* einen oberen Außenabstand festlegst, damit die Box nach unten wandert, kommt in der entstandenen Lücke zum Header-Bereich das Hintergrundbild "2colsMiddle.gif" zum Vorschein - suboptimal, würd' ich mal sagen.



lisali hat gesagt.:


> Und kann ich es irgendwie "ausschalten", dass alles (sowohl im Menü als auch im Content) zu 100% breit ist?


Block-Elemente besitzen die Grundeigenschaft, ihre Breite am übergeordneten Element auszurichten, die in der Voreinstellung width:100% entspricht.

Fügst du beispielsweise ein <div> ohne jegliche spezielle CSS-Formatierung im <body> ein, erstreckt es sich vom linken bis zum rechten Fensterrand.

Abhilfe schaffen hier u.a. die margin- oder padding-Eigenschaft; margin für das betroffene Element, oder padding für sein Elternelement.

mfg Maik


----------



## lisali (12. Dezember 2009)

Hey,

also, das ist echt super, was du mir gezeigt hast! Ich hab versucht das auch bei meiner Navigationsleiste anzuwenden, nur leider hat es das jetzt irgendwie mein Menü mitgerissen.

Ansonsten sieht mein Breadcrumb auch schon fast perfekt aus. Kannst du mir sagen wie ich sowas wie einen vertical-align: top machen könnte? Also, ich weiß, dass der Befehl nicht funktioniert, habe ihn schon getestet, aber ich denke mal du weißt was ich meine? Dass eben alles ganz oben ausgerichtet ist.

Und vielen vielen Dank für die Aufklärung! Ich lerne echt viel von dir! Wirklich, danke für die Mühe!

Was bedeutet eigentlich sowas z.B.: 
	
	
	



```
padding: 50px 0;
```
 in CSS? Also, ich weiß, dass 
	
	
	



```
padding: 50px 0 0 0;
```
 oben-rechts-unten-links bedeutet, aber mit 2 Werten kenne ich das nicht. Kannst du mir das kurz sagen?

LG,

Lisa

Edit: Ahhh, mir ist was eingefallen... ich bin auch doof... ich mach einfach für jedes <li> den Background des images anstatt das Bild einzufügen ins li!


----------



## Maik (12. Dezember 2009)

Moin,

ergänze den Regelblock für *#innerwrapper* mit clear:left, damit das Umfliessen der Breadcrumb-Navigation abgebrochen wird:


```
#innerwrapper { /*layout.css (Linie 4)*/
width:889px;
margin-top:10px;
background:transparent url(img/2colsMiddle.gif) repeat-y scroll 0;
clear:left;
}
```

@padding-Wertangaben: 



> Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.



Quelle: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding

Wenn die Breadcrumb-Navigation einen Tick nach oben wandern soll, ändere einfach meine angewandte padding:10px-Deklaration für das <ul>-Element um, die in dieser Form für alle vier Seiten gilt.

mfg Maik


----------



## lisali (12. Dezember 2009)

Guten Morgen!

Ich hab es jetzt hinbekommen, dass die BC-Navigation an gewünschter Stelle ist, dankeschön! 

Ich glaube so langsam gewöhne ich mir CSS an.

Achja... ist es eigentlich suboptimal <img src... > im HTML Code einzufügen und lieber dafür css zu verwenden? Ich meine, gibt es da irgendwelche Vor- und/oder Nachteile?

Momentan möchte ich zwischen der Navigation jeweils eine Grafik anzeigen lassen. Dort wo "grafik" steht. Also, ich lad es jetzt nochmals hoch.

Danke dir nochmals!

Lisa


----------



## Maik (12. Dezember 2009)

Anstelle des mehrfach zu wiederholenden <img>-Elements  kannst du die Grafik doch  direkt als Hintergrundbild für die entsprechenden Listeneinträgen definieren.

mfg Maik


----------



## lisali (12. Dezember 2009)

Ja, das wollte ich ja auch machen mit dem akutellen code, aber es funktioniert nicht.

Ich hab es so geschrieben:


```
#navi ul li .bg { background:url(img/nline.gif) no-repeat; width:1px;  }
```

und dann jeweils in HTML: <li class='bg'>

Aber irgendwie zeigt er mir nichts an.


----------



## Maik (12. Dezember 2009)

Entferne mal das enthaltende Leerzeichen zwischen dem Elementtyp und dem Klassennamen.

In dieser Form handelt es sich nämlich um einen Selektor für Nachfahren, der in deinem Markup aber keine Übereinstimmung erzielt, und somit die Regel vom Browser auch nicht angewendet wird.

mfg Maik


----------



## lisali (12. Dezember 2009)

Ahh... okay! 

Super, ich freu mich... sieht schon fast so aus wie ich mir vorstelle! Und alles schön mit CSS!

Angenommen ich möchte nun auch einen Text ganz unten, jedoch innerhalb des Content-Bereiches, platzieren - müsste ich da was umstellen was meine Grafikdateien angeht oder könnte ich das auch einfach per CSS lösen?


----------



## Maik (12. Dezember 2009)

Im Falle des Menüs war es noch ein Leichtes, da ja im Footer das untere Abschluß-Hintergrundbild für die beiden Spalten enthalten ist, und sich durch den vertikalen Versatz eine gewisse Höhe für die Menüspalte ergeben hat, in der sich der untere Text problemlos einbetten ließ.

Im Falle des rechten Spaltenblocks sieht's leider nicht so gut aus, denn erstens besitzt der dazugehörige Abschnitt im unteren Hintergrundbild keine ausreichende Höhe, und zweitens hast du schon für die rechte Hälfte im Footer drei Verweise vorgesehen:


> Mediadaten | Impressum | Datenschutz



Wenn kategorisch auszuschließen wäre, dass der Inhaltsumfang in der Menüspalte jemals größer ausfällt, wie im DIV *#content*, würde dir mein gestern schon angesprochene und verlinkte Webmaster FAQ-Artikel Wie richte ich eine Box am unteren Rand der Elternbox aus? weiterhelfen.

Aber nochmal zur Erinnerung: Wenn in der Menüspalte doch mehr Inhalt steckt, sodass ihre Höhe größer ausfällt, als die des DIV-Blocks *#content*, wandert dieser Text nicht mit nach unten, sondern verharrt in seiner Ausgangsposition.

mfg Maik


----------



## lisali (12. Dezember 2009)

Dankeschön, das hat mir wieder echt weitergeholfen! Besonders das mit dem FAQ-Artikel!

Also, ich habe es jetzt zwar nicht direkt ausprobiert den Footer an die Stelle zu setzen, aber links im Menü habe ich es hingekriegt.

Jetzt wollte ich erstmal den Content-Bereich gestalten für die Startseite. Wie man sieht sind rechts im Content 3 Listeneinträge. Also, einmal das Twitter-Logo, dann meine Menüpunktgrafik und rechts daneben die Titelbeschreibung.

Ich möchte jetzt jedoch, dass das Logo jeweils ganz ganz links ist (so wie es momentan ist und der rechts ganz rechts am anderen Ende.
Dazu müsste ich wahrscheinlich das Logo aus dem Listeneintrag löschen, oder?

Und beides geteilt in Div's setzen oder eher in < p >'s ? Wo liegt da eigentlich der Unterschied?


----------



## Maik (12. Dezember 2009)

Wieso muß das Logo aus der Liste entfernt werden, wenn der benachbarte Text ("Twitter") nach rechts außen wandern soll?

Da das relevante <li>-Element zwar eine Klasse namens "*.right*" besitzt, jedoch diese im Stylesheet überhaupt nicht auftaucht, setzt du für sie einfach diese Regel auf:

```
#content #right ul li.right { float:right; }
```

Der semantische Unterschied zwischen dem <div>- und <p>-Element liegt darin, dass ersteres einen  allgemeinen Bereich (Division) umschreibt, und letzteres einen Textabsatz markiert.

Übrigens muß ein ID-Bezeichner im HTML-Dokumentbaum eindeutig sein, heißt: er darf darin nicht mehrmals vergeben werden (betrifft bei dir die <div>-Elemente mit der ID *#top*).

mfg Maik


----------



## Maik (13. Dezember 2009)

lisali hat gesagt.:


> Dankeschön, das hat mir wieder echt weitergeholfen! Besonders das mit dem FAQ-Artikel!
> 
> Also, ich habe es jetzt zwar nicht direkt ausprobiert den Footer an die Stelle zu setzen, aber links im Menü habe ich es hingekriegt.


Und nun füge in der rechten Spalte weiteren Inhalt ein, der die Mindesthöhe (600px) von *#menu* überschreitet, und beobachte, wie sich der untere Text in der Menüspalte verhält.

Ich hab dich hier aber schon zweimal darauf aufmerksam gemacht, dass die Box, wenn sie an dieser Stelle im HTML-Code  notiert und mit CSS entsprechend formatiert wird, in ihrer Ausgangsposition stehen bleibt, wenn der Inhalt in der benachbarten Spalte zunimmt.

Um genau das zu vermeiden, hatte ich diesen "Textblock" auf deine Frage


lisali hat gesagt.:


> Eins fällt mir dabei jetzt schon ein. Also, ich möchte gaanz unten im Menü (jedoch noch vor der Menü-unten-Grafik) so nen kleinen Text hinmachen, dass zwar auch "im Inhalt" drin ist, jedoch irgendwie eher wie unten angeheftet ist und sich vom eigentlich Inhalt (darüber) trennt. Wie kriege ich das hin? Ich denke immernoch in Tabellen... leider.


in meinem Modell (siehe Post #26) im Footerbereich eingebunden, da dieser ja immer nach unten geschoben wird, unabhängig, wie umfangreich der jeweilige Spalteninhalt ist. Denn laut deiner "Konzept-Skizze" (http://www.tutorials.de/forum/attachments/css/49985d1260526494-konzept.gif) ist es dir doch wichtig, dass sich die Höhe der Menüspalte immer automatisch der Inhaltspalte angleichen soll (vermutlich dann auch umgekehrt), und das dürfte sicherlich den "Textblock" am unteren Rand miteinbeziehen.

mfg Maik


----------



## lisali (14. Dezember 2009)

Vielen Dank für die ausführliche Erläuterung. Habe soweit auch alles bereinigt soweit ich das überblicken kann! Das mit dem Footer werde ich noch probieren, wenn ich Zeit dazu finde.

Ich würde gerne eine Frage stellen zur optimalen Lösung meines Sprechblasen-Problems auf der Seite. Also, ich hab da irgendwie mehrere div's verschachtelt und wollte jeweils mit der Datei spike_left.gif und spike_right.gif so ein Icon-Pfeil setzen für die Sprechblase der letzten Foren-Einträge.
Möchte ich nun aber abwechselnd links und rechts jeweils den "User reden lassen", ergeben sich erstmal jetzt das Problem, dass es nicht in einer neuen Zeile passiert. Also, was so eine Formatierung angeht von mehrspaltigen Dingen in CSS bin ich echt unentschlossen wie ich da rangehen sollte, deshalb wäre ich echt sehr dankbar um weiteren Rat, auch wenn ich mich schon schlecht fühle, weil du mir schon so viel geholfen hast!

LG,

Lisa


----------



## Maik (15. Dezember 2009)

lisali hat gesagt.:


> Möchte ich nun aber abwechselnd links und rechts jeweils den "User reden lassen", ergeben sich erstmal jetzt das Problem, dass es nicht in einer neuen Zeile passiert.


Klingt erstmal so, wie wenn da was am Floaten ist, und nach einer Zeile  mittels clear der Umfluß nicht abgebrochen wird.

mfg Maik


----------



## lisali (15. Dezember 2009)

Also, das hat geklappt, jedoch gibt es Schwierigkeiten, wenn der Text den Container in die Länge nach unten zieht.

Ich habe momentan folgenden Code für diesen Bereich:


```
<div>
          <img style="float:right" class="profile" width="22" src="img/users/8/user.jpg" alt="" />
          <div style="width:293px;" class="box_green">textetxtexxt<br />sdasdsadad<br /><br />sds<br /></div>
          <div style="float:right; margin:5px 13px;background:url(img/spike_right.gif) no-repeat;width:6px;height:6px"></div>
          </div>
          
          <div style="clear:both; padding-top: 7px">
          <img style="float:left" class="profile" width="22" src="img/users/1/user.jpg" alt="" />
          <div style="width:293px; float:right" class="box_green">textetxtexxt</div>
          <div style="margin:5px 0 0 39px;background:url(img/spike_left.gif) no-repeat;width:6px;height:6px"></div>
          </div>
```

Wie man sieht ist diese Grafikdatei "spike_right" an falscher Stelle, weil ich position: absolute aus der ersten Textbox rausgenommen habe. Aber wenn ich es wieder reinmache, überdeckt die obere Box die untere mit ihrem Text.

Lg,

Lisa


----------



## Maik (15. Dezember 2009)

Ich hab da mal ein wenig d'ran gefeilt, damit die "spike"-Grafiken an Ort und Stelle bleiben 


```
<div>
                         <div style="width:283px;float:left;" class="box_green">textetxtexxt<br />sdasdsadad<br /><br />sds<br /></div>
                         <img style="float:right" class="profile" width="22" src="img/users/8/user.jpg" alt="" />
                         <div style="margin:0px 22px 0 296px;background:url(img/spike_right.gif) left top no-repeat;height:6px"></div>
                    </div>

                    <div style="clear:both; padding-top:7px">
                         <img style="float:left;" class="profile" width="22" src="img/users/1/user.jpg" alt="" />
                         <div style="width:283px; float:right;" class="box_green">textetxtexxt</div>
                         <div style="margin:0px 296px 0 22px;background:url(img/spike_left.gif) right top no-repeat;height:6px"></div>
                    </div>
```


mfg Maik


----------



## lisali (15. Dezember 2009)

Ahhh, okay! Danke! Ich hab es auch verstanden. Auf das müsst ich mal selbst kommen...

Würde ich diese grüne Box aber nicht in Pixel angeben, sondern in Prozent, wäre es eigentlich unmöglich das hinzukriegen, oder? Ich möchte nämlich später bei Kommentaren sowas ähnliches machen.


Edit: Ich hätte noch eine zusätzliche Frage: 

Ich habe folgendes im CSS stehen:


```
#content .top ul li { font-size:13px; font-weight:bold; float:left; padding:0 0 0 8px; }
#content .top ul li.twitter { background:url(img/icons/twitter.gif) no-repeat; width:16px; height:16px; }
#content .top ul li.highlight { background:url(img/icons/stars.gif) no-repeat; width:17px; height:14px; }
#content .top ul li.search { background:url(img/icons/search.gif) no-repeat; width:14px; height:14px; }
#content .top ul li.chat { background:url(img/icons/chat.gif) no-repeat; width:20px; height:14px; }
#content .top ul li.events { background:url(img/icons/events.gif) no-repeat; width:18px; height:11px; }
#content .top ul li.right { float:right; }
```

Also für jede Sektion habe ich jeweils den Pfad zum jeweiligen Icon definiert. Ist das eigentlich eher "Platzverschwendung" bzw. könnte man das kürzer halten bzw. realisieren oder gäbe es da keine Alternativen?


----------



## Maik (15. Dezember 2009)

Grundsätzlich würde es schon funktionieren, wenn du in den Boxen nicht relative (%) und absolute Angaben (px) mixen würdest, was bei dem Rahmen der Box sich aber nicht vermeiden lässt, da hier eine prozentuale Rahmenstärke nicht möglich ist.

Zu deiner zusätzlichen Frage: Die Alternative wäre "CSS Sprites", die wir hier im Forum an diversen Stellen auch nutzen - siehe z.B. http://www.tutorials.de/forum/images_v6/37/map_.png

mfg Maik


----------



## lisali (15. Dezember 2009)

Okay, danke für den Link und die Erläuterung dazu!

Ich habe jetzt wieder eine grundlegende Frage. Also, eigentlich auch eine Art "Problem". Ich weiß es zwar zu lösen, aber es kommt mir so "falsch" vor. Also, ich hab die Seite nochmal geupdated und habe da links vor jeweils Panels aufzubauen (so wie bei "Interessante Mitglieder"). Vielleicht ist Panel auch der falsche Begriff dafür. Eben so eine andere Art von Titel-Bereichsbeschreibung.
Jedenfalls muss ich dort auch mit clear:both arbeiten, weil es sonst wieder keinen Umbruch gibt.

Benutze ich vielleicht zu viele divs? Oder setze ich sie falsch ein? Oder ist das so von meiner Strukur her schon in Ordnung so wie es ist?
Ich zeig mal ein bisschen aktuellen Code für die linke Seite des contents:


```
<div id="left">
        
        	<div class="pl8">
    		<div class="top"><ul>
		    <li class="highlight"></li><li class="right">Highlight of the Moment</li><li class="anchor_green right"></li>
            </ul><hr /></div>
			<div>
            <span style="float:left;background:#666;position:absolute;font-weight:bold;margin:2px 0 0 2px;font-size:15px;color:#fff;padding:0 3px 0 4px">8.7</span>
            <img src="img/test.gif" alt="" width="268" class="border" />
            <ul><li class="fleft">von <span class="online"><a>name</a></span></li><li class="fright"><strong>120</strong>x aufgerufen, <strong>3</strong>x bewertet</li></ul></div>
            </div>
            
        	<div style="clear:both" class="panel"><ul style="background:url(img/panel_bg.gif) no-repeat">
        	<li>Interessante Mitglieder</li><li class="end"></li>
        	</ul></div>
            
    	</div>
```


----------

