• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

HTML/CSS: Float-img soll div mitwachsen lassen …

PatrickB

Rhode Island Greening
Registriert
29.10.05
Beiträge
478
Hallo liebe Profis im Pro-Board =)

Ich hab ein kleines Problem. Ich habe in einem div ein Bild, das neben einem Paragraphen floaten soll. Das klappt sehr gut, jedoch ist das div zu kurz, wenn der Text zu kurz ist. Das Bild scheint den div nicht mitwachsen zu lassen.


Eine Möglichkeit wäre, den Paragraphen standardmäßig mit der gleichen höhe wie das Bild anzugeben. Ist de Text jedoch zu lang gibt das wiederrum Probleme.

Ich hab das alles mal isoliert und eine HTML Datei rausgemacht, hier könnt ihr im Quellcode ja schauen was ich meine. Vielleicht kennt ja jemand eine gute Lösung. Frickeleien hab ich schon viele probiert aber ich will doch meinen, da gibt es eine richtig saubere Lösung für =O

http://mix.crea-bmb.de/htmlcsshilfe.html

Schonmal Danke für eure Mühen!
 

Chuck-.-

Bismarckapfel
Registriert
22.12.06
Beiträge
142
Ich hab mir mal kurz den Quelltext angeschaut und ich habe kein CSS gesehn wo die höhe definiert wird. Setzt doch einfach noch bei dem div height: auto; ein
Sollte eigentlich funktionieren:)
LG
Jannik
 

PatrickB

Rhode Island Greening
Registriert
29.10.05
Beiträge
478
Ich hab mir mal kurz den Quelltext angeschaut und ich habe kein CSS gesehn wo die höhe definiert wird. Setzt doch einfach noch bei dem div height: auto; ein
Sollte eigentlich funktionieren:)
LG
Jannik

Nope, das klappt nicht. Ich glaub height:auto hat so ein div schon von Geburt an.

Ein Versuch war es wert.
 

Chuck-.-

Bismarckapfel
Registriert
22.12.06
Beiträge
142
Ok, habs gefunden. :) So funktionierts
<html>
<body>



<div style="width:250px; float:left; background-color:#bbbbbb; padding: 15px;">

<h2>Dies funktioniert NICHT (Text zuwenig)</h2>
<img src="http://www.apfeltalk.de/forum/images/logo/navleiste.gif" style="float:left; width:100px; height: 250px; padding: 0 10px 0 0;"/>

Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext
Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext
Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext

</div>





</body>
</html>

EDIT: Ok geht doch :)
hab das alte Script bei mir local nochmal geladen :p
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
Gib dem umgebenden div ein overflow: auto;. Das sollte helfen.

korrekt, chucks version mit dem float funktioniert in dem speziellen fall zwar auch, würde aber bedeuten, dass je nach layout das nächste element rechts an das letzte div gestellt würde, sei denn man fügt dem nächsten element wieder ein clear im style hinzu. overflow ist also der bessere weg ;)

@chuck, mit FF web developer extension kann man auch das html direkt im browser bearbeiten ;)

@PatrickB, hoffe du benutzt im echten layout ein css file und nicht die ganzen inline styles wie im beispiel ;)
 

PatrickB

Rhode Island Greening
Registriert
29.10.05
Beiträge
478
Gib dem umgebenden div ein overflow: auto;. Das sollte helfen.

Oh Danke, genau das war es =)

@dahui:

Klar benütz ich ein CSS File mit ordentlichen Klassen. Fand es aber sinniger die Sache euch so zu präsentieren. Die HTML Seite dient ja nur der Problembeschreibung :p
 

dahui

Carmeliter-Renette
Registriert
22.10.06
Beiträge
3.303
Klar benütz ich ein CSS File mit ordentlichen Klassen. Fand es aber sinniger die Sache euch so zu präsentieren. Die HTML Seite dient ja nur der Problembeschreibung :p

;) kein problem, ich bin halt grosser fan der web dev toolbars, insofern ist es wurscht zum debuggen, ob man im css wühlt oder im quelltext

btw http://de.selfhtml.org/navigation/sidebars/html.htm und das ganze dann z.b. im FF als bookmark mit dem zusatz 'in sidebar laden' anlegen. dann haste immer alles mit beispielen zur hand