✔ Pseudo-Frameset ohne Frames ;-)

Status
Nicht offen für weitere Antworten.
X

Xato

Grünschnabel
Hi Leute,

ich hab folgendes Problem:
Ich möchte eine Art Pseudo-Frameset anlegen, nur alles in einer Datei, sprich, kein "echtes" Frameset haben.
Das ganze soll später so aussehen:

http://85.214.22.193/xato/img/frameset_ohne_frames.png

Geht das besser als mit verschachtelten tables?
Also, dass das mit den entsprechenden width/height angaben so geht
HTML: 
<table>
  <tr>
    <td>
      <table>
        <tr>
          <td id="x1"></td>
        </tr>
        <tr>
          <td id="x3"></td>
        </tr>
      </table></td>
    <td>
      <table>
        <tr>
          <td id="x2"></td>
        </tr>
        <tr>
          <td id="x4"></td>
        </tr>
      </table></td>
  </tr>
</table>

ist mit klar ;-) Mit einer einfachen Tabelle a la
HTML: 
<table>
  <tr>
    <td id="x1"></td>
    <td id="x2"></td>
  </tr>
  <tr>
    <td id="x3"></td>
    <td id="x4"></td>
  </tr>
</table>

Geht es natürlich auch nicht, da dann 3 die gleiche Höhe wie 4 haben müsste, und das will ich nicht. Box-Layout mit div´s scheidet auch aus, da man die Seite nicht Scrollen darf, und wenn man Prozent-Angaben auf ein Box-Layout anwendet, und dann noch paddings einbaut, damit das ganze schön aussieht, muss man doch Scrollen. Hat einer ne Idee, wie man das ganze besser als mit verschachtelten Tabellen hinkriegt?

mfg
Xato
 
Hi!

Es geht auch ohne Tabellen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

<style type="text/css">
<!--
#wrapper {
width: 800px;
margin: 0 auto;
border: 1px solid #000;
}

#leftCol {
float: left;
width: 399px;
border-right: 1px solid #000;
}

#rightCol {
float: right;
width: 400px;
}

#x1 {
height: 300px;
border-bottom: 1px solid #000;
}

#x2 {
height: 400px;
border-bottom: 1px solid #000;
}

#x3 {
height: 300px;
}

#x4 {
height: 200px;
}

#x1 p, #x2 p, #x3 p, #x4 p {
margin: 0;
padding: 20px;
}

.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 */
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="leftCol">
          <div id="x1"><p>x1</p></div>
          <div id="x3"><p>x3</p></div>
     </div>
     <div id="rightCol">
          <div id="x2"><p>x2</p></div>
          <div id="x4"><p>x4</p></div>
     </div>
</div>

</body>
</html>
 
Das ist zwar sehr schön. Doch wie bekommt man das "automatisch" auf Browserfenstergröße gezogen? Also ohne feste Angaben? Eigentlich gehts bei mir schon fast, nur bei height: 100%; oder min-height: 100%; will der FF nicht mitmachen :( Gibts da "Tricks"?

PS: Was ist dieses "clearfix", rein aus Interesse?
 
Versuch es mal hiermit:

Code: 
html,body {
height: 100%;
margin: 0;
padding: 0;
}

#wrapper {
width: 800px;
height: 100%;
margin: 0 auto;
border: 1px solid #000;
}

#leftCol {
float: left;
width: 399px;
height: 100%;
border-right: 1px solid #000;
}

#rightCol {
float: right;
width: 400px;
height: 100%;
}

#x1 {
height: 50%;
border-bottom: 1px solid #000;
}

#x2 {
height: 60%;
border-bottom: 1px solid #000;
}

#x3 {
height: 50%;
}

#x4 {
height: 40%;
}

@clearfix: http://positioniseverything.net/easyclearing.html
 
Okay, Problem erledigt.
Das nicht-funktionierende "height: 100%;" liegt wohl daran, dass es nicht wirklich "guter Stil" ist, bzw. vom WC3 nicht als ein solcher anerkannt wird. Eine Änderung des Doctypes von Strict auf Transitional hat das Problem beseitigt.
Ich habe das Beispiel noch mit farbigen Rahmen ausgestattet, falls ein anderer User das Problem mit den "Pseudo-Frames" auch mal hat ;-) Außerdem siehts so nett aus ;-)

mfg und vielen Dank für die Hilfe

Xato

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface & xato">
<title></title>

<style type="text/css">
<!--

#wrapper {
width: 100%;
height: 100%;
}

#leftCol {
float: left;
width: 30%;
}

#rightCol {
float: right;
width: 70%;
}

#x1 {
height: 70%; border: 23px solid blue;
}

#x2 {
height: 80%; border: 23px solid yellow;
}

#x3 {
height: 30%; border: 23px solid red;
}

#x4 {
height: 20%; border: 23px solid green;
}

#x1 p, #x2 p, #x3 p, #x4 p {
margin: 0;
padding: 20px;
}

-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="leftCol">
          <div id="x1"><p>x1</p></div>
          <div id="x3"><p>x3</p></div>
     </div>
     <div id="rightCol">
          <div id="x2"><p>x2</p></div>
          <div id="x4"><p>x4</p></div>
     </div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück