Autor |
Nachricht |
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 22.10.2007 13:59
Titel CSS-Problem: Container verschieben sich |
|
|
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
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> |
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 22.10.2007 15:46
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 22.10.2007 15:51
Titel
|
|
|
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*).
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 22.10.2007 15:58
Titel
|
|
|
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
|
|
|
|
|
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 22.10.2007 16:01
Titel
|
|
|
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
.....
|
|
|
|
|
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 22.10.2007 16:11
Titel
|
|
|
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> |
|
|
|
|
|
kjutta
Threadersteller
Dabei seit: 01.02.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 22.10.2007 16:12
Titel
|
|
|
hab's schon - im teaserpic war noch ein clear:both zuviel....
|
|
|
|
|
|
|
|
Ä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
|
|