Div bei CSS zu breit
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
bild
bruder
code
denkfehler
display
eigenschaft
ergebnis
erzeugen
fehlinformation
fenster
folgende eigenschaften
funktionieren
inhalt
kleine anmerkung
kleines problem
pixel
position
probier
problem
-
Hallo Leute,
ich hab ein kleines Problem mit den Divs bei CSS.
Normalerweise ( und auch bei allen Ergebnissen bei Google ) bin ich davon ausgegangen, dass
Divs immer so groß sind wie ihr Inhalt, solange man keine Breite bzw. Höhe festlegt.
So jetzt möchte ich mit einem Div allerdings einen weißen und dann einen grauen Rand um ein Bild
herum erzeugen. Also mit Padding 5 Pixel Abstand zu allen Seiten und dann 1 px Border.
Mein Code sieht so aus:
<style type=\"text/css\"> .image_div{ background-color: #ffffff; border: 1px solid #bfbfbf; } .small{ padding: 1px; } .large{ padding: 5px; } </style> <div class=\'image_div small\'><img src=\'images/upload/picture.png\' width=\'92px\' height=\'92px\' border=\'0\'></div>
Aber aus irgendeinem Grund wird das Div jetzt immer so breit wie das Fenster und ich versteh einfach nicht wieso. Auch width=auto; oder sowas hat nix gebracht.
Normalerweise hatte ich bei sowas nie Probleme mit Divs.
Wäre für jede Hilfe dankbar.
MfG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
probiere es mal so:
<style type=\"text/css\"> .image_div{ background-color: #ffffff; border: 1px solid #bfbfbf; width: 1px; } .small{ padding: 1px; } .large{ padding: 5px; } </style> <div class=\'image_div small\'><img src=\'hi.jpg\' width=\'92px\' height=\'92px\' border=\'0\'></div>
ich habe einfach oben bei \".image_div\" width:1px; hinzugefügt
-
Divs sind immer so breit wie das Fenster wenn kein Width-Atribut angegeben ist. Du kannst es so lösen:
<style type=\"text/css\"> .image { background-color: #ffffff; border: 1px solid #bfbfbf; width:92px; height:92px; padding:5px; float:left; } </style> <div class=\"image\"><img src=\"images/upload/picture.png\" width=\"92px\" height=\"92px\" border=\"0\"></div> -
Divs sind immer so breit wie das Fenster wenn kein Width-Atribut angegeben ist. Du kannst es so lösen:
<style type=\"text/css\"> .image { background-color: #ffffff; border: 1px solid #bfbfbf; width:92px; height:92px; padding:5px; float:left; } </style> <div class=\"image\"><img src=\"images/upload/picture.png\" width=\"92px\" height=\"92px\" border=\"0\"></div>
Mh ja schon.. aber nur wenn ich weiß wie groß das Bild ist ... und da das ganze hinterher über PHP ausgegeben werden soll, weiß ich nicht welche Größe die Bilder haben werden.
Ist das mit den Divs nur so ne Fehlinformation ? Weil das ließt man ja echt überall ...
Das mit dem 1px funktioniert nicht ..das Div wird dann 1 pixel breit + Padding und Border und das Bild ragt einfach hinaus ... aber so sollten sich Divs normalerweise ja auch verhalten oder nicht?
Naja Danke auf jeden Fall schonmal ... vll hat ja jemand noch ne Idee ^^
MfG
// EDIT : Beitrag nicht von mir .. sondern von meinem Bruder :P (Denkfehler)
Gruß
Beitrag geändert: 28.4.2008 11:29:57 von xsnifferdogx -
Du könntest es mit min-width: 1px; statt nur width versuchen. Dann sollte sich das DIV jeweils an die Größe anpassen, da die Bilder sicherlich immer größer als 1px sein werden.
http://www.css4you.de/min-width.html -
Uuups sorry ..
war oben wohl mit dem Nickname von meinem Bruder eingeloggt
Also das mit dem min-width: 1px hat super funktioniert ...
Sowohl in FF als auch im IE.. Vielen Dank =)
MfG -
Oh, min-width funktioniert aber nicht im IE 6-. Wenn die <div> genau so breit sein soll wie der Inhalt, probier es statt <div> mit <span> oder setz im css folgende Eigenschaften auf die <div>:
display: inline;
Ryan
Beitrag geändert: 28.4.2008 13:48:59 von ryanblack -
Hallo,
also es funktioniert sowieso nur wenn man position:absolute; setzt ...was bei mir leider in manchen Fällen nicht möglich ist, weils mir dann das ganze Layout zerhaut.
Ich hab allerdings ne andere Möglichkeit gefunden und zwar:
Ich habe immernoch ein Div um das Bild allerdings weise ich jetzt die Eigenschaften nicht dem
Div zu sondern dem Bild im Div womit sich die Sache mit der Größe erledigt hat. ;)
Funktioniert einwandfrei ohne jegliche Probleme.
Für alle dies interessiert oder die mal ein änliches Problem haben hier mein Code:
CSS: .image_div img{ background-color: #ffffff; border: 1px solid #bfbfbf; min-width: 1px; } .small{ padding: 2px; } .large{ padding: 5px; } .image_div img:link, .image_div img:visited{ background-color: #ffffff; } .image_div img:active, .image_div img:hover{ background-color: #d0cfcf; } HTML: <div class=\'image_div\'><img src=\'picture.png\' class=\'small\' border=\'0\' alt=\'Bild\'></div>
MfG und nochmal vielen Dank ^^
-
Nur eine kleine Anmerkung: :link, :visited und :active funktionieren nur bei Links (<a> ) -.-
Ryan
Beitrag geändert: 2.5.2008 14:49:31 von ryanblack -
Nur eine kleine Anmerkung: :link, :visited und :active funktionieren nur bei Links (<a> ) -.-
Ryan
Beitrag geändert: 2.5.2008 14:49:31 von ryanblack
Nur eine kleine Anmerkung zurück:
Es ist ja auch für Links gedacht ... :P
Hast ja Recht es steht nicht im Codebeispiel ... aber für das Problem war es ja auch nicht nötig ...
MfG ^^
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
