Layout mit 3 Hintergrundgrafiken

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.
 
Maik hat gesagt.:
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
Zum Vergrößern anklicken....

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.
 
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
 
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.
Zum Vergrößern anklicken....
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
 
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?
 
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?
Zum Vergrößern anklicken....
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!
Zum Vergrößern anklicken....
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?
Zum Vergrößern anklicken....
"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 :p

mfg Maik
 
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?
 
Zuletzt bearbeitet:
Mach es doch einfach so:

Code: 
<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>
CSS: 
#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?
Zum Vergrößern anklicken....
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
 

Anhänge

  • stripe.png
    stripe.png
    151 Bytes · Aufrufe: 28
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.:
Code: 
padding: 50px 0;
in CSS? Also, ich weiß, dass
Code: 
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!
 
Zuletzt bearbeitet:
Moin,

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

CSS: 
#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.
Zum Vergrößern anklicken....

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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück