Hintergrundfarbe füllt nicht den ganzen Bereich

[Jürgen Berkemeier]

Hallo,

bei folgender Testseite:

http://www.uni-muenster.de/Physik/AP/Purwins/Test.html

ist der 22px hohe Bereich hinter den Rubriken nur beim IE in voller Höhe eingefärbt. Im MOZ (1.3) und im Opera (7) ist der Hintergrund nur in Schrifthöhe gefärbt. Was muss ich machen, damit der ganze Bereich, also der 22px hohe span die Hintergrundfarbe erhält?

Gruß, Jürgen

[Götz]

Hallo Jürgen Berkemeier!

http://www.uni-muenster.de/Physik/AP/Purwins/Test.html
ist der 22px hohe Bereich hinter den Rubriken nur beim IE in voller Höhe eingefärbt. [...] Was muss ich machen, damit der ganze Bereich, also der 22px hohe span die Hintergrundfarbe erhält?

Es wird vermutlich dran liegen, daß span kein blocklevel-Element sondern ein inline-Element ist.
Wenn du statt span div nimmst, sollte es imho klappen.

Siehe auch http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.4.

MfG
Götz

[Thomas J.]

Tag auch

Im MOZ (1.3) und im Opera (7) ist der Hintergrund nur in Schrifthöhe gefärbt.

Zu Recht.
Wie Du sicher weißt, ist Span ein Inline-Element und damit immun gegen Formatierungen mit width und height.

Was muss ich machen, damit der ganze Bereich, also der 22px hohe span die Hintergrundfarbe erhält?

Ein Block-Element verwenden.

Thomas J.

[MudGuard]

Hi,

aus Deinem CSS:
   .nav1 { background-color: #96a84b; border-right: 1px solid #fff; font-size: 10px; line-height:22px;
           padding-left:4px; padding-right:4px; padding-top:0px; height:22px;
           color: white; font-weight: bold; vertical-align:top; }

aus Deinem HTML:
   <span class="nav1"><a href="#">Rubrik1</a></span>

span ist ein inline-Element. Die CSS-Eigenschaft height trifft auf inline-Elemente nicht zu.

ist der 22px hohe Bereich hinter den Rubriken nur beim IE in voller Höhe eingefärbt.

Fehler des IE.

Im MOZ (1.3) und im Opera (7) ist der Hintergrund nur in Schrifthöhe gefärbt.

Korrektes Verhalten.

Was muss ich machen, damit der ganze Bereich, also der 22px hohe span die Hintergrundfarbe erhält?

Ein blocklevel-Element verwenden bzw. am einfachsten das a-Element zu einem block-Element machen, die span sind IMO überflüssig.

cu,
Andreas

[Jürgen Berkemeier]

Hallo Andreas,

danke, auch an Thomas J. und an Götz.
Ich hatte auch schon das Gefühl, dass es am span liegt. Aber beim div hat der Opera das float:left ignoriert.

Ein blocklevel-Element verwenden bzw. am einfachsten das a-Element zu einem block-Element machen, die span sind IMO überflüssig.

Und wie geht das?

Gruß, Jürgen

[wahsaga]

hi,

Ein blocklevel-Element verwenden bzw. am einfachsten das a-Element zu einem block-Element machen, die span sind IMO überflüssig.

Und wie geht das?

a { display:block; width:...; height:...; }

gruss,
wahsaga

[Jürgen Berkemeier]

Hallo,

Und wie geht das?

natürlich mit display:block.

Leider wird dieses vom Opera ignoriert. Offensichtlich hat der Opera Probleme mit float in absolut positionierten divs.

<div style="position:absolute">
  <a style="display:block;float:left;" href="#">Rubrik1</a>
  <a style="display:block;float:left;" href="#">Rubrik2</a>
  <a style="display:block;float:left;" href="#">Rubrik3</a>
 </div>

Im IE und im MOZ liegen die Links nebeneinander, im Opera untereinander. Liegt der Fehler bei mir oder beim Opera?

Gruß, Jürgen

[wahsaga]

hi,

<div style="position:absolute">
  <a style="display:block;float:left;" href="#">Rubrik1</a>
  <a style="display:block;float:left;" href="#">Rubrik2</a>
  <a style="display:block;float:left;" href="#">Rubrik3</a>
 </div>

Im IE und im MOZ liegen die Links nebeneinander, im Opera untereinander. Liegt der Fehler bei mir oder beim Opera?

block level elemente nehmen automatisch 100% der verfügbaren breite (hier wohl die des divs) ein.
also können deine links hier eigentlich gar nicht nebeneinander liegen.
was passiert, wenn du ihnen noch eine explizite breitenangabe verpasst?

gruss,
wahsaga

[Jürgen Berkemeier]

Hallo wahsaga,

was passiert, wenn du ihnen noch eine explizite breitenangabe verpasst?

wenn ich dem äußerem Div eine Breite gebe, klappt es auch im Opera. Die inneren Divs kommen ohne Breite aus, obwohl laut selfhtml zu display:float auch ein width gehört. Ich werde mal prüfen, wie es in anderen Browsern aussieht.
Danke an alle.

Gruß, Jürgen

[MudGuard]

Hi,

natürlich mit display:block.
Leider wird dieses vom Opera ignoriert. Offensichtlich hat der Opera Probleme mit float in absolut positionierten divs.

<div style="position:absolute">
  <a style="display:block;float:left;" href="#">Rubrik1</a>

float erfordert ZWINGEND die Angabe einer Breite:
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).
(siehe http://www.w3.org/TR/REC-CSS2/visuren.html#floats)

Aus Deinem fehlerhaften Code auf ein Fehlverhalten eines Browsers schließen zu wollen, ist sehr gewagt.

cu,
Andreas

[Jürgen Berkemeier]

Hallo Andreas,

float erfordert ZWINGEND die Angabe einer Breite:

das habe ich inzwischen auch schon gemerkt. Allerdings möchte ich den Links keine feste Breite geben. Offensichtlich reicht es, dem äußeren Div eine feste Breite zu geben und den inneren width:auto.

Hier kommt jetzt aber ein neues Problem:
Mit

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
  <title>Arbeitsgruppe Purwins</title>
  <style type="text/css">
   #HM {
    position:absolute;top:68px;left:0px;margin-left:190px;margin-right:180px;height:22px;width:100%;border:1px solid black;background-color:blue;
   }
  </style>
 </head>
 <body>
  <div id="HM">
   <a href="#">Rubrik1</a><a href="#">Rubrik2</a><a href="#">Rubrik3</a>
  </div>
 </body>
</html>

möchte ich ein DIV erzeugen, dass die Breite des Browsers hat und rechts und links entsprechend Platz lässt. Hier liefert nur der Opera das gewünschte Ergebniss. Beim MOZ und beim IE fängt das DIV 190px vom linken Rand an und geht 190px über den rechten Rand hinaus.
Wenn ich statt margin padding nehme, bekomme ich Probleme mit der Hintergrundfarbe. Aber vieleicht hilft hier der Z-Index.
Zum Schluss noch mal meine Fragen:
1. Reicht bei float:left width:auto?
2. Ist ein div der Breite 100% immer so breit wie das Browserfenster, auch wenn ich rechts und links Margins habe, oder hat der Opera recht?
3. Wie ist der Defaultwerts für den z-Index?

Gruß, Jürgen

PS: Wie leicht war das doch mit Tabellen zu lösen!

[wahsaga]

hi,

#HM {
    position:absolute;top:68px;left:0px;margin-left:190px;margin-right:180px;height:22px;width:100%;border:1px solid black;background-color:blue;

das ergibt eine breite von insgesamt 190px plus 100% plus 180px.

Hier liefert nur der Opera das gewünschte Ergebniss. Beim MOZ und beim IE fängt das DIV 190px vom linken Rand an und geht 190px über den rechten Rand hinaus.

margin in verbindung mit position:absolute finde ich sowieso unlogisch bzw. riskant.

gruss,
wahsaga

[Jürgen Berkemeier]

Hallo,

ich habe es jetzt mit padding und z-index gelöst. Siehe:
http://www.uni-muenster.de/Physik/AP/Purwins/WelcomeDiv.html.

Jetzt muss ich nur noch im IE die kleine Stufe unten links loswerden, dann sieht es wie http://www.uni-muenster.de/Physik/AP/Purwins/WelcomeDiv.html aus und ist Tabellenfrei.

Gruß, Jürgen

[Jürgen Berkemeier]

Hallo,

ich meinte:
http://www.uni-muenster.de/Physik/AP/Purwins/Welcome-de.html

Gruß, Jürgen

[MudGuard]

Hi,

float erfordert ZWINGEND die Angabe einer Breite:
das habe ich inzwischen auch schon gemerkt. Allerdings möchte ich den Links keine feste Breite geben. Offensichtlich reicht es, dem äußeren Div eine feste Breite zu geben und den inneren width:auto.

Nein, es reicht nicht. Es ist für das Element mit float eine explizite Breitenangabe erforderlich. ZWINGEND.

Nur weil es in ein paar Browsern auch ohne funktioniert, ist es noch lange nicht richtig.

Beispiel:
Ohne Breite im äußeren DIV ging es bei Dir ja scheinbar im Mozilla. Also war das richtig.
Dann hast Du mit einem weiteren Browser getestet (Opera), und dann war es nicht mehr richtig...

Bist Du sicher, daß es in ALLEN Browsern funktioniert und auch in zukünftigen Versionen funktionieren wird?
Kannst Du nicht - also schreib lieber gleich korrekten Code.

1. Reicht bei float:left width:auto?

auto ist keine explizite Breite.

2. Ist ein div der Breite 100% immer so breit wie das Browserfenster, auch wenn ich rechts und links Margins habe, oder hat der Opera recht?

Nein, ein div der Breite 100% ist immer so breit wie das übergeordnete Element plus die seitlichen paddings plus die seitlichen border-width
http://www.w3.org/TR/REC-CSS2/box.html

3. Wie ist der Defaultwerts für den z-Index?

auto
http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-z-index

cu,
Andreas

[Jürgen Berkemeier]

Hallo,

Kannst Du nicht - also schreib lieber gleich korrekten Code.

würde ich ja auch gerne, aber wie kann ich Block-Elemente nebeneinander positionieren, die sich in der Breite an den Inhalt, z.B an die Schriftgröße anpassen sollen? Oder, um zum Ausgansposting zurückzukommen, wie kann ich bei einem Inline-Element, das mit line-height eine feste Höhe bekommen hat, den Hintergrund ganz einfärben?

Gruß, Jürgen

[Detlef G.]

Hallo Jürgen Berkemeier

würde ich ja auch gerne, aber wie kann ich Block-Elemente nebeneinander positionieren, die sich in der Breite an den Inhalt, z.B an die Schriftgröße anpassen sollen?

Indem du die Breite entsprechend dem Inhalt in em angibst.

MFG
Detlef

[Jürgen Berkemeier]

Hallo Detlef,

Indem du die Breite entsprechend dem Inhalt in em angibst.

Danke. Ist zwar nicht die optimale Lösung, weil jetzt alle Rubriken gleich breit sind oder ich alle einzeln formatieren muss.

Gruß, Jürgen