Ergebnis 1 bis 10 von 10

Thema: Tabellenlayout (FF4 und IE9)

  1. #1
    Youngster
    Registriert seit
    24.03.2011
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tabellenlayout (FF4 und IE9)

    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.

    Code:
    <!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>
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

    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.

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    24.03.2011
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

    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.

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    24.03.2011
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

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

    Code:
    <!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>
    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.
    Geändert von carcharias (25.03.2011 um 15:18 Uhr)

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    24.03.2011
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

    Kann mir niemand weiterhelfen?

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    24.03.2011
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

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

  7. #7
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

    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. 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.

  8. #8
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

    Zitat Zitat von carcharias Beitrag anzeigen
    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...

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    24.03.2011
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

    @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.

  10. #10
    Youngster
    Themenstarter

    Registriert seit
    24.03.2011
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenlayout (FF4 und IE9)

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

    Hier die Lösung:

    Code:
    <!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>
    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).
    Geändert von carcharias (26.03.2011 um 03:54 Uhr)

Ähnliche Themen

  1. Kann mir wer nen Tabellenlayout erstellen???
    Von echo91 im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 26.01.2007, 16:41
  2. Tabellenlayout <div> / CSS
    Von im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 24.09.2006, 21:02
  3. Problem Tabellenlayout
    Von eni_84 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 26.07.2006, 10:00
  4. Tabellenlayout -> Umfließender Text
    Von im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 04.10.2005, 14:16
  5. problem mit tabellenlayout
    Von hermes im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.09.2005, 16:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •