CSS-Homepage

[Dennis]

Hi Markus,

Eine Lösung kann ich dir jetzt mal soeben auch nicht nennen - ich habe allerdings gesehen, dass du alle Bereiche absolut zu positionieren scheinst, das ist nicht gerade besonders guter Stil und führt oft zu Problemen insbesondere im IE.
Wie soll ich die Bereiche denn dann positionieren? Ich meine vom Absolutepunkt auszugehen ist doch die sicherste Methode um genaue Positions-Angaben zu machen, oder?

Ein Artikel, der neulich im SelfHTML Weblog erschienen ist, zeigt die Spaltengestaltung mit CSS, realisiert durch [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float].

Da du ein zweispaltiges Layout realisieren willst, kannst du also der Navigation ein float:left; geben, wodurch der Inhaltsbereich rechts daneben gelangt. Der Vorteil von einem mit float gestaltetem Layout ist, dass es sich besser an den Inhalt anpassen kann als ein absolut positioniertes Layout - zumindest meinen Erfahrungen nach. Meinen Erfahrungen nach hat man mit float-Layouts auch weniger Probleme über die Browser hinweg.

Schau dir in SelfHTML mal an, wie man Mehrspaltige Layouts mit float erstellen kann, nach meinen Erfahrungen kommt man damit besser weiter.
Footer OK, aber Head?

Ich verstehe dich nicht ganz. Hast du Probleme mit dem Verständnis des Wortes „Head“? Oder ist dir der Zusammenhang hier nicht klar?

Ein Head oder Header ist normalerweile eine Kopfzeile, also das Gegenstück zu einer Fußzeile.

So, jetzt mal zum Code selber - hast du dir schon mal angeschaut, was der Validator dazu sagt? Hm, solltest du vielleicht mal tun und deine Fehler im HTML Quellcode korrigieren.
Danke, die Seite kannte ich noch nicht. Ist nicht schlecht. Ich hab' meinen Code im Dreamweaver-Editor überprüfen lassen, der hat aber nichts gefunden.

Nun, das Thema Dreamweaver ist eine leidige Diskussion - ich sage einfach nur, dass ich ihn nicht mag, und das mein Favorit PSPad ist. Generell funktionieren aber diese Code-Prüfer in Programmen nicht so gut, das W3c solltest du aber kennen - das W3c ist das Consortium, welches u.a. für die HTML „Regeln“ zuständig ist.

Sorge nun zuerst einmal dafür, dass ein HTML Dokument nach dem W3c Validator korrekt (= valide) ist.

Als erstes solltest du mal einen Doctype angeben - wenn du einen Strict Doctype verwendest vermeidest du im IE 6 schon mal etliche Probleme mit dem Border-Box-Model.
Was bringt so ein Doctype eigentlich bzw. wie arbeitet er?

Der Doctype legt fest, welchen Regeln, genauer gesagt welcher DTD das nachfolgende HTML Dokument entspricht, erst dadurch wird Programmen die die Seite weiterverarbeiten sollen klar, auf welche Weise die Weiterverarbeitung statt finden muss.

Ein HTML Dokument muss einen Doctype besitzen - das ist wie beim Autofahren auch, wenn du Auto fahren willst, musst du einen Führerschein haben.
Gut, du magst nun argumentieren, dass du auch ohne Führerschein Auto fahren kannst, aber das Unfallrisiko ist eben deutlich höher.

Zu deiner Navigation: Was du da mit den ganzen Div's produziert hast ist grauenhaft, verwende bitte für eine Navigation eine Liste (z.b. <ul>), mittels CSS kannst du diese dann so formatieren, wie du es willst - ganz viele schöne Beispiele gibt es unter
Das mit <ul> war mir nicht geläufig. Ich dachte damit kann man nur Aufzählungen erstellen. Generell würdest du die aber nur für Links hernehmen, oder auch für anderes?!

Ein <ul> würde ich immer da nehmen, wo du Daten hast, die einer Liste entsprechen. Wenn es darum geht, welches HTML Element du für bestimmte Informationen verwendest darfst du nicht zuerst an das optische Denken, löse dich von dem Gedanken, dass das HTML Element etwas mit der Optik zu tuen hätte, dass kannst du alles per CSS beeinflussen, ändern, manipulieren.
Wenn du Inhalte mit einem HTML Element versehen willst, nutze immer das HTML Element, was am meisten _Sinn_ für den Inhalt gibt, bei einer Navigation ist das eben eine Liste.

Ob du dann die verschiedenen Punkte der Liste als Links machst oder nicht, ist deine Sache - auf jeden Fall kannst du mit [link:http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_type@title=list-style-type] die Punkte vor der Liste entfernen (falls dir diese nicht gefallen) und den li's per [link:http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background@title=background] dein Hintergrundbild link_bg.png zuweisen. Um die ganze Fläche anklickbar zu machen (und nicht nur den Text) hilft es (in allen Browsern außer dem IE) dem Link noch ein [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display]:block; mitzugeben.

Die Header Grafik gefällt mir ganz gut - allerdings ist bei meiner Bildschirmauflösung von 1600x1200 px oben rechts nur noch eine blaue Fläche, weil die Grafik zu Ende ist - das sieht ziemlich leer aus da.
Ich weiß, aber es ist nun einmal die einzigste Möglichkeit ein "Mittel-Ding" für alle Auflösungen zwischen 1024x768 und 1600x1200 zu erstellen, oder hast du einen besseren Vorschlag? (Bin immer offen für neues bzw Verbesserungsvorschläge)

Ich würde das so machen - ich würde die Header Grafik in zwei Grafiken aufteilen, eine Grafik wäre der linke Teil mit dem Bandnamen, bis einschließlich „:.“, der zweite Teil wären die Bilder.

Dann würde ich folgendes machen:

<h1 id="head"><img src="header_links.png" alt="Bandname" /></h1>

Und als CSS:

#head {  
  background: url(header_rechts.png) top right no-repeat #0D2D54;  
}

Dadurch würden der rechte Teil der Grafik mit den Bildern immer am rechten Rand sich befinden, während der Bandname immer am linken Rand wäre - der freie Bereich in der Mitte ist mit der Farbe #0D2D54 aufgefüllt.

PS.: Wie findest du das Design allgemein (Farbkombination usw.)?

Nun, wie ich oben schon versucht habe zu sagen - viel zu dunkel! Die Schrift kann ich nicht lesen - ich muss auf weniger als 10 cm an den Bildschirm rangehen oder den Text markieren, damit ich ihn lesen kann - das sollte natürlich keinenfalls so sein.

Unabhängig davon müssen die Farben der Seite natürlich zum Musik-Stil der Band passen - eine Band, die klassische Musik spielt passt nicht zu einem schwarzen Hintergrund, eine Punk-Band passt nicht zu einem zart-rosanem Hintergrund.

MfG, Dennis.