mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 05:42 Benutzername: Passwort: Auto-Login

Thema: CSS-Problem: Container verschieben sich vom 22.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS-Problem: Container verschieben sich
Autor Nachricht
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 22.10.2007 13:59
Titel

CSS-Problem: Container verschieben sich

Antworten mit Zitat Zum Seitenanfang

Hallo,
ich habe eine typische Seite mit CSS aufgebaut: Kopf, linke Seite Menue, Bühne, rechte Seite. Klappt auch alles wunderbar. Nun möchte ich auf meine Bühne jedoch News-Container für eine Artikelvorschau mit Bild und Text setzen. Setze ich meine Conatiner so bemerke ich, dass sich diese in Abhängigkeit des Inhalts der rechten Seite verschieben. Also hat die rechte Seite keinen Inhalt, so beginnen meine News oben auf der Seite. Ist der rechte Bereich mit Inhalt gefüllt, so rutschen meine News-Container auf der Bühne jedoch nach unten und werden erst auf derselben Linie angezeigt, auf der der Textinhalt rechts endet.
Ich komme einfach nicht dahinter, was ich an meinen News-Containern ändern muss/kann, damit das nicht passiert. Vielleicht auch, weil mir nicht klar ist, wie der rechte Bereich und die News-Container plötzlich meinen, zusammengehörig sein zu müssen * Keine Ahnung... *

Wer kann helfen?

Hier meine Styles und der partielle Code:
Code:
#buehne {margin: 5px 205px 20px 171px;padding: 5px 10px 20px 20px;}
  * html #buehne {
    height: 1px;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
  }
#rightcontent {float: right;width: 200px;padding: 15px 0 0 5px;}
.teaser {clear: both;_height:1%;overflow:visible;min-height:80px;margin-bottom:15px;}
.teaserabschluss {clear: both;padding-top:10px;padding-top:10px;}
.teaserpic {float: left;clear: both;display: block;margin-right:10px;width:150px;}

<div id="rightcontent">Inhalt rechts</div>
<div id="buehne">
    <div class="teaser">
       <img class=teaserpic src="bild.gif" />
      <p>
         jkhkjhkjhkjhkjhkjhkh
         <br style="clear: both" />
      </p>
   </div>
   <div class="teaserabschluss"></div>
</div>
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 22.10.2007 15:46
Titel

Antworten mit Zitat Zum Seitenanfang

Dann entferne mal das "clear: both;" bei ".teaser", wozu ist das da? Wozu clearst du überhaupt
ständig und überall wenn es nicht notwendig ist?


Zuletzt bearbeitet von m am Mo 22.10.2007 15:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 22.10.2007 15:51
Titel

Antworten mit Zitat Zum Seitenanfang

das clear ist leider notwendig, damit alle Browser das Bild nicht über den Div-Container rüber schieben.
Ich habe es aber auch schonmal entfernt - das hat leider keinen Einfluss auf mein Problem.

Ich habe eine kleine test.htm mit den relevanten Styles und Inhalten gemacht. Dann ist vielleicht klarer, was ich meine. Ich kann sie Dir gerne schicken, wenn Du mir Deine Mail gibst (oder kann man hier auch Anhänge verschicken? *such*).
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 22.10.2007 15:58
Titel

Antworten mit Zitat Zum Seitenanfang

kjutta hat geschrieben:
... (oder kann man hier auch Anhänge verschicken? *such*).


Nein kannst du nicht.

Und ich sage dass nicht einfach so, entferne das "clear: both;" in der Regel ".teaser"
das ist die Ursache und zudem nicht notwendig.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>kijutta</title>
<style type="text/css">
   #buehne {margin: 5px 205px 20px 171px;padding: 5px 10px 20px 20px;}
     * html #buehne {
      height: 1px;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
     }
   #rightcontent {float: right;width: 200px;padding: 15px 0 0 5px;}
   .teaser {_height:1%;overflow:visible;min-height:80px;margin-bottom:15px;}
   .teaserabschluss {clear: both;padding-top:10px;padding-top:10px;}
   .tea
</style>
</head>
<body>
<div id="rightcontent">Inhalt rechts Inhalt rechts Inhalt rechts Inhalt
rechts Inhalt rechts Inhalt rechts Inhalt rechts Inhalt rechts </div>
   <div id="buehne">
      <div class="teaser">
         <img class=teaserpic src="bild.gif" />
        <p>
          jkhkjhkjhkjhkjhkjhkh
          <br style="clear: both" />
        </p>
      </div>
      <div class="teaserabschluss"></div>
   </div>
</body>
</html>


Zuletzt bearbeitet von m am Mo 22.10.2007 15:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 22.10.2007 16:01
Titel

Antworten mit Zitat Zum Seitenanfang

Oops, sorry, da hatte ich Dich falsch verstanden. Hatte das clear im HTML-Code gemeint, nicht das im Style.

Vielen Dank! So funktioniert es!
Manchmal hat man einfach * Wo bin ich? *
.....

Grins
  View user's profile Private Nachricht senden
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 22.10.2007 16:11
Titel

Antworten mit Zitat Zum Seitenanfang

Ich muss es leider zurücknehmen. Im IE funktioniert es wunderbar - im Opera und Firefox setzt er das Bild dann falsch.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>kijutta</title>
<style type="text/css">
   #buehne {margin: 5px 205px 20px 171px;padding: 5px 10px 20px 20px;}
     * html #buehne {
      height: 1px;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
     }
   #rightcontent {float: right;width: 200px;padding: 15px 0 0 5px;}
   .teaser {_height:1%;overflow:visible;min-height:80px;margin-bottom:15px;border:1px solid #000000;}
   .teaserabschluss {clear: both;padding-top:10px;padding-top:10px;}
   .teaserpic {float: left;clear: both;display: block;margin-right:10px;width:150px;border: 1px solid #000000;}
</style>
</head>
<body>
<div id="rightcontent">Inhalt rechts Inhalt rechts Inhalt rechts Inhalt
rechts Inhalt rechts Inhalt rechts Inhalt rechts Inhalt rechts </div>
   <div id="buehne">
      <div class="teaser">
         <img class=teaserpic src="bild.gif" width="150" height="100" />
        <h2>Headline</h2>
        <p>
           jkhkjhkjhkjhkjhkjhkh
             <br style="clear: both" />
        </p>
      </div>
      <div class="teaserabschluss"></div>
   </div>
</body>
</html>
  View user's profile Private Nachricht senden
kjutta
Threadersteller

Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 22.10.2007 16:12
Titel

Antworten mit Zitat Zum Seitenanfang

hab's schon - im teaserpic war noch ein clear:both zuviel....
  View user's profile Private Nachricht senden
 
Ähnliche Themen Container Problem
CSS Problem. Div Container sollen sich automatisch anpassen.
Problem mit div Container - höhe soll sich automatisch anpas
DIV Container bei Mouseover über DIV Container anzeigen
DIV-Container soll anderen DIV-Container verdrängen
CSS Problem: div tags verschieben sich
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.