CSS: Grafik / Hintergrundlinie wiederholen

[medium22]

Hallo,


Ich hab da grade so meine lieben Probleme mit CSS.

Es wird eine Art 'Box' dargestellt, die sowohl als Rand als auch im Inhalt eine Grafik als Hintergrund besitzt. Für beides habe ich kleine Grafiken die sich dementsprechend beliebig oft wiederholen und der Grösse des Inhalts anpassen lassen können sollten.

Auszug aus der HTML-Datei:

  <div class="content-main">
    <div class="content-left"></div>
    <div class="content-middle">
	inhalt.. <br /><br /><br /><img src="grafiken/hr.gif"><br />inhalt..<br />
	inhalt.. <br /><br /><br /><img src="grafiken/hr.gif"><br />inhalt..<br />
    </div>
    <div class="content-right"></div>
  </div>

Auszug aus der CSS-Datei:

#content-main {
  clear: left; 
  min-width: 600px;
}
.content-middle {
	padding-top:15px;
	padding-bottom:15px;
	width: 598px;
	height: auto;
	background-color: #E3C7F4; 
  	background-image:url(../grafiken/headline_whiteline.gif);
  	background-repeat:no-repeat;
  	background-position:top;
	float: left;
}
.content-left {
	min-height: 64px; 
	width: 1px;
	background-image: url(../grafiken/box_vborder.gif);
	background-repeat: repeat-y;
	float: left; 
}
.content-right {
	width: 1px;
	min-height: 64px;
	background-image:url(../grafiken/box_vborder.gif);
	background-repeat: repeat-y;
	float: left;
}

Das Problem ist nun, dass die beiden Grafiken links und rechts (content-left / right) nicht so lange wiederholt werden wie der Inhalt (content-middle) lang ist. Die Breite ist fix 600px, aber die Höhe richtet sich nach dem Inhalt.
Mein Gedanke ist nun, dass die (beim Aufbau der Seite) noch nicht wissen wieviel Inhalt kommt und dementsprechend auch nicht (oder nicht oft genug) wiederholt werden. Ich wüsste nun aber auch keine Möglichkeit denen das beizubringen bzw. woran es sonst liegen könnte.
Der Inhalt selbst wird dynamisch erzeugt, ist also an keine fixe Höhe gebunden.


Vorschläge, Ideen, Anregungen?


Gruss & Danke

[AmicaNoctis]

Hallo Raffi,

vermutlich liegt das am float. Dadurch passt sich das Elternelement nicht an die Größe der Kinder an. Du kannst das aber erzwingen, indem du einen neuen block formatting context erzeugst. Das geschieht, wenn du den Elemente mit float: left eine der overflow-Eigenschaft hidden oder auto zuweist und den entsprechenden margin-left setzt.

Gruß,

Amica

[medium22]

Hallo Amica,


Leider bewirkt das nichts, dh. es verändert sich nichts.
Den margin-left-Wert musste ich auf 0px setzen, ist er höher als 0, verschiebt sich alles kreuz & quer. Auch das hinzufügen von overflow (auto o. hidden) veränderte nichts.

Den Teilscreenshot als Hilfe, wie es aktuell aussieht..

[AmicaNoctis]

Das hilft leider nichts. Da würde sich ein Onlinebeispiel besser machen.

[AmicaNoctis]

Hinweis für Dritte: Diese Antwort bezieht sich auf ein per PM gesendetes Onlinebeispiel.

Floats sind keine Tabellen. Dass .content-main sich seinen Kindern der Höhe nach anpassen kann, wenn man einen BFC eröffnet, weißt du ja jetzt. Das heißt aber nicht, dass alle Kinder (also auch .content-left) sich dann wiederum auf die Größe des Elternelements erweitern.

Das Problem ist, dass ich deinen Ansatz für diese Box für falsch halte. Wenn links und rechts ja doch nur ein 1px breiter Rahmen ist, warum nimmst du dann nicht gleich border? Und wenn die Breite sowieso festgelegt ist, muss man nicht alles in 100 Bilder zerlegen, sondern kann auch beide oberen und beide unteren Rundungen zu je einem Bild zusammenfassen, oder auch vertikale Sliding Doors verwenden.

[medium22]

Oh! An Border habe ich bisher gar nicht gedacht - habe mich zu sehr auf diese Grafiken versteift.

Nun habe ich sowohl content-left als auch right komplett entfernt, dem content-middle ein paar border-Werte geschenkt und schon sieht es so aus wie ich es gerne hätte.

.content-middle {
	padding-top:15px;
	padding-bottom:15px;
	width: 600px;
	height: auto;
	background-color: #E3C7F4;
	border-left: 1px;
	border-left-style: solid; 
	border-left-color: #FFFFFF;
	border-right: 1px;
	border-right-style: solid; 
	border-right-color: #FFFFFF;
	border-top: 1px;
	border-top-style: solid; 
	border-top-color: #FFFFFF;
}

Danke für diesen Denkanstoss - die bei dir wie immer Gold wert sind!

[medium22]

li-Elemente inline darstellen

Hallo,


da ich noch am selben Projekt sitze und erneut auf CSS-Proble stosse, mache ich in diesem Thread einfach weiter.

In den obigen Content werden nun Inhalt eingefügt - jeweils 3 'Boxen' pro Zeile. Nun habe ich versucht diese Boxen mit einer Liste (ul/li/....) zu realisieren was an und für sich auch sehr hübsch aussieht. Problem ist aber, dass ich diese 3 (bzw. zu Testzwecken erstmal zwei) 'Boxen' nur untereinander hinbekomme und nicht nebeneinander. Sowohl display: inline; (bzw. inline-block) als auch float: left (was ich beides sehr häufig über die Google-Suche gefunden habe) führen nicht zum gewünschten Ergebnis.

Auszug html:

<div class="content-middle">
  input-feld.. <br /><img src="s/hr.gif"><br />
  <span id="sm_box">
    <ul>
    <a href="#"><li><img src="s/a.gif" border="0"> <br /><br />Beschreibung A<br /></li></a>
    <a href="#"><li><img src="s/b.gif" border="0"> <br /><br />Beschreibung B<br /></li></a>
    </ul>
  </span>		
  <img src="s/hr.gif"><br />
</div>

Auszug CSS:

#sm_box {
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  color: #000000;
  text-decoration: none;
  border: 0px;
  margin: 1px;
  display: inline-block;
}
#sm_box ul, #sm_box li {
  height: 80px;
  width: 150px;
  list-style-type: none;
  padding: 2px;
  margin: 1px;
  color: #000000;
  text-decoration: none;
}
#sm_box a:hover li {
  background-color: #EAD9F7;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  padding-top: 2px;
  color: #000000;
  text-decoration: none;
  border: 0px;
}

Gibt es einen bessere Weg um das zu realisieren? Oder noch besser.., sieht jemand wo hier der Hund liegen könnte?

[wahsaga]

Oder noch besser.., sieht jemand wo hier der Hund liegen könnte?

Im fehlerhaften HTML-Code.

Bitte validiere diesen, bevor du fragst.

[medium22]

Entschuldige, dass wir nicht so allwissend sind wie du!

[AmicaNoctis]

Entschuldige, dass wir nicht so allwissend sind wie du!

Bitte nicht sarkastisch werden. Bei CSS-Problemen muss immer erst sichergestellt werden, dass der HTML-Code valide ist und das ist er bei dir nicht. Es gibt also keinen Grund, sich über Wahsagas Antwort zu beklagen.

[medium22]

Okay!

Also nochmal anders..

<div id="sm_box2">
  <div><img src="s/a.gif"> Beschreibung A<br /></div>
  <div><img src="s/b.gif"> Beschreibung B<br /></div>
  <div><img src="s/c.gif"> Beschreibung C<br /></div>
</div>

#sm_box2 {
  float: left;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  color: #000000;
  text-decoration: none;
  border: 0px;
  margin: 1px;
  display: inline-block;
  position: relative;
  bottom: 0px;
}
#sm_box2 div:hover {
  background-color: #EAD9F7;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  min-height: 80px;
  min-width: 150px;
  padding-top: 2px;
  color: #000000;
  text-decoration: none
  border: 0px;
}

Wird trotz floating, display, ... untereinander angezeigt. Ebenso bekomme ich den Inhalt (die Grafik und den Text) nicht positioniert (bottom).

[AmicaNoctis]

Du hast sm_box gefloatet, nicht aber die divs darin. Der Selektor zum Stylen dieser inneren divs fehlt, zumindest wenn sie nicht gerade gehovert werden.

#sm_box div { /* allgemeine Angaben für die inneren divs */ }
#sm_box div:hover { /* Änderungen zu oben für den gehoverten Zustand */ }

[wahsaga]

Okay!

Also nochmal anders..

Niemand hat gesagt, dass du schlechteres HTML schreiben sollst (Stichwort DIV-Suppe) - sondern nur die Fehler ausbessern ...

[medium22]

Danke für den Hinweis Amica.

<div id="sm_box2">
  <div><p><img src="s/a.gif" border="0"> Beschreibung A</p></div>
  <div><p><img src="s/b.gif" border="0"> Beschreibung B</p></div>
  <div><p><img src="s/c.gif" border="0"> Beschreibung C</p></div>
</div>

#sm_box2 {
  height: 80px;
  width: 456px;
  max-height: 80px;
  max-width: 456px;
  color: #000000;
  text-decoration: none;
  border: 0px;
  margin: 1px;
}
#sm_box2 div {
  float: left;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  color: #000000;
  border: 0px;
  margin: 1px;
  position: relative; 
  bottom: 0;
  vertical-align:middle;
}
#sm_box2 div:hover {
  float: left;
  background-color: #EAD9F7;
}
#sm_box2 div p {
  position: absolute; 
  bottom: 0;
  left: auto;
}
#sm_box2 div p p {
  vertical-align:middle;
}

Das letzte Problem war noch, dass ich nicht gleichzeitig position:absolut mit bottom und middle benutzen konnte. Daher noch das div p p ... Das seltsame an der Sache ist, wie ich finde, dass das 'p p' komplett richtig dargestellt wurde obwohl im HTML selbst kein zweites p vorkommt.

Kann mir jemand erklären warum das so ist?


Zum Design selbst ist nun alles geregelt, es sieht sowohl im IE als auch im FF (andere noch nicht getestet) gleich aus.

Danke!


Edit: Herrlich! Ich bin auf einem absteigenden Ast.. Da kann ich mir ein herzhaftes Lachen echt nicht mehr verkneifen.

[wahsaga]

Daher noch das div p p ...

Diese Regel kann gar nicht wirksam werden, weil du keinen Absatz in einem Absatz hast.

Und wenn du einen hättest, wäre es wiederum ungültiges HTML.