Bild mit DIV absolut positionieren (NN/FF/Opera spinnen)
-1 
Der Martin
-2 0 0 -3 -1 Der Martin
-1 0
0 
molily
1 molily
Bild mit DIV absolut positionieren (NN/FF/Opera spinnen)
Kann mir jemand verraten, warum NN, FF und Opera zu "blöd" sind,
ein Bild an der richtigen Stelle zu positionieren? Mit einer Tabelle statt dem Bild ging es ja auch problemlos...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head><body style=margin:0>
<div style=position:absolute;top:41px;left:21px;width:108px;height:5px>
<img src=p/slogan.gif width=108 height=5>
</div>
</body></html>
Anstatt an Y-Position 41 landet es 5 Pixel weiter unten.
display:inline hab ich auch schon probiert (im DIV und im IMG-Tag).
-
Hallo,
als erstes fällt auf, dass dein Codebeispiel hochgradig fehlerhaft ist. Wenn es wirklich XHTML sein soll, dann MÜSSEN die Attributwerte in Anführungszeichen stehen (ist auch bei HTML empfehlenswert), und Elemente ohne Inhalt, wie das img, müssen mit /> geschlossen werden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Davon abgesehen: Warum benutzt du XHTML 1.1?
<html><head>
^ </head> und der gesamte Inhalt von head fehlen
<body style=margin:0>
^ ^ Anführungszeichen fehlen
<div style=position:absolute;top:41px;left:21px;width:108px;height:5px>
^ Anführungszeichen fehlt, auch am Schluss
<img src=p/slogan.gif width=108 height=5>
^ ^ ^ ^ ^^ Anführungszeichen fehlen
^ Element nicht geschlossen</div>
</body></html>Anstatt an Y-Position 41 landet es 5 Pixel weiter unten.
Was für ein margin und padding haben denn html und body?
So long,
Martin--
Zum Glück ist alles nur halb so doppelt.-
Hallo,
Doc-Type hab ich geändert in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Problem bleibt aber bestehen, margin im body ist 0px, daran liegt es auch nicht.
Andere Objekte werden ja korrekt positioniert, nur bei Bildern verschiebt er alles...
Soll das img-Tag so geschlossen werden:
<img src=bla.gif width=123 height=45 />
??
PS: Anführungszeichen nutze ich nur, wenn in den Attributwerten Leerzeichen vorkommen, ansonsten ist es reine Byteverschwendung.
-
Hallo saturday.
PS: Anführungszeichen nutze ich nur, wenn in den Attributwerten Leerzeichen vorkommen, ansonsten ist es reine Byteverschwendung.
Welches Datum zeigt dir dein Kalender?
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/-
Hallo Ashura,
Welches Datum zeigt dir dein Kalender?
weil heute der 18. Februar ist, liest er/sie wahrscheinlich das Jahr 1802.
*scnr*Schönen Abend noch,
Martin--
Faulheit ist, mit dem Cocktailshaker in der Hand auf das nächste Erdbeben zu warten.
-
-
hi,
PS: Anführungszeichen nutze ich nur, wenn in den Attributwerten Leerzeichen vorkommen, ansonsten ist es reine Byteverschwendung.
Wenn du Hinweise bzgl. kritischer Fehler ignorieren willst - dann ist die Beschäftigung mit deinem Problem für die anderen hier Zeitverschwendung.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
PS: Anführungszeichen nutze ich nur, wenn in den Attributwerten Leerzeichen vorkommen, ansonsten ist es reine Byteverschwendung.
Wenn du Hinweise bzgl. kritischer Fehler ignorieren willst - dann ist die Beschäftigung mit deinem Problem für die anderen hier Zeitverschwendung.
Ich brauch eine Lösung und nicht irgendwelche "so macht man das laut W3C"-Tipps an die sich sowieso kaum einer hält!!!
Die Anführungszeichen sind sogut wie immer sinnlos, aber schreibt sie ruhig dazu, damit der Code unnötig aufgebläht wird und alles schön regelkonform ist, obwohl es den Browsern sowieso egal ist.
Aber scheint hier so üblich zu sein, dass immer der Rest des Codes auseinander genommen wird, aber das eigentlich Problem von den Besserwissern nicht lösbar ist...
-
Hallo,
Die Anführungszeichen sind sogut wie immer sinnlos, aber schreibt sie ruhig dazu, damit der Code unnötig aufgebläht wird und alles schön regelkonform ist, obwohl es den Browsern sowieso egal ist.
diese Ansicht ist Unsinn. Erstens kommt es auf die paar Bytes auch nicht an, zweitens machen die Anführungszeichen um die Attributwerte den Code besser lesbar, und drittens machst du es dir selbst leichter, wenn du _wirklich_ mal auf XHTML umstllen willst.
Aber scheint hier so üblich zu sein, dass immer der Rest des Codes auseinander genommen wird, aber das eigentlich Problem von den Besserwissern nicht lösbar ist...
Nein. Aber hier gehen die meisten nach der Devise: Beseitige erst mal die formalen Fehler, dann können wir weitersehen.
Davon abgesehen hatte ich dir schon den vermutlich entscheidenden Tipp gegeben, die margins und paddings aller maßgeblichen Elemente zu kontrollieren.
So long,
Martin--
Die letzten Worte des Polizisten:
Ich hab mitgezählt: Sechs Schuss, jetzt hat er keine Munition mehr! -
Hallo saturday.
Ich brauch eine Lösung und nicht irgendwelche "so macht man das laut W3C"-Tipps an die sich sowieso kaum einer hält!!!
Wenn du lieber Code nutzen willst, den jeder Hersteller für sich selbst entwirft und welcher dementsprechend nur von deren Software interpretiert wird, dann viel Spaß dabei.
Die Anführungszeichen sind sogut wie immer sinnlos, aber schreibt sie ruhig dazu, damit der Code unnötig aufgebläht wird und alles schön regelkonform ist, obwohl es den Browsern sowieso egal ist.
Aha. Dann schreibe mir bitte einmal ohne Anführungszeichen das zum folgenden gültigen CSS-Regelset passende HTML:
.movie.title { color:#069; }Aber scheint hier so üblich zu sein, dass immer der Rest des Codes auseinander genommen wird, aber das eigentlich Problem von den Besserwissern nicht lösbar ist...
Nicht jeder verfügt über die Fähigkeit, die wertvollen Informationen zwischen den Zeilen zu lesen.
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/ -
hi,
Kann mir jemand verraten, warum NN, FF und Opera zu "blöd" sind,
Wenn hier jemand spinnt oder zu blöd ist - dann sind das sicher nicht die Browser.
Ich brauch eine Lösung
Aber natürlich brauchst du die.
Lass mich raten, ist es auch noch "Dringend!!!1", weil du einen "Auftrag" übernommen hast, und der bis zum Zeitpunkt X fertig sein muss ...?und nicht irgendwelche "so macht man das laut W3C"-Tipps an die sich sowieso kaum einer hält!!!
Tja, woran du dich halten willst oder nicht, überlasse ich selbstverständlich dir.
Die Browser, von denen du im Titel sprachst, halten sich übrigens meist sehr eng an die Vorgaben des W3C ... wenn du das nicht tun möchtest, dann begnüge dich halt damit, "für den IE optimierte" Webseiten zu erstellen - ist ja auch ein schönes Hobby.Die Anführungszeichen sind sogut wie immer sinnlos, aber schreibt sie ruhig dazu, damit der Code unnötig aufgebläht wird und alles schön regelkonform ist, obwohl es den Browsern sowieso egal ist.
OK, dann mach doch einfach so, wie du meinst.
Aber scheint hier so üblich zu sein, dass immer der Rest des Codes auseinander genommen wird, aber das eigentlich Problem von den Besserwissern nicht lösbar ist...
Dein "Problem" dürfte ein ziemlich billiges sein [1] - aber ein Armleuchter, der hier so groß die Klappe aufreißt, darf von mir aus ruhig selber sehen, wie er es gelöst bekommt.
gruß,
wahsaga--
[1] Unt..l...en und o..rfl.w wären die zwei Stichworte, die mir dazu einfielen.
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
Wenn du Hinweise bzgl. kritischer Fehler ignorieren willst - dann ist die Beschäftigung mit deinem Problem für die anderen hier Zeitverschwendung.
»Es melden sich immer genug Leute zu Wort, wenn es um solche ›ersten Fehler‹ geht. Die Spitze des Eisberges wird also zu Genüge kritisiert und entsprechend daran herumgedoktert. Darüber hinaus beteiligen sich aber zu wenige an tiefergehenden und umfassenderen Problemerörterungen, dadurch bleiben viele Threads auf dieser oberflächlichen Ebene stehen.« (History Repeating)
Wenn der Antwortende sich nicht einmal die Mühe macht, zehn Sekunden den Quelltext anzuschauen, sodass er sieht, dass die vermeintlichen »kritischen Fehler« irrelevant für die Frage sind, dann kann er dem SELFHTML-Forum meiner bescheidenen Meinung nach auch gestohlen bleiben, wenn sich die Antworten auf dieses Niveau beschränken.
Mathias
-
-
-
-
Hallo,
lass mal die Höhenangabe des divs weg, gebe dem div eine border:1px solid red und du wirst sehen, warum Firefox und Opera die Grafik so positionieren.
1. Dein div hat eine bestimmte Zeilenhöhe, line-height. Solange es keinen Inline-Inhalt hat, also keine Zeilenboxen (line boxes), wirkt sich diese nicht aus.
2. Du bindest aber ein Bild ein, das ist in CSS-Begriffen ein replaced inline element. Dadurch wird eine Zeilenbox erzeugt, die das div-Element so hoch werden lässt wie in line-height.
3. Das Bild wird auf der Grundlinie der Zeile positioniert. vertical-align:baseline ist die entsprechende Eigenschaft.
4. Die Box ist also so hoch wie die line-height. Und das Bild liegt auf der Grundlinie. Wenn du jetzt einfach dem div eine feste Höhe gibt, wird zwar eine Höhe erzwungen. Die Zeilenbox wird dadurch aber nicht schmaler und wird auch nicht abgeschnitten, sondern lappt nach unten aus den Grenzen der div-Box heraus. Das ist üblich, solange standardmäßig overflow:visible gilt.Du willst also, dass das Bild nicht auf der Grundlinie, sondern ganz unten in der Zeilenbox positioniert wird. Zudem soll die Zeilenhöhe der Bildhöhe entsprechen. Du könntest also dem img vertical-align:bottom und dem div line-height:5px geben. Oder du gibst einfach dem img display:block, sodass keine Zeilenbox erzeugt wird.
Siehe auch http://www.dodabo.de/html+css/img-table/.
Mathias
