✔ Design Problem <table>

EuroCent · 7. Dezember 2008

Habe folgendes Problem

Ich möchte das die linke sowie Rechte Säule *siehe Anhang* 100% des Browsers einnehmen je nachdem wieviel Text mittig steht sollen sich die Säulen verlängern

Hab bisher schon einiges versucht aber entweder wird alles 100% dann ist aber alles nach unten versetzt oder es wird solang wie Text da ist was unsauber aussieht

So nun den ich hoffe man kann mir helfen...

Hab von HTML und CSS recht gute Erfahrung allerdings weiss ich nicht so recht wie ich das bewerkstelligen soll damit nur die Säulen 100% werden...

Hier der Quellcode meiner Test.html:

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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	margin: 0;
	font-family: Tahoma, Verdana, Arial, serif;
	background-color: #1e3745;
}

.table {
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
}

.td {
background-color: #FFFFFF;
}

.saeule_l {
	background-image: url(saeule_l.png);
	background-repeat: repeat-y;
	height: 100%;
}

.saeule_r {

}

.header {
	background-image: url(header_bg.png);
	background-repeat: repeat-x;
}

.uhrzeit {
	margin-bottom: 10px;
	margin-left: 10px;
	font-family: Verdana;
	font-size: 18px;
	font-weight: bold;
	color: #101d24;
}
</style>
</head>

<body>
<!-- Mainpage out -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top">
<!-- Mainpage in -->
<table cellpadding="0" cellspacing="0" class="table" border="0" width="75%" align="center">
<tr>
<td align="left" valign="top" width="46" class="saeule_l">&nbsp;</td>
<td align="center" valign="top">
<!-- Page in -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top">
<!-- Header -->
<table cellpadding="0" cellspacing="0" width="100%" align="center" border="0">
<tr>
<td align="right" class="header">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="13%" align="left" valign="bottom">
<table cellpadding="0" cellspacing="0" class="uhrzeit" width="100%" border="0">
<tr>
<td>31.12.2008</td>
</tr>
<tr>
<td>23:59.59</td>
</tr>
</table>
</td>
<td width="87%" align="right" valign="top"><img src="headerlogo.png" border="0" /></td>
</tr>
</table>
</td>
</tr>
</table><br />
<!-- navi -->
<table>
<tr>
<td>Navi</td>
</tr>
</table><br />
<!-- Content -->
<table>
<tr>
<td>Content</td>
</tr>
</table><br />
</td>
</tr>
<tr valign="bottom">
<td>Footer</td>
</tr>
</table>
</td>
<td align="right" valign="top" width="46" class="saeule_l">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

PS: Falls es noch einfacher geht "DIV" dann wäre ich euch sehr dankbar wenn ihr mir da ein Beispiel geben könntet

So nun den hier der Anhang meines Designs

Maik · 7. Dezember 2008

Lenox hat gesagt.:
PS: Falls es noch einfacher geht "DIV" dann wäre ich euch sehr dankbar wenn ihr mir da ein Beispiel geben könntet

Hi,

studier mal mein Tutorial CSS-Layout mit 100%-Höhe, und lies dir den Artikel AnyColumnLongest durch, der weitere Lösungsansätze für "Equal-Height-Columns" bereithält, denn Tabellen dienen semantisch nicht als "Gestaltungswerkzeug" einer Website.

mfg Maik

EuroCent · 7. Dezember 2008

Sehr schön danke für den Hinweis ^^

Jetzt hab ich allerdings das Problem das ich gern den Footer immer am ende hätte *siehe anhang oben*

Meine Säulen werden nun dank deines Hinweises Rechts wie Links 100% angezeigt so wie es sein soll

Aber der Footer hängt am Content Fest -.- was ich allerdings nicht schön finde sondern ich möchte das der Footer wie auf dem Bild dort unten immer bleibt

Wie bewerkstellige ich das?

Hab aus dem Tutorial den Code entnommen und verändert um das Resultat so zu haben ^^

Hier der HTML Code

HTML:

<?xml version="1.0" encoding="utf-8"?>
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font: bold 1em verdana, sans-serif;
}

body {
	text-align: center;
	background-color: #1e3745;
}


div {
	text-align: left;
}

html, body {
	height: 100%;
}

div#mainpage {
	position: relative;
	margin: 0 auto;
	width: 800px;
	height: 100%;
	background-image: url(3cols.png);
	background-repeat: repeat-y;
}

div#header {
	height: 80px;
	background: #ccc;
	border-bottom: 1px solid #b8b8b8;
}

div#saeule_l {
	width: 46px;
	float: left;
	height: 100%;
	background-color: #006633;
	background-image: url(saeule_l.png);
	background-repeat: repeat-y;
}

div#saeule_r {
	width: 46px;
	float: right;
	height: 100%;
	background-color: #006633;
	background-image: url(saeule_l.png);
	background-repeat: repeat-y;
}

div#content {
	width: 708px;
	float: left;
	height: 100%;
}

div#content_in {
	width: 100%;
	float: left;
}

div#footer {
	width: 100%;
	text-align:left;
}

div#clear {
	width: 100%;
}

div#clear1 {
	width: 100%;
}

div#clear2 {
	width: 100%;
}
</style>
</head>

<body>
<div id="mainpage">
  <div id="saeule_l">&nbsp;</div>
  
  <div id="content">
  	<div id="header">Header</div>
    <div id="clear">&nbsp;</div>
    <div id="content_in">Content</div>
    <div id="clear1">&nbsp;</div>
    <div id="footer">Footer</div>
    <div id="clear2">&nbsp;</div>
  </div>
  
  <div id="saeule_r">&nbsp;</div>
</div>
</body>
</html>

Musste clear noch zahlen geben da es sonst nich Valide wäre k.a. wieso -.-

Hoffe das es für den Footer und dem clear auch eine entsprechende Lösung gibt...

MfG

Lenox

PS: Danke nochmals für das Tutorial... muss sagen echt spitze und hilft mir sehr gut weiter

Maik · 7. Dezember 2008

Lenox hat gesagt.:
Jetzt hab ich allerdings das Problem das ich gern den Footer immer am ende hätte *siehe anhang oben*

Aber der Footer hängt am Content Fest -.- was ich allerdings nicht schön finde sondern ich möchte das der Footer wie auf dem Bild dort unten immer bleibt

Wie bewerkstellige ich das?

PS: Danke nochmals für das Tutorial... muss sagen echt spitze und hilft mir sehr gut weiter

Hast du dir im Tutorial nicht das zweite Beispiel "Modell mit Header und Footer" (im ZIP-Attachment ist das die Vorlage "3cols_header_footer.htm") näher angeschaut, das "technisch" deiner Vorstellung entspricht, den Footer am unteren Fensterrand zu positionieren?

mfg Maik

EuroCent · 7. Dezember 2008

ahhh.... Danke dir nochmals ^^

Hab ich wohl übersehn

Somit ist meine Frage hierzu erledigt dafür ein dickes Dankschön an dich @Maik

EuroCent · 18. Dezember 2008

Habe folgendes Problem *siehe Anhang*

Meine Säulen verlängern sich leider nicht automatisch -.-

Woran liegt es?

Ich hab derzeit alles probiert und ich komme absolut nicht weiter.
Allerdings hab ich fest gestellt das es am height: 100%; beim mainpage liegt nur entfern ich es werden die Säulen nur so lang wie   eine font-size hat

Wie kann ich dies entgegen wirken damit meine Säulen egal wie lang meine Seite wird dementsprechend auch immer solang mit gestreckt wird?

hier mal der CSS Code: => Könnte einwenig ziemlich lang sein ^^

HTML:

* {
	margin: 0;
	padding: 0;
	font: normal 1em verdana, sans-serif;
}

body {
	text-align: center;
	background-color: #1e3745;
	cursor: url(./pfeil.cur), pointer;
}


div {
	text-align: left;
}

html, body {
	height: 100%;
}

div#mainpage {
	position: relative;
	margin: 0 auto;
	width: 663px;
	height: 100%;
}

div#header {
	height: 96px;
	background-color: #1e3745;
	background-image: url(header_bg.png);
	background-repeat: repeat-x;
	text-align: right;
}

div#saeule_l { /* Säule Links */
	width: 46px;
	float: left;
	background-color: #1E3745;
	background-image: url(saeule_l.png);
	background-repeat: repeat-y;
	height: 100%;
}

div#saeule_r { /*Säule Rechts */
	width: 46px;
	float: right;
	height: 100%;
	background-color: #1E3745;
	background-image: url(saeule_r.png);
	background-repeat: repeat-y;
}

div#content {
	width: 571px;
	float: left;
	height: 100%;
	background-color: #1E3745;
}

div#content_in {
	width: 100%;
	float: left;
	background-color: #1E3745;
}

div#navi {
	width: 100%;
	float: left;
	background-color: #1E3745;
}

div#footerBox {
	width: 569px;
	bottom: 19px;
	background-color:#1E3745;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 24px;
	border: 1px solid #000;
}

div#footer {
	width: 569px;
	height: 24px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	vertical-align: middle;
	display: table-cell;
	font-weight: bold;
}

div#footer a:link, div#footer a:visited, div#footer a:hover, div#footer a:active {
	cursor: url(./pointer.cur), pointer;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	text-decoration: none;
	font-weight: bold;
}

div#clear_footer {
	position: absolute;
	width: 571px;
	bottom: 0px;
	clear: both;
	left: 46px;
	background-color:#1E3745;
}

div.clear {
	width: 100%;
	background-color: #1E3745;
}

div#navi ul {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

div#navi li {
	list-style-type: none;
	float: left;
	padding-left: 9px;
}

div#navi ul li.button {
	height: 26px;
	width: 85px;
}

div#navi ul li a {
	border: 0;
	text-decoration: none;
}

div#navi a {
	cursor: url(./pointer.cur), pointer;
}

div#Uhrzeit {
	width: 150px;
	float: left;
	margin-top: 45px;
	margin-left: 5px;
}

div#Uhrzeit ul {
	width: 150px;
}

div#Uhrzeit li {
	list-style-image: url(time.png);
	list-style-position: inside;
	list-style-type: none;
}

span.date {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #101d24;
}

span.time {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #5795b7;
}

div#footer a:link, div#footer a:visited, div#footer a:hover, div#footer a:active {
	cursor: url(./pointer.cur), pointer;
}

div#titleBox {
	width: 569px;
	background-color:#1E3745;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 24px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	border: 1px solid #000000;
}

div#title {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	height: 24px;
	width: 569px;
}

div#left   {
	float: left;
	height: 41px;
	width: 47px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: center;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #000;
	border-left-color: #000;
}

div#center {
	float: left;
	height: 41px;
	width: 319px;
	font-family: Tahoma;
	font-size: 12px;
	text-align: left;
	background-color: #1E3745;
	background-image: url(tablea.png);
	background-repeat: no-repeat;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	vertical-align: middle;
	display: table-cell;
}

div#right {
	float: left;
	height: 41px;
	width: 201px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #000;
	border-bottom-color: #000;
	background-image: url(tableb.png);
	background-repeat: no-repeat;
	text-align: center;
}

div#Desc {
	font-size: 10px;
	font-weight: normal;
	padding-left: 15px;
}

div#center a:link, div#center a:visited {
	color: #5795b7;
	text-decoration:none;
	font-family: Tahoma;
	font-size: 12px;
	cursor: url(./pointer.cur), pointer;
	padding-left: 15px;
}

div#center a:hover, div#center a:active {
	color: #101d24;
	text-decoration:none;
	font-family: Tahoma;
	font-size: 12px;
	cursor: url(./pointer.cur), pointer;
	padding-left: 15px;
}

div#content_end {
	height: 8px;
	background-image: url(content_end.png);
	background-repeat: repeat-x;
	width: 569px;
	clear: left;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}

div#newsBox {
	width: 569px;
	background-color:#1E3745;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 24px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

div#news {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	height: 24px;
	width: 569px;
}

div#ktitleBox {
	text-align: left;
	height: 41px;
	width: 319px;
}

div#ktitle {
	text-align: left;
	vertical-align: middle;
	display: table-cell;
	height: 41px;
	width: 319px;
	font-weight: bold;
}

div#buttonBox {
	text-align: center;
	height: 41px;
	width: 201px;
}

div#button {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	height: 41px;
	width: 201px;
}

div#button ul {
	margin: 0px;
	padding: 0px;
	width: 100%;
}

div#button li {
	list-style-type: none;
	float: left;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	padding-left: 10px;
}

div#button a:link, div#button a:visited, div#button a:hover, div#button a:active {
	cursor: url(./pointer.cur), pointer;
}

div#lostitleBox {
	width: 569px;
	background-color:#1E3745;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 24px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

div#lostitle {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	height: 24px;
	width: 569px;
	font-weight: bold;
}

div#logotrans {
	position: absolute;
	left: 437px;
	top: 5px;
}

div#logotrans img a:link, a:visited, a:hover, a:active {
	cursor: url(./pointer.cur), pointer;
}

div#content_news {
	width: 100%;
	float: left;
	background-color: #1E3745;
}

div#error {
	text-align: center;
	width: 559px;
	height: 50px;
	clear: left;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	background-image: url(message_box.png);
	background-repeat: no-repeat;
	background-color: #294b5e;
	vertical-align: middle;
	display: table-cell;
	color: #770000;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}

div#error_lang {
	text-align: center;
	vertical-align: middle;
	height: 24px;
	width: 569px;
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #770000;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	border: 1px solid #000;
	display: table-cell;
}

div#losnaviBox {
	width: 569px;
	background-color:#1E3745;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 24px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}

div#losnavi {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	height: 24px;
	width: 569px;
}

#losnaviBox a:link {
	color: #101D24;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: normal;
	cursor: url(./pointer.cur), pointer;
}

#losnaviBox a:visited {
	color: #101D24;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: normal;
	cursor: url(./pointer.cur), pointer;
}

#losnaviBox a:hover {
	color: #101D24;
	text-decoration: underline;
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
	cursor: url(./pointer.cur), pointer;
}

#losnaviBox a:focus {
	color: #101D24;
	text-decoration: underline;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	cursor: url(./pointer.cur), pointer;
}

#losnaviBox a:active {
	color: #101D24;
	text-decoration: underline;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	cursor: url(./pointer.cur), pointer;
}

#searchBox {
	float: right;
	width: 220px;
	position: absolute;
	left: 391px;
	top: 48px;
	padding: 2px;
	text-align: left;
	font-family: Tahoma;
	font-size: 12px;
	cursor: url(./pfeil.cur), auto;
}

#search_form {
	float: right;
	cursor: url(./pfeil.cur), auto;
}

#search_form div {
	display: inline;
	cursor: url(./pfeil.cur), auto;
}
.search_send {
	border: 1px solid #000;
	background-color: #2D5469;
	font-family: Tahoma;
	font-size: 11px;
	clear: both;
	color: #101D24;
	cursor: url(./pointer.cur), pointer;
	font-weight: bold;

}
#searchstring {
	font-family: Tahoma;
	font-size: 12px;
	border: 1px solid #000;
	background-color: #2D5469;
	color: #101D24;
}
#searchLabel {
	color: #101D24;
	display: block;
	font-weight: bold;
	cursor: url(./pfeil.cur), auto;
	padding-bottom: 2px;
	font-family: Tahoma;
	font-size: 12px;
}
.test {
	background-color: #FFFFFF;
}

div#errorSearchBox {
	text-align: center;
	width: 559px;
	clear: left;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	background-image: url(message_box.png);
	background-repeat: no-repeat;
	background-color: #294b5e;
	color: #5795b7;
	border: 1px solid #000;
}

div#errorSearch {
	text-align: left;
	width: 559px;
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #5795b7;
}

div#errorSearch a:link, div#errorSearch a:visited {
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #5795b7;
}

div#errorSearch a:hover, div#errorSearch a:active {
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #101D24;
}

.searchstring {
	font-family: Tahoma;
	font-size: 12px;
	color: #101D24;
}

hoffe man kann mir helfen bzw. eventuell ein Beispiel anhängen wie es zu realisieren wäre.

Ich hab mich jetzt so schön in DIV eingearbeitet das ich ungern auf Table zurück greifen möchte nur damit die Säulen Links wie Rechts immer mit verlängert werden

MfG

Lenox

PS: Hier der HTML Code

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="Author" content="L&ouml;sung-DB.de" />
<meta name="Valid" content="Firefox" />
<meta name="NotValid" content="Internet Explorer" />
<meta name="keywords" lang="en" content="Solutions, solutions, games, computer, console, computers, games, xbox, xbox360, ps, PSX, ps2, ps3, psp, etc." />
<meta name="keywords" lang="de" content="Komplettl&ouml;sungen, L&ouml;sungen, Spiele, PC, Konsole, Computer, Games, xbox, xbox360,ps, psx, ps2, ps3, psp, etc." />
<title>L&ouml;sung-DB | Das Portal der Komplettl&ouml;sungen</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style_news.css" rel="stylesheet" type="text/css" />
<link href="community.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<link href="style_news_ie.css" rel="stylesheet" type="text/css" />
<link href="community_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

//Uhrzeit
var Serverzeit = new Date(2008, 12, 18, 1, 57, 25);

function UhrzeitAnzeigen() {
if(!document.all && !document.getElementById) {
return;
}

var Stunden = Serverzeit.getHours();
var Minuten = Serverzeit.getMinutes();
var Sekunden = Serverzeit.getSeconds();
Serverzeit.setSeconds(Sekunden+1);

if(Stunden <= 9) {
Stunden = "0" + Stunden;
}

if(Minuten <= 9) {
Minuten = "0" + Minuten;
}

if(Sekunden <= 9) {
Sekunden = "0" + Sekunden;
}

Uhrzeitanzeige = Stunden + ":" + Minuten + ":" + Sekunden;

if(document.getElementById) {
document.getElementById("Uhr").innerHTML = Uhrzeitanzeige
}
else if(document.all) {
Uhrzeit.innerHTML = Uhrzeitanzeige;
}

setTimeout("UhrzeitAnzeigen()", 1000);
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="UhrzeitAnzeigen();MM_preloadImages('top_start_hover.png','top_loesung_hover.png','top_community_hover.png','top_contact_hover.png','top_imprint_hover.png','top_send_hover.png','top_lesen_hover.png','top_download_hover.png')">
<script type="text/javascript" src="js/wz_tooltip.js"></script>
<div id="mainpage">
  <div id="saeule_l">&nbsp;</div>
  <div id="content">
  	<div id="header">
        <div id="Uhrzeit">
    	<ul>

        	<li><span class="date">18.12.2008</span></li>
            <li><span id="Uhr" class="time"><noscript>01:57</noscript></span></li>
        </ul>
    </div>
    <div id="searchBox">
    	<div id="search">
        	<form name="search_form" id="search_form" action="index.php?page=search" method="post">
            	<div>

            	<label id="searchLabel">Suche Komplettl&ouml;sung...</label>
                <input name="searchstring" type="text" id="searchstring" onmouseover="Tip('Geben Sie ihren Suchbegriff ein!')" onmouseout="UnTip()" />
            	<input name="searchsend" type="submit" class="search_send" id="searchsend" value="Suchen" />
                </div>
            </form>
        </div>
    </div>
    <div id="logotrans"><a href="index.php" onmouseover="Tip('Das Portal der Komplettl&ouml;sungen.', TITLE, 'L&ouml;sung-DB.de');" onmouseout="UnTip();"><img src="logotrans.png" border="0" alt="" /></a></div>

    <img src="headerlogo.png" border="0" alt="" />
    </div>
    <noscript>
    <div class="clear">&nbsp;</div>
    <div id="errorSearchBox">
    	<div id="errorSearch" style="text-align: center">Diese Webseite arbeitet mit Javascript. Bitte aktivieren sie Javascript!</div>
    </div>
    </noscript>
    <div class="clear">&nbsp;</div>
    <div id="navi">
	  <ul>
      <li class="button"><a href="index.php" onmouseout="MM_swapImgRestore(); UnTip()" onmouseover="MM_swapImage('Startseite','','top_start_hover.png',1); Tip('Hier gehts zur Startseite.')"><img src="top_start.png" alt="" name="Startseite" border="0" id="Startseite" /></a></li>
      <li class="button"><a href="index.php?page=loesung" onmouseout="MM_swapImgRestore(); UnTip()" onmouseover="MM_swapImage('loesung','','top_loesung_hover.png',1); Tip('Hier gehts zu den Komplettl&ouml;sungen.')"><img src="top_loesung.png" alt=""  name="loesung" width="85" height="26" border="0" id="loesung" /></a></li>

      <li class="button"><a href="index.php?page=community" onmouseout="MM_swapImgRestore(); UnTip()" onmouseover="MM_swapImage('community','','top_community_hover.png',1); Tip('Hier gehts zum Forum.')"><img src="top_community.png" alt="" name="community" border="0" id="community" /></a></li>
      <li class="button"><a href="index.php?page=contact" onmouseout="MM_swapImgRestore(); UnTip()" onmouseover="MM_swapImage('contact','','top_contact_hover.png',1); Tip('Hier gehts zum Kontaktformular.')"><img src="top_contact.png" alt="" name="contact" border="0" id="contact" /></a></li>
      <li class="button"><a href="index.php?page=imprint" onmouseout="MM_swapImgRestore(); UnTip()" onmouseover="MM_swapImage('imprint','','top_imprint_hover.png',1); Tip('Hier gehts zum Impressum.')"><img src="top_imprint.png" alt="" name="imprint" border="0" id="imprint" /></a></li>
      <li class="button"><a href="index.php?page=loesung_send" onmouseout="MM_swapImgRestore(); UnTip()" onmouseover="MM_swapImage('send','','top_send_hover.png',1); Tip('Komplettl&ouml;sung einsenden?')"><img src="top_send.png" alt="" name="send" border="0" id="send" /></a></li>
      </ul>
    </div>
<div class="clear">&nbsp;</div>
<div id="communityBox">
	<div id="communityBigTitle">Support-Forum
    &raquo; L&ouml;sung-DB	</div>

</div>
<div class="forenClear">&nbsp;</div>
<div class="forenStart">&nbsp;</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>

    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">

    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">

    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>

    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>

    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">

    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">

    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>

    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>

    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">

    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">

    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>

    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>

    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">

    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">

    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>

    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>

    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">

    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>
    </div>
</div>
<div id="forenBox">
	<div id="forenPicBox">

    	<div id="forenPic"><img src="old.png" alt="" border="0" /></div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle"><a href="index.php?page=community&amp;comID=999" onmouseover="Tip('Test Forum<br />&nbsp;Mit einem Untertitel');" onmouseout="UnTip();">Test Forum</a><div id="forenUntertitle">Hier gehts zum Test Forum</div></div>
    </div>
    <div id="forenPostsBox">
    	<div id="forenPosts">9.999</div>

    </div>
</div>
<div class="forenEnd">&nbsp;</div>    <div class="clear">&nbsp;</div>
    <div id="footerBox">
    	<div id="footer">
       	  <a href="/loesung-db.de/index/index.php?page=community" onmouseover="Tip('Das Copyright von Lösung-DB.de');" onmouseout="UnTip();">&copy;2008 by Lösung-db.de</a> | <a href="/loesung-db.de/index/index.php?page=community" onmouseover="Tip('Alle Rechte vorbehalten.');" onmouseout="UnTip();">all right reserved</a> | <a href="index.php?page=valid&amp;check=css" target="_blank" onmouseover="Tip('Diese Webseite ist CSS Valid.');" onmouseout="UnTip();">CSS Valid</a> &amp; <a href="index.php?page=valid&amp;check=xhtml" target="_blank" onmouseover="Tip('Diese Webseite ist xHTML Valid.');" onmouseout="UnTip();">xHTML Valid</a>

        </div>
    </div>
    <!--<div id="clear_footer">&nbsp;</div>-->
  </div>
  
  <div id="saeule_r">&nbsp;</div>
</div>
</body>
</html>

Maik · 18. Dezember 2008

Moin,

mein eingangs empfohlenes CSS-Tutorial mit dem Querverweis im zweiten Absatz zu meinem Tutorial Zentriertes Layout mit drei Spalten beantwortet auch diese Frage

Maik / Zentriertes Layout mit drei Spalten hat gesagt.:
Das Grundkonzept für den horizontal zentrierten Dreispalter steht damit.

Nur hat dieser einen kleinen Schönheitsfehler: Wenn die Inhalte in den einzelnen Spalten unterschiedlich groß sind, dehnen sich die Boxen in ihrer Höhe unterschiedlich aus und reichen nicht gemeinsam bzw. einheitlich bis zum unteren Rand des Elternelements.

Diese Klippe lässt sich mit Hilfe der "Faux-Columns-Technik" umschiffen, indem wir eine Grafik erstellen, die der Breite des Layouts entsprechend dimensioniert ist (hier: 800*1px), und dem DIV #wrapper als vertikales Hintergrundbild zugewiesen wird.

In der Grafik wird der Hintergrund (oder ein vertikaler Rahmen) für die Spalten eingearbeitet, womit im Stylesheet die zunächst deklarierte Hintergrundfarbe der äußeren Spalten #leftCol und #rightCol entfällt, da jetzt durch die vertikale Bildwiederholung die Spaltenhintergründe "generiert" werden. Auf diese Weise besitzen die Spalten unabhängig von ihrem Inhaltsumfang automatisch die gleiche Höhe.

Demnach erzeugst du eine Grafik (Breite: 633px, Höhe: ?), um darin die beiden Grafiken (saeule_l.png, saeule_r.png) einzuarbeiten, und bindest sie als vertikal zu wiederholendes Hintergrundbild in #mainpage ein. In meinen beiden Tutorials entspricht das der Hintergrundgrafik "3cols.png" für das DIV #wrapper.

Die beiden inhaltsleeren DIVs #saeule_l und #saeule_r entfallen somit im Markup gänzlich, stattdessen wird entweder für #mainpage ein entsprechender linker und rechter Innenabstand, oder für das Nachfolgeelement #content ein linker und rechter Außenabstand definiert.

Desweiteren muß für #mainpage eine Mindesthöhe eingerichtet werden, da die height:100%-Deklaration von den standardkonformen Browsern als fixe Höhe interpretiert wird, was zur Folge hat, dass sie die Box in der Höhe nicht verlängern, wenn ihr Inhalt die Fensterhöhe überschreitet, und gescrollt werden muß. Der Hintergrund wird dann unterhalb des unteren Fensterrands nicht mehr fortgesetzt, sondern schlichtweg abgeschnitten.

Aber auch diesen Punkt habe ich in meinem CSS-Tutorial berücksichtigt und auf das DIV #wrapper angewendet.

Übrigens muß ein ID-Bezeichner im HTML-Dokument eindeutig sein, sprich er darf darin nicht mehrmals enthalten sein; für diesen Fall ist der Klassenbezeichner vorgesehen.

Aus

HTML:

<div id="forenBox">
	<div id="forenPicBox">
    	<div id="forenPic">...</div>
    </div>
	<div id="forenTitleBox">
    	<div id="forenTitle">...<div id="forenUntertitle">...</div></div>
    </div>

    <div id="forenPostsBox">
    	<div id="forenPosts">...</div>
    </div>
</div>

CSS:

#forenBox { }
#forenPicBox { }
#forenPic { }
#forenTitleBox { }
#forenTitle { }
#forenUntertitle { }
#forenPostsBox { }
#forenPosts { }

wird

HTML:

<div class="forenBox">
	<div class="forenPicBox">
    	<div class="forenPic">...</div>
    </div>
	<div class="forenTitleBox">
    	<div class="forenTitle">...<div class="forenUntertitle">...</div></div>
    </div>

    <div class="forenPostsBox">
    	<div class="forenPosts">...</div>
    </div>
</div>

CSS:

.forenBox { }
.forenPicBox { }
.forenPic { }
.forenTitleBox { }
.forenTitle { }
.forenUntertitle { }
.forenPostsBox { }
.forenPosts { }

mfg Maik

EuroCent · 18. Dezember 2008

Aso.......

also meinst du ich soll der mainpage eine feste Grafik verpassen in dem 663px breit und 1px hoch ist mit der linken und rechten Säule?

und die innenabstände mit padding-left & padding-right "bsp.: 40px"?

Oder gäbe es dann einen zusammenbruch und alles verschiebt sich wieder?

PS: bei den Foren handelt es sich nur um Tests die selbst mit dem Code nichts zu tun haben ^^ diese werden komplett durch fertiges "div = class statt div = id" ersetzt ^^

MfG

Lenox

Maik · 18. Dezember 2008

Lenox hat gesagt.:
Aso.......

also meinst du ich soll der mainpage eine feste Grafik verpassen in dem 663px breit und 1px hoch ist mit der linken und rechten Säule?

und die innenabstände mit padding-left & padding-right "bsp.: 40px"?

Oder gäbe es dann einen zusammenbruch und alles verschiebt sich wieder?

Nichts anderes habe ich empfohlen und wird in meinen Tutorials angewendet.

Von einem "Zusammenbruch" und irgendwelchen Verschiebungen ist mir nichts bekannt.

mfg Maik

EuroCent · 19. Dezember 2008

Moin Maik

Jetzt macht es das so wie es soll...

Allerdings hab ich da noch ein kleines Problemchen womit ich leben könnte ^^

Am ende der seite gehen die Säulen nicht bis zum Ende so wie ich es mir eigentlich gewünscht hätte.

Sprich wenn der Content kleiner ist "bsp: 200px" dann wirken die Säulen genauso wobei diese eigentlich 100% sein sollten...

Ich hab mal 4 Anhänge angehängt.

das 3te ist die INDEX selbst und die 4te ist die CSS Datei dazu

Hab den CSS Code ähnlich wie deinem Angepasst... clearfix ist übernommen

der Erste so wie es jetzt ist und der 2te so wie es eigentlich sein sollte

Wie gesagt ich könnte damit leben da es derzeit nur jetzt noch so leer aussieht xD
Allerdings wäre es sehr schön wenn es so wäre wies soll

MfG

Lenox

✔ Design Problem <table>

EuroCent

Klappstuhl 2.0

Anhänge

Maik

EuroCent

Klappstuhl 2.0

Maik

EuroCent

Klappstuhl 2.0

EuroCent

Klappstuhl 2.0

Anhänge

Maik

EuroCent

Klappstuhl 2.0

Maik

EuroCent

Klappstuhl 2.0

Anhänge

Neue Beiträge