Homepage mit CSS - kleine Probleme

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen

Ich fange gerade an mich mit der Homepagegestaltung komplett über CSS zu beschäftigen, bis jetzt hab ich CSS nur für die Farbg- und Textgestaltung benutzt.
Und schon tauchen die ersten Probleme auf :smile:

Wenn ich die Seite mit dem IE 6 betrachte, sieht alles so aus wie es sein sollte, außer das der Content-Bereich rechts noch breiter sein könnte (wie krieg ich das hin?).

Wenn ich sie nun aber mit dem Firefox anschaue, hängt der Content-Bereich links unter der Navigation, und das war so natürlich nicht geplant.

Wäre schön, wenn sich das mal jemand anschauen könnte.
Seite und CSS Datei sind hier zu finden:

http://home.arcor.de/diemaus29/test3.html
http://home.arcor.de/diemaus29/test3.css

Danke und Grüße
diemaus

#2

Erstmal ein kleines Lob, das ganze sieht schon ganz nett aus, der HTML-Code ist einigermaßen sauber und fast gültig:
http://validator.w3.org/check?verbose=1&uri=http%3A/…

Wenn ich sie nun aber mit dem Firefox anschaue, hängt der
Content-Bereich links unter der Navigation, und das war so
natürlich nicht geplant.

Firefox macht in dieser Situation genau das, was das W3C geplant hat. Das Menü ist als float definiert und verdrängt den Inhalt des Content-Blocks, aber nicht dessen eigentliche Blockstruktur (sprich: der Text umfließt das Menü korrekt, aber das Menü überlagert den türkisen Hintergrund). Das kannst du z.B. kaschieren, indem du dem Content eine left-margin mitgibst, die das Menü freilässt oder aber das Menü so gestaltest, dass es die relevanten Teile der Content-box überschreibt.

#3

Hi

Erstmal ein kleines Lob, das ganze sieht schon ganz nett aus,
der HTML-Code ist einigermaßen sauber und fast gültig:
http://validator.w3.org/check?verbose=1&uri=http%3A/…

Danke, habs korrigiert: http://validator.w3.org/check?verbose=1&uri=http%3A/…

Firefox macht in dieser Situation genau das, was das W3C
geplant hat. Das Menü ist als float definiert und verdrängt
den Inhalt des Content-Blocks, aber nicht dessen
eigentliche Blockstruktur (sprich: der Text umfließt
das Menü korrekt, aber das Menü überlagert den türkisen
Hintergrund). Das kannst du z.B. kaschieren, indem du dem
Content eine left-margin mitgibst, die das Menü freilässt oder
aber das Menü so gestaltest, dass es die relevanten Teile der
Content-box überschreibt.

Habs mit left-margin gemacht, und funktioniert.

Grüße
diemaus

#4

Danke, habs korrigiert:
http://validator.w3.org/check?verbose=1&uri=http%3A/…

Eine Kleinigkeit noch: XHTML ist ja eigentlich XML, und XML sollte mit einer XML-Deklaration beginnen. In deinem Fall wäre das dann:

<?xml version='1.0' encoding='ISO-8859-1'?>

Die Übung hat im wesentlichen den Sinn, dass in XHTML nur diese Deklaration das encoding angibt, und andere Angaben wie z.B. durch den Server oder in einem Meta-Tag ignoriert werden dürfen.

#5

Hi,

Eine Kleinigkeit noch: XHTML ist ja eigentlich XML, und XML
sollte mit einer XML-Deklaration beginnen. In deinem
Fall wäre das dann:

<?xml version='1.0' encoding='ISO-8859-1'?>

das „sollte“ sollte man in diesem Fall auch nutzen. Der IE schaltet, wenn der DOCTYPE nicht in der ersten Zeile steht, in den Quirks-Mode, was für sein Verhalten relativ fatal ist. Ich empfehle also, darauf zu verzichten, solange es nicht Pflicht ist.

Ein wenig Code-Kritik:

  • Gib alle CSS-Werte in einem ausgelagerten Block an.
  • ist ein klassisches
    .
  • Verzichte auf  . Wenn Du Linien ziehen möchtest, nutze border.
  • Ein Logo ist klassischerweise ein bzw. Teil davon, oder es ist per background-image eingebunden.
  • In ist die ID hyperliquid. Ggf. verwende drum herum ein zur Strukturierung der Seitenbereiche.
  • IDs und Klassen, die Hinweise auf die derzeit gewünschte Darstellung geben (z.B. id=„left“), sind falsch gewählt.
  • Ebenso falsch ist der Code, wenn man allen Elementen eines Bereiches eine Klasse gibt. Ein sicheres Zeichen!
  • bezeichnet einen Absatz im Fließtext, keine Überschrift.
  • Eine Liste ist eine Liste ist eine Liste. Nutze also auch eine solche, wenn Du eine Liste von Elementen vorliegen hast. Beschäftige Dich auch mit .
  • Im fehlt noch die innere Auszeichnung, z.B. ein .

CSS-Code:

  • „px“ ist für Schriftgrößen ungeeignet. Nutze „em“ oder „%“.
  • Verzichte nie, nie, nie auf die generische Schriftfamilie!
  • Entscheide Dich für ein Farbformat. Entweder #RRGGBB, oder #RGB, oder Keyword, nicht aber gemischt. Das ist zwar kein Fehler, aber eine Stilfrage.
  • Nutze neben den Simple Selectors auch weitere, allen voran den Nachfahrenselektor.

Eine Bemerkung noch: Mit etwas anderem als einem Mozilla die primären Tests durchzuführen, ist hochgradig ineffizient; zuerst im IE zu testen sogar das Schlimmste, was man tun kann. Das gilt sogar, wenn die Zielgruppe ausschließlich den IE einsetzt (z.B. in einem Intranet).

Cheatah