Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS - Bild im div container überlappt andere container

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS - Bild im div container überlappt andere container

    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!
    fragen ist kostenlos!

  • #2
    Falscher Link.

    Kommentar


    • #3
      nö... der geht doch!

      http://bayimg.com/GaECBaABB
      fragen ist kostenlos!

      Kommentar


      • #4
        Welches Bild du auch meinst, wahrscheinlich kannst Du hiermit was anfangen:
        http://www.complexspiral.com/publica...aining-floats/
        [COLOR="#F5F5FF"]--[/COLOR]
        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
        [COLOR="#F5F5FF"]
        --[/COLOR]

        Kommentar


        • #5
          Der Text soll um das Bild fließen?
          [FONT="Book Antiqua"][I]"Nobody is as smart as everybody" - Kevin Kelly[/I]
          — The best things in life aren't things[/FONT]

          Kommentar


          • #6
            Eben kam ein interner Server-Fehler.

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

            Kommentar


            • #7
              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!
              [FONT="Book Antiqua"][I]"Nobody is as smart as everybody" - Kevin Kelly[/I]
              — The best things in life aren't things[/FONT]

              Kommentar


              • #8
                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;}
                fragen ist kostenlos!

                Kommentar


                • #9
                  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€.
                  [FONT="Book Antiqua"][I]"Nobody is as smart as everybody" - Kevin Kelly[/I]
                  — The best things in life aren't things[/FONT]

                  Kommentar


                  • #10
                    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!
                    fragen ist kostenlos!

                    Kommentar


                    • #11
                      DIV-Container sind natürlich auch möglich, hier aber überflüssig.
                      ACHTUNG: Solltest du doch DIVs verwenden, muss das Klassen-Attribut im Image-Tag natürlich
                      wieder gelöscht werden
                      [FONT="Book Antiqua"][I]"Nobody is as smart as everybody" - Kevin Kelly[/I]
                      — The best things in life aren't things[/FONT]

                      Kommentar


                      • #12
                        jo da muss ich dann aufpassen, vielen Dank für deine kompetente Hilfe... auch ein Dank an die anderen!
                        fragen ist kostenlos!

                        Kommentar


                        • #13
                          geht nicht ganz hat jemand eine idee?

                          http://bayimg.com/DAeNKaaBb

                          Code:
                          <link rel="stylesheet" href="scw.css" type="text/css">
                          <h1>Neuigkeiten</h1>
                          
                          <div class="pagebar">Seiten: 
                            1
                          23456 Archiv</div>
                          
                          
                          
                          <div class="news_head">
                          
                          <h1>Test1</h1>
                          <div class="news_autor">geschrieben von 0 am 19.07.2007 um 20:06 Uhr</div>
                          </div>
                          
                          <div class="news_text"> </div>
                          
                          
                          <div align="right" class="pagebar">Zu den Kommentaren (0)</div>
                          <div class="news_head">
                          <h1>Chinesische Gala in Rostock</h1>
                          <div class="news_autor">geschrieben von 0 am 19.07.2007 um 19:38 Uhr</div>
                          </div>
                          
                          <div class="news_text"> [b]Acht Starts, acht Siege: Mit einer eindrucksvollen Gala haben die Wasserspringer aus China das diesjährige Grand-Prix-Finale ....
                          
                          
                          
                          Eurosport - dpa</div>
                          
                          
                          <div align="right" class="pagebar">Zu den Kommentaren (2)</div>
                          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:5px; float:left;}
                          .news_img_l {margin:5px; float:right;}
                          .news_img_r {margin:5px; float:left;}
                          fragen ist kostenlos!

                          Kommentar


                          • #14
                            - clear:left; nutzen
                            - vorherige Antworten beachten.
                            [COLOR="#F5F5FF"]--[/COLOR]
                            [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                            [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                            [COLOR="#F5F5FF"]
                            --[/COLOR]

                            Kommentar

                            Lädt...
                            X