CSS Header

[MeCH]

Hi, hab wiedermal eine Frage.
Will einen Header bauen, der links ein Bild beinhaltet, und rechts ein Bild.
Schaffe es leider nicht, dass beide Bilder im header sind.

Hätte mir das eingentlich so gedacht:

.header_left {
height:80px;
background:url(../img/header_left_v2.png) left #333 no-repeat;
}

.header_right {
background:url(../img/header_right_v2.png) right #333 no-repeat;
}

leider funktioniert das nicht.

mfg
MeCH

[LX]

Hallo, MeCH!

Wir können mangels HTML-Code nur raten, wie Dein Header aussieht. Ich würde an Deiner Stelle in etwa die folgende Struktur verwenden:

<div id="header">  
    <h1><span>Logo-Text</span></h1>  
</div>

und dazu folgendes CSS:

  
#header { height: 80px; background: #333 url(../img/header_right_v2.png) no-repeat 100% 0%; }  
#header h1 { height: 80px; margin: 0; padding: 0; background: #333 url(../img/header_left_v2.png) no-repeat 0% 0%; }  
#header h1 span { display: none; }

Gruß, LX

[Steel]

Hoi!

Wie konntest Du, 10 Minuten bevor ich diesen (eben noch unbeantworteten) Thread gefunden habe, etwas posten?!

[LX]

Hallo!

Wie konntest Du, 10 Minuten bevor ich diesen (eben noch unbeantworteten) Thread gefunden habe, etwas posten?!

Auf diese Frage gibt es zwei mögliche Antworten:

1. ich bin eben ein klein wenig schneller als Du.
2. ich bin sogar so schnell, dass ich die Frage 10 Minuten früher beantworten konnte, als sie gestellt wurde...

Na gut, ich gebe zu, dass das zweite eher eine Unmöglichkeit ist, aber lustig wäre es schon :-)

Gruß, LX

[Pragma]

Wie konntest Du, 10 Minuten bevor ich diesen (eben noch unbeantworteten) Thread gefunden habe, etwas posten?!
Auf diese Frage gibt es zwei mögliche Antworten:
...

Nummer drei: Du bist eng mit Chuck Norris verwandt!

[LX]

Nummer drei: Du bist eng mit Chuck Norris verwandt!

Nummer vier: das alles ist Teil einer groß angelegten Verschwörung, deren Ziel es ist, Steel einen ratlosen Gesichtsausdruck abzunötigen.

Aber dann wird es langsam lächerlich...

Gruß, LX

[Steel]

Ich finde 2 ist die Erklaerung, die meinem Empfinden am naechsten kommt. Was sich natuerlich mit Option 3 und 4 Erklaeren lassen wuerde...

[MeCH]

Der Header soll so aussehen:

http://www.bilder-space.de/show_img.php?img=ef4e65-1269433065.jpg&size=original

Es handelt sich dabei um ein Bild auf der linken, und auf der rechten Seite.

Habs noch nicht geschafft, ihn so nachzubauen.

mfg

[LX]

Du solltest Dein Denken ein wenig ändern: es handelt sich um einen rechts und einen links orientierten Hintergrund innerhalb des gleichen Elements. Wenn alle Browser CSS3 beherrschen würden, könntest Du multiple background-Images verwenden, da das nicht geht, musst Du den Background schachteln.

Noch ein wichtiger Tipp, den ich vorhin übersehen hatte: das innere Element sollte keine Hintergrundfarbe bekommen, denn diese überlagert das Hintergrundbild des äußeren Elements.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

<div id="header">

<h1><span>Logo-Text</span></h1>
</div>

  
Das 'h1'-Element ist wohl das einzige, was davon im Markup stehen sollte. Pseudoelemente kennst du? Auch die können Hintergrundbilder haben.  
  
Qapla'

-- 
Volumen einer Pizza mit Radius z und Dicke a: pi z z a

[LX]

Hallo, Gunnar!

Ja, ich kenne Pseudoelemente, aber da ich davon ausgehen muss, dass hier HTML geschrieben werden soll, der auch auf Nicht-Browsern (wie dem IE6) funktioniert und der Logo-Text möglichst sicher ausgeblendet werden soll (da ein negativer text-indent den Job nicht immer macht), ist diese Version das semantische Optimum, es sei denn, Du möchtest html und body stylen (und damit die Möglichkeit verbauen, diese für den restlichen Inhalt zur Verfügung zu haben).

Gruß, LX

[Steel]

Hiho!

Will einen Header bauen, der links ein Bild beinhaltet, und rechts ein Bild.
Schaffe es leider nicht, dass beide Bilder im header sind.

Hätte mir das eingentlich so gedacht:

.header_left {
height:80px;
background:url(../img/header_left_v2.png) left #333 no-repeat;
}

.header_right {
background:url(../img/header_right_v2.png) right #333 no-repeat;
}

leider funktioniert das nicht.

Du meinst in den Elementen mit den Klassen "header_left" und "header_right" ist kein grauer Hintergrund oder ein Bild zu sehen?

Wie sieht denn dein HTML aus? Ein Element kann uebrigens nur eine Hintergrundgrafik haben, falls das Dein Problem ist.

[Vinzenz Mai]

Hallo steel,

Wie sieht denn dein HTML aus? Ein Element kann uebrigens nur eine Hintergrundgrafik haben, falls das Dein Problem ist.

das ändert sich :-)

Freundliche Grüße

Vinzenz

[Gunnar Bittersmann]

@@Steel:

nuqneH

Ein Element kann uebrigens nur eine Hintergrundgrafik haben

Nein. Du bist nicht auf dem neusten Stand. [CSS3-BACKGROUND §3.1]

Firefox kann’s ab 3.6, Opera ab 10.50, …

Qapla'

[Steel]

Hoi!

Nein. Du bist nicht auf dem neusten Stand. [CSS3-BACKGROUND §3.1]

Firefox kann’s ab 3.6,

Stimmt. 3.6 hab ich immerhin schon seit gestern. Meine Schuld, dass ich nicht alle bereits unterstuetzten CSS3 Elemente kenne. Mea maxima Culpa.

[Vinzenz Mai]

Hallo,

Will einen Header bauen, der links ein Bild beinhaltet, und rechts ein Bild.
Schaffe es leider nicht, dass beide Bilder im header sind.

hilft Dir http://selfhtml.apsel-mv.de/hintergrund/hintergrund.html weiter?

Freundliche Grüße

Vinzenz

[Auge]

Hallo

hilft Dir http://selfhtml.apsel-mv.de/hintergrund/hintergrund.html weiter?

Ahh, da verbreitet apsel also auch die Mär von der unfähigen IE9-Demoversion.

Tschö, Auge

[apsel]

Om nah hoo pez nyeetz, Auge!

Ahh, da verbreitet apsel also auch die Mär von der unfähigen IE9-Demoversion.

Sobald sich die Mär tatsächlich als Mär erweist, nehme ich das aus der Seite.

Matthias

[Auge]

Hallo

Ahh, da verbreitet apsel also auch die Mär von der unfähigen IE9-Demoversion.

Sobald sich die Mär tatsächlich als Mär erweist, nehme ich das aus der Seite.

Die Mär ist eine solche, da der von dir angesprochene IE9, im Gegensatz zu den Angaben in deinem Text, in seinem gegenwärtigen Zustand *keine Demoversion* sondern ein Preview ist. Darauf wurdest du in deinem Thread zum Thema auch mehrfach hingewiesen.

Tschö, Auge

[apsel]

Om nah hoo pez nyeetz, Auge!

übergeredet.

Matthias

[Auge]

Hallo

übergeredet.

... oder so. :-)

Tschö, Auge

[MeCH]

Der Header soll so aussehen:

http://www.bilder-space.de/show_img.php?img=ef4e65-1269433065.jpg&size=original

Es handelt sich dabei um ein Bild auf der linken, und auf der rechten Seite.

Habs noch nicht geschafft, ihn so nachzubauen.

mfg

[Gunnar Bittersmann]

@@MeCH:

nuqneH

Will einen Header bauen, der links ein Bild beinhaltet, und rechts ein Bild.

"Sliding doors" ist dein Suchbegriff.

Qapla'