✔ Tabellenlayout - fehlendes Stück zwischen Menü und Füllcontainer dadrunter

Status
Nicht offen für weitere Antworten.
D

dreamdiver

Mitglied
Hallo und Frohes Neues erstmal :)

ich habe ein Problem mit meinem Layout im IE6 & IE7.

Es ist ein Tabellenlayout. Bitte nicht schlagen... Ich habe es mit CSS versucht, aber das hat nicht geklappt wie es sollte. Dazu fehlen mir wohl noch ein paar Tricks in Sachen CSS?

Im FF 3.0.5 sieht alles so aus wie es sein soll, aber im IE6&7 entsteht eine Lücke in der linken Spalte.
Wäre toll, falls mir Jemand sagen kann wie ich diese Lücke in der linken Spalte im IE wegbekomme und es so aussieht wie im FF.
Wobei im IE6 die Transparenz natürlich auch nicht umgesetzt wird, aber das ist ein anderes Problem und ist auch erstmal egal.

Ich habe vorher Mal versucht das über CSS zu realisieren, aber da bin ich leider dran gescheitert. (Siehe auch Beitrag 04.12.2008) (Die CSS Elemente, die ich vorher verwendet hatte sind noch in den CSS Dateien enthalten.)

Wenn das, so wie ich es nun über Tabellen realisiert habe, auch in CSS realisierbar ist, dann bin ich für jeden Tipp dankbar. Da war halt auch immer die Problematik, dass entweder die linke Seite komplett aus dem Layout rausläuft oder aber zu kurz bleibt um bis zum unteren Ende des Layouts zu gehen.

Ich hatte überlegt hier nen Screenshot reinzupacken, aber irgendwie bin ich gerade blind oder aber das geht hier nicht?

MfG Dreamdiver
 

Anhänge

  • needhelp.zip
    16,5 KB · Aufrufe: 10
Hi,

wofür wird denn überhaupt das Tabellengerüst benötigt?

Tabellen sind hierfür semantisch überhaupt nicht vorgesehen, sondern um Daten tabellarisch auszugeben/darzustellen, und wenn du schon ein CSS-Layout umsetzen willst, dann sei darin auch bitte konsequent - zu dem Thema empfehle ich dir den Artikel
Warum Layout mit Tabellen dumm ist als Abendlektüre.

Bevor ich mich durch die drei Stylesheets wühle, solltest du sie erstmal aufräumen, und alles entfernen, was darin derzeit auskommentiert ist bzw. was nicht zu dem HTML-Dokument gehört.

Und wieso wiederholst du die kompletten Formatierungen aus dem Stylesheet layout.css für die beiden IE-Versionen (style_ie6.css, style_ie7.css)?

mfg Maik
 
HTML: 
<body>

<div id="container">
     <div id="header">header</div>
     <div id="menu"><?php include "menu.php";?></div>
     <div id="content"><?php include "content.php"; ?></div>
     <div id="footer"><?php include "footer.php"; ?></div>
</div>

</body>
CSS: 
div#container {
        width:800px;
        margin:0 auto;
        border:1px solid black;
}

div#header {
        border-bottom:1px solid black;
}

div#menu{
        width: 166px;
        float:left;
}

div#content {
        border-left: 1px solid black;
        margin: 0 0 0 166px;
        min-height:350px;
        height:auto !important;  /* für moderne Browser */
        height:350px;  /*für den IE */
        background-color: #FFFFCF;
        padding: 1em;
}

div#footer {
        border-top: 1px solid black;
        height:3em;
        clear: left;
        padding: 0.1em;
        text-align: center;
        background-color: #f5cf3b;
}


mfg Maik
 
Hallo,

danke für die schnelle Antwort.

"Warum Layout mit Tabellen dumm ist" ist mir bekannt.

Nun habe ich das Layout nur mit CSS und ganz ohne die Tabelle, aber mit dem weiterhin bestehenden Problem angehängt.

Vielleicht ist es ganz ohne Tabelle jetzt einer Antwort würdig.
Das Problem bleibt das gleiche. Es soll wie das vorher aussehen und das in IE und FF.

MfG Dreamdiver
 

Anhänge

  • needhelp2.zip
    9,3 KB · Aufrufe: 9
Code: 
<div id="container">
     <div id="header">header</div>
     <div id="middle" class="clearfix">
          <div id="menu"><?php include "menu.php";?></div>
          <div id="content"><?php include "content.php"; ?></div>
     </div>
     <div id="footer"><?php include "footer.php"; ?></div>
</div>
Code: 
div#container {
        width:800px;
        margin:0 auto;
        border:1px solid black;
}

div#header {
        border-bottom:1px solid black;
}

div#middle {
        background:url(./images/linkstatic.png) repeat-y;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size: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 */

div#menu{
        width: 166px;
        float:left;
}

div#content {
        border-left: 1px solid black;
        margin: 0 0 0 166px;
        min-height:350px;
        height:auto !important;  /* für moderne Browser */
        height:350px;  /*für den IE */
        background-color: #FFFFCF;
        padding: 1em;
}

div#footer {
        border-top: 1px solid black;
        height:3em;
        padding: 0.1em;
        text-align: center;
        background-color: #f5cf3b;
}


mfg Maik
 
Hallo,

Danke für Deine schnellen Antworten und vor allem Deinen konkreten Hilfeansatz. :)

Ich habe mir das genauer angeguckt, aber das behebt mein Problem leider nicht und soweit war ich auch schon.

Das Menü hat ja Transparenz und dadurch verdoppelt sich die Transparenz hinter dem Menü. Und das ist nicht gewollt.
Ich muss also nur den unteren DIV (leftundermenu) auf die restliche Höhe bekommen und da dann den Hintergrund mit linkstatic.png auffüllen.

Denn der Hintergrund von den Menüpunkten soll komplett verschwinden und den Hintergrundbildverlauf durchscheinen lassen. Im leftundermenu DIV natürlich nicht, denn da sind ja keine Links vorhanden. Jedenfalls noch nicht und wenn, dann sollen die auch ganz anders aussehen.

Ich hoffe ich konnte mein Problem ausreichend konkretisieren.

MfG Dreamdiver
 
Zuletzt bearbeitet:
Dann richte mal in meinem Modell für das DIV #menu den Seitenhintergrund mit entsprechender Hintergrundpositionierung ein, um die "Transparenz" zu suggerieren, und so in seinem Geltungsbereich das Hintergrundbild von #middle zu überdecken - fertitsch :)

CSS: 
div#header {
        border-bottom: 1px solid black;
        height:148px;
}

div#menu{
        width: 166px;
        float:left;
        background:url(./images/bg_02.png) repeat-x 0 -166px;
}

mfg Maik
 
Hallo,

und was passiert dann, wenn ich mit der Maus über einen Link gehe?
Dein Vorschlag ändert ja nichts an der Tatsache, dass linkstatic.png weiterhin auch hinter den Menüpunkten sichtbar bleibt. Dort soll dann aber direkt der Hintergrund zu sehen sein. Wie in needhelp.zip im FF eben.

Vielleicht guckst Du Dir das in needhelp.zip ja nochmal an? Dann weißt Du genauer was ich meine.

MfG Dreamdiver
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück