Problem mit CSS

mohaji · 26. November 2011, 16:06

Hallo easy-coding Community,

Folgendes Problem:

Quellcode

/*************************************************************
* Header
*************************************************************/
.header {
background-image: url("../img/header.png");
height: 150px;
}

Das ist ein Stück aus meinem CSS-Script. So ich will nun den Header ausgeben, dazu habe ich folgenden Code in HTML:

Quellcode

<body>
<div class="header">
</div>

Doch irgendwie gibt es da ein Problem, der Header wird irgendwie so 1 1/2 mal angezeigt, ich hab mal nen Screenshot gemacht.
[Blockierte Grafik: http://www.abload.de/img/prob9v7qz.png]

Wieso macht es das und wie kann ich das beheben?

Ich bin für jede Hilfe dankbar.

Mit freundlichen Grüßen
mohaji

nobody special · 26. November 2011, 17:20

Setz einfach mal das backgorund-repeat:no-repeat.
Dürfte dann denk ich funktionieren.
Hier nochmal zum genauer nachlesen: de.selfhtml.org/css/eigenschaf…und.htm#background_repeat

Gruß nobody

mohaji · 26. November 2011, 19:14

Danke funktioniert nun, es ergibt sich aber direkt das nächste Problem...
[Blockierte Grafik: http://www.abload.de/img/bodyg9pd1.png]

Wieso kommt da am rechten rand noch son weißer Streifen?

Quellcode

.menu {
height: 50px;
margin: 0;
background: #fcfcfc url("../img/menu.png") no-repeat;
}

Jan Thurau · 26. November 2011, 19:40

Meinst du unten links die weiße Ecke oder rechts den ganzen weißen Strich?
Gib dem evtl. mal ein width: 100% mit

// Edit:
Ich schätze mal, dass deine Grafik einfach nicht breit genug ist - kann das sein? Mache am besten eine 1 Pixel breite Grafik und gebe der ein repeat-x mit, dann wird die automatisch zur x-Achse wiederholt bis sie breit genug ist.

mohaji · 26. November 2011, 19:51

Nee also sie müsste eigentlich breit genug sein.
[Blockierte Grafik: http://h3.abload.de/img/menu4zekv.png]
width:100% bringt nichts.

EDIT:
[Blockierte Grafik: http://www.abload.de/img/lorem15dp4.png]

JaffaCoder · 26. November 2011, 21:00

Wenn ich dich ichtig verstanden habe, musst du deinen content in eine neue Div packen, mit der Breite 1000px. Dann sollte das gehen

Quellcode

<div id="main">
<div class="menu"></div>
</div>

Quellcode

#main { width: 1000px; height: auto; }
.menu { height: 50px; width: 1000px; margin: 0; background: #fcfcfc url("../img/menu.png") no-repeat; }

mohaji · 26. November 2011, 21:36

funktioniert immer noch nicht.

Jan Thurau · 26. November 2011, 22:10

Das Bild ist übrigens viel zu klein - wie soll denn ein 1000px Bild auf 1920Pixeln über die ganze Breite gehen? Du brauchst eine 1px Grafik, die sich auf der X-Achse wiederholt, damit das immer über die ganze Breite geht.

// Edit:
Du fragst am Anfang, wieso du das Bild mehrfach siehst. Der Browser fügt es mehrfach ein, damit es über die volle Breite geht (weil das Bild schlicht zu klein ist). Über das no-repeat verbietest du das. Was soll der Browser also machen, als den Rest ohne Hintergrund zu füllen?

nobody special · 26. November 2011, 22:25

Jopp, Problem erkannt.
Obwohl ich sich über die Lösung mit der 1px Grafik und repeat-x streiten lässt.
Das könnte da denk ich mal Probleme mit dem abgerundeten Ecken geben oder?

Jan Thurau · 26. November 2011, 22:26

Abgerundete Ecken? Nullo Problemo. Stichwort "border-radius".

nobody special · 26. November 2011, 22:37

Haha,
danke und somit hab ich auch wieder etwas gelernt

Hab mal danach gegoogelt und etwas für faule gefunden: border-radius.com/
erspart ein wenig Zeit

mohaji · 28. November 2011, 21:17

Also anscheinend lag es doch nicht daran, dass das Bild zu klein war.
Anscheinend hatte JaffaCoder recht, anders kann ichs mir nicht erklären, also als ich den Code von JaffaCoder eingesetz hab, ist erstmal nichts passiert, heute habe ich dann mal wieder seit zwei Tagen draufgeschaut und siehe da: Der weiße "balken" ist verschwunden.

Torsten · 29. November 2011, 14:01

STRG + F5?

Haste "damals" mal geschaut ob nicht zufällig immer die Version ausm Cache geladen wird?

mohaji · 29. November 2011, 16:36

Ich habs mehrmals aktualisiert ging "damals" halt nicht.

Das weiß ich nicht mehr, denke eher nicht.

Problem mit CSS

Problem mit CSS

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags