✔ Komplexes Tabellen Layout zu CSS Layout

Status
Nicht offen für weitere Antworten.
Danielku15

Danielku15

Erfahrenes Mitglied
Hallo Leute.
Ich habe mir ein neues Design für eine Webseite erstellt und das Design soweit in einem Tabellenlayout umgesetzt. Jedoch möchte ich nicht wieder auf Tabellen setzen, sondern auf CSS Layouts umsteigen. An der Umsetzung selbst würde es nicht scheitern, jedoch möchte ich das CSS Layout möglichst simpel halten und nicht (extrem gesagt) für jede Tabellenzelle einen Container erstellen. Nun woltle ich euch bitten mir ein bisschen Unterstützung zu geben. Wie und wieviele Container würdet ihr platzieren?

Link zum Layout:
http://www.CoderLine.net/preview/layout/

Der grobe Aufbau sieht man zwar heraus:
3 Zeilen Layout: Header, Menü, Content
Wobei der Content ein 2 Spalten Layout bildet.

Jedoch wie soll ich es nun optimal mit den einzelnen Hintergrundgrafiken und den Inhalten lösen? Es sind ja doch einige Rundungen, Schatten und Tabellen wie das Loginformular.

Ich danke euch jetzt schon für eure Tipps.

Gruß Daniel
 
Danke aber wie gesagt, es ist weniger der Aufbau das Problem.
Mein Problem liegt darin optimal in ein derartiges Schema meine Inhalte zu platzieren. Ich versuch meine Unklarheiten mal genauer auszuführen.

Header:
Soll ich da 3 Spalten wie bei der Tabelle machen? Oder wie soll ich den Banner das Formular und die Rundung am Schluss optimal platzieren? Denn der Banner soll ja links sein und das Formular rechts. Das Fomular rechts spaltet sich ja auch wieder in Login und Suche. Soll ich dort einfach jeweils einen Container erstellen? Oder für sowas schon wieder eine Tabelle?

Menü:
Hier ist der Aufbau ziemlich klar. Ist ja nur 1 Zeile

Inhalt:
Wie soll ich hier die obere Leiste einfügen? Einen zusätzlichen Container? Was für Möglichkeiten gibt es die einzelnen Spalten (Grafik, Pfad, Schatten, Menü,..) zu reproduzieren?
 
Es ist wieder soweit. Nach einer Einarbeitungsphase und mehreren Versuchen bin ich weiter gekommen. Jedoch sind noch einige Fehler vorhanden bei denen ich nicht mehr weiter weiß. Ich hab schon diverse Dinge probiert um sie zu lösen, jedoch ohne Erfolg. Nun hoffe ich wieder auf eure Hilfe:
Fehlerliste:
* Firefox: Seltsamerweise ist das Top-Menü nicht ganz rechts zentriert.
Der rechte Rand scheint vom Header (header_login) übernommen zu werden.
* Firefox & IE: left_shadow, content_middle_shadow und right_menu sollen sich an die Höhe vom content_wrapper anpassen.
* Firefox & IE: Bei kleinskalierung des Browsers kommt es zu starken Verschiebungen. Ein Seitenoverflow wäre optimaler.
* IE: Über dem oberen Menü ist ein ziemlich großer Abstand.
* IE: left_shadow und content_middle_shadow haben einen Abstand vom content,
bzw. content hat einen unnötigen Margin.

Link: http://www.CoderLine.net/preview/layout/
 
Hi,

dann geh ich mal die fünf genannten Punkte durch.

  • Die Floatumgebung durch float:right für #header_login muss beendet, und wieder der normale Textfluss hergestellt werden:
Code: 
#top_menu
{
        background:url(img/topmenu_bg.gif);
        height:30px;
        padding:5px 0 0 0;
        text-align:right;
        clear:right;
}
Code: 
#header_login form {
        margin-bottom:0;
}
Code: 
#left_shadow
{
        width:6px;
        background:url(img/content_middle_left.gif) repeat-y;
        height:100%;
        float:left;
        margin-right:0 !important;
        margin-right:-3px;
}

#content_middle_shadow
{
        float:right;
        width:7px;
        background:url(img/content_middle_shadow_bg.gif) repeat-y;
        height:100%;
        margin-left:0 !important;
        margin-left:-3px;
}

mfg Maik
 
Hi.
Ich hab nun mal wieder Zeit gefunden weiter zu arbeiten. Hab nun die meisten Bugs endlich raus. Firefox, InternetExplorer 7 und Safari stellen nun schon fast alles richtig dar. (Opera muss ich noch Downloaden und testen).
Nun hab ich nur noch 3 Hauptprobleme / Fragen die mir zu schaffen machen:
  1. [FF] Wenn ich den Firefox kleiner skaliere, passt sich der Inhalt des "Content" Divs nicht der Größe an sondern geht darüber hinaus. Gegoogelt hab ich schon, jedoch keine richtige Lösung gefunden da mein Content-Div eine variable Breite hat. Max-Width fällt somit weg. Diese FAQ-Lösung hab ich schon Probiert auf mein Problem anzuwenden, jedoch ohne Ergebnis. Tritt dieser Fehler wirklich aufgrund der Float Eigenschaften auf?
    Denn da das Menü und dessen Schatten über float:right an den Content "angedockt" werden, könne es ja sein dass der FF den Container im Hintergrund bis nach rechts rendert und den Text darüber legt.
    Einen CSS Rahmen sieht man aufgrund des Equal-Column-Height-Hacks nicht um dies zu kontrollieren. Die Web-Developer Toolleiste ermöglicht es mir auch nicht ordentlich den Bereich dieses Divs herauszufinden.
    Wie kann ich hier einen Umbruch für den Inhalt erzwingen?
  2. [IE6] Im IE6 wird der Equal-Column-Height-Hack seltsam gerendert. Die Spalten reagieren nur auf das Padding von 2000px. Das Overflow:hidden im Content-Wrapper wird seltsamerweise ignoriert und somit werden die Boxen in ihrer vollen Größe dargestellt. Das Problem liegt irgendwo bei den nachfolgenden Div-Elementen.Nehme ich diese heraus, so sind die Spalten nur mehr so hoch wie der Avatar abgeschnitten wird.
  3. [Generell] Wie ihr sicher schon bemerkt habt, ist die Ladezeit für das Layout enorm. Bis die Grafiken ins Layout gerendert werden muss man schon eine Weile warten. Kann man hier noch etwas optimieren? Alle Layoutgrafiken zusammen haben gerade mal 71KB. Welche Optimierungsmöglichkeiten gibt es hier dass die Seite schneller gerendert wird?
Entweder suche ich an den falschen Stellen bzw. übersehe die Fehler einfach. Oder mein HTML/CSS Know-How ist aufgrund meiner ständigen PHP(Backend) und C# Programmierung schon so out-of-date sodass ich mich dringend wieder in alles einlesen sollte. Ich hoffe dennoch ihr könnt meine Fragen beantworten.

Demo wie immer unter: http://www.CoderLine.net/preview/layout/

Gruß Daniel
 
Zuletzt bearbeitet:
Hi,

zum FF:
Sorge dafür, dass der content den erforderlichen rechten Abstand erhält.
Code: 
#content
{
	height:100%;
	background:url(../img/content_middle_center.gif) repeat-x #e6e6e5;
	padding:10px 15px 2000px 15px;
	margin: 0 240px -2000px 0;
}
Diese Änderung fordert jedoch auch eine Anpassung für den IE.
- IE 7:
Code: 
#content
{
  margin: 0 0 -2000px 0;
}
- kleiner IE 7:
Code: 
#content
{
  margin: 0 -3px -2000px -3px;
}
#left_shadow{ margin-right: -3px;}
#content_middle_shadow{ margin-left: -3px;}

zum IE:
Weise für IEs kleiner als Version 7 einfach mal eine Höhe von einem Prozent zu.
Code: 
#content_wrapper{ height: 1%;}

zur Ladezeit:
Du definierst in den CSS-Files für die IEs zum Beispiel die Formatierungen für body erneut. Damit wird das Design auch zweimal geladen.

In die Dateien innerhalb der bedingten Kommentare gehören nur zusätzliche Informationen oder Werte, die überschrieben werden sollen.

Ich hoffe, ich konnte dir weiterhelfen.

Ciao
Quaese
 
Opera9 rendert Padding-Abstände schwarz

Vielen Dank an die bisherige Hilfe. Ohne euch wäre ich jetzt noch an einigen Problemen am suchen. Großes Lob an euch.
Im IE6 (min-width Problem sollte ich noch lösen), IE7, Firefox3. wird nun alles richtig dargestellt (IE5.5 und IE5.01 stürzen ab :suspekt:) .

Da wäre nur noch 2 Probleme mit Opera 9 und Safari (Win).

1. Opera9 rendert seltsamerweise diverse Paddingabstände schwarz (ober dem TopMenu und den linken sowie rechten Abstand des content_top_wrapper).
Das CSS ist laut validator Valide (bis auf die nervigen "Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben" Warnungen). Ist dies nun ein Opera Bug oder ein logischer Fehler im CSS? (Anhang)

2. Safari(Win) erkennt aufgrund des align="left" Attributes des Avatars (Autorinfo) nicht die Ränder des Bildes und schneidet es auf der Höhe des Bildes ab. Löst dieses Attribut ein floating aus welches unterbrochen werden muss?

Danke schon mal im voraus für eure Antworten.
 
Hi,

das Phänomen im Opera tritt bei mir erst ab Version 9.5 auf. Als Lösung könntest du dem Element mit der ID content_wrapper eine Hintergrundfarbe zuweisen.
Code: 
#content_wrapper{
  background-color: #e3e3e3;
}
Das abgeschnittene Bild habe ich nicht nur im Safari, sondern auch im Opera. Du musst tatsächlich vor dem Schliessen des content-Elements den normalen Textfluss wieder herstellen.
Code: 
.clearDiv{ font-size: 1px;
           line-height: 0em;
           height: 0;
           clear: both;}
HTML:
Code: 
<div id="content">
<!-- Sonstiger Inhalt -->
  <h2>Autor</h2>
  <img src="img/content/avatar.jpg" width="115" height="115" hspace="4" alt="+++" align="left" style="border:1px solid #000;" />
  <div style="font-size:11pt"><img src="img/content/austria.gif" width="16" height="11" alt="&Ouml;sterreich" align="baseline" /> <b>+++</b> (Administrator)</div>

  Zurzeit bin ich 17 Jahre alt und Sch&uuml;ler an der HTL Dornbirn.<br />
  Seit 8 Jahren besch&auml;ftige ich mich mit Web-Development mit HTML, JavaSkript und CSS, <br />
  und seit 5 Jahren entwickle ich mit PHP und MySql. Vor 4 Jahren habe ich mit C++ und C# begonnen.<br />
  Java entwickle ich erst seit 1 Jahr. Neben der Programmierung ist seit 4 Jahren Gitarre-Spielen meine Leidenschaft.
  <div class="clearDiv">&nbsp;</div>
</div>
Den sonst verwendeten clearfix habe ich absichtlich nicht eingesetzt, da damit der Text wieder in die rechte Spalte läuft - zumindest im Safari.

Bei mir stürzen ausserdem weder IE 5.01 noch 5.55 ab.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück