2 Tabellen in einer großen ausrichten

Status
Nicht offen für weitere Antworten.
T

Transmitter

Erfahrenes Mitglied
Hi :)

Ich habe eine Tabelle mit 100% x 100%, da drin sind 3 Tabellen, die mittlere soll 400px hoch sein, die beiden anderen sollen den leeren Raum ausfüllen.

Code: 
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle"> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
      <table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>

Wie schaffe ich es denn, dass die beiden schwarzen Tabellen den leeren Raum auffüllen?
Leider muss es genau so gemacht werden, da in den schwarzen Tabellen noch Content ist.
 
Hallo,

mein Tipp mach das ganze mit CSS, ich habe dir eine Vorlage auf XHTML Basis erstellt, die Vorlage habe ich von der Website http://www.stunicholls.myby.co.uk/layouts/body4.html.

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Layout </title>
<style type="text/css">
html {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:#fff; font-size:76%; font-family:georgia, palatino linotype, times new roman, serif;}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {overflow:auto; position:absolute; z-index:3; top:100px; bottom:120px; left:0px; right:0; background:#eee;}
* html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-top:120px solid #fff; border-bottom:120px solid #fff; border-left:0px solid #fff;}
 
#head {position:absolute; margin:0; top:0; left:0; display:block; width:100%; height:120px; background:url(clouds.jpg) #000; background-position:0 0; background-repeat:no-repeat; font-size:4em; z-index:5; overflow:hidden; color:#fff;}
#foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:120px; font-size:1em; z-index:5; overflow:hidden; background:rgb(76,76,76); color:#fff;}
 
#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}
 
</style>
</head>
<body>
<div id="head">&nbsp;head</div><!--head ende-->
<div id="foot">&nbsp;foot</div><!--foot ende-->
 
<div id="content">
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p> <p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
<p>&nbsp;content </p>
</div> <!--content ende-->
 
</body>
</html>

Man kann das ganze auch mit HTML4.01 machen.

Ansonsten kannst villeicht mit folgendem Beispiel was anfangen kannst.

HTML: 
<html>
<head>
<title></title>
<meta name="author" content="Femie">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body style="margin:0;padding:0;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td align="center" height="120" valign="middle">
	 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
		<tr>
		 <td>&nbsp;</td>
		</tr>
	 </table> </td></tr><tr><td height="120">
	 <table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
		<tr>
		 <td>&nbsp;</td>
		</tr>
	 </table></td></tr><tr><td height="120">
	 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
		<tr>
		 <td>&nbsp;</td>
		</tr>
	 </table></td>
</tr>
</table>
</body>
</html>

gruß
feh
:)
 
Bei der oberen Version habe ich ja das Problem, dass ich die Monitorauflösung und die Fenstgröße des Browsers nicht kenne, deswegen weiß ich auch nicht, wieviele Pixel "head" hoch sein darf.

Bei der unteren Version treten die gleichen Probleme auf, wie bei meiner: Es wird nicht komplett aufgefüllt :(
 
Hallo,

also wenn du bei der ersten Version mit CSS sagen wir mal einen head von 120px machst, dann wird der auch bei jeder Auflösung dementssprechend automatisch umgerechnet.

Also das Design müsste so immer hinkommen, wenn du es dir auf einer bestimmten lieblingsauflösung erst mal so zusammenstelltst.

Der head und foot Bereich füllen auch immer oben und unten randlos alles aus, im content Bereich kannst du dann dein Inhalt rein machen, also ich findes das gut so, das einzige was mich an der Lösung stört, ist das die mittlere Maustaste nicht zum scrollen benutzt werden kann, bei anderen Browsern auser dem IE.

Mit der anderen Lösung mit Tabellen wird es da schon schwieriger, ich habe mir das nochmal angesehen und die Werte von Pixel in Prozent geändert, aber ob das dir so weiterhilf weis ich nicht genau.

HTML: 
 <html>
<head>
<title></title>
<meta name="author" content="Femie">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body style="margin:0;padding:0;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td align="center" height="30%" valign="middle">
  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  <tr>
   <td>&nbsp;</td>
  </tr>
  </table></td></tr><tr><td align="center"  valign="middle">
  <table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
   <td>&nbsp;l</td>
  </tr>
  </table></td></tr><tr><td align="center" height="30%" valign="middle">
  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  <tr>
   <td>&nbsp;</td>
  </tr>
  </table></td>
</tr>
</table>
</body>
</html>

Lernen/Überlegen/Probieren/Vergleichen :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück