N
nick_riviera
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
hallo,
mein Name ist Frank, ich bin gerade dabei, mich nach längerer Pause wieder in die Webprogrammierung einzuarbeiten. Zur Zeit beschäftige ich mich mit dem Thema CSS3 und responsivem Webdesign. Mein Schwerpunkt liegt in der Programmierung mit PHP und MySQL, ich möchte mir aber vorab ein Template zusammenbauen, das ich später als Frontend nutzen kann.
Meine erste Frage: Früher habe ich die Bannerfotos immer mit "background-Image" in den Header gelegt. Weil das aber bei responsiven Entwürfen ein paar Nachteile hat, habe ich gestern abend mal versucht, img zu verwenden. Ich habe mir testweise folgenden einfachen Header angelegt:
<div style="background: #ff0000;"><img src="img/simpsons_banner_01.jpg" style="max-width:100%; height:auto;"></div>
Das rot als Background-Farbe habe ich genommen, um zu sehen, ob die Grafik genau eingepasst wird. In der Breite wird die Grafik pixelgenau in den umgebenden Container gelegt, in der Höhe jedoch ist das umgebende Element immer genau vier Pixel höher als die Grafik, sprich, man sieht unterhalb der Grafik einen vier Pixel hohen roten Strich.
Ich habe das mit diversen Grafikdateien unterschiedlicher Größe ausprobiert - es wird immer brav auf 100% Breite skaliert, das Längen-/Höhen-Verhältnis stimmt, nur das umgebende Element wird in der Höhe um vier Pixel weiter aufgezogen, als die Grafik hoch ist.
Seit Stunden sitze ich jetzt schon an meinen Büchern, und versuche, herauszufinden, wo mein Denkfehler liegt. float:left habe ich auch schon probiert, um evtl. Probleme mit dem Textfluss auszuschließen, und natürlich habe ich margin, border und padding geprüft. Es ändert nichts, und der Fehler wird auch in allen Browsern gleich angezeigt.
Hat jemand evtl. eine Idee, was das sein könnte ? Ich freue mich über jeden Tipp.
danke und Gruß Frank
mein Name ist Frank, ich bin gerade dabei, mich nach längerer Pause wieder in die Webprogrammierung einzuarbeiten. Zur Zeit beschäftige ich mich mit dem Thema CSS3 und responsivem Webdesign. Mein Schwerpunkt liegt in der Programmierung mit PHP und MySQL, ich möchte mir aber vorab ein Template zusammenbauen, das ich später als Frontend nutzen kann.
Meine erste Frage: Früher habe ich die Bannerfotos immer mit "background-Image" in den Header gelegt. Weil das aber bei responsiven Entwürfen ein paar Nachteile hat, habe ich gestern abend mal versucht, img zu verwenden. Ich habe mir testweise folgenden einfachen Header angelegt:
<div style="background: #ff0000;"><img src="img/simpsons_banner_01.jpg" style="max-width:100%; height:auto;"></div>
Das rot als Background-Farbe habe ich genommen, um zu sehen, ob die Grafik genau eingepasst wird. In der Breite wird die Grafik pixelgenau in den umgebenden Container gelegt, in der Höhe jedoch ist das umgebende Element immer genau vier Pixel höher als die Grafik, sprich, man sieht unterhalb der Grafik einen vier Pixel hohen roten Strich.
Ich habe das mit diversen Grafikdateien unterschiedlicher Größe ausprobiert - es wird immer brav auf 100% Breite skaliert, das Längen-/Höhen-Verhältnis stimmt, nur das umgebende Element wird in der Höhe um vier Pixel weiter aufgezogen, als die Grafik hoch ist.
Seit Stunden sitze ich jetzt schon an meinen Büchern, und versuche, herauszufinden, wo mein Denkfehler liegt. float:left habe ich auch schon probiert, um evtl. Probleme mit dem Textfluss auszuschließen, und natürlich habe ich margin, border und padding geprüft. Es ändert nichts, und der Fehler wird auch in allen Browsern gleich angezeigt.
Hat jemand evtl. eine Idee, was das sein könnte ? Ich freue mich über jeden Tipp.
danke und Gruß Frank