[HTML/CSS] Designumsetzung

[Gsus]

Hallo,
ich bin gerade dabei mit etwas Hilfe mein erstes Design mit Divs umzusetzten.. Früher habe ich immer Tabellen benutzt.. nun bin ich fast fertig, stehe allerdings vor 3 Problemen...

Das Design bzw. meine bisherige Arbeit könnt ihr auf https://www.funodia.de/test.html begutachten...

aber nun zu den Probelemen:
1. Das komplette Layout soll mittig auf der Seite stehen... kalppt im FF ganz gut im IE leider nicht

2. Die Contentbereich soll mittig zwischen die beiden Menüs, leider habe ich hierfür keinen Lösungsansatz

3. Ist die Verschachtelung gut? Kann man Teile im CSS zusammenfassen? Wie ist der Code insgesamt also praktisch Vorschläge, wie man die Umsetzung noch verbessern könnte...

Ich hoffe einer von euch kann mir dabei helfen..

mfg
Gsus

 

[theHacker]

1. Das komplette Layout soll mittig auf der Seite stehen... kalppt im FF ganz gut im IE leider nicht

Für den IE setzt du den Body auf

text-align: center;

und den Container darunter wieder auf

text-align: left;

2. Die Contentbereich soll mittig zwischen die beiden Menüs, leider habe ich hierfür keinen Lösungsansatz

Mach das floating von content2 weg.

3. Ist die Verschachtelung gut? Kann man Teile im CSS zusammenfassen? Wie ist der Code insgesamt also praktisch Vorschläge, wie man die Umsetzung noch verbessern könnte...

• Was sofort gemeldet wird: title-Tag und DOCTYPE fehlen. Wenn du ein paar Fehler noch behebst, validiert die Seite XHTML 1.0 Strict (img-Tags schließen und mit alt-Attribut ausrüsten, titel-Tag einfügen, xmlns im html-Tag, Links haben noch leere href-Attribute; da kannst ja href="#" zum Testen einsetzen).

• Die Klassennamen sind sehr verwirrend. z.B. navi und navi2 klingen nach zwei unterschiedlichen Navigationen. Aus dem Code geht hervor, dass das eine der Fenstertitel und das andere der Fensterinhalt is.

• Struktur: Navigationslinks sind eine Aufzählung, d.h. <ul> verwenden.

• <span class="footer"><a href="" class="footer">AGB</a> / <a href="" class="footer">FAQ</a>

  Die Klassenangabe für die Links ist unnötig. Wenn du alle Links in <span class="footer"> formatieren willst, kannst du die <a>-Tags direkt über

  span.footer a {
    /* ... */
  }

  erreichen.

• <span class="navihead">Navigation</span><br /><br />

  Die <br />s weg. Wenn du wie oben schon erwähnt, eine Aufzählung nimmst, kannst du die Abstände direkt am <ul>-Element einstellen.
  <br /> gehört für einen Zeilenumbruch im Absatz. Nicht: Mehrere hintereinander bauen, um Abstände einzustellen.

 

[Gsus]

das erste hat funktioniert..
das zweite leider nicht.. beim dritten bin ich grade dabei.. xhtml 1.0strict ist es nun aber nachdem ich die <ul>s eingefügt habe, ist das wort "Navigation" irgendwie nach unten gerutscht, das soll wieder in die mitte den blauen balkens...

mfg
Gsus

 

[theHacker]

das zweite leider nicht..

Also in meinem Firefox funktioniert es.

[...] aber nachdem ich die <ul>s eingefügt habe, ist das wort "Navigation" irgendwie nach unten gerutscht, das soll wieder in die mitte den blauen balkens...

Mach die Dinger mal als Divs und nicht Spans, dann hast du wieder Kontrolle über die Vertikale. Kp, warum sich das geändert hat.
Ich hab grade mal die Spans durch Divs ersetzt und dann war die Box-Überschrift wieder in der Mitte, wie du es haben willst.