Tabellenlayout (FF4 und IE9)

carcharias

Hallo!

Ich habe ein Tabellenlayout erstellt, da ich's mit CSS nicht wirklich hinkriege so wie ich das haben will und nun ist das Problem, dass der Mozilla Firefox 4 die Seite korrekt darstellt und der Internet Explorer 9 nicht.

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>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
  background:#383838;
  margin:0px;
}


img {
  border: 0px;
}


a.subnav:link {
  color: #006ab1;
  font-weight: normal;
  text-decoration: none;
}


a.subnav:visited {
  color: #006ab1;
  font-weight: bold;
  text-decoration: none;
}


a.subnav:hover {
  color: #00a0dc;
  font-weight: bold;
  text-decoration: none;
}


a.subnav:active {
    color: #006ab1;
    font-weight: bold;
    text-decoration: none;
}


#container {
  position:absolute;
  left:50%;
  top:44px;
  width:950px;
  margin-left:-475px;
}


div.con {
  padding-left:10px;
  padding-right:10px;
}


td.navbar {
  color:#c1c1c1;
  font:bold 10pt Verdana;
  text-align:center;
}


td.subnav {
  color:#c1c1c1;
  font:10pt Verdana;
}
//-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="44" width="4"><img id="new_01" src="images/img_01.png" width="4" height="44" alt="" /></td>
    <td class="navbar" height="44" background="images/img_02.png">&nbsp;</td>
    <td height="44" width="4"><img id="new_03" src="images/img_03.png" width="4" height="44" alt="" /></td>
  </tr>
</table>
<div id="container">
<table id="Tabelle_01" width="950" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="4" nowrap="nowrap"></td>
    <td width="2" nowrap="nowrap"></td>
    <td width="164" nowrap="nowrap"></td>
    <td width="774" nowrap="nowrap"></td>
    <td width="2" nowrap="nowrap"></td>
    <td width="4" nowrap="nowrap"></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="6"><img id="new_04" src="images/img_04.png" width="950" height="2" alt="" /></td>
    <td height="2" nowrap="nowrap"></td>
  </tr>
  <tr>
    <td width="6" colspan="2" rowspan="6" nowrap="nowrap"></td>
    <td rowspan="2"><img id="new_06" src="images/img_05.png" width="164" height="26" alt="" /></td>
    <td><img id="new_07" src="images/img_06.png" width="774" height="11" alt="" /></td>
    <td width="6" colspan="2" rowspan="6" nowrap="nowrap"></td>
    <td height="11" nowrap="nowrap"></td>
  </tr>
  <tr>
    <td valign="top" rowspan="3" background="images/img_07.png" width="774">
      <div class="con">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      </div>
    </td>
    <td height="15" nowrap="nowrap"></td>
  </tr>
  <tr>
    <td valign="top" class="subnav" background="images/img_08.png" width="164"><div class="con">&nbsp;</div></td>
    <td nowrap="nowrap"></td>
  </tr>
  <tr>
    <td rowspan="2"><img id="new_11" src="images/img_09.png" width="164" height="26" alt="" /></td>
    <td height="15" nowrap="nowrap"></td>
  </tr>
  <tr>
    <td><img id="new_12" src="images/img_10.png" width="774" height="11" alt="" /></td>
    <td height="11" nowrap="nowrap"></td>
  </tr>
  <tr>
    <td width="938" height="6" colspan="2" nowrap="nowrap"></td>
    <td height="6" nowrap="nowrap"></td>
  </tr>
</table>
</div>
</body>
</html>

Alles anzeigen

Was habe ich falsch gemacht?

Dann würde ich gerne wissen, ob es besser wäre, alles mit CSS zu machen anstatt mit einem Tabellenlayout und ob sich das mit CSS realisieren lässt? Im Prinzip das Tabellenlayout 1:1 in ein CSS-Layout umwandeln.

Ich habe einen Navigationsbalken oben, 100% breite und 44px höhe. Die Subnavigation sowie der Inhaltsbereich sind exakt 950px breit, soll allerdings dynamisch sein d.h. egal ob in der Subnavigation oder im Inhaltsbereich mehr Text oder was auch immer drin ist, es soll immer gleich aussehen, dynamisch eben.

Mfg
carcharias

sejuma

Ein Link zur Problemseite wäre besser, damit man auch die Grafiken erkennt.
Anhand deines Codes kann ich keine Layoutstruktur erkennen.
Zentriere nicht mit absoluten Positionsangaben, sondern so: http://www.ohne-css.gehts-gar.net/0001.php

Tabellen solltest du nicht für Layoutzwecke verwenden. Diese Zeiten sind eindeutig und schon lange vorbei, seit es CSS gibt.

carcharias

Leider kann ich die Seite nicht online stellen. Screenshots hätte ich, aber auch diese kann ich leider nicht online stellen.

Ja, Tabellenlayouts sind outdated, aber ich schaffe es einfach nicht dieses Tabellenlayout 1:1 in ein CSS-Layout umzuwandeln. Ich scheitere schon am Navigationsbalken, da ich es nicht einmal schaffe, 3 Spalten mit 100% breite mit CSS zu erstellen.

carcharias

So, nun habe ich das Tabellenlayout in ein CSS-Layout umgewandelt und nun habe ich ein Problem.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
}
#clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}
#navbar-wrap {
    height: 44px;
    margin-bottom: 10px;
    width: 100%;
}
#navbar-l {
    background: #300;
    float: left;
    height: 44px;
    width: 0.2%;
}
#navbar-c {
    background: #600;
    float: left;
    height: 44px;
    text-align: center;
    width: 99.6%;
}
#navbar-r {
    background: #900;
    float: left;
    height: 44px;
    width: 0.2%;
}
#body {
    margin: 0 auto;
    width: 950px;
}
#subnav-wrap {
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 170px;
}
#subnav-t {
    background: #300;
    height: 20px;
    width: 170px;
}
#subnav-m {
    background: #600;
    height: 40px;
    width: 170px;
}
#subnav-b {
    background: #900;
    height: 20px;
    width: 170px;
}
#content-wrap {
    float: left;
    width: 780px;
}
#content-t {
    background: #009;
    height: 20px;
    width: 780px;
}
#content-m {
    background: #006;
    height: 80px;
    width: 780px;
}
#content-b {
    background: #003;
    height: 20px;
    width: 780px;
}
-->
</style>
</head>


<body>
<div id="navbar-wrap">
  <div id="navbar-l">&nbsp;</div>
  <div id="navbar-c">&nbsp;</div>
  <div id="navbar-r">&nbsp;</div>
</div>
<div id="body">
  <div id="subnav-wrap">
    <div id="subnav-t">&nbsp;</div>
    <div id="subnav-m">
      <p>&nbsp;</p>
    </div>
    <div id="subnav-b">&nbsp;</div>
  </div>
  <div id="content-wrap">
    <div id="content-t">&nbsp;</div>
    <div id="content-m">
      <p>&nbsp;</p>
    </div>
    <div id="content-b">&nbsp;</div>
  </div>
</div>
</body>
</html>

Alles anzeigen

Ich will nun das was ich bis jetzt habe, flexibel gestalten d.h. so wie die Seite in diesem Beispiel aussieht, soll sie immer aussehen.

Leider ist es damit aber vorbei, sobald sub-nav-m oder content-m über mehr Inhalt verfügt bzw. eines dieser 2 DIVs mehr beinhaltet als das Andere.

Wie schaffe ich es, dass sub-nav-m und content-m zusammenspielen bzw. sich die DIVs miteinander ergänzen, sodass die Struktur nie verloren geht?

Das subnav soll einfach immer oben und unten 20px Abstand halten und subnav-m mit content-m in die Höhe mitwachsen.

Ich bitte um eure Hilfe.

carcharias

Kann mir niemand weiterhelfen?

carcharias

Dieses Thema kann man wohl als erledigt markieren, da sowieso niemand zu helfen scheint. Danke.

threadi

Wenn Du den beiden Elementen eine feste Höhe gibst, dann können sie auch nicht größer werden, wenn mehr Inhalt drinne steht. Verzichte auf eine feste Höhenangabe und die Elemente passen sich dann automatisch an ihre Inhalte an.

Jetzt frage ich mich aber was Du erreichen willst. Wenn Du sagst, dass das Design immer haargenau so aussehen soll - darf es sich überhaupt verändern wenn mehr Inhalte drinne stehen?

Wenn ja, für moderne Browser kannst Du mittels "min-height" auch eine Mindesthöhe definieren. Wenn mehr Inhalte drinne stehen als rein passen erweitern sie sich von selbst entsprechend den Inhalten.

Wenn Du die Höhen exakt so beibehalten willst, müsstest Du in den Elementen einen Scrollbalken aktivieren. Das geht bei fester Höhenangabe mit "overflow-y: scroll;" für einen vertikalen Scrollbalken.

Und hab etwas Geduld. Nicht immer kann sofort jemand auf deine Fragen reagieren. Um CSS zu lernen, kannst Du dir auch eines der vielen Tutorials anschauen. http://www.css4you.de ist z.B. recht interessant. Bau erstmal das nach was beschrieben wird und erkunde die Möglichkeiten bevor Du selbst an dein Projekt heran gehst. Auch dafür braucht man Geduld.

Grevas

Zitat von carcharias

Dieses Thema kann man wohl als erledigt markieren, da sowieso niemand zu helfen scheint. Danke.

Sorry, aber hier ist nicht 'rate-mal-was-falsch-ist'-Forum und auch kein 'erledige-mein-job-für-den-ich-bezahlt-werde'-Forum.
Wenn du keine brauchbare Basis geben kannst, dann gibt es eben keine...

carcharias

threadi
Das Problem ist, dass die 2 Container subnav sowie content exakt nebeneinander sind und wie bereits erwähnt, ist bei subnav oben und unten ein Abstand von 20 Px, der designbedingt immer da sein muss dh. wenn der content so und so gross ist, muss subnav genau so gross sein, nur eben 20 Px Abstand haben oben und unten, da diese 2 Divs von einem Schein nach aussen (Photoshop) umgeben werden, rund herum. Wenn also subnav einfach nur oben 20 Px Abstand hat, und sich automatisch in der Höhe anpasst, wie es momentan der Fall ist, ist unter subnav noch 20 Px schatten zu sehen und dann nicht mehr, erst wieder am Ende von content, dazwischen ist kein Schatten nach aussen mehr.

Tutorials und etc. habe ich mir schon viele angesehen, doch keines verwendet ein ähnliches Design wie ich es verwende.

Grevas
Ich habe nur gehofft, dass jemand der sich mit CSS auskennt, meinen geposteten Code ansehen, analysieren und mir dann sagen kann, was ich anders machen muss bzw. mir einen Ansatz gibt. Für welchen Job sollte ich bitte bezahlt werden?
Ausserdem habe ich doch eine Basis gepostet und alles gut beschrieben. Diesen Post hättest du dir ruhig sparen können.

Ausserdem wartet man selten so lange auf Antworten wie hier, aber vl bin ich auch im falschen Forum für meine Frage, keine Ahnung, ich kenne es eben anders.

carcharias

Bitte dieses Thema als gelöst markieren oder schliessen, da ich es nun selbst hinbekommen habe.

Hier die Lösung:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Unbenanntes Dokument</title>
<style type="text/css">
html, body {
    background: #383838;
    height: 100%;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
div {
    font-family: Verdana;
    font-size: 10pt;
}
p {
    margin: 0px;
}
#clear {
    clear: both;
}
#navbar-wrapper {
    height: 44px;
    margin-bottom: 2px;
    width: 100%;
}
#navbar-l {
    background: url(images/navbar-l.gif);
    float: left;
    height: 44px;
    width: 0.2%;
}
#navbar-c {
    background: url(images/navbar-c.gif);
    float: left;
    height: 44px;
    text-align: center;
    width: 99.6%;
}
#navbar-r {
    background: url(images/navbar-r.gif);
    float: left;
    height: 44px;
    width: 0.2%;
}
#navbar-content {
    color: #ffffff;
    font-weight: bold;
    margin: 12px auto;
}
#body-wrapper {
    margin: 0 auto;
    width: 950px;
}
#body-t {
    background: url(images/body-t.gif);
    height: 28px;
    width: 950px;
}
#body-m {
    background: url(images/body-m.gif);
    width: 950px;
}
#body-b {
    background: url(images/body-b.gif);
    height: 28px;
    width: 950px;
}
#subnav {
    color: #ffffff;
    float: left;
    margin-left: 15px;
    width: 149px;
}
#content {
    display: inline;
    float: left;
    margin-left: 16px;
    width: 750px;
}
</style>
</head>


<body>
<div id="navbar-wrapper">
  <div id="navbar-l"></div>
  <div id="navbar-c">
    <div id="navbar-content">
      <p>Link 1 | Link 2 | Link 3 | Link 4 | Link 5</p>
    </div>
  </div>
  <div id="navbar-r"></div>
</div>
<div id="body-wrapper">
  <div id="body-t"></div>
  <div id="body-m">
    <div id="subnav">
      <p>Subnav</p>
    </div>
    <div id="content">
      <p>Content</p>
    </div>
    <div id="clear"></div>
  </div>
  <div id="body-b"></div>
</div>
</body>
</html>

Alles anzeigen

Einfach die Grafiken durch unterschiedliche Farben ersetzen um das Resultat zu sehen und verstehen.

Danke für eure Hilfe (ironisch gemeint und ohne weiteren Kommentar).

Tags