Seltsamer Rahmen unter einem Bild - Wo kommt der her?
0 0 0 
Patrick Andrieu
0
Seltsamer Rahmen unter einem Bild - Wo kommt der her?
Hallo.
Ich füge ein Bild in einen H1-Tag ein - und nun erzeugt es einen Rahmen unter sich selbst und schiebt damit den Rand der ganzen Zeile nach unten! Warum tut es das?
Kann man das ändern? (margin, padding... bewirken nichts).
Eigentlich will ich das Bild über das CSS-Pseudoelement h1:after an den Text anhängen (damit es nicht im Quellcode erscheint).
Ich habe dieses kleine Beispiel erzeugt, wo es aber auch erst einmal "richtig" eingefügt ist und dann über :after.
<html>
<style type="text/css">
div {
border: 1px solid black;
background-color:#26BABA;
float:left;
width:100%;
}
h1 {
margin:0px;
padding:0px;
background-color:#DDDDDD;
font-size:0.75em;
float:left;
}
#anhang:after {
content:url(http://test.moses-online.de/test.gif);
}
</style>
<body>
<h2>Beispiel 1 (Bild im Code eingebunden):</h2>
<div>
<h1>Ein Text<img src="http://test.moses-online.de/test.gif" width="8" height="20"></h1>
</div>
<h2>Beispiel 2 (Bild über CSS via Pseudoelement ":after" eingebunden [nicht für IE]):</h2>
<div>
<h1 id="anhang">Ein Text</h1>
</div>
<p>Unter dem weißen Bild ist jeweils ein grauer Rand. Warum?</p>
</body>
</html>
(Das Beispiel ist auch über den genannten Link erreichbar.)
Eine Lösung wird letztlich benötigt für den zweiten Fall (mit :after). Der erste Fall ist nur ein Test, ob es über den konventionellen Weg (Einbinden in den Code) zum gleichen Ergebnis kommt - was es ja tut.
Danke für jede Hilfe
jEhOhO
-
Hallo!
Ich kenne das, und das kommt daher, dass Bilder bzw. img Tags immer einen Rahmen um sich haben, solange bis Du das ausdrücklich unterbindest...schreibe einen weiteren Block im CSS:
img {
border: 0px solid;
}Damit sollte der komische Rahmen nicht mehr angezeigt werden!
LG maiskolben
-
Hallo
schreibe einen weiteren Block im CSS:
img {
border: 0px solid;
}Leider hilft das auch nicht, dass hatte ich schon probiert.
-
Vielleicht dann h1 img, sonst füge im h1 Bereich das border: 0px solid; ein...
LG maiskolben
-
Hallo
Vielleicht dann h1 img, sonst füge im h1 Bereich das border: 0px solid; ein...
Auch diese beiden Varianten gehen leider nicht...
Grüß jEhOhO
-
-
-
Hallo maiskolben!
schreibe einen weiteren Block im CSS:
img {
border: 0px solid;
}Ist nichts doch mehr als nichts? Wir Franzosen sagen oft "trois fois rien" (drei mal nichts). Da Computer selten philosphieren, denke ich aber, dass da wo nichts ist auch nichts solide (solid) sein kann. Auch einer Einheitsangabe bedarf es nicht, da wo doch nichts sein soll:
border: 0;
Reicht vollkommen (auch wenn's dem Frager wahrscheinlich "nichts" bringt, zumindest was sein Problem angeht) ;)
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
-
-
hi,
Ich füge ein Bild in einen H1-Tag ein - und nun erzeugt es einen Rahmen unter sich selbst und schiebt damit den Rand der ganzen Zeile nach unten!
Einen echten Rahmen (border) - oder nur unerwünschten Abstand?
Kann man das ändern? (margin, padding... bewirken nichts).
Probiere es mit vertical-align:bottom oder display:block für das Bild.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo
Probiere es mit vertical-align:bottom oder display:block für das Bild.
vertical-align:bottom wirkt!
(display:block bring das Bild in die nächste Zeile)Jetzt muss ich noch schauen, ob ich das dem durch ":after" zugefügten Bild auch beibringen kann.
Schon mal Danke bis hierhin, werde dann berichten.
-
Schon mal Danke bis hierhin, werde dann berichten.
Also - das tue ich jetzt: der Versuch, über
h1 img {
vertical-align:bottom;
}das mit :after hinzugefügte Bild zu formatieren schlägt fehl.
ebenso, wenn man direkt
h1 {
vertical-align:bottom;
}versucht.
Dann muss man wohl offensichtlich mit dem Darstellungsproblem leben. Wenn noch jemand Ideen hat: Gerne! ;-)
Danke und Grüße
jEhOhO-
Hallo!
Dann muss man wohl offensichtlich mit dem Darstellungsproblem leben. Wenn noch jemand Ideen hat: Gerne! ;-)
Ich habe noch Zeit. Wenn Du willst kannst Du mir den Quelltext zum ansehen geben, denn Dein Link funzt nicht... Den CSS Text habe ich ja schon, dann Teste ich das auf meinem Server...
LG maiskolben
-
Hallo
Ich habe noch Zeit. Wenn Du willst kannst Du mir den Quelltext zum ansehen geben, denn Dein Link funzt nicht... Den CSS Text habe ich ja schon, dann Teste ich das auf meinem Server...
Der Link geht nicht? Habs gerade probiert... geht.
Der Quelltext darin ist auch genau das Beispiel, mit dem ich diesen Forum-Beitrag eröffnet habe, den kannst Du einfach rauskopieren.
Oder noch einfacher: Hier ist er nochmal:
<html>
<style type="text/css">
div {
border: 1px solid black;
background-color:#26BABA;
float:left;
width:100%;
}
h1 {
margin:0px;
padding:0px;
background-color:#DDDDDD;
font-size:0.75em;
float:left;
}
#anhang:after {
content:url(http://test.moses-online.de/test.gif);
}
</style>
<body>
<h2>Beispiel 1 (Bild im Code eingebunden):</h2>
<div>
<h1>Ein Text<img src="http://test.moses-online.de/test.gif" width="8" height="20"></h1>
</div>
<h2>Beispiel 2 (Bild über CSS via Pseudoelement ":after" eingebunden [nicht für IE]):</h2>
<div>
<h1 id="anhang">Ein Text</h1>
</div>
<p>Unter dem weißen Bild ist jeweils ein grauer Rand. Warum?</p></body>
</html>Danke und viele Grüße
JHO-
Hallo!
Der Quelltext darin ist auch genau das Beispiel, mit dem ich diesen Forum-Beitrag eröffnet habe, den kannst Du einfach rauskopieren.
Schreibe height: 20px; mit in den <h1></h1> Tag...
LG maiskolben
-
Hallo
Schreibe height: 20px; mit in den <h1></h1> Tag...
DAS GEHT! (getestet mit F1.5, IE6 und Opera9).
Ich werde außer Fleisch nur noch Paprika und Zwiebeln auf den Grill legen, nie mehr Maiskolben!
DANKE und Grüße
JHO
-
-
-
-
hi,
der Versuch, über
h1 img {
vertical-align:bottom;
}
das mit :after hinzugefügte Bild zu formatieren schlägt fehl.Natürlich - du _hast_ kein img im h1 in deinem _Quelltext_ stehen - also trifft dieser Selektor hier nicht zu.
ebenso, wenn man direkt
h1 {
vertical-align:bottom;
}
versucht.Du willst ja auch nicht h1 vertikal ausrichten.
Dann muss man wohl offensichtlich mit dem Darstellungsproblem leben.
Du hast das Bild per
#anhang:after {
content:url(http://test.moses-online.de/test.gif);
}als dynamisch erzeugten Content hinzugefügt.
Also ist _das_ auch das, was du vertikal ausrichten willst.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo
Du hast das Bild per
#anhang:after {
content:url(http://test.moses-online.de/test.gif);
}
als dynamisch erzeugten Content hinzugefügt.Also ist _das_ auch das, was du vertikal ausrichten willst.
GENAU!
Und da komme ich ja eben nicht dran!
Wenn ich z.B. noch was anderes versuche, und zwar in das content:-Attribut direkt "<img src....>" schreibe (weil ich da ja dann auch style=... angeben könnte), dann wird das nicht als HTML interpretiert, sondern so direkt (mit Kleiner- bzw. Größerzeichen) ausgegeben.
Tja, mmh....
Grüße
JHO-
hi,
Du hast das Bild per
#anhang:after {
content:url(http://test.moses-online.de/test.gif);
}
als dynamisch erzeugten Content hinzugefügt.Also ist _das_ auch das, was du vertikal ausrichten willst.
GENAU!
Und da komme ich ja eben nicht dran!
Warum nicht?
Um ihm eine Bildquelle zuzuweisen, bist du doch auch "drangekommen".
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga
Du Schriebst:
Warum nicht?
Um ihm eine Bildquelle zuzuweisen, bist du doch auch "drangekommen".
Ich schrieb vorher:
content:url(http://test.moses-online.de/test.gif);
Das kann ich eben N_U_R eine URL eines Bildes zuweisen. Das Bild selber kann ich aber nicht mehr mit Attributen belegen.
Warum das nicht geht? Frag nicht mich, frag W3C.
Gruß JHO
-
hi,
Um ihm eine Bildquelle zuzuweisen, bist du doch auch "drangekommen".
Ich schrieb vorher:
content:url(http://test.moses-online.de/test.gif);
Du schriebst davor noch etwas mehr - nämlich einen bestimmten Selektor bzw. ein Pseudo-Format, für generierten Content.
Das kann ich eben N_U_R eine URL eines Bildes zuweisen. Das Bild selber kann ich aber nicht mehr mit Attributen belegen.
Du hast generierten Content eingefügt, und als Quelle für diesen einen Bild-URL angegeben.
Was hindert dich daran, für diesen generierten Content weitere Eigenschaften anzugeben?
Warum das nicht geht? Frag nicht mich, frag W3C.
Doch, ich mus nach wie vor dich fragen :-)
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
-
-