✔ menü aufklappen footer nach unten verschieben

M

MathiasBauer

Grünschnabel
Hallo,

wenn ich mein Menü unter dem Menüpunkt "Ergebnisse & Tabellen" ausklappe, überlappt es mit dem Footer (nur im Firefox, im IE geht's). Wie kann ich den Footer automatisch und dynamisch nach unten verschieben lassen.

Tut mir Leid aber es ist schon spät und ich finde den Fehler einfach nicht ...

Der Link zur Seite lautet:

http://www.tischtennis-gross-zimmern.de

Der Inhalt meiner template.css ist:

Code: 
body {
background-color: #d8d8d8;
font: normal 85% sans-serif;
}

div.rtop, div.rbottom{
	display:block;
	background: #D8D8D8
}

div.rtop div, div.rbottom div{
	display:block;
	height: 1px;
	overflow: hidden;
	background: #003366
}

div.r1{
	margin: 0 5px
}

div.r2{
	margin: 0 3px
}

div.r3{
	margin: 0 2px
}

div.rtop div.r4, div.rbottom div.r4{
	margin: 0 1px; height: 2px
}

#left {
	width: 180px;
	float: left;
	padding: 0;
	color: #ffffff;
}

#container {
	width: 950px;
    margin:auto auto;
	padding: 0;
	border: solid 1px #d8d8d8;
}

h1 {
	margin: 0;
	margin-bottom: 25px;
	padding: 8px;
	background-color: #003366;
	color: #ffffff;
	border-bottom: solid 5px #009900;
}




.box {
padding: 8px;
color: #ffffff;
background-color: #003366;
}
.box h3 {
margin: 0;
text-align: center;
}
.menu {
margin: 0;
padding: 0;
background-color: #ffffcc;
}

.menu li {
list-style: none;
font-size:small;
font-weight:bold;
border-bottom: solid 1px #666666;
}

.menu li.active {
background-color: #ffff99;
}

.menu a {
margin: 0;
padding: 0px;
padding-left:5px;
display: block;
color: #0000ff;
text-decoration: none;
}

.menu a:hover {
background-color: #ffff99;
color: #003366;
}

.module li {
list-style: none;
font-size:small;
font-weight:bold;
}
.menu ul{
margin: 0;
padding: 0;
text-indent:8px;
background-color: #ffffcc;
}

.menu ul li a:hover {
background-color: #ffff99;
color: #003366;
height:15px;
border-bottom: solid 0px;
}
.menu ul li.active {
background-color: #ffff99;
height:15px;
border-bottom: solid 0px;
z-index:2;

}
.menu ul li {
background-color: #ffffcc;
height:15px;
font-size:smaller;
border-bottom: solid 0px;

}


fieldset {
	border: 0px;
	padding-left: 0px;
}

.password_css a{
	color:#ffffff;
	text-decoration:none;
	font-size:smaller;
}

.password_css a:visited{
	color:#ffffff;
	text-decoration:none;
	font-size:smaller;
}

.password_css a:link{
	color:#ffffff;
	text-decoration:none;
	font-size:smaller;
}

input{
width:88px;
height:13px;
}

.button{
width:70px;
font-size:smaller;
height:20px;
margin-top:2px;
text-align:center;
text-valign:middle;


}


div.rtop2, div.rbottom2{display:block; background: #D8D8D8;}
div.rtop2 div, div.rbottom2 div{display:block; height: 1px; overflow: hidden; background: #ffffff;}
div.r1a{margin: 0 5px}
div.r2a{margin: 0 3px}
div.r3a{margin: 0 2px}
div.rtop div.r4a, div.rbottom2 div.r4a{margin: 0 1px; height: 2px}

#content {margin-left: 195px; margin-right: 195px; background-color: #ffffff; border: solid 1px #d8d8d8;}
#contentx {margin-left: 195px; margin-right: 195px; background-color: #ffffff; border: solid 1px #d8d8d8;}

#insidex {margin: 0; padding: 0px; height:430px; overflow:auto; border: solid 1px #ffffff; background-color: #ffffff;}


/* exploder V6 only */
* html #insidex {
 overflow-y: auto;
 overflow-x: auto;
 position:relative;
}

/* exploder V7 only */
*+html #insidex {
 overflow-y: auto;
 overflow-x: auto;
 position:relative;
}


#insidex h3 {margin: 0px;padding-top:0px;}
#insidex p {margin: 0px;}
#insidex h3 {margin: 0; border: solid 1px #ffffff; color: #003366;}


#footer {
  width: 950px;
  margin-top:25px;
  padding-bottom: 0px;
  border-top: solid 5px #009900;
}

#footer h5 {
margin: 0;
padding: 5px;
background-color: #003366;
color: #ffffff;
}

#right {float: right; width: 180px; padding: 0;}

.adminform{
background-color: #FFFFFF;
width:320px;

}

#editor-xtd-buttons{
width:300px;
background-color: #FFFFFF;

}

#upload input{
height:20px;
}

#passwortAendern input{
height:20px;
width:200px;
}

#file-upload input{
height:20px;
}

#file-upload-submit input{
height:20px;
}

#upload-clear span{
height:20px;
}

#uploadForm input{
height:20px;
}

#email {
height:20px;
width:200px;
}

#token{
height:20px;
width:200px;
}

#password1{
height:20px;
width:200px;
}


#password2{
height:20px;
width:200px;
}

username{
height:20px;
width:200px;
}


password{
height:20px;
width:200px;
}

#com-form-login-username input{
height:20px;
width:200px;
}

#com-form-login-password input{
height:20px;
width:200px;
}

.input{
padding-top:5px;
margin-top:5px;
}

.contentpane sforums th{
background-color: #003366;

}

.contentheading{
font-weight:bold;
}

.small2{
color:#999999;
font-size:x-small;
}

.createdate{
color:#999999;
font-size:x-small;
}

.modifydate{
color:#999999;
font-size:x-small;
}

.buttonheading img{
border-width:0px;
}
 
Hi,

du hast es lediglich versäumt, die Floatumgebung wieder zu "clearen".

Code: 
#footer {
  width: 950px;
  margin-top:25px;
  padding-bottom: 0px;
  border-top: solid 5px #009900;
  clear: both;
}


Siehe hierzu auch: Webmaster-FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Achja, hier fehlt der Punkt (Klassenbezeichner) oder das #-Zeichen (ID-Bezeichner) vor den Selektoren:

Code: 
username{
height:20px;
width:200px;
}


password{
height:20px;
width:200px;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück