Bilder in <div> Blöcken rutschen raus

Fragen zu CSS.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
Heike Bennerscheid

Bilder in <div> Blöcken rutschen raus

Beitragvon Heike Bennerscheid » Fr 2. Dez 2005, 10:39

Hallo,

wir versuchen grad eine Barrierefreie Internetseite zu erstellen und arbeiten mit <div> Blöcken. Diese sind in einem CSS definiert. In diesen <div> Blöcken haben wir textareas eingebettet. Wenn wir nun einen kurzen Text haben und ein Bild das so gesehen größer als der Text ist, dann rutscht das Bild aus dem <div> Block raus. Gut zu sehen hier: http://www.procuritas.de/bad-muenstereifel/freizeit.php

Nun haben wir in einem HTML Buch gesehen das es einen overflow Befehl gibt das man dem <div> Element sagen kann das Images entweder abgeschnitten werden, das sie rüber ragen oder das man in dem Element scrollen kann. Das haben wir auch ausprobiert aber das geht nicht. Egal was wir eingeben, das Bild rutscht immer raus. Unsere Vermutung war das die Textarea in der das Bild ist den overflow Befehl nicht durch lässt (was ich mir eigentlich nicht vorstellen kann weil alles andere funktioniert). Hier mal der Quellcode:

HTML:

Code: Alles auswählen

<div class="mittetexte">
<we:textarea name="content_news" height="150" width="100%" autobr="true" wysiwyg="true" inlineedit="false" buttonpos="top" bgcolor="#ffffff"/>
</div>


CSS:

Code: Alles auswählen

div.mittetexte {
 overflow: scroll;
 background: #ffffff;
 padding: 8px;
 border-width: 1; 
 border-color: #660000; 
 border-style: solid;
}
Vielleicht hatte jemand schon einmal ein ähnliches Problem und hat dieses lösen können. Über jede mögliche Hilfe wären wir sehr dankbar.

Mit freundlichen Grüßen
Heike Bennerscheid

Leon
Senior Member
Beiträge: 204
Registriert: Fr 9. Jul 2004, 20:26

Beitragvon Leon » Fr 2. Dez 2005, 14:35

mit overflow (im gegenteil, z.b. bei opera gibts dann immer scrollbalken, sieht grauenhaft aus) hat das nichts zu tun,
einfachste lösung:
<br clear="all" />
vorm abschliessenden </div>

also z.b.
<div>
image (float: left) + text
<br clear="all" />
</div>

bytheway:

ist jetzt

und font-tags sind megaout

Heike Bennerscheid

Beitragvon Heike Bennerscheid » Fr 2. Dez 2005, 14:50

Danke.

Ich habe das nun umgeändert und bei Mozilla Firefox funktioniert es auch (werden nur in jedem <div> Scrollbalken angezeigt) aber bei IE bleibt alles wie es ist.

Leon
Senior Member
Beiträge: 204
Registriert: Fr 9. Jul 2004, 20:26

Beitragvon Leon » Fr 2. Dez 2005, 14:59

dann schau mal hier, ein sehr kurzer englischer artikel zu dem problem:
http://orderedlist.com/articles/clearing-floats-fne/

hängt natürlich auch mit dem generellen aufbau eurer seite ab, die listenstruktur halte ich z.b. für überflüssig

Heike Bennerscheid

Beitragvon Heike Bennerscheid » Fr 2. Dez 2005, 16:09

Also ich hab mir das durchgelesen, aber leider hilft mir das auch nicht weiter. Es ist ja kein <div> Element was raus rutscht aus einem anderen <div> Element sondern ein Bild. Und ein Bild kann man nicht auf float:left setzen. Zumindest hab ich das grad versucht und es hat nichts gebracht.

Leon
Senior Member
Beiträge: 204
Registriert: Fr 9. Jul 2004, 20:26

Beitragvon Leon » Fr 2. Dez 2005, 16:34

letzter versuch, wirf einen blick in seinen quelltext.
das ist der aufbau inkl. css

Code: Alles auswählen

<div style="border:1px solid #666; width: 90% !important; width /**/:100%; padding:5%; float:left;">
  <div style="border:1px solid #333; width:45% !important; width /**/:55%; background:#EEE; padding:5%; float:left; display:inline; margin-right:5%;">
  <p><code>border:1px solid #333; 
width:45% !important; 
width /**/:55%; 
background:#EEE; 
float:left; 
display:inline; 
margin-right:5%;</code></p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin elementum consequat nulla. Proin pulvinar luctus magna. In molestie, arcu at posuere lacinia, leo dui bibendum augue, sit amet ultrices lacus diam id purus. Pellentesque ac arcu in tortor consectetuer ullamcorper.</p>
  </div>
  <p><code>border:1px solid #666; 
width:90% !important;
width /**/:100%; 
padding:5%; 
<em>float:left;</em></code></p>
<p>Praesent ut nulla non lorem sagittis vehicula. Nulla sed felis. Phasellus purus. Ut blandit enim ac ipsum.</p>
</div>
oder vereinfacht

Code: Alles auswählen

<div> DAS IST DER RAHMEN UMS GANZE
  <div> DA KOMMT DAS BILD REIN </div>
  <p>HIER DER TEXT</p>
</div>
und das funktioniert hervorragend - also einfach nachbauen !

und natürlich kann man bilder floaten.

namipuk

Beitragvon namipuk » Mi 8. Nov 2006, 18:05

Danke, mir hat es auch weitergeholfen. Es heißt jedoch nicht clear: all sondern clear: both.

Am besten ein cleardiv anlegen:

Code: Alles auswählen

.cleardiv
{
	clear: both;
	height: 0px;
	width: 0px;
}
und dann wenn Elemente in Boxen floaten, vor dem Boxende clearen:

Code: Alles auswählen

<div class="cleardiv"></div>
hab bei mir Images in Boxen gefloatet (ein News-system) und das ganze klappt nun auch wunderbar mit dem MSIE6, solang man den Boxen ein height:100% verpasst.


Zurück zu „CSS“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 11 Gäste