[Erledigt] Bild über Container hinaus

webproger · 09.03.2009, 13:44

Hallo Zusammen
Habe ein kleines CSS-Problem und komme einfach nicht weiter...

Ich habe folgenden HTML-Code:

Code:

<div class="box_mainleft">
<h2>Titel</h2>
<img class="img_small" width="13%" src="img/news/bild.jpg" alt="Bild" />
Newstext
</div>

und folgenden CSS-Code:

Code:

.box_mainleft{
	padding-left: 3%;
	padding-right: 3%;
	background-color: #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.img_small{
	float: left;
	padding-right:10px;
}

Mein Problem:
Je nach Grösse des Bildes und des Textes ragt das Bild einfach über das DIV hinaus... Das heisst, wenn die Höhe des Bildes grösser ist als die des Textes ragt das Bild darüber hinaus (das DIV hört beim Textende auf). Wie kann ich das ganze lösen?

Danke für eure Hilfe,
webproger

TheNick · 10.03.2009, 21:54

Hi,
ich hoffe, dass ichs richtig verstanden habe.
Für dein Problem gäbe es zwei Lösungen:
1. In der CSS die Breite noch einstellen:

Code:

.box_mainleft{
	padding-left: 3%;
	padding-right: 3%;
	background-color: #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
        width: 100%;              /* oder irgendein anderer Wert */
}

.img_small{
	float: left;
	padding-right:10px;
}

2. Grafik im Code verkleinern:

Code:

<div class="box_mainleft">
<h2>Titel</h2>
<img class="img_small" max-width="XX" src="img/news/bild.jpg" alt="Bild" />
Newstext
</div>

height bleibt ja variabel, sodass das Bild nicht verzerrt werden dürfte.

LG,
Niklas

Manko10 · 10.03.2009, 23:06

Hi,

das ist normales Verhalten bei Browsern != IE.
Versuche mal overflow: auto;, stelle aber sicher, dass du dann keine Höhen- und Breitenangabe machst.

[OT]
@TheNick: dir ist klar, dass die Bedingung in deiner Signatur immer true ist, da es sich um eine Zuweisung handelt, oder?

Baltasar · 12.03.2009, 09:37

[OT]
mal so aus neugierde: müsste dort für eine zuweisung nicht ein einfaches gleichheitszeichen stehen und nicht ein doppeltes wie jetzt?

jGeee · 12.03.2009, 13:19

Zitat:

Zitat von Baltasar

[OT]
mal so aus neugierde: müsste dort für eine zuweisung nicht ein einfaches gleichheitszeichen stehen und nicht ein doppeltes wie jetzt?

er hats geändert

vorher war es nur ein "="

nikosch · 13.03.2009, 09:54

Das fragt die Frage aber gar nicht.

webproger · 19.03.2009, 11:29

ein einfaches div mit der CSS-Formatierung "clear: both" hats auch getan habe ich bemerkt! danke dennoch für eure antworten!

Code:

<div class="box_mainleft">
<h2>Titel</h2>
<img class="img_small" width="13%" src="img/news/bild.jpg" alt="Bild" />
Newstext
</div>
<div class="clear_both"></div>

tomtaz · 19.03.2009, 15:20

Dann das Thema bitte als [Erledigt] (Link oben) markieren. Danke!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Label über ein Bild funktioniert nicht?		HTML, Usability und Barrierefreiheit	3	23.05.2006 12:06
div layer - text über ende hinaus	seejay	HTML, Usability und Barrierefreiheit	4	24.01.2006 13:05
Designproblem: Text und Bild	Sirke	HTML, Usability und Barrierefreiheit	2	08.09.2005 14:59
[Erledigt] Bild aus Datei in Bild einfügen		PHP Tipps 2005-2	1	07.08.2005 23:36
[PHP«Image] Bild in ein anderes Bild einsetzen		PHP Tipps 2005-2	4	07.08.2005 19:39
Bild per email über Formular versenden		PHP Tipps 2005-2	8	30.07.2005 14:46
bild na variable holen...	md5hash	PHP Tipps 2005-2	5	16.06.2005 01:07
[Erledigt] Bei Mousehover anderes Bild zeigen		HTML, Usability und Barrierefreiheit	2	02.04.2005 09:42
ImageStream als Bild im Browser anzeigen lassen!	Finkman	PHP Tipps 2005	8	29.03.2005 15:54
über Bild gelegter Link nichtg anwählbar	Stümper	HTML, Usability und Barrierefreiheit	7	22.03.2005 19:54
[Erledigt] Bild neu laden.		HTML, Usability und Barrierefreiheit	1	08.02.2005 21:59
[Erledigt] [JS]Neues Bild in neuem Fenster öffnen		HTML, Usability und Barrierefreiheit	1	04.01.2005 11:39
warum ist zelle höher als bild?		HTML, Usability und Barrierefreiheit	1	06.08.2004 00:31
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30
Upgeloadetes Bild lässt sich nicht anschauen		PHP Tipps 2004	3	02.07.2004 22:24

09.03.2009, 13:44
webproger Erfahrener Benutzer Registriert seit: 02.12.2008 Beiträge: 357	[Erledigt] Bild über Container hinaus Hallo Zusammen Habe ein kleines CSS-Problem und komme einfach nicht weiter... Ich habe folgenden HTML-Code: Code: <div class="box_mainleft"> <h2>Titel</h2> <img class="img_small" width="13%" src="img/news/bild.jpg" alt="Bild" /> Newstext </div> und folgenden CSS-Code: Code: .box_mainleft{ padding-left: 3%; padding-right: 3%; background-color: #FFFFFF; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; } .img_small{ float: left; padding-right:10px; } Mein Problem: Je nach Grösse des Bildes und des Textes ragt das Bild einfach über das DIV hinaus... Das heisst, wenn die Höhe des Bildes grösser ist als die des Textes ragt das Bild darüber hinaus (das DIV hört beim Textende auf). Wie kann ich das ganze lösen? Danke für eure Hilfe, webproger __________________


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.03.2009, 21:54
TheNick Neuer Benutzer Registriert seit: 10.03.2009 Beiträge: 14 PHP-Kenntnisse: Anfänger	Hi, ich hoffe, dass ichs richtig verstanden habe. Für dein Problem gäbe es zwei Lösungen: 1. In der CSS die Breite noch einstellen: Code: .box_mainleft{ padding-left: 3%; padding-right: 3%; background-color: #FFFFFF; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; width: 100%; /* oder irgendein anderer Wert */ } .img_small{ float: left; padding-right:10px; } 2. Grafik im Code verkleinern: Code: <div class="box_mainleft"> <h2>Titel</h2> <img class="img_small" max-width="XX" src="img/news/bild.jpg" alt="Bild" /> Newstext </div> height bleibt ja variabel, sodass das Bild nicht verzerrt werden dürfte. LG, Niklas __________________ PHP-Code: `if($_user == "php.de"){ echo ":-)"; }`

10.03.2009, 23:06
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Hi, das ist normales Verhalten bei Browsern != IE. Versuche mal overflow: auto;, stelle aber sicher, dass du dann keine Höhen- und Breitenangabe machst. [OT] @TheNick: dir ist klar, dass die Bedingung in deiner Signatur immer true ist, da es sich um eine Zuweisung handelt, oder? __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

12.03.2009, 09:37
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	[OT] mal so aus neugierde: müsste dort für eine zuweisung nicht ein einfaches gleichheitszeichen stehen und nicht ein doppeltes wie jetzt?

13.03.2009, 09:54
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das fragt die Frage aber gar nicht. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

19.03.2009, 11:29
webproger Erfahrener Benutzer Registriert seit: 02.12.2008 Beiträge: 357	ein einfaches div mit der CSS-Formatierung "clear: both" hats auch getan habe ich bemerkt! danke dennoch für eure antworten! Code: <div class="box_mainleft"> <h2>Titel</h2> <img class="img_small" width="13%" src="img/news/bild.jpg" alt="Bild" /> Newstext </div> <div class="clear_both"></div> __________________

19.03.2009, 15:20
tomtaz Erfahrener Benutzer Registriert seit: 17.06.2008 Beiträge: 1.762 PHP-Kenntnisse: Fortgeschritten	Dann das Thema bitte als [Erledigt] (Link oben) markieren. Danke! __________________ Mfg Tomtaz "Es soll jetzt diese Erfindung geben.... Kugel oder so heißt die. Ist so eine Art Suchmaschine..."