CSS - Bild im div container überlappt andere container

Buschdieb · 18.07.2007, 19:38

Hallo Leute!

Ich hab folgendes Problem (Screenshot):
http://bayimg.com/GaECBaABB

Das Bild überlappt in die anderen div- container... wie behebe ich das?
hat jemand eine idee?

Der Code der Seite:

Code:

<h1>Neuigkeiten</h1>

<div class="pagebar">Seiten: 
  1
234 Archiv</div>



<div class="news_head">
<h1>Test55</h1>

<div class="news_autor">geschrieben von 0 am 18.07.2007 um 19:21 Uhr</div>
</div>

<div class="news_text"><div class="news_img"></div></div>


<div align="right" class="pagebar">Zu den Kommentaren (0)</div>
<div class="news_head">
<h1>54321</h1>
<div class="news_autor">geschrieben von 0 am 18.07.2007 um 19:09 Uhr</div>
</div>

<div class="news_text"><div class="news_img"></div> bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; </div>



<div align="right" class="pagebar">Zu den Kommentaren (0)</div>

Der CSS-Code

Code:

.news_head {
  border-top-color: blue;
  border-top-width: 2px;
  border-top-style: solid;
  border-bottom-color: #010088;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background:#f7f7f7;
  margin-left:160px;
  margin-right:20px;
}

.news_autor
{text-align:right;}

.news_text {margin-left:160px; margin-right:20px;}

.news_img 	{margin-top:5px; margin-right:5px; margin-bottom:5px; margin-left:5px; float:left;}
.news_img_l {margin-top:5px; margin-right:5px; margin-bottom:5px; margin-left:0px; float:right;}
.news_img_r {margin-top:5px; margin-left:5px; margin-bottom:5px; margin-right:0px; float:right;}

Danke!

Zergling-new · 18.07.2007, 21:25

Falscher Link.

Buschdieb · 18.07.2007, 21:31

nö... der geht doch!

http://bayimg.com/GaECBaABB

nikosch · 18.07.2007, 21:39

Welches Bild du auch meinst, wahrscheinlich kannst Du hiermit was anfangen:
http://www.complexspiral.com/publica...aining-floats/

phpdummi · 18.07.2007, 21:51

Der Text soll um das Bild fließen?

Zergling-new · 18.07.2007, 21:51

Eben kam ein interner Server-Fehler.

Float's musst du immer mit clear:left|right|both beenden.

phpdummi · 18.07.2007, 22:08

Wie Zergling schon sagte, müssen floats immer wieder aufgehoben werden.
Das könnte in etwa so aussehen:

Code:

<html>
<head>
<title>Bilder-Float in DIVs</title>
<style>
<!--
.clear {
	clear:both;
}

.news_head {
  border-top-color: blue;
  border-top-width: 2px;
  border-top-style: solid;
  border-bottom-color: #010088;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background:#f7f7f7;
  margin-left:160px;
  margin-right:20px;
}

.news_autor{text-align:right;}

.news_text {margin-left:160px; margin-right:20px; }

.news_img    {margin:5px; float:left;}
.news_img_l {margin-top:5px; margin-left:0px; float:right;}
.news_img_r {margin-top:5px; margin-right:0px; float:right;}
-->
</style>
</head>
<body>

<h1>Neuigkeiten</h1>

<div class="pagebar">Seiten:
  1
234 Archiv</div>




<div class="news_head">
	<h1>Test55</h1>

	<div class="news_autor">geschrieben von 0 am 18.07.2007 um 19:21 Uhr</div>
</div>


<div class="news_text">
	
	
	News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text;
	News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text;
	News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text;
	News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text;
	News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text;
	News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text;
	News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text; News Text;

	<div class="clear"></div>
</div>


<div align="right" class="pagebar">Zu den Kommentaren (0)</div>
<div class="news_head">
	<h1>54321</h1>
	<div class="news_autor">geschrieben von 0 am 18.07.2007 um 19:09 Uhr</div>
</div>


<div class="news_text">
	
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla; bla;
	<div class="clear"></div>



<div align="right" class="pagebar">Zu den Kommentaren (0)</div>

</body>
</html>

Ich habe mir mal erlaubt die sinnlosen margin Angaben zu entfernen.
Außerdem befindet sich das Bild nicht mehr in einem Eigenen DIV -warum sollte
es auch?

Viel Erfolg!

Buschdieb · 19.07.2007, 16:12

sooo... habs mal ausprobiert also das bild überlappt nicht mehr! das ist schick allerdings fließt der text jetzt nciht link oder rechts an dem bild vorbei.

Screen:
http://bayimg.com/bAEmhAaBb

Code:

<link rel="stylesheet" href="scw.css" type="text/css">
<h1>Neuigkeiten</h1>

<div class="pagebar">Seiten: 
  1
2345 Archiv</div>



<div class="news_head">
<h1>bla;</h1>

<div class="news_autor">geschrieben von 0 am 19.07.2007 um 15:50 Uhr</div>
</div>

<div class="news_text">TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST;  TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; TEST; </div>


<div align="right" class="pagebar">Zu den Kommentaren (0)</div>
<div class="news_head">
<h1>Test55</h1>
<div class="news_autor">geschrieben von 0 am 18.07.2007 um 19:39 Uhr</div>
</div>

<div class="news_text"> 1</div>



<div align="right" class="pagebar">Zu den Kommentaren (0)</div>

Code:

.clear {
   clear:both;
}

.news_head {
  border-top-color: blue;
  border-top-width: 2px;
  border-top-style: solid;
  border-bottom-color: #010088;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background:#f7f7f7;
  margin-left:160px;
  margin-right:20px;
}

.news_autor{text-align:right;}

.news_text {margin-left:160px; margin-right:20px; }

.news_img    {margin:5px; float:left;}
.news_img_l {margin-top:5px; margin-left:0px; float:right;}
.news_img_r {margin-top:5px; margin-right:0px; float:left;}

phpdummi · 19.07.2007, 17:49

Mensch Jungchen, jetzt pass mal auf!
Bei mir sieht die Ausgabe folgendermaßen aus (okay, nur im FF):
Screenshot

Um diesen Effekt zu erzielen, muss man sich den Code, der geposted wurde, natürlich auch genau
anschauen. Dann fällt einem auch auf, dass dort von <img class="news_img" die Rede ist.
Wenn sich die Leute schon Mühe geben dir zu Helfen, dann guck auch richtig hin

Kauf dir doch einfach mal ein Buch zu CSS & HTML, gibt es schon für weniger als 30€.

Buschdieb · 19.07.2007, 19:34

Zitat:

Zitat von phpdummi

Mensch Jungchen, jetzt pass mal auf!
Bei mir sieht die Ausgabe folgendermaßen aus (okay, nur im FF):
Screenshot

Um diesen Effekt zu erzielen, muss man sich den Code, der geposted wurde, natürlich auch genau
anschauen. Dann fällt einem auch auf, dass dort von <img class="news_img" die Rede ist.
Wenn sich die Leute schon Mühe geben dir zu Helfen, dann guck auch richtig hin

Kauf dir doch einfach mal ein Buch zu CSS & HTML, gibt es schon für weniger als 30€.

ops, tut mir leidb hab ich wirklich übersehen!!! über die anschaffung eines buches hab ich schon nachgedacht!

aber warum kann ich das nicht in ein div container packen? Naja auch egal hauptsache es funktioniert!

Vielen Dank für eure Mühe!

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
Bild onMouseOver einblenden	rocco	HTML, Usability und Barrierefreiheit	8	22.02.2008 12:52
Transparentes Bild über Bild legen update gelöst	Broadcast	PHP-Fortgeschrittene	11	04.02.2008 15:27
[CSS] Container in Container	Igäl	HTML, Usability und Barrierefreiheit	5	04.09.2007 11:29
[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 aus Server anzeigen lassen	flual2000	PHP Tipps 2004	4	26.10.2004 16:33
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30


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

18.07.2007, 21:25
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Falscher Link.

18.07.2007, 21:31
Buschdieb Erfahrener Benutzer Registriert seit: 11.12.2004 Beiträge: 238 PHP-Kenntnisse: Anfänger	nö... der geht doch! http://bayimg.com/GaECBaABB __________________ fragen ist kostenlos! Buschdieb.com

18.07.2007, 21:39
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.256 PHP-Kenntnisse: Fortgeschritten	Welches Bild du auch meinst, wahrscheinlich kannst Du hiermit was anfangen: http://www.complexspiral.com/publica...aining-floats/

18.07.2007, 21:51
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	Der Text soll um das Bild fließen? __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

19.07.2007, 17:49
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	Mensch Jungchen, jetzt pass mal auf! Bei mir sieht die Ausgabe folgendermaßen aus (okay, nur im FF): Screenshot Um diesen Effekt zu erzielen, muss man sich den Code, der geposted wurde, natürlich auch genau anschauen. Dann fällt einem auch auf, dass dort von <img class="news_img" die Rede ist. Wenn sich die Leute schon Mühe geben dir zu Helfen, dann guck auch richtig hin Kauf dir doch einfach mal ein Buch zu CSS & HTML, gibt es schon für weniger als 30€. __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things