3 Grafiken+variable Breite

[Mitja]

Hey Leute!
Ich habe ein Problem... Und zwar möchte ich gerne ein Design coden, was ich vorher in GIMP designed habe, sliced ist es auch schon, aber mit dem Coding habe ich es noch nicht so, bisher wurden meine früheren Designs immer von anderen gecoded.
Nun nutze ich YAML, ein zweispaltiges Layout und würde gerne sowohl die Nav als auch die Titel der Spalten mit einer Art Hintergrund versehen, also Links eine Grafik (runde Ecken) rechts eine Grafik und dazwischen eine wiederholbare Grafik von 46x1 px. Da die Spalten in YAML in Prozent angegeben sind, ändert sich die Spaltenbreite je nach Auflösung, daher müsste der Füllbereich, zwischen linker und rechter Grafik demnach wachsen oder schrumpfen.
Mit einer fixen breite bekomme ich das ja noch hin:
<div id="contentHeader"><div class="contentHeaderLeft"></div><div class="MidRight"><div class="contentHeaderMiddle">News</div><div class="contentHeaderRight"></div></div></div>

und dann HeaderLeft auf float:left, MidRight auf float:right und die beiden innen drin auch auf left und right. das funtkioniert soweit, aber nur mit fixer Breite... wie kann ich das anständig hinbekommen?

lg

[Detlef G.]

Hallo Mitja

sliced ist es auch schon,

Das klassische slicen war nur bei Tabellenlayout sinnvoll, wo dann für jedes Einzelbild eine Tabellenzelle verwendet wurde.
Bei CSS-Layouts werden eher größere, dafür weniger Grafiken verwendet, die sich teilweise überlappen. (Besonders bei Grafiken im PNG-Format hat die Größe der Grafiken oft nur einen minimalen Einfluss auf die resultierende Dateigröße, während viele kleine Grafiken zusätzliche Serverkommunikation erfordern.)

Schau dir mal diesen Artikel an, vielleicht hilft er dir weiter.
Aber bitte kopiere nicht einfach alles stur zusätzlich in dein bestehendes Seitengerüst, sondern überlege, welche der bereits vorhandenen Elemente mit deinen Hintergrundgrafiken versehen werden können.

Zu runden Ecken gab es hier vor kurzem mindestens zwei Threads (Abgerundete Ecken und mehrzeiliges display:table-cell hat Lücken). Eventuell kannst du auch aus den Antworten dort etwas für dich entnehmen.

Auf Wiederlesen
Detlef

[Mitja]

Hehe :)
Ja, stimmt schon, aber ich habe es auch nicht klassisch "gesliced" sondern nenne das GIMP Copy&Paste aus dem Design immer noch slicen, sorry :)
Also zu dem Artikel: Da ist bei mir schon direkt ein Darstellungsfehler bei 1680x1050 ;) Aber generell habe ich es glaube ich begriffen, ich werde es probieren.

Die 3 Bilder sind diese hier, daher ist das im weitesten Sinne garkeine Box, sondern eigentlich nur eine Zeile...

[Detlef G.]

Hallo Mitja

Die 3 Bilder sind diese hier, daher ist das im weitesten Sinne garkeine Box, sondern eigentlich nur eine Zeile...

Was soll die Zeile enthalten?
Eine Überschrift?
Soll das umschließende Element noch weitere Hintergrundbilder erhalten?

Warum drei Bilder?
Diese zwei sind noch kleiner als deine drei:

Auf Wiederlesen
Detlef

[ChrisB]

Hi,

Warum drei Bilder?
Diese zwei sind noch kleiner als deine drei:

Und eins wäre noch kleiner.
__   __________________
__| |__________________

Den rechten Teil ab der Rundung kann man per negativer background-position ganz nach Links an den Rand des Elements bringen, und dann den linken Teils rechts in einem (positionierten) Element unterbringen, das genau die passenden Maße hat.

MfG ChrisB

[Detlef G.]

Hallo ChrisB

Und eins wäre noch kleiner.

Ja

__   __________________
__| |__________________

»»

Den rechten Teil ab der Rundung kann man per negativer background-position ganz nach Links an den Rand des Elements bringen, und dann den linken Teils rechts in einem (positionierten) Element unterbringen, das genau die passenden Maße hat.

Oder genau andersherum, oder das Element mit dem kleinen Stück nicht positioniert sondern gefloatet, je nachdem, was beim jeweiligen Anwendungsfall besser geeignet erscheint.

Ich war bei den zwei Grafiken geblieben, um auch die Variante mit dem verschachtelten Elementen weiter möglich zu lassen. Wenn schon geeignete Elemente vorhanden sind (deshalb auch meine Fragen), würden keine zusätzlichen ins HTML eingefügt werden müssen.

Auf Wiederlesen
Detlef

[Mitja]

Gut, ich habe es mittlerweile gelöst:

<div id="ContentHead">  
			<div class="lc">  
			</div>  
			<div class="rc">  
			</div>  
			Downloads  
		</div>

#ContentHead {  
	width: 100%;  
	height: 46px;  
	background: url(../../Images/ContentHeadMiddle.png) repeat-x;  
	color: #ecbfe3;  
	font-size: 200%;  
	line-height: 46px;  
  }  
  
  .rc{  
	background: url(../../Images/ContentHeadRight.png) no-repeat;  
	height: 100%;  
	width: 24px;  
	float:right;  
	  
  }  
  
  .lc{  
	background: url(../../Images/ContentHeadLeft.png) no-repeat;  
	height: 100%;  
	width:40px;  
	float: left;  
  }

Ich würde das gerne in drei Grafiken haben, weil insgesamt 4 Überschriften damit unterlegt werden sollen, da ist es einfacher 3 Grafiken, die man variabel einsetzen kann, als 4 große Grafiken zu nutzen...
Ich hab es jetzt halt so gemacht, das der übergeordnete Container einfach komplett die Mittel-Grafik als Hintergrund hat und die beiden Abschlussgrafiken keinen transparenten Hintergrund, sondern die Seitenfarbe haben... Ich denke das funktioniert.

[ChrisB]

Hi,

Ich würde das gerne in drei Grafiken haben, weil insgesamt 4 Überschriften damit unterlegt werden sollen, da ist es einfacher 3 Grafiken, die man variabel einsetzen kann, als 4 große Grafiken zu nutzen...

Besser wäre es natürlich, nur zwei oder wie von mir vorgeschlagen, eine Grafik zu benutzen.

MfG ChrisB

[Detlef G.]

Hallo Mitja

<div id="ContentHead">

  	<div class="lc">  
  	</div>  
  	<div class="rc">  
  	</div>  
  	Downloads  
  </div>

  
Wo ist hier eine Überschrift?  
Eine Überschrift wäre <h1>, <h2>, …, je nach Ordnung.  
  
Wie wäre es denn einfach so:  
~~~html
    <h2>  
      <span>Downloads</span>  
    </h2>  

h2 {  
  background: url(balken_right.png) no-repeat right;  
  color: #ecbfe3;  
  font-size: 2em;  
  line-height: 46px;  
  font-weight: normal;  
  }  
  
h2 span {  
  display: block;  
  background: url(balken_left.png) no-repeat left;  
  height: 46px;  
  padding-left: 40px;  
  }  

Ich würde das gerne in drei Grafiken haben, weil insgesamt 4 Überschriften damit unterlegt werden sollen,

Was hat die Anzahl der Grafiken damit zu tun, wie oft du sie benötigst?

da ist es einfacher 3 Grafiken, die man variabel einsetzen kann, als 4 große Grafiken zu nutzen...

Das verstehe ich nicht!
Inwiefern würden vier große Grafiken statt deiner drei Grafiken benötigt?

Ich hab es jetzt halt so gemacht, das der übergeordnete Container einfach komplett die Mittel-Grafik als Hintergrund hat

Das funktioniert ganz genauso mit der großen Grafik ohne sie zu wiederholen.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo,

ich muss mich berichtigen:

Ich war bei den zwei Grafiken geblieben, um auch die Variante mit dem verschachtelten Elementen weiter möglich zu lassen. Wenn schon geeignete Elemente vorhanden sind (deshalb auch meine Fragen), würden keine zusätzlichen ins HTML eingefügt werden müssen.

Ich war etwas blind.
Auch die Variante mit den verschachtelten Elementen lässt sich mit _einer_ Grafik ohne Probleme realisieren.
 _______________________________________________________________
(_______________________________________________________________)

    <h2>  
      <span>Downloads</span>  
    </h2>  

h2 {  
  background: url(balken.png) no-repeat left center;  
  padding-left:40px;  
  }  
  
h2 span {  
  display: block;  
  background: url(balken.png) no-repeat right center;  
  min-height: 46px;  
  }  
* html h2 span {  
  height: 46px;  
}  

Auf Wiederlesen
Detlef