✔ Div - Hintergrundgröße unterschreiten

[Klein0r]

Hallo zusammen,

ich habe folgendes Div-Element:

div.code, div.codeheader {
  width									:		440px;
  border								:		1px black dashed;
  padding-left							:		0px;
}

div.code {
  margin-top							:		0px;
  margin-bottom							:		5px;
  overflow								: 		auto;
  border-top							:		none;
  font-size								:		8pt;
  padding-top							:		5px;
  padding-bottom						:		5px;
  background-image						:		url(img/minipics/code_style.jpg);
  background-position                   :       top left;
  background-repeat                     :       no-repeat;
}

div.codeheader {
  margin-top							:		5px;
  margin-bottom							:		0px;
  font-weight							:		bold;
  padding-right							:		0px;
  background-color						:		#c0c0c0;
}

Das Bild code_style.jpg hat folgende Dimensionen: 600 * 100

Nach rechts wird das Div-Element nicht auf 600 erweitert - aber in der Höhe hat es immer mindestens 100 Pixelchen - das Problem ist das das Div durch das Overflow-Attribut immer unterschiedlich groß wird und ich so keine fixe Größe angeben kann.

Wie bekomme ich es hin, dass das Element seine "Minimalhöhe" von 100px unterschreitet und sich dabei nicht am Hintergrund orientiert sondern am Text im Div?

lg

 

[Maik]

Hi,

nach dem Lesen des Stylesheets und ohne das Konstrukt direkt in einem Browser betrachtet zu haben, stelle ich hier die These in den Raum, dass es zum einen an der absoluten width:440px-Deklaration liegt, dass die Box(en) nicht auf 600px "gestreckt" wird/werden, und zum anderen ein Hintergrundbild keinen Einfluß auf die Dimensionen einer Box hat, und mag es noch so groß sein, da es keinen Elementinhalt darstellt / erzeugt.

Der enthaltende Text bricht beim Erreichen der 440px in die nächste Zeile um, sodass auch hier die absolute Boxenbreite nicht ausgedehnt wird.

Wieso legst du denn für die Box nicht die gewünschte Breite fest, und warum besitzt die Box überhaupt eine "Minimalhöhe" von 100px?

Eine entsprechende Regelung mit der min-height-Eigenschaft für die standardkonformen Browser, sowie der height-Eigenschaft für den IE<7 kann ich in dem Code-Snippet nicht entdecken.

Und welchen Zweck soll die Angabe overflow:auto erfüllen, wenn der Text, wie erwähnt, beim Erreichen des rechten Boxenrands in die nächste Zeile umbricht, und die Box auch keine festgelegte Höhe besitzt?

mfg Maik

//edit

das Problem ist das das Div durch das Overflow-Attribut immer unterschiedlich groß wird und ich so keine fixe Größe angeben kann.

Wie bekomme ich es hin, dass das Element seine "Minimalhöhe" von 100px unterschreitet und sich dabei nicht am Hintergrund orientiert sondern am Text im Div?

Die einzige variable Größe, die ich da in der Box vorfinde, ist ihre Höhe, die sich völlig unabhängig von der overflow:auto -Deklaration durch ihren Elementinhalt (Text) ergibt.

Sei mir nicht bös, aber ich kann dir momentan nicht folgen, wo nun das Problem liegt bzw. worauf du hinaus willst, denn eine Boxenhöhe orientiert sich nicht an ihrem Hintergrundbild, sondern entweder an ihrem Elementinhalt, oder an einer festgelegten Höhendeklaration im Stylesheet.

 

[Klein0r]

Hi - danke für deine Antwort erstmal

Das mit der Breite ist so gewollt und funtioniert auch wunderbar.
Nur, da die Höhe dynamisch ist, weiß ich ja vorher nicht wieviel Code in mein Div gepackt wird. Das funktioniert auch wunderbar. Es geht mir nur darum, dass das Div von der Höhe niemals kleiner als 100px wird (auch wenn nur eine Zeile im Div enthalten ist), da das Hintergrundbild das Element daran hindert kleiner zu werden (glaube ich).

Hier geht es nur um eine winzige Optik-Frage

Ein Zeilenumbruch wird durch overflow vermieden.

Hier mal ein Beispiel einer einzelnen Zeile (das Problem):
http://de.klein0r.de/tutorials-42.html

Und hier mit mehr Code:
http://de.klein0r.de/tutorials-41.html

 

[Maik]

Ein Zeilenumbruch wird durch overflow vermieden.

Da muß ich dir leider widersprechen bzw. diese hier allgemeingültig klingende Aussage relativieren, denn in deinem Fall sorgt das verwendete pre-Element dafür, dass sein enthaltender "Quelltext" nicht umgebrochen wird.

Du kannst ja mal in einem Testlauf besagtes Element aus dem Markup entfernen, und anschliessend schauen, was overflow:auto darin auf der X-Achse bewirkt bzw. wie sich dann der Text in diesem Modell verhält.

Vorab aber schonmal die Info: er wird am rechten Boxenrand umgebrochen, trotz overflow:auto-Deklaration, es sei denn, der Text kommt als Zeichenkette ohne Leerzeichen daher.

mfg Maik

 

[Quaese]

Hi,

das Problem der Höhe dürfte wohl eher daran liegen, dass es sich zwar nur um eine Zeile optisch ausgegebenen Code, in der Realtität jedoch um vier Zeilen im PRE-Element handelt.

	<pre class="php">&nbsp;
<span style="color: rgb(0, 0, 0); font-weight: bold;">Quellcode</span>

&nbsp;</pre>

Schreibst du alles in eine Zeile, werden auch der Inhalt und die daraus resultierende Höhe entsprechend angepasst.

	<pre class="php"><span style="color: rgb(0, 0, 0); font-weight: bold;">Quellcode</span></pre>

Vielleicht hilft dir das weiter.

Ciao
Quaese