✔ Seite Verlängern

Philipp- · 2. Juni 2008

Hallo Community,

hab mal wieder das gleiche Problem.
Hab es schon mit nem Clearfix probiert, t iwie net, und sonst alles mögliche probiert,
bekomm es einfach nicht hin, damit sich die Seite verlängert und der Footer nach unten geschoben wird, und net der Inhalt über den Footer ragt.

Ich hoff ihr könnt mir helfen.

So hier erstmal der Link, dann könnt ihr euch es mal anschauen:

http://jaypag.de/kunden/etho/

So und nun der Html Quellcode:

HTML:

<!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>Server-Etho.com</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
</head>

<body>
<div id="page">
	<div id="top">
		<span style="float:left; padding-left:24px; padding-top:1px;"><img src="images/icon/contact.png" alt="Contact" /> <a href="#">Kontact</a></span>
		<span style="float:right; padding-top:14px; padding-right:35px;"><a href="#"><img src="images/adminLogin.png" alt="Admin Login" border="0" /></a></span>	
	</div>
	<div class="content clearfix">
		<div id="leftSidebar">
			<ul>
				<li class="top">Men&uuml;</li>
				<li><a href="#">Startseite</a></li>
				<li><a href="#">&Uuml;ber Uns</a></li>
				<li><a href="#">Die Server</a></li>
				<li><a href="#">Preisliste</a></li>
				<li><a href="#">Bestellen</a></li>
				<li class="top">Sonstiges</li>
				<li><a href="#">Rabatte</a></li>
				<li><a href="#">Clanpakete</a></li>
				<li><a href="#">Sponsoring</a></li>
				<li><a href="#">Kontakt</a></li>
				<li><a href="#">Support</a></li>
				<li class="top">Partner</li>
				<li class="banner"><img src="images/banner.png" alt="&nbsp;" border"0" /></li>
				<li class="banner"><img src="images/banner.png" alt="&nbsp;" border"0" /></li>
				<li class="banner2"><img src="images/banner2.png" alt="&nbsp;" border"0" /></li>
			</ul>
		</div>
		<div id="rightSidebar">
			<div id="header">
				<div id="logo"></div>
			</div>
			<div id="slogan">NoLIMIT - POWER SERVER</div>
			<div id="rightSidebarLeft">
				<div class="contentBox">
					<ul>
						<li class="cBoxTop"></li>
						<li class="cBoxMiddle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor  sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum  iriure dolor in hendrerit in vulputate velit esse molestie consequat,  vel illum dolore eu feugiat nulla facilisis at vero et accumsan et  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta  nobis eleifend option congue nihil imperdiet doming id quod mazim  placerat facer possim assum.</li>
					</ul>
			  </div><br />
			  <div class="contentBox">
					<ul>
						<li class="cBoxTop"></li>
						<li class="cBoxMiddle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor  sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum  iriure dolor in hendrerit in vulputate velit esse molestie consequat,  vel illum dolore eu feugiat nulla facilisis at vero et accumsan et  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta  nobis eleifend option congue nihil imperdiet doming id quod mazim  placerat facer possim assum.</li>
					</ul>
			  </div><br />
			</div>
			<div id="rightSidebarRight" class="clearfix">
				<div class="contentBoxRight clearfix">
					<ul>
						<li class="cBoxTopRight"></li>
						<li class="cBoxMiddleRight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor  sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum  iriure dolor in hendrerit in vulputate velit esse molestie consequat,  vel illum dolore eu feugiat nulla facilisis at vero et accumsan et  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta  nobis eleifend option congue nihil imperdiet doming id quod mazim  placerat facer possim assum.</li>
					</ul>
			  </div><br />
			</div>
		</div>
	</div>
	<div id="footer"></div>
</div>
</body>
</html>

Und nun der CSS Code:

Code:

/* Server-Etho Stylesheet */

body {
	padding:0;
	margin:0;
	background-color:#EEEEEE;
	}
	
a {
	outline:none;
	}
	
#page {
	width:1002px;
	padding:0;
	margin:0;
	}
	
#top {
	background-color:#373737;
	height:49px;
	width:100%;
	border-bottom:1px solid #BFBFBF;
	line-height:49px;
	}
	
#top a {
	font-family:Verdana;
	font-size:11px;
	color:#fff;
	text-decoration:none;
	}
	
#leftSidebar {
	width:199px;
	float:left;
	border-right:4px solid #373737;
	border-bottom:4px solid #373737;
	left:0;
	position:absolute;
	}
	
#leftSidebar ul li {
	list-style:none;
	padding:0;
	margin:0;
	border-bottom:1px solid #EEEEEE;
	background-color:#FFFFFF;
	height:29px;
	}
	
#leftSidebar ul li a {
	text-decoration:none;
	width:189px;
	height:29px;
	display:block;
	line-height:29px;
	border-left:11px solid #637484;
	padding-left:10px;
	color:#373737;
	font-family:"Times New Roman";
	font-size:20px;
	fon-weight:bold;
	}
	
#leftSidebar ul li a:hover {
	text-decoration:none;
	width:189px;
	height:29px;
	display:block;
	line-height:29px;
	border-left:11px solid #AB9C7F;
	padding-left:10px;
	color:#373737;
	}
	
#leftSidebar ul {
	padding:0;
	margin:0;
	}
	
#leftSidebar ul .top {
	height:29px;
	width:189px;
	background-color:#373737;
	font-family:"Trebuchet MS";
	font-size:14px;
	color:#B1B1B1;
	font-weight:bold;
	line-height:29px;
	padding-left:10px;
	}
	
#leftSidebar ul .banner {
	height:auto;
	}

#leftSidebar ul .banner2 {
	height:251px;
	}
	
#rightSidebar {
	width:804px;
	float:right;
	}
	
#rightSidebarLeft {
	float:left;
	width:537px;
	}
	
.contentBox {
	width:495px;
	background-color:#FFFFFF;
	font-family:"Trebuchet MS";
	font-size:12px;
	color:#637486;
	margin:10px 0 0 17px;
	}
	
.contentBox ul {
	margin:0;
	padding:0;
	}
	
.contentBox ul li {
	margin:0;
	padding:0;
	list-style:none;
	}
	
.contentBox ul .cBoxTop {
	background-image:url(../images/leftBoxTop.png);
	background-repeat:no-repeat;
	width:495px;
	height:28px;
	}
	
.contentBox ul .cBoxMiddle {
	width:475px;
	padding:10px;
	}
	
#rightSidebarRight {
	float:right;
	width:260px;
	height:auto !important;
	}
	
.contentBoxRight {
	width:196px;
	height:28px;
	background-color:#FFFFFF !important;
	font-family:"Trebuchet MS";
	font-size:12px;
	color:#637486;
	margin:10px 0 0 17px;
	}
	
.contentBoxRight ul {
	margin:0;
	padding:0;
	}
	
.contentBoxRight ul li {
	margin:0;
	padding:0;
	list-style:none;
	}	
	
.contentBoxRight ul .cBoxTopRight {
	background-image:url(../images/rightBoxTop.png);
	background-repeat:no-repeat;
	width:196px;
	height:28px;
	}
	
.contentBoxRight ul .cBoxMiddleRight {
	width:176px;
	padding:10px;
	background-color:#fff;
	}

	
#header {
	height:225px;
	width:799px;
	border-top:7px solid #56A7DC;
	border-bottom:7px solid #56A7DC;
	}
	
#logo {
	background-image:url(../images/logo.png);
	background-repeat:no-repeat;
	height:225px;
	width:797px;
	border:2px solid #5B5B5B;
	border-left:0px;
	}
	
#slogan {
	height:21px;
	width:793px;
	background-color:#373737;
	line-height:21px;
	text-align:right;
	font-family:Tahoma;
	font-size:11px;
	color:#fff;
	padding-right:6px;
	}

.content {
	width:1002px;
	height:auto !important;
	}
	
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

.clearfix {
	display: inline-block;
	}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display: block;
	}
/* End hide from IE-mac */

#footer {
	height:48px;
	width:1002px;
	background-color:#373737;
	clear:both;
	}

Würde mich echt über eure Hilfe freuen.

Mit freundlichen Grüßen
Philipp Bosshart

Maik · 3. Juni 2008

Hi,

der Grund, dass der Footer nicht nach unten wandert, sondern stattdessen vom Inhalt der rechten Spalte überdeckt wird, ist die Höhenangabe für die Klasse .contentBoxRight, die von den standardkonformen (nicht-IE-)Browsern als fixe Höhe betrachtet wird:

Code:

.contentBoxRight {
        width:196px;
        height:28px;
        background-color:#FFFFFF !important;
        font-family:"Trebuchet MS";
        font-size:12px;
        color:#637486;
        margin:10px 0 0 17px;
        }

Maik · 3. Juni 2008

PhilippBosshart hat gesagt.:
Würde mich echt über eure Hilfe freuen.

Das nächste Mal würde ich mich über eine Antwort deinerseits freuen, wenn du schon meinen Vorschlag übernimmst.

Ebenso kannst du dann auch den Status des Thermas auf "erledigt" setzen, was ich jetzt hiermit in deinem Namen übernehme.

Vielen Dank!

Philipp- · 3. Juni 2008

Hey Maik,

dies wollte ich eigentlich machen, jedoch hab ich nur kurz in der Mittagspause reingeschaut und das kurz getestet. Danach musste ich sofort wieder in die Schule.

Ich bedanke mich recht Herzlich bei dir.
Freut mich dass man hier so fix Hilfe bekommt.

Mit freundlichen Grüßen
Philipp

✔ Seite Verlängern

Philipp-

Maik

Maik

Philipp-

Neue Beiträge