Div-Container im Firefox
Cassi
- css
Ich weiß ich schon wieder und dann noch mit einem Thema was es ungefähr schon tausendmal gab, doch die haben bisher mir nicht wirklcih eine Antwort gebracht... also dann nochmal.
Mein Problem:
Ich habe mir, da ich 0 Ahnung von php habe, ein Gästebuchscript organisiert und dieses in meine Homepage einbezogen (www.fcdn.de).
Soweit so gut.
ich habe es sogar geschafft grundlegende Layout-Änderungen vorzunehmen, entsprechend des Grundlayouts der Page.
Dazu habe ich den main_content der Hauptseite in einen div-Container gelegt - auch ganz einfach, und nun entsteht für mich das Mysterium.
Normalerweise orientieren sich div-Container doch an der Länge des INhaltes, wenn es keine weiteren Angaben gibt oder?
Das war hier nicht der Fall.
Leider kann ich euch nicht zeigen wie es ohne meine umständlichen Verbesserungen aussieh, da die Site laufen muss.
Aber erzählen kann ich es.
Wenn ihr mit dem Firefox auf das Gästebuch geht seht ihr einige Einträge. Ohne eine Längenangabe legt der div-Conatiner sich automatisch auf eine Länge fest so um die 800 px vielleicht (diese Grenze ist durch die Nüsse markiert ^^; ).
Da dies auch auf der Seite zum Eintragen der Fall war und damit das captcha fast im leeren hing, habe ich dem div-container in dem der main_content liegt eine min-height verpasst. Nun ist zumindest das fest und nicht mehr zu kurz.-
Nehme ich nun aber 12 Beiträge pro Seite und lasse damit den main_content quasi über 1100 px gehen, dann schießen die Beiträge quasi über das ganze hinaus, also laufen dann auf dem grauen Hintergrund.
Ich habe bereits versucht einfach unter den main_content in dem div ein gesichertes Zeichen einzubringen, dass quasi der Firefox den Container zieht bis zu diesem Zeichen, welches ja erst unter dem main_content kommen kann, aber fehlanziege, dann setzt er das Zeichen eben auf die min-Höhe des divs... und ehrlich gesagt ich versteh es einfach nicht.
Ich möchte, dass der div-container der den main_content des Gästebuchs beinhaltet exakt so lang ist wie eben dieser.
Auch die style angabe overflow:visibility hat keine Wirkung gezeigt.
Der Quelltext sieht so aus, und ja ich weiß wie umständlich das ist, aber irgendwie raubt es mir den letzten Nerv gerade ^^;
<!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" dir="{txt_content_direction}">
<head>
<title>{txt_script_name} {txt_script_version} {txt_title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body, p, td, br, form, div, span {
font-family:Georgia;
font-size:10pt;
}
.currentpage {
font-weight:bold;
color:#FF0000;
}
.adminbuttons a {
padding:1px 10px 1px 10px;
border:1px outset #DF0000;
color:#FFFFFF;
background-color:#FF5F00;
text-decoration:none;
font-weight:bold;
}
.adminbuttons a:hover {
border:1px inset #DF0000;
}
.allpages {
color:#FFFF00;
}
.cellstyle td {
background-color:#EFEFEF;
border:0px;
padding:3px;
}
.index {
font-weight:bold;
}
.darkrow {
background-color:#D2DBFF;
color: #000066;
}
.lightrow {
background-color:#ECF0FF;
color: #000066;
}
.captions {
font-weight:bold;
}
.code {
font-family:Courier New;
}
.install {
background-color:#E4FBBB;
}
.install form {
display:inline;
}
.messages {
color:#FF9F00;
font-weight:bold;
width:60%;
}
.menu {
font-weight:bold;
margin:10px 0px 30px 0px;
}
.menu a {
text-decoration:none;
color:#FFFF00;
padding:2px 15px 3px 15px;
border:solid 1px #000000;
}
.menu a:hover {
background-color:#FF0000;
color:#FFFFFF;
}
.uninstall {
background-color:#FBDDBB;
}
.uninstall form {
display:inline;
}
#poweredby {
text-align:center;
}
a {
word-spacing: normal;
}
a:link {
font-family: Verdana;
font-size: 13px;
color: #FFFF00;
text-decoration: underline;
cursor: hand;
font-weight: bold;
}
a:visited {
font-family: Verdana;
font-size: 13px;
color: #FF9900;
text-decoration: underline;
cursor: hand;
font-weight: bold;
}
a:active {
font-family: Verdana;
font-size: 13px;
color: #FFFF00;
text-decoration: blink;
cursor: hand;
font-weight: bold;
}
a:hover {
font-family: Verdana;
font-size: 13px;
color: #FF0000;
text-decoration: underline overline;
cursor: hand;
font-weight: bold;
}
.big {
background-color: #CCCCCC;
width: 680px;
margin: 0px auto;
}
.haupt {
background-color: #CCCCCC;
width: 680px;
margin: 0px;
}
.headline {
background-color: #000066;
width: 680px;
margin: 0px;
height: 33px;
font-family: Georgia;
font-size: 18px;
color: #FFFF00;
font-weight: bolder;
text-decoration: underline;
text-indent: 10pt;
text-align: left;
line-height: 30px;
}
.body {
background-color: #000066;
width: 680px;
margin: 0px;
text-align: center;
margin: 0px;
font-family: Georgia;
font-size: 12px;
font-color: #FFFF00;
font-weight: normal;
}
-->
</style>
</head>
<body bgcolor="#CCCCCC" style="text-align:center;color:#FFFF00;">
<div class="big">
<div class="haupt"><img src="../../../../bilder/spacetrans.gif" height="5px"></div>
<div class="haupt"><img src="../../../../bilder/spacer.jpg" height="3" width="680px"></div>
<div class="headline"> <span>Lasst uns doch 'ne Nachricht da!</span></div>
<div class="haupt"><img src="../../../../bilder/spacetrans.gif" height="5px"></div>
<div class="body" style="min-height:1100px;">
<div style="height:5px"> </div>
<div style="float:left;width:60px;height:60px;margin-left:20px;">
<img src="../../../../bilder/nuss1.jpg"></div>
<div style="float:right;width:60px;height:60px;margin-right:20px;">
<img src="../../../../bilder/nuss2.jpg"></div>
<div style="margin:0px auto;width:500px;height:700px;background-color:#000066;">
<span>{main_content}</br></span>
</div>
<div style="float:left;width:60px;height:60px;margin-left:20px;">
<img src="../../../../bilder/nuss1.jpg"></div>
<div style="float:right;width:60px;height:60px;margin-right:20px;">
<img src="../../../../bilder/nuss2.jpg"></div>
</div>
</div>
</body>
</html>
Hi, ich habe mir deine Seite in Firefox und IE7 angeschaut und alles funktioniert, so wie du dir das gedacht hast, es ist sehr schön geworden, übersichtlich und gut lesbar. http://meineipadresse.de/netrenderer/index.php zeigt mir deine Seite in verschiedenen Versionen des IE und da scheint es auch in Ordnung.
Gruß Susanne