nicht angemeldet
Div mitmin-height schneidet Grafik ab.
0 
Matthias Apsel
0 0 Matthias Apsel
0
0
Div mitmin-height schneidet Grafik ab.
Hallo liebe Profis,
Vorneweg: Ich hab vorletzte Woche angegfangen mit HTML rum zu spielen.
Nun stehe ich wie ein Ochs vorm Berg:
Ich habe das ideal Standart Grundgerüst (header, menu, content, footer)
Nun wollte ich im header (nicht im <head> Bereich...) ein Bildchen Einfügen.
Mein div-container für den header:
#head{
min-height:20px;
width:800px;
margin:auto;
}
<div id="head">
<img src="images/blubberbla.jpg" alt="Wo ist das Bild" height="200px" width="800px" />
</div>
Nun dachte ich der div wäre Mindestens 20px groß und würde in diesem Fall bis zu 'hight="200px"' (wie bei <img/> angegeben) gehen.
ABER im div wird unten noch ein kleines Lienchen (grau hinterlegt) abgezeigt. D.h. also, der div geht noch ein bisschen weiter.. Gebe ich anstatt 'min-height' einfach nur 'height=200px' dann passts (logisch. jetzt weiß er ja wie groß er (der div) sein soll).
Aber warum nicht mit 'min-height'??? Kann ich min-height bei Bildchens vergessen oder wie oder was...man man man
Hab auch schon border und padding genullt.
P.S. Wenn ich
background-image : url(image/blubberbla.JPG);
background-image: url(./images/blubberbla.jpg)
in die 'CSS' reinhaue passiert überhauptnix....
Wenn mir da jemand etwas dazu schreiben könnte wäre echt cool :-))
(display:...,float:...,position:...)???? HIIILFE
LG
Monty
-
Om nah hoo pez nyeetz, Monty!
Mein div-container für den header:
width:800px;
Feste Breiten sind uncool. Besser wäre eine prozentuale Angabe.
<div id="head">
<img src="images/blubberbla.jpg" alt="Wo ist das Bild" height="200px" width="800px" />
</div>ein einzelnes img in einem div ist nicht sonderlich sinnvoll.
background-image : url(image/blubberbla.JPG);
background-image: url(./images/blubberbla.jpg)
in die 'CSS' reinhaue passiert überhauptnix....zeig die Seite.
Matthias
-
Om nah hoo pez nyeetz, Monty!
Ein fröhliches Hallo.
Mein div-container für den header:
warum?
Anfänger :-))
Feste Breiten sind uncool. Besser wäre eine prozentuale Angabe.
Bei Prozenten (denke ich) 'verzerrt' sich vielleicht das Bild bei den unterschiedlichen Auflösungen.
<div id="head">
<img src="images/blubberbla.jpg" alt="Wo ist das Bild" height="200px" width="800px" />
</div>ein einzelnes img in einem div ist nicht sonderlich sinnvoll.
Da hast Du absolut Recht.
Aber ich würde trotzdem gerne wissen warum der Div sich nach einem Bildchen - sagen wir mal- verlängert. Da hänge ich nun schon den ganzen Tag dran und hab schon gar keine Fingernägel mehr. Das muss ich Rauskriegen, egal wie
background-image : url(image/blubberbla.JPG);
background-image: url(./images/blubberbla.jpg)
in die 'CSS' reinhaue passiert überhauptnix....zeig die Seite.
Wo wohnst Du ...
Nein Quark, die ist lediglich bei mir auf'm Rechner.Wenn ichs checke wie ich hier was hochlade werd ich mal meinen 'Entwurf' zur Schau stellen.
Vielen Dank bis dahin,
LG
Monty-
Om nah hoo pez nyeetz, Monty!
Bei Prozenten (denke ich) 'verzerrt' sich vielleicht das Bild bei den unterschiedlichen Auflösungen.
Aber ich würde trotzdem gerne wissen warum der Div sich nach einem Bildchen - sagen wir mal- verlängert.
Blockelemente sind so hoch, wie ihr Inhalt es erfordert. Gefloatete oder per position: absolute aus dem Textfluss entfernte Elemente sind jedoch kein Inhalt mehr.
Wenn ichs checke wie ich hier was hochlade werd ich mal meinen 'Entwurf' zur Schau stellen.
Matthias
-
Hallo Matthias,
Blockelemente sind so hoch, wie ihr Inhalt es erfordert. Gefloatete oder per position: absolute aus dem Textfluss entfernte Elemente sind jedoch kein Inhalt mehr.
So hab ich gedacht:
Das Bildchen/Grafik ist "inline" und erzeugt somit keinen Zeilenumbruch. Also (dachte ich bisher) ist der Div - der ist ja block und hat bei mir eine 'min-hight" - (Ob er nun Sinnlos oder Sinnfrei ist, da im div nur ein Bildchen anzeigen werden soll, sei einmal dahingestelt ...).
Durch dieses'min-hight' dachte ich dass sich der container genau auf dieses Bild abstimmt. Ich hab mir dabei gedacht dass ich nur das Bildchen (pfad/name.png) tauschen muss und sich der container 'automatisch' einstellt.Ich versuchs nochmal irgendwie mit 'position', absoluten/relativen Elementen und was es da sonst noch so gibt. Oder ich vergess es Einfach (bevor ich durchdrehe) uns setze das Bildchen ohne div oben hin - was ich letztendlich auch machen werde.
Geil ! Geil ! Geil !
Dankeschön!!
Wenn jemand mal schauen möchte wo sich meine Fehler eingeschlichen haben, der kann sich ja mal http://monty.bplaced.net/ anschauen und bitte bitte sein Senf dazugeben.
Dort habe ich eine Version mit <img> und eine via url() mit css, wo überhaupt nichts angezeigt wird...Vielen Dank Matthias
LG
Monty@Babe
Danke, jedzt weis ich bescheit.-
Om nah hoo pez nyeetz, Monty!
Wenn jemand mal schauen möchte wo sich meine Fehler eingeschlichen haben, der kann sich ja mal http://monty.bplaced.net/ anschauen und bitte bitte sein Senf dazugeben.
Dort habe ich eine Version mit <img> und eine via url() mit css, wo überhaupt nichts angezeigt wird...zur Variante http://monty.bplaced.net/mit_url/home.html ist zu sagen:
Das div ist leer. Kein Inhalt => es wird kein Platz benötigt => Höhe Null.
Schau dir die Eigenschaften für Hintergrundgrafiken an.Das Hintergrundbild ist kein Inhalt, du musst eine Höhe fest vorgeben.
@Babe
Ich glaube, Baba ist kein Babe ;-)
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Schwan und Schwangerschaft.
-
Hallo Matthias,
räusper, räusper,
SORRY!!
ich hatte die falschen Dateien hochgeladen.
Bei 'url' hatte ich eigentlich vor über die ID ein Bildchen in den div 'reinzuhauen':
Der ist leer...ich wollte eigentlich nur Probieren ob und vor allem wie das geht (mal schnell nebenbei ... dass kann doch nicht so schwer sein...) Man man man.#head{
background-image : url(../image/header.jpg);
}<div id="head"> </div>
Aber er wollte nicht, oder will nicht oder was weiß ich.
Du hast allerdings absolut Recht. Ein div für ein einzelnes Bild ... najagut. Ich will ja lernen. Je mehr ich falsch mache, desto mehr lerne ich.
Und nochmal Super Vielen Dank für die Adresse!!
Cool.Danke Danke Danke,
LG
Monty
-
Hallo liebe Gemeinde,
falls es jemanden Interessiert - um die 'Leerzeile' wegzubekommen - muß man einfach
style="display:block" reinhauen...LG und viel Spaß bei was auch immer,
Monty
-
-
-
-
-
Wenn ichs checke wie ich hier was hochlade werd ich mal meinen 'Entwurf' zur Schau stellen.
Geht doch. Was bei DIR der Grund ist können wir ohne Zusatzinfos nicht wissen. (Und ein persönliches Anliegen: es heisst "standard".)
Cheers,
Baba
-
-