✔ rechte Spalte im Layout immer bis Seitenende

Status
Nicht offen für weitere Antworten.
K

khaoz

Grünschnabel
Moin moin,

Und zwar hab ich folgendes Problem:
Ich hab für ein Info Projekt und gleichzeitig für mein CS:S Team eine Website erstellt. Hier ist der Link ->klick<-.

Ich möchte aber, dass bei dem zweispaltigen Layout nun die rechte Spalte samt Hintergrund immer bis Seitenende läuft.
Kann mir da jemand behilflich sein?

Hier noch der Quellcode der .css-Datei:

Code: 
* {
margin: 0;
padding: 0;
}
html, body {
 height: 100%;
}
body {
 background: #2F2F2F;
 font-size: 100.01%;
 font-family: Helvetica,Arial,sans-serif;
 min-width: 40em;
}
div#gesamt {
 display: block;
 margin:0 auto;
 width: 600px;
 background:#FFFFFF;
 min-height: 100%;
}
div#topnavi {
 height: 25px;
 width: 600px;
 background: url(http://www.virtualaction.net/~chris/fivedwarfs/images/navi.jpg) no-repeat;
}
a img {
 border: none;
}
div#head {
 width: 600px;
 height: 130px;
 background:url(http://www.virtualaction.net/~chris/fivedwarfs/images/head.jpg) no-repeat;
}
div#mainnavi {
 width: 600px;
 height: 32px;
}
div#cut {
 width: 600px;
 height: 35px;
 background:url(http://www.virtualaction.net/~chris/fivedwarfs/images/naviconcut.jpg) no-repeat;
}
div#leftcon {
 padding: 5px 5px 5px 5px;
}
div#rightcon {
 float: right;
 width: 200px;
 padding: 5px 5px 5px 5px;
 min-height: 1%;
 background: url(http://www.virtualaction.net/~chris/fivedwarfs/images/re_back.jpg);
}

Und die .htm Datei

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
         	<link rel="stylesheet" type="text/css" href="http://www.virtualaction.net/~chris/fivedwarfs/styles/general.css" />
    		<title>5DWARFS | A Counter-Strike: Source Team</title>
         <script
language="JavaScript">
<!--
button1= new Image();
button1.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/blog_gray.jpg"
button2= new Image();
button2.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/blog_color.jpg"
button3= new Image();
button3.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/contact_gray.jpg"
button4= new Image();
button4.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/contact_color.jpg"
button5= new Image();
button5.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/news_gray.jpg"
button6= new Image();
button6.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/news_color.jpg"
button7= new Image();
button7.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/roster_gray.jpg"
button8= new Image();
button8.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/roster_color.jpg"
button9= new Image();
button9.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/matches_gray.jpg"
button10= new Image();
button10.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/matches_color.jpg"
button11= new Image();
button11.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/gallery_gray.jpg"
button12= new Image();
button12.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/gallery_color.jpg"
button13= new Image();
button13.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/about_gray.jpg"
button14= new Image();
button14.src = "http://www.virtualaction.net/~chris/fivedwarfs/images/about_color.jpg"
//-->
</script>
	</head>

  	<body>
		<div id="gesamt">
         		<div id="topnavi">
                         <table cellspacing="0">
                         <tr>
                         <td><img src="http://www.virtualaction.net/~chris/fivedwarfs/images/spacer.gif" width="430" height="1" alt=""></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/index.htm"><img src="http://www.virtualaction.net/~chris/fivedwarfs/images/main_color.jpg" width="49" height="25" alt=""></a></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/blog.htm" onmouseover="blog.src='http://www.virtualaction.net/~chris/fivedwarfs/images/blog_color.jpg';" onmouseout="blog.src='http://www.virtualaction.net/~chris/fivedwarfs/images/blog_gray.jpg';"><img src="http://www.virtualaction.net/~chris/fivedwarfs/images/blog_gray.jpg" name="blog" width="54" height="25" alt=""></a></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/contact.htm" onmouseover="contact.src='http://www.virtualaction.net/~chris/fivedwarfs/images/contact_color.jpg';" onmouseout="contact.src='http://www.virtualaction.net/~chris/fivedwarfs/images/contact_gray.jpg';"><img src="http://www.virtualaction.net/~chris/fivedwarfs/images/contact_gray.jpg" name="contact" width="67" height="25" alt=""></a></td>
                         </tr>
                         </table>
                         </div>
                 	<div id="head"></div>
                         <div id="mainnavi">
			<table cellspacing="0">
                         <tr>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/index.htm" onmouseover="news.src='http://www.virtualaction.net/~chris/fivedwarfs/images/news_color.jpg';" onmouseout="news.src='http://www.virtualaction.net/~chris/fivedwarfs/images/news_gray.jpg';"><img name="news" src="http://www.virtualaction.net/~chris/fivedwarfs/images/news_gray.jpg" width="100" height="32" alt=""></a></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/roster.htm" onmouseover="roster.src='http://www.virtualaction.net/~chris/fivedwarfs/images/roster_color.jpg';" onmouseout="roster.src='http://www.virtualaction.net/~chris/fivedwarfs/images/roster_gray.jpg';"><img name="roster" src="http://www.virtualaction.net/~chris/fivedwarfs/images/roster_gray.jpg" width="100" height="32" alt=""></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/matches.htm" onmouseover="matches.src='http://www.virtualaction.net/~chris/fivedwarfs/images/matches_color.jpg';" onmouseout="matches.src='http://www.virtualaction.net/~chris/fivedwarfs/images/matches_gray.jpg';"><img name="matches" src="http://www.virtualaction.net/~chris/fivedwarfs/images/matches_gray.jpg" width="100" height="32" alt=""></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/gallery.htm" onmouseover="gallery.src='http://www.virtualaction.net/~chris/fivedwarfs/images/gallery_color.jpg';" onmouseout="gallery.src='http://www.virtualaction.net/~chris/fivedwarfs/images/gallery_gray.jpg';"><img name="gallery" src="http://www.virtualaction.net/~chris/fivedwarfs/images/gallery_gray.jpg" width="100" height="32" alt=""></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files.htm"><img src="http://www.virtualaction.net/~chris/fivedwarfs/images/files_color.jpg" width="100" height="32" alt=""></td>
                         <td><a href="http://www.virtualaction.net/~chris/fivedwarfs/about.htm" onmouseover="about.src='http://www.virtualaction.net/~chris/fivedwarfs/images/about_color.jpg';" onmouseout="about.src='http://www.virtualaction.net/~chris/fivedwarfs/images/about_gray.jpg';"><img name="about" src="http://www.virtualaction.net/~chris/fivedwarfs/images/about_gray.jpg" width="100" height="32" alt=""></td>
                         </tr>
                         </table>
                         </div>
                         <div id="cut"></div>
                 	<div id="content">
<div id="rightcon">
<img src="http://www.virtualaction.net/~chris/fivedwarfs/images/selection.gif" alt="">
<table cellspacing="0">
<tr><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/cfg.htm">Configs</a></td></tr>
<tr><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/demos.htm">Demos</a></td></tr>
<tr><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/media.htm">Media</a></td></tr>
<tr><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/movies.htm">Movies</a></td></tr>
<tr><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/other.htm">Other</a></td></tr>
<tr><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/utilities.htm">Utilities</a></td></tr>
<tr><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/wallpaper.htm">Wallpaper</a></td></tr>
</table>
  </div>
<div id="leftcon">
<h3>RECENT ADDS</h3>
<table id="downloads" cellspacing="0">
<tr><td>gIRC 5</td><td>~3MB</td><td><a href="http://gamersirc.net/ger/girc/?download=girc500.exe&type=full" title="girc" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>HLSW 1.1.5</td><td>~2MB</td><td><a href="http://hlsw.de/index.php?page=download&category=hlsw&move=showmirrors&id=50" title="hlsw" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>Ventrilo</td><td>~2MB</td><td><a href="http://ventrilo.com/download.php" title="vent" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>TeamSpeak RC2</td><td>~5MB</td><td><a href="ftp://ftp.freenet.de/pub/4players/teamspeak.org/releases/ts2_client_rc2_2032.exe" title="ts" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>ICQ 5.1</td><td>~6MB</td><td><a href="http://www.download.com/3001-2150_4-10174442.html" title="icq" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>Config von pain</td><td>~15KB</td><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/configs/4sure_cfg.zip" title="paincfg" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>ESL (CT) 4sure vs. wtf auf de_dust2</td><td>~8MB</td><td><a href="http://www.esl.eu/eu/css/3on3/ladder/download/2254593/" title="4surevswtf2" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>ESL (T) 4sure vs. wtf auf de_dust2</td><td>~5MB</td><td><a href="http://www.esl.eu/eu/css/3on3/ladder/download/2254715/" title="4surevswtf1" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>ESL (T) pyro vs. wtf auf de_dust2</td><td>~8MB</td><td><a href="http://www.esl.eu/eu/css/3on3/ladder/download/2254623/" title="pyrovswtf" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>ESL (T) khaoz vs. verliert auf de_port</td><td>~11MB</td><td><a href="http://www.esl.eu/eu/css/3on3/ladder/download/2202448/" title="khaozvsvt" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>Config von 4sure</td><td>~4KB</td><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/configs/4sure_cfg.zip" title="4surecfg" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>Config von pyro</td><td>~4KB</td><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/configs/pyro_cfg.zip" title="pyrocfg" onclick="window.open(this.href); return false;">Download</a></td></tr>
<tr><td>Config von khaoz</td><td>~78KB</td><td><a href="http://www.virtualaction.net/~chris/fivedwarfs/files/configs/khaoz_cfg.zip" title="khaozcfg" onclick="window.open(this.href); return false;">Download</a></td></tr>
</table>
  </div>

<br style="clear:right;" />
</div>
</div>
</body>
</html>

Das Ganze hab ich jetzt erstmal auf files.htm angepasst. Die andern Seiten sind nicht zu beachten.

Danke für die Mühe!
 
Zuletzt bearbeitet:
Probier es mal mit diesem Stylesheet:

Code: 
* {
margin: 0;
padding: 0;
}
html, body {
 height: 100%;
}
body {
 background: #2F2F2F;
 font-size: 100.01%;
 font-family: Helvetica,Arial,sans-serif;
 min-width: 40em;
}
div#gesamt {
 display: block;
 margin:0 auto;
 width: 600px;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 background: #fff url(http://www.virtualaction.net/~chris/fivedwarfs/images/re_back.jpg) 100% 0 repeat-y;
}
div#topnavi {
 height: 25px;
 width: 600px;
 background: url(http://www.virtualaction.net/~chris/fivedwarfs/images/navi.jpg) no-repeat;
}
a img {
 border: none;
}
div#head {
 width: 600px;
 height: 130px;
 background:url(http://www.virtualaction.net/~chris/fivedwarfs/images/head.jpg) no-repeat;
}
div#mainnavi {
 width: 600px;
 height: 32px;
}
div#cut {
 width: 600px;
 height: 35px;
 background:url(http://www.virtualaction.net/~chris/fivedwarfs/images/naviconcut.jpg) no-repeat;
}
div#leftcon {
 float: left;
 width: 400px;
}
div#rightcon {
 float: right;
 width: 200px;
}
.clear {
 clear: both;
 font-size: 1px;
}
und füge nach den beiden floatenden Boxen das DIV .clear ein, um wieder den normalen Textfluss im Dokument herzustellen:

Code: 
<div id="content">
    <div id="leftcon">...</div>
    <div id="rightcon">...</div>
    <div class="clear">&nbsp;</div>
</div>
 
hmm dadurch verschiebt sich die rechte Spalte

//edit

jawohlski funktioniert, danke dir wie immer herzlich! :D
 
Zuletzt bearbeitet:
doch doch ist jetzt oben. nur ein problem. wenn man nun auf "about cs:s klickt, geht der hintergrund nicht bis zum ende des inhalts :(
 
Ersetze in dem Dokument
Code: 
<br style="clear:right" />
durch
Code: 
<div class="clear">&nbsp;</div>
Und bitte beachte die Netiquette bzgl. der Groß- und Kleinschreibung, so wie du es in deinem ersten Beitrag unter Beweis gestellt hast.
 
Ja entschuldige.

Ich hab das ganz genauso in den Quellcode kopiert wie du gesagt hast. Allerdings funktioniert das ganze nur im IE7 (zumindest bei mir), denn wenn ich im Firefox schaue, dann ist das ganze nur so lang wie die Ausgangsseite, sprich der Hintergrund geht nur soweit wie die 100% ohne scrollen. Wenn nun jedoch der Inhalt länger ist und man scrollen muss, ist ab dem Punkt wo man scrollt kein Hintergrund mehr. Wie gesagt im IE7 funktionierts mit deiner Variante gut.

->siehe hier
 
Du brauchst mir keinen Screenshot zu zeigen, ich hab's mir nämlich "live" angeschaut, einen Blick in den Quelltext der about.htm geworfen, und dir daraufhin den Lösungsvorschlag gepostet ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück