Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

CSS: div-box mit grafik treibt mich in den wahnsinn

Silent Bob / 11 Antworten / Baumansicht Nickles

hallo,

ich übe zur zeit ein wenig css. soweit so gut.

nun habe ich mit div-boxen ziemliche probleme, wenn ich dort bilder einfügen will.
aktuelles beispiel:
ich habe eine div box exakt positioniert mit diesen werten:

.box1 {
background:silver;
border:1px solid black;
margin:1px;
padding:0px;
height:150px;
width:150px;
}

nun mache ich ein div-tag auf und füge mit IMG SRC (ohne weitere parameter) ein bild ein, das ebenfalls EXAKT 150x150 ist.

ziel ist, dass das bild die box komplett ausfüllt, somit exakt positioniert ist und auch noch den schwarzen rahmen der box trägt.

aber das klappt nicht. ständig habe ich eine verschiebung. also das bild scheint nach oben verschoben und ich habe unten ca. 1mm platz zwischen bild und unterem box-rand, obwohl halt box und bild exakt 150x150 pixel breit/hoch sind.

wo kommt das??? ich versteh das nicht.


p.s. wie postet man hier vernünftig html quellcode?

danke

bei Antwort benachrichtigen
Borlander Silent Bob „CSS: div-box mit grafik treibt mich in den wahnsinn“
Optionen
unten ca. 1mm platz zwischen bild und unterem box-rand
Dann hast Du vermutlich Whitespaces zwischen dem IMG-Tag und dem Start und End-Tag des DIVs. Da die als Text interpretiert werden wird das Bild dann wie im Fließtext angezeigt, d.h. das Bild wird auf Höhe der Basisline des Textes positioniert, der Platz unter des Basislinie des Tewird natürlich für reserviert für Zeichen die unterhalb der Basisline weitergehen wie z.B. das kleine "g"...

Mit
<div class="box1"><img src="..." height="150" width="150"></diV>
sollte dieses Problem nicht auftreten...

wie postet man hier vernünftig html quellcode?
Ganz einfach &lt; für < und &gt; für > verwenden, so wie man das immer macht wenn man HTML-Code auf HTML-Seiten darstellen möchte ;-)


Gruß
Borlander
bei Antwort benachrichtigen
xafford Borlander „Antwort“
Optionen

Meintest Du zufällig statt Whitespace Carriage-Return? Images haben eine (gewollte?) Eigenart. Fügt man nach ihnen einen Zeilenumbruch im Quelltext ein, so haben sie immer einen unteren Abstand (margin-bottom), die Lösung von Bor stimmt, also img-Definition direkt ohne weitere Umbrüche in den Container schreiben, ausreichend für einen ungewollten Abstand ist aber schon ein CR-LF.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Silent Bob xafford „Antwort“
Optionen

äähhmm... jetzt habe ich hinter den IMG SRC tag noch ein BR gesetzt.

jetzt ist der abstand weg. also mit einem zeilenumbruchs-tag ist kein abstand am unteren rand, aber ohne das tag schon....!?

das soll mal einer verstehen

bei Antwort benachrichtigen
Borlander Silent Bob „Antwort“
Optionen

Also bei mir funktionierte das ohne BR-Tag...

bei Antwort benachrichtigen
Borlander xafford „Antwort“
Optionen

Also ich habe den Eindruck das dieses Phänomen bei allen Whitespaces (neben CR mindests auch bei Leerzeichen) auftritt. Gewollt ist das in diesem Speziallfall sicher nicht, aber das Bild wird dann eben behandelt wie im normalen Fließtext...

bei Antwort benachrichtigen
Silent Bob Nachtrag zu: „CSS: div-box mit grafik treibt mich in den wahnsinn“
Optionen

hi,

das posting von borlander hab ich verstanden. kein problem, aber bei xaffords bin ich noch am grübeln.

was ist ein CR-LF?

allerdings besteht das problem immer noch.
die box deklaration aus meinem oberen posting ist gleich geblieben.
dann habe ich jetzt den tag für die box so abgeändert:

<div class="box1"><img src="banner2.jpg" height="150" width="150"></div>

aber die verschiebung, bzw. der unterezwischenraum ist immer noch da :-(

*grmpf*

bei Antwort benachrichtigen
xafford Silent Bob „hi, das posting von borlander hab ich verstanden. kein problem, aber bei...“
Optionen

Hmmm...naja, klare Ausdrucksweise scheint in letzter Zeit nicht so meine Stärke zu sein ;o)

Versuch einmal folgendes:
<div class="box1"><img src="banner2.jpg" height="150" width="150" border="0" /></div>

Was ich im Ursprungspost meinte war folgendes:



<div>


    <img src="blabla" border="0" />


</div>

erzeugt einen Abstand (CR-LF bedeutet Carriage Return - Line Feed, also ein Zeilenumbruch im Quelltext).
Wohingegen folgendes keinen Abstand mehr erzeugen sollte:


<div><img src="blabla" border="0" /></div>
Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Silent Bob xafford „Hmmm...naja, klare Ausdrucksweise scheint in letzter Zeit nicht so meine Stärke...“
Optionen

aahhhh. verstehe :-)

gut. aber das mit dem schrägstrich am ende des IMG tags klappt nicht.
wenn ich allerdings wie schon unten erwähnt, ein BR reinsetze, dann ist das okay.

jetzt frag ich mich nur, welche logik dahintersteckt.

naja. danke erstmal.

bei Antwort benachrichtigen
xafford Silent Bob „aahhhh. verstehe :- gut. aber das mit dem schrägstrich am ende des IMG tags...“
Optionen
gut. aber das mit dem schrägstrich am ende des IMG tags klappt nicht.
Der Schrägstrich hat damit auch nix zu tun, der istnur wegen der XHTML-Konformität (leere Tags sollen so gekennzeichnet werden [img, br, hr,...]) ;o)
Hast Du es mit border="0" getestet (auch im style einmal border: 0px angeben)

jetzt frag ich mich nur, welche logik dahintersteckt.
An sich keine mitr erkennbare, außer das Du damit einem Inline-Element zur Darstellung als Block-Element verhilfst.
Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Silent Bob xafford „gut. aber das mit dem schrägstrich am ende des IMG tags klappt nicht. Der...“
Optionen

nein, mit border=0 änder das auch nichts.

komisch. nagut. wenn ich das dann in zukunft ruhigen gewissens generell mit einem <BR> regeln kann, ohne damit gegen irgendwelche html oder css standarts zu verstossen, dann kann ich damit leben

bei Antwort benachrichtigen
gelöscht_97727 Silent Bob „CSS: div-box mit grafik treibt mich in den wahnsinn“
Optionen

...height="150" width="150"... entpricht doch auch nicht 150px !?
gruss, consumer

bei Antwort benachrichtigen