CSS-Homepage
Markus
- sonstiges
0 Dennis0 Cyx230 Der Martin0 Mike©0 Andreas Lindig
Hallo Leute,
Habe letzlich eine rein CSS-basierende Homepage für meine Band programmiert. Bis jetzt steht nur das Rahmendesign. Und zwar hab' ich die Ganze Site mit Bereichen aufgebaut, die in einer screen.css genau definiert sind. Mein Problem: Auf Firefox wird die Seite perfekt angezeigt (bis auf ein paar kleine Sächelchen, die aber von meiner Seite aus noch nicht ganz stimmen), aber im Internetexplorer ist die ganze HP zum größten Teil vollkommen deformiert.
Mein Wunsch wäre, ob, wenn jemand von euch beide Browser besitzt, einer sich diese Page mal anschauen könnte. und vielleicht auch mal kurz in den Quellcode reinschauen könnte.
Vielleicht sieht ja jemand die Ursache für mein Problem.
Ich weiß einfach nicht mehr weiter. Vielleicht liegt es irgendwie an der Reihenfolge der Bereiche in der index.php? Hab' allerdings auch diese schon einmal umgestellt.
Für eine Antwort (mit Lösung) wäre ich euch allen sehr dankbar.
meine Homepage liegt derzeit auf http://www.markusritschel.de.vu/
Euer Markus
PS.: Einer Stellungnahme zum Design wäre ich im Übrigen auch nicht abgeneigt
Hi Markus,
Zuerst mal - gib uns doch bitte die richtige URL zu der Seite: http://mitglied.lycos.de/synthesizer/bandhp/, dadurch ersparst du uns, dass wir erst noch die richtige URL herrausfinden müssen um den Quellcode zu sehen.
Habe letzlich eine rein CSS-basierende Homepage für meine Band programmiert.
Psst, Homepages kann man nicht wirklich programmieren - HTML ist keine Programmiersprache, und wenn du was in PHP programmierst, dann hast du ein CMS oder so etwas programmiert, aber der Ausdruck "Homepage programmiert" ist etwas holperig ;-)
Mein Wunsch wäre, ob, wenn jemand von euch beide Browser besitzt, einer sich diese Page mal anschauen könnte. und vielleicht auch mal kurz in den Quellcode reinschauen könnte.
Vielleicht sieht ja jemand die Ursache für mein Problem.
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.
Schau dir in SelfHTML mal an, wie man Mehrspaltige Layouts mit float erstellen kann, nach meinen Erfahrungen kommt man damit besser weiter.
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.
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.
Dann nimm bitte das marquee raus - das ist einerseits fürchterlich zum Ansehen, andererseits ist und war das noch nie HTML Standard. Wenn du unbedingt einen Ticker haben willst, realisiere ihn mit Javascript, ich würde dir aber davon abraten - ein Ticker erinnert mich an eine billige Seite dir mich mit jeder Menge Werbung belästigen will, von so einer Seite bin ich in der Regel innerhalb von 10 Sekunden wieder unten.
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 http://css.maxdesign.com.au/ unter Listamatic und Listamatic2.
PS.: Einer Stellungnahme zum Design wäre ich im Übrigen auch nicht abgeneigt
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.
Zu der Schrift muss ich sagen, dass diese _extrem_ schlecht zu lesen ist, erinnert mich an den Satz „Kampf der Neger bei Nacht“ ;-) Soll heißen da ist kein Kontrast drin und das ist sehr schwer zu lesen, du solltest die Schriftfarbe etwas heller machen, das sowohl im Inhaltsbereich (da vor allem), wie auch in der Navigationsleiste und der Fußzeile.
Ach ja - und den Print-Button halte ich für Überflüssig, ich weiß, wie ich eine Seite ausdrucken will, wenn mir danach ist. Wenn du aber schon dabei ist, könntest du dir mal anschauen, wie ein Ausdruck aussieht - da ist plötzlich nichts mehr von einer Überschrift in Form des Bandnamens oben auf der Seite da.
Noch ein Tip: Ich fände es schön, wenn man beim Klick auf das Logo wieder zur Startseite zurück käme.
MfG, Dennis.
Hi,
erstmal danke für die zügige Antwort. Ich habe allerdings noch ein paar Fragen dazu. Bin nämlich noch ziemlich neu auf dem Gebiet.
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?
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?
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.
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?
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?!
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)
Zu der Schrift muss ich sagen, dass diese _extrem_ schlecht zu lesen ist, erinnert mich an den Satz „Kampf der Neger bei Nacht“ ;-) Soll heißen da ist kein Kontrast drin und das ist sehr schwer zu lesen, du solltest die Schriftfarbe etwas heller machen, das sowohl im Inhaltsbereich (da vor allem), wie auch in der Navigationsleiste und der Fußzeile.
Ja, mein Fehler: mein Display ist ziemlich hell eingestellt.
Ich werd' mal versuchen deine Vorschläge umzusetzen, vielleicht klappt's ja dann.
Markus
PS.: Wie findest du das Design allgemein (Farbkombination usw.)?
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.
Hallo Markus,
meine Homepage liegt derzeit auf
Sind da etwa mehrere Framesets eingesetzt um die Lycoswerbung zu umgehen?
...] aber im Internetexplorer ist die ganze HP zum größten Teil vollkommen deformiert. [...] Für eine Antwort (mit Lösung) wäre ich euch allen sehr dankbar.
Wegen der unklaren Frames hab ich den IE nicht draufgelassen.
Grundsätzlich mag es um den Box-Bug gehen, kannst du ja einfach
recherchieren. Für die IEs empfehle ich ansonsten eine Weiche per
Cconditional comments.
PS.: Einer Stellungnahme zum Design wäre ich im Übrigen auch nicht abgeneigt
Etwas dunkel, zuwenig Kontrast (unleserlich).
Grüsse
Cyx23
Hallo Markus,
Habe letzlich eine rein CSS-basierende Homepage für meine Band programmiert.
das glaube ich nicht. Weder in HTML noch CSS lässt sich irgendwas programmieren.
Mein Problem: Auf Firefox wird die Seite perfekt angezeigt (bis auf ein paar kleine Sächelchen, die aber von meiner Seite aus noch nicht ganz stimmen), aber im Internetexplorer ist die ganze HP zum größten Teil vollkommen deformiert.
Also ich weiß nicht was du hast: Bei mir sieht die Seite im IE5.5 und im FF1.0 absolut identisch und sehr übersichtlich aus: Ein vollkommen leeres Fenster.
und vielleicht auch mal kurz in den Quellcode reinschauen könnte.
Da sehe ich ein bisschen Javascript-Gebrabbel, dann ein Frameset, bestehend aus einem 100% großen Frame ohne Inhalt (weil das src-Attribut leer ist) und einem zweiten, 0% großen, in dem http://www.nic.de.vu/spr/zk.html unsichtbar geladen werden soll.
Da ich für unbekannte URLs selbstverständlich kein Javascript zulasse, bleibt's dann bei diesem Eindruck. Verlasse dich nie auf Javascript, wenn es um wichtige Funktionen, in diesem Fall sogar die Erreichbarkeit deiner Seite geht!
meine Homepage liegt derzeit auf http://www.markusritschel.de.vu/
Nö, da liegt höchstens die böse Frame-Weiterleitung. Warum machst du es den Leuten so schwer? Erst die verkorkste Pseudo-Domain mit einer sogenannten Weiterleitung im Frame, dann gibst du noch nicht einmal die tatsächliche URL an, sondern willst die per Javascript nachladen, was natürlich prompt fehlschlägt. Ach so, die richtige Adresse wäre wahrscheinlich http://mitglied.lycos.de/synthesizer/bandhp/, oder nicht? Warum sagst du das nicht gleich?
Ach so, der schöne Spruch mit dem Urteil des Landgerichts Hamburg ist übrigens glatt für'n A*****, lies mal http://wazgnuks.net/impressum. Sehr interessant.
Bezüglich deines Layouts solltest du bitte berücksichtigen, dass die Bildschirmauflösung für dich als Webautor eine vollkommen irrelevante Größe ist, weil sie nichts mit der Größe des Browserfensters zu tun hat. Ein gut gemachtes Design passt sich fließend der Fenstergröße an. Mit absoluter Positionierung legst du dir dabei meist selbst Steine in den Weg. Und der Hinweis "optimiert für xyz" kann leicht interpretiert werden als "ich hab's nicht geschafft, die Seite für alle Browser anständig hinzukriegen".
PS.: Einer Stellungnahme zum Design wäre ich im Übrigen auch nicht abgeneigt
Für meinen Geschmack ist es insgesamt zu düster. Das Thema ist Jazz? Gut, auch wenn ich diese Musikrichtung nicht mag, aber Jazz ist doch was Munteres, Fetziges, Lebendiges. Warum dann diese dunkel-schwermütige Optik?
Schönen Abend noch,
Martin
Hi Martin,
Für meinen Geschmack ist es insgesamt zu düster. Das Thema ist Jazz? Gut, auch wenn ich diese Musikrichtung nicht mag, aber Jazz ist doch was Munteres, Fetziges, Lebendiges. Warum dann diese dunkel-schwermütige Optik?
vielleicht handelt es sich um Black Jazz. ;)
Schönen Sonntag noch!
O'Brien
Hi,
Also ich weiß nicht was du hast: Bei mir sieht die Seite im IE5.5 und im FF1.0 absolut identisch und sehr übersichtlich aus: Ein vollkommen leeres Fenster. [...] Da sehe ich ein bisschen Javascript-Gebrabbel, dann ein Frameset, bestehend aus einem 100% großen Frame ohne Inhalt (weil das src-Attribut leer ist) und einem zweiten, 0% großen, in dem http://www.nic.de.vu/spr/zk.html unsichtbar geladen werden soll.
Könnte vielleicht daran liegen, dass ich im Moment kostenlosen Web-Space nutze?! Kleiner Tipp wegen "leerem Fenster": Drück mal die Taste [F5]; behebt so manches Ladeproblem *g*
Markus
hi,
Kleiner Tipp wegen "leerem Fenster": Drück mal die Taste [F5]; behebt so manches Ladeproblem *g*
Wenn das für das ordnungsgemäße "Funktionieren" deiner Seite erforderlich sein sollte - dann schreibe es bitte als Hinweis groß und deutlich lesbar auf die Startseite.
gruß,
wahsaga
Ist das hier eine Shoutbox oder was?
Beleidigt nicht einfach andere Leute.
Gruß
Christina
hi,
Ist das hier eine Shoutbox oder was?
Falls du mit "oder was" ein Forum meinst, dann ist es "oder was".
Beleidigt nicht einfach andere Leute.
Wer hätte das getan, und wo?
gruß,
wahsaga
Hallo Markus,
Könnte vielleicht daran liegen, dass ich im Moment kostenlosen Web-Space nutze?!
Bei Lycos? Nein, so weit lässt du die Besucher ja gar nicht erst kommen, indem du ihnen stattdessen eine Phantasieadresse auf Vanatu angibst.
Kleiner Tipp wegen "leerem Fenster": Drück mal die Taste [F5]; behebt so manches Ladeproblem *g*
Aber nicht, wenn sich schon anhand des Quellcodes verifizieren lässt, "da is nix". Und ein Frame mit leerem src-Attribut und ein zweiter mit einer Ausdehung von 0%, das ist für mich "nix".
So long,
Martin
Moin Markus,
http://www.markusritschel.de.vu/
PS.: Einer Stellungnahme zum Design wäre ich im Übrigen auch nicht abgeneigt
darf ich mal drauf hauen?
Es tut mir Leid, aber das brennt mir auf der Zunge.
Startpage - Beginnend mit dem Impressum? Da fehlt mir doch gleich die Interrese zum weiter stöbern.
Ticker - Braucht kein Mensch, noch dazu Marquee, welcher nur vom IE angezeigt wird.
Für die Füße - [...]Das Landgericht Hamburg hat mit Urteil vom 12.05.1998[...]
Ganz böse - "Diese Website wurde designed für eine Bildschirmauflösung von mind. 1024x768 Pixel, Javascript und für die Browser Microsoft Internet Explorer und Mozilla Firefox optimiert"
Ähm Markus hier Markus da - E-Mail: markus@web.de und Webdesign by Markus und made by Markus © und Technische Fragen bitte an markus@web.de.
mailto - Ist böse. Wenn ich das klicke stürzt mein Browser ab, da ich keinen Mail Client installiert habe. Naja ich habe TheBat installiert, aber auch da macht der Browser die Grätsche.
Noch was Kleines - Sie sind hier: impressum
Ist deine Page so tief verschachtelt als das ich wissen müßte wo ich mich gerade befinde?
Mein Eindruck: Die Page ist lieblos zusammengeschustert.
Sorry, keep smiling :-)
regds
Mike©
Hello,
darf ich mal drauf hauen?
von mir aus
Ticker - Braucht kein Mensch, noch dazu Marquee, welcher nur vom IE angezeigt wird.
OK, war auch nur mal ein Test. (Wird übrigens auch von Firefoy angezeigt. Mit anderen hab' ich noch nicht getestet)
Ganz böse - "Diese Website wurde designed für eine Bildschirmauflösung von mind. 1024x768 Pixel, Javascript und für die Browser Microsoft Internet Explorer und Mozilla Firefox optimiert"
Ähm Markus hier Markus da - E-Mail: markus@web.de und Webdesign by Markus und made by Markus © und Technische Fragen bitte an markus@web.de. ... Startpage - Beginnend mit dem Impressum? Da fehlt mir doch gleich die Interrese zum weiter stöbern.
Wenn du dir die Seite genau angeschaut hättest, hättest du vielleicht bemerkt, dass im Prinzip noch kein bisschen Inhalt drauf ist, und dann hättest du dir eigentlich denken können, dass das sog. "Impressum" nur als Textfülle da ist. Mir ging es jetzt nur mal um das Rahmen-Design
Sorry, keep smiling :-)
Schon OK.
hi,
Ganz böse - "Diese Website wurde designed für eine Bildschirmauflösung von mind. 1024x768 Pixel, Javascript und für die Browser Microsoft Internet Explorer und Mozilla Firefox optimiert"
Insbesondere in Kombination mit der Aussage aus dem Eingangsposting,
aber im Internetexplorer ist die ganze HP zum größten Teil vollkommen deformiert
ist das ja recht lustig.
Oder war hier jemand lediglich nicht in der Lage, eine Aussage im Futur zu machen ...?
gruß,
wahsaga
Hallo,
wieso is'n die Schrift Hellschwarz auf Dunkelschwarz? ;-) kann man ja gar nicht lesen. Merkst Du das etwa nicht selbst?
Gruß, Andreas