Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch :)

Vip0r · 04.11.2011

Guten morgen zusammen,

ich steh gerade irgendwie am Schlauch. Ich hab mir die Tage ein nettes Design gebastelt und möchte dieses jetzt schneiden, bzw. in HTML/CSS umsetzten. Mir fällt allerdings einfach nicht ein wie ich das ganze schneiden muss, bzw. welche DIVs ich erstellen muss, damit mein Design nach unten hin beliebig "wächst". Der Content-Bereich soll logischerweise je nach Seiteninhalt nach unten hin beliebig wachsen können. Ich denke das einfachste ist wenn ihr euch mal das angehängte Bild anseht.

(Keine Angst, das ist nicht das wirklich Design. Nur ein Beispiel

)

Von oben angefangen ist das erstmal ganz leicht. Den Header schneide ich so als einzelnes Bild aus, erstelle ein entsprechend großes DIV und füge das Bild als Hintergrund ein.

Der Grüne-Bereich soll eine kleine Zeile sein auf der zu sehen ist, wo auf der Seite man sich gerade befindet. Das kann ich analog dem Header machen.

So, im Contentbereich hab ich allerdings meine Probleme. Diese "Gedankenblasen" die ihr da seht müsst ihr euch ganz leicht durchsichtig vorstellen, das ist sozusagen der Hintergrund des Contentbereichs. Mir fällt jetzt einfach nicht ein wie ich das ganze in CSS umsetzten kann, das der Contentbereich nach unten hin wächst? Wenn ich einfach ein "Content-DIV" erstelle, das Bild als Hintergrund einfüge dann würde sich dieses Bild nach unten hin auf der Seite ständig wiederholen. Das möchte ich nicht. Ich will das nach unten hin einfach nur der Rahmen links und rechts und das grau als Farbe mitwächst

Wenn ich im CSS "no-repeat" mach, dann würde wenn das DIV nach unten wächst der Hintergrund weiß werden, das will ich auch nicht, es soll ja in dem grau bleiben...

Ich hoffe ihr versteht was ich in etwa meine und könnt mir helfen

MyBad · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Um dir helfen zu können, wäre es schon gut, wenn du dein finales Design herzeigst. Nur dann lässt sich sagen, was du schneiden musst und was eventuell per CSS zu realisieren ist.

Content-Bereich-Problem:
Im CSS die Hintergrundgrafik auf "no-repeat" setzen. Zum Beispiel so:

HTML:

#content{
  background: url('blase.png') no-repeat top #DEINEHGFARBE;
}

Myhar · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Dazu gibt es zwei Möglichkeiten (bzw. nur eine, aber das kommt darauf an, wie dein Design dann aussieht)
Du gibst deiner Gedankenblase ein no-repeat. Die Hintergrundfarbe (das Grau) kannst du folgendermaßen weiterführen:

HTML:

.divMitBlase{background:url(pfad/zurBlase.png) 114px 200px no-repeat grey}

Grey im oben angeführten Code mit dem Farbwert ersetzen (und natürlich auch die restlichen Parameter anpassen), dann wird das gesamte div grau. Möchtest du statt einer Farbe eine zweite Grafik haben, dann musst du zwei divs erstellen.

Noch eine weitere Möglichkeit, falls nur die modernsten Browser unterstützt werden sollen: Mit CSS3 ist es möglich, mehrere Hintergrundbilder für ein Element zu definieren.

L. G.

Vip0r · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Hmm, okay.

Hab die Vorabversion mal geschwind exportiert.

Ich will sozusagen das der Bereich unter dem Fuß und über der Schattierung links unten erweitert wird. Es soll aber der Rahmen links und rechts erhalten bleiben.

MyBad · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Ein Lösungsweg wäre folgender:
- Den unteren Teil (ca. 50px) ausschneiden. und in einen DIV unterhalb von "Content" legen.
- Den oberen Teil als Hintergrund in dein "Content" einbauen (background: url('grafik_a.png') no-repeat top #FFF; )

Das Markup dan eventuell so:

HTML:

  <div id="content">Hintergrundgrafik -> TEIL A</div>
  <div class="bottom">Hintergrundgrafik -> TEIL B</div>

Edit:
Oder eben wie Myhar schon anmerkte, mit CSS3.

Vip0r · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Hi,

CSS3 möchte ich vorerst vermeiden, da die Kompatiblität vor allem bei älterer Kundschaft zwingend Notwendig ist.

Wenn ich den unteren Teil wie du sagst wegschneide, was passiert dann wenn das div "content" wächst?

Selbst wenn ich wie weiter oben von MyHar beschrieben die Hintergrundfarbe weiterführe:

.divMitBlase{background:url(pfad/zurBlase.png) 114px 200px no-repeat grey}

Dann würde mir der Rahmen links und Rechts fehlen, oder?

MyBad · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Du kannst es noch etwas verschachteln:

HTML:

<div class="wrapper">
  <div id="content"></div>
  <div id="bottom"></div>
</div>

"wrapper" bekommt dann einen 1px hohen, sich wiederholenden Hintergrund verpasst. In deinem Fall den "Rahmen".

Myhar · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Dieses Design ist meiner Meinung nach relativ ungeeignet, den Inhaltsdiv mitwachsen zu lassen, bzw. etwas aufwändiger umzusetzen.
Eine Möglichkeit wäre, die Rahmen für links, rechts, oben und unten seperat auszuschneiden und dann mit leeren divs zu arbeiten, welche die Rahmen beinhalten. Das wäre die skalierungsfreundlichste Lösung.
Hier ist ein Artikel, in dem es zwar darum geht, boxen mit runden Ecken zu erstellen, jedoch kannst du die Technik ohne Probleme eins zu eins auf deine Box anwenden. Den Fußabdruck wirst du dann als seperate Grafik einbinden müssen (zusammen mit den geschwungenen Farbflächen. Das weiß speichere jedoch nicht als Grafik ab, das löse bitte über die Hintergrundgrafik.

L. g.

MyBad · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Wenn du es doch mit Grafiken, wie in meinem Vorschlag lösen möchtest, habe ich hier mal die Slices eingezeichnet:

Vip0r · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Danke schonmal. Aber heut ist irgendwie nicht mein Tag. Wenn ich jetzt wie MyBad sagt ausschneiden würde und sich der Teil A nach unten hin erweitert und ich den Background auf no-repeat stelle (und mit grau erweitere), dann würde mir doch links und rechts der Rahmen fehlen. Oder nicht?

Vip0r · 04.11.2011

AW: Design richtig schneiden / DIV mit dynamischer Länge, steh am Schlauch

Gott schenk Hirn.... Die Welt kann so einfach sein!

Danke für die Hilfe