✔ tabellenausrichtung oben UND unten

Status
Nicht offen für weitere Antworten.
Gibt es das Objekt online zu betrachten? Das wäre hilfreicher, da auch zugleich eine passende Lösung anzubieten wäre.
 
Ja, also deine Sache hab ich mir jetzt nicht richtig angesehen, keine Lust mich durch den Code zu lesen. Aber wo liegt denn das Problem an dem Code oben?

Um die Tabelle auf die volle Breite zu bringen, einfach die width angabe ändern:

Code: 
<html>
<head>
<title>Table Layout</title> 
 
<style type="text/css">
<!--
.table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #CCCCCC;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
}
body {
margin: 0px;
padding: 0px;
}
.tdheader {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
.tdfooter {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
}
.content {
padding: 10px;
}
.navi {
padding: 10px;
border-right: 1px solid #333333;
}
-->
</style>
</head>
 
<body>
<table class="table" height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
 <td colspan="2" class="tdheader" height="100" valign="top">
header
 </td>
</tr>
<tr>
 <td class="navi" width="100px" valign="top">
Navigation
 </td>
 <td class="content" valign="top">
content
 </td>
</tr>
<tr>
 <td colspan="2" class="tdfooter" height="100" valign="bottom">
footer
 </td>
</tr>
</table>
 
</body>
</html>


greetz
 
Ja, den Table auf 100% zu bringen ist okay, no Problem.
Nur der billige Strich erweitert sich nicht nach unten..

Kann sein dass ich a bisserl aufm Schlauch steh. Aber kein Wunder nach 10 Stunden vorm Rechner und danach 2 Stunden Kundengespräch..

Werd's morgen nochmal versuchen und Ergebnisse und (hoffentlich keine) Misserfolge posten..

Dank erstma!
 
Mh, nicht verstanden? Kopier dir mal meinen zweiten Code. Da ist es doch ganz genauso wie du es willst. Der Strich geht bis nach unten. Ansonsten viel Glück.

greetz
 
Hier eine semantischere, auf CSS basierende Lösung:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<title></title>

	<style type="text/css">
	/*<![CDATA[*/
		* {
			margin:			0;
			padding:		0;
		}
		html, body {
			height:			100%;
		}
		body {
			color:			#000;
			font-size:		100.01%;
			font-family:		Verdana, Arial, Helvetica, Lucida, sans-serif;
			background-color:	#fff;
		}
		h2 {
			color:			#999;
			font-size:		1.3em;
			font-weight:		bolder;
		}
		p {
			margin:			1em 0 0.5em 0;
		}
		p + p {
			margin-bottom:		0.25em;
		}

		ul li {
			margin-left:		2em;
		}
		abbr, acronym, dfn {
			border:			none;
		}
		abbr[title]:after,
		acronym[title]:after {
			content:		" (" attr(title) ")";
		}

		#container {
			font-size:		0.7em;
			background:		#dedede url(http://www.utexas.edu/graphics/backgrounds/thin-orange-gray.gif) repeat-y 180px 0;
			position:		relative;
			min-height:		100%;
			height:			100%;
			voice-family:		"\"}\"";
			voice-family:		inherit;
			height:			auto;
		}
		html>body #container {
			height:			auto;
		}

		#header {
			background-color:	#09C;
		}
		#branding {
			height:			80px;
			background:		url(http://www.dieunterstuetzer.de/images/head.jpg) no-repeat 0 0;
		}
		#branding a {
			position:		absolute;
			top:			10px;
			width:			200px;
			height:			60px;
		}
		#branding a span {
			display:		none;
		}
		#main-nav {
			list-style:		none;
			height:			20px;
			padding-left:		180px;
			background:		url(http://www.dieunterstuetzer.de/images/navi/orange.gif) repeat-y 0 0;
		}
		#main-nav li {
			float:			left;
			margin:			0;
		}
		#main-nav li a {
			display:		block;
			width:			150px;
			height:			20px;
			background-color:	#ccc;
			background-repeat:	no-repeat;
			border-left:		0.1em solid #fff;
		}
		#main-nav li a span {
			display:		none;
		}
		#main-nav #item-unternehmen {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/01_unternehmen.jpg);
		}
		#main-nav #item-unternehmen:hover {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/01_unternehmen_.jpg);
		}
		#main-nav #item-bereiche {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/02_bereiche.jpg);
		}
		#main-nav #item-bereiche:hover {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/02_bereiche_.jpg);
		}
		#main-nav #item-preise {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/03_preise.jpg);
		}
		#main-nav #item-preise:hover {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/03_preise_.jpg);
		}
		#main-nav #item-kontakt {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/04_kontakt.jpg);
		}
		#main-nav #item-kontakt:hover {
			background-image:	url(http://www.dieunterstuetzer.de/images/navi/04_kontakt_.jpg);
		}


		#sidebar {
			float:			left;
			width:			180px;
		}

		#content {
			margin-left:		180px;
			padding:		30px 10px 30px 60px;
			/*
				background-color:	#efefef;
				border-left:		0.1em solid #f93;
			*/
		}
		#content a:link, #content a:visited, #content a:hover, #content a:active {
			color:			#09c;
			text-decoration:	underline;
		}
		#content a:visited {
			color:			#0ab;
		}
		#content a:hover {
			color:			#07a;
		}
		#content a:active {
			color:			#eee;
			background-color:	#333;
		}

		#footer {
			position:		absolute;
			bottom:			0;
			width:			100%;
			height:			20px;
			background:		#09c url(http://www.dieunterstuetzer.de/images/navi/orange.gif) no-repeat 0 0;
		}

		.hide {
			display:		none;
		}
	/*]]>*/
	</style>

</head>



<body>
<div id="container">

	<div id="header">
		<div id="branding"><a href="/" rel="start"><span>d.i.e. unterstützer</span></a></div>
		<ul id="main-nav">
			<li><a href="/01_unternehmen.html" id="item-unternehmen" title="Unternehmen"><span>Unternhemen</span></a></li>
			<li><a href="/02_bereiche.html" id="item-bereiche" title="Leistungsbereiche"><span>Leistungsbereiche</span></a></li>
			<li><a href="/03_preise.html" id="item-preise" title="Preise"><span>Preise</span></a></li>
			<li><a href="/04_kontakt.html" id="item-kontakt" title="Kontakt"><span>Kontakt</span></a></li>
		</ul>
	</div>


	<hr class="hide" />


	<div id="sidebar">
	</div>


	<hr class="hide" />


	<div id="content">
		<h2>Unternehmen</h2>
		<p><strong>d.i.e. unterstützer</strong> verstehen sich als <strong>unabhängige Berater für kleine und mittelgroße Unternehmen (KMUs)</strong> sämtlicher Branchen.</p>
		<p>Wenn Sie jetzt denken, das kann ich mir sowieso nicht leisten, dann lassen Sie sich von unserem <a href="/03_preise.html">Preiskonzept</a> überzeugen.</p>
		<p>Wir bieten Beratung und Unterstützung zu folgenden Unternehmensbereichen:</p>
		<ul>
			<li>Beschaffung/Logistik</li>
			<li>Produktion/Dienstleistung</li>
			<li>Marketing/Vertrieb</li>
			<li>Personal</li>
			<li><abbr title="Elektronische Datenverarbeitung">EDV</abbr></li>
		</ul>
		<p>Zusätzlich unterstützen wir angehende Unternehmer bei einer erfolgreichen <a href="/02f_existenz.html">Existenzgründung</a>.</p>
		<p><strong>Unser Ziel </strong> ist es, den Erfolg Ihres Unternehmens systematisch aufzubauen und nachhaltig zu verbessern.</p>
		<p>Wir verstehen uns nicht als „Besserwisser“, sondern als externe Unterstützer. Wir wollen Ihnen nicht Ihr Geschäft erklären, sondern mit Ihrem spezifischen Branchen-Wissen und unserem Beratungs-Know-how gemeinsam Ihren Erfolg optimieren.</p>
		<p>Unser Vorgehen ist nicht „hochtheoretisch“, sondern schnell, effektiv und pragmatisch. Sie als Kunde stehen bei uns immer an erster Stelle und werden in jedes Projekt aktiv miteinbezogen. Ihre Zufriedenheit ist für uns der Maßstab unseres Erfolgs. An Ihrer Zufriedenheit lassen wir uns messen.</p>
	</div>


	<hr class="hide" />


	<div id="footer">
	</div>

</div>
</body>
</html>
 
@ Gumbo: Das hast du ja jetzt nicht extra gecodet oder? Weil hättest du etwas weiter oben gelesen, hättest du bemerkt, dass der Auftraggeber anscheinend, keiner weiß warum, auf ein Tabellen Layout besteht.

greetz
 
Hi.

Erstmal tausendmal Sorry dass ich die Tage keine Reaktion auf Eure Posts gezeigt habe.
Ich war 24/7 mit programmieren beschäftigt, hatte nicht mal die Zeit ne kurze Antwort zu posten. Aber jetzt hab ich's hinter mir.

@versuch13:
Hattest Recht, ich hab lediglich vergessen den Table im Contentbereich auf 100% height zu setzen.. Danke für Deine Hilfe!

@gumbo:
Danke auch an Dich! Ich durfte zwar wegen Kundenwünschen keine CSS-basierte Lösung hernehmen, aber ich hab mir Deinen Code heute mal reingezogen. Macht Bock auf mehr..
Dank Dir!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück