Problem mit width: auto

[Nemesis]

Hallo,

ich möchte mein Homepagelayout mit css aufbauen. ich habe jetzt die ganze vorarbeit gemacht (Layout erstellt, bilder geslicet, usw.). Mein Problem: das Layout besteht aus Bildern, die ich per background-image einbinde. ich möchte aber, dass sich die größe eines Blockes auf die Bildschirmbreite anpasst. wenn ich aber versuche, das mit width: auto zu machen wird die Grafik garnicht erst angezeigt.

Hier mein css-code:

#top  {  
      background-image: url(../images/top.png);  
      background-repeat: repeat-x;  
      left: 0;  
      top: 0;  
      width: auto;  
      height: 45px;  
      position: absolute;  
      }

und die Einbindung per HTML:

<div id="top">  
  
    </div>

Bitte helft mir!

Nemesis

[ChrisB]

Hi,

ich möchte aber, dass sich die größe eines Blockes auf die Bildschirmbreite anpasst. wenn ich aber versuche, das mit width: auto zu machen wird die Grafik garnicht erst angezeigt.

Natuerlich, weil sich das mit der absoluten Positionierung, so wie du sie anwendest, beisst:

left: 0;
      top: 0;
      width: auto;
      position: absolute;

http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width:
"3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit."

Und shrink-to-fit heisst im Grunde genommen, so gross wie das, was drin ist.

Moeglichkeiten:

• Verzichte auf absolute Positionierung; das sollten Anfaenger, die ihre Auswirkungen noch nicht abschaetzen koennen, sowie lieber tun.
• Gebe auch einen Wert fuer right an, wenn moeglich (und dir IE <= 6 dabei egal sind).
• Gebe eine Breite an.

MfG ChrisB

[Nemesis]

• Verzichte auf absolute Positionierung;

Das Problem ist, wenn ich auf die absolute Positionierung verzichte, wird mir das ganze nicht direkt am rand angezeigt, sondern dann gibts nen kleinen Rahmen (so etwa 5px groß)

mfg nemesis

[Gunnar Bittersmann]

@@Nemesis:

dann gibts nen kleinen Rahmen (so etwa 5px groß)

Und warum setzt du nicht margin und padding für html und body auf 0?

Live long and prosper,
Gunnar

[Nemesis]

Und warum setzt du nicht margin und padding für html und body auf 0?

Da hab ich garnicht dran gedacht, danke für den tipp.

[johannes293]

@@Nemesis:

dann gibts nen kleinen Rahmen (so etwa 5px groß)

Und warum setzt du nicht margin und padding für html und body auf 0?

Live long and prosper,
Gunnar

Oder du neutralisiserst _alle_ Browserspezifischen Styles, zB. mithilfe von reset.css des Yahoo! User Interface Library (YUI).

g johannes

[Gunnar Bittersmann]

@@johannes293:

Oder du neutralisiserst _alle_ Browserspezifischen Styles

Why “Reset” Style Sheets Are Bad [Meiert]

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Nemesis:

bilder geslicet

?? Was meinst du damit? Das, was man nicht tun sollte?

Live long and prosper,
Gunnar

[Cheatah]

Hi,

<div id="top">

</div>

  
dieses <div>-Element ist leer, anstatt zusammengehörende Elemente zu gruppieren. Eleminiere es.  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes