Hintergrund vergrößern

[tzunami]

Hey.

Ich habe ein Problem mit den verschiedenen Auflösungen auf meiner Homepage. Eigentlich habe ich alles für alle Auflösungen optimiert, nur da ist die Sache mit dem Hintergrund:

  
 <span class="sup">Punkt1</span>  
  <div>  
   <ul>  
   <li><a href="?">Punkt1.1</a></li>  
   <li><a href="?">Punkt1.2</a></li>  
   <li><a href="?">Punkt1.3</a></li>  
   </ul>  
  </div>  

====

  
.inhalt .sup{  
 background-image:url(button.gif);  
 background-repeat:no-repeat;  
 text-align:center;  
 text-decoration:none;  
  
 color:#FFFFFF;  
 font-weight:bold;  
  
 display:block;  
 float:left;  
  
 width:150px;  
 padding-top:0.4em;  
 margin-top:0.5em;  
}  

Einem span wird also ein Hintergrundbild zugewiesen, das genau 150px breit ist. Das span fasst also das gesamte Hintergrundbild auf.
Wenn ich jetzt die Auflösung ändere, dann wird das Hintergrundbild natürlich größer und zerstört mein Design.

Gibt es eine Möglichkeit, ein Hintergrundbild mit einer relativen Breite auszustatten? Wenn nicht, gäbe es eine Alternative?

danke euch,
euer tzunami

[Maz]

Moinsen,

Ich habe ein Problem mit den verschiedenen Auflösungen auf meiner Homepage. Eigentlich habe ich alles für alle Auflösungen optimiert, nur da ist die Sache mit dem Hintergrund:

<span class="sup">Punkt1</span>
  <div>
   <ul>
   <li><a href="?">Punkt1.1</a></li>
   <li><a href="?">Punkt1.2</a></li>
   <li><a href="?">Punkt1.3</a></li>
   </ul>
  </div>

  
das ist nicht valide: Ein span (=Inlineelement) darf kein Blockelement (hier <ul> und <div>) enthalten. Zudem ein <ul> alleine da ausreichen sollte. Dies in ein DIV zu verschachteln ist nicht unbedingt nötig.  
  

> Einem span wird also ein Hintergrundbild zugewiesen, das genau 150px breit ist. Das span fasst also das gesamte Hintergrundbild auf.  
> Wenn ich jetzt die Auflösung ändere, dann wird das Hintergrundbild natürlich größer und zerstört mein Design.  
  
sicher? das Hinterundbild ist nicht skalierbar. Wenn der span mit 150px Breite fixiert ist, bleibt das so, egal wie gross ich das Browserfenster mache.  
  

> Gibt es eine Möglichkeit, ein Hintergrundbild mit einer relativen Breite auszustatten? Wenn nicht, gäbe es eine Alternative?  
  
nein. HIntergrundbilder sind (bislang) nicht skalierbar. Kacheln, also wiederholen in x und/oder y-Richtung geht aber. Dazu muss die Grafik natürlich geeignet sein.  

-- 
cu,  
Maz

[Maz]

Moinsen,

<span class="sup">Punkt1</span>
  <div>
   <ul>
   <li><a href="?">Punkt1.1</a></li>
   <li><a href="?">Punkt1.2</a></li>
   <li><a href="?">Punkt1.3</a></li>
   </ul>
  </div>

>   
> das ist nicht valide: Ein span (=Inlineelement) darf kein Blockelement (hier <ul> und <div>) enthalten. Zudem ein <ul> alleine da ausreichen sollte. Dies in ein DIV zu verschachteln ist nicht unbedingt nötig.  
  
sorry, hab mich verguckt. Der Span enedet ja vorher. ´tschuldigung.  

-- 
cu,  
Maz

[wahsaga]

hi,

sorry, hab mich verguckt. Der Span enedet ja vorher. ´tschuldigung.

er ist dort trotzdem wenig sinnvoll.
die unterpunkte sind ja schon mit einer liste anständig strukturiert - warum also für einen übergeordneten punkt einen aussagelosen span verwenden?
auch der bettelt darum, ein listenelement sein zu dürfen.

gruß,
wahsaga

[Gernot Back]

Hallo tzunami,

Einem span wird also ein Hintergrundbild zugewiesen, das genau 150px breit ist. Das span fasst also das gesamte Hintergrundbild auf.
Wenn ich jetzt die Auflösung ändere, dann wird das Hintergrundbild natürlich größer und zerstört mein Design.

Kann es sein, dass du gar nicht eine Veränderung der Bildschirmauflösung meinst, sondern eine solche der Schriftgröße? Denn dein Span-Element ist ja mit 150px Weite und display:block genauso breit wie der Hintergrund, egal, bei welcher Auflösung. Es kann aber sein, dass dein Span durch eine größere Schrift, die nicht in Pixeln definiert ist, ausgeweitet wird.

Gruß Gernot

[wahsaga]

hi,

Denn dein Span-Element ist ja mit 150px Weite und display:block genauso breit wie der Hintergrund, egal, bei welcher Auflösung. Es kann aber sein, dass dein Span durch eine größere Schrift, die nicht in Pixeln definiert ist, ausgeweitet wird.

nein, ausge_weitet_ kann er eigentlich nicht werden (es sei denn, im kaputten IE).

entweder würde er nach unten hin vergrößert, oder bei nicht umzubrechendem inhalt würde dieser über den span hinausfließen, abgeschnitten werden oder scrollbalken innerhalb von diesem hervorrufen (je nach overflow; da er dazu keine angabe gemacht hat, greift der default visible).

gruß,
wahsaga

[Cybaer]

Hi,

Gibt es eine Möglichkeit, ein Hintergrundbild mit einer relativen Breite auszustatten? Wenn nicht, gäbe es eine Alternative?

Du kannst Hintergrundbilder (noch) nichtin der Größe ändern. Du kanst aber normaeBilder in der Größe ändern und mittels z-index in den hinterden normalen Content legen.

Aber da solchermaßen (d.h. ohne Bildbearbeitung oder z.B. PHP) veränderte Bilder i.d.R. pixelig werden, ist das trotzdem nicht so toll.

Gruß, Cybaer