Homepage sieht grauenhaft aus, bitte um Hilfe

Hallo,

ich bin gerade dabei für einen Freund ein Design einer Homepage zu erstellen. Besser gesagt, das komplette html bis auf den Inhalt (Text).

Dabei war eine Anforderung, dass der Seiteninhalt im html vor dem Menü steht (ob das sinnvoll ist, soll hier einmal aussen vor bleiben) und die Formatierung in css ausgelagert werden soll.

Ich habe mich mal daran gemacht und eine Beispielseite gemacht, die mir und ihm ganz gut gefallen hat. Entwickelt habe ich die Seite mit dem Editor und Frontpage.
Getestet mit dem IE7 und IE8. Dann wollte ich sie auch mit anderen Browsern testen, da hat mich fast der Schlag getroffen.
Dies ist auch der Grund für diesen Thread.

Ich bitte euch, mir Tipps zu geben, was ich genau ändern soll, um die Website bei allen Browsern ansehenlich dargestellt zu bekommen.

Es geht um die Website:
http://www.karpfen-angeln.com

Nun zu den einzelnen Browsern und den Darstellungsfehlern:

IE8 & Firefox 3.0:
1) Auf der Unterseite (http://www.karpfen-angeln.com/grundangeln/tipps.html) wie auch auf der Startseite geht der Hintergrund nicht bis zum unteren Bildrand. Das liegt irgendwie an der Länge des Seiteninhaltes. Zudem erscheinen auf manchen Seiten auch horizontale und Vertikale Scrollleisten, obwohl sie nicht erforderlich sind.

Opera V9:
Auf den Seiten erscheint unten ein vertikales Scrollbalken, der nicht nötig und nicht gewünscht ist.
Hintergrundhöhe orientiert sich an Seiteninhalt nicht an Browsergrösse bei wenig Inhalt.

IE6:
Oh gott, seht euch das an !! Da weiss ich garnicht wo ich anfangen soll. Es wird das Menü unter dem Seiteninhalt angezeigt.
Ich habe schon sehr lange nach dem Problem gesucht und bin auf einen Marginverdopplungsbug gestossen. Es wurde geraten ein display:inline in das jew. div einzufügen. Aber auch dies hat mir nicht weitergeholfen

Ich habe jetzt bereits sehr viele Stunden an der Fehlersuche aufgehalten und bin schon ganz entmutigt, dass ich das noch hinbekomme.

Ich wende mich daher in letzter Hoffnung an euch und bitte um Hilfe.

Noch ne kleine Anmerkung:
Ich bin kein html-Profi, was man ja gewiss auch am Quellcode sieht. Ich habe lediglich bereits einige kleiner Websiten erstellt.
Ich habe mich daher bereit erklärt, einem Kollegen unentgeltlich bei der Gestaltung der Homepage zu helfen.

Bei der online gestellten Website funktionieren bisher ausschliesslich die Seiten über das Grundangeln und die Startseite.

Ganz ganz lieben Dank für euere Hilfe, Gruß, Heiko

Zitat von bandit600

Nimm's mir nicht übel, aber ich würde sagen: Fang neu an, das ist einfach nur Käse mit massenhaft Fehlern. Siehe Klick mich

Und wieso man bei dem Inhalt auch noch scrollen muss, ist mir ein Rätsel.

Wie kommst du bei deinen Kenntnissen auf die Idee, für jemanden eine Homepage zu basteln?

Hallo,

danke für dein Kompliment zu meiner Arbeit.

Der Link ist hilfreich. Vielen Dank dafür. Ich werde die Fehler gerne beheben, die dort angezeigt werden. Die meisten beziehen sich ja auf die verwendung von <br>.

Weshalb ich für jemand eine Homepage mache ? Ich bin gerade dabei zu lernen wie man mit html und css umgeht, also noch kein Profi. Was ich auch geschrieben habe.
Mein Kollege hat von html leider noch weniger Ahnung wie ich. Ich habe aber den Willen mit in das Thema einzuarbeiten. Ich finde dies geht am besten an einem kleinen Projekt.
Da wir uns leider keinen proffessionellen Homepageersteller leisten können bleibt uns leider nichts anderes übrig, als es uns selbst anzueignen.

Ich hoffe daher auf weitere konstruktive Kritik und gute Tipps.

Gruß, heiko

Zitat von synaptic

ist schon richtig, was du da sagst, aber ohne ne vernünftige grundlage fürs layout ist dein projekt schon zum scheitern verurteilt.

du hast ne grafik die sich wiederholt und dabei nen häßlichen schnitt hat, selbst wenn du ohne grafiken arbeiten würdest bräuchtest du nen konzept für das "wie" und auch nen farbschema, denn weißer fisch auf weißem grund mit weißer schrift bringt evtl nem screenreader etwas aber nicht den anderen menschen, die ohne surfen

Hallo,

das die Hintergrundgrafik noch nicht optimal ist, ist mir bewusst.
Auch die Farben (z.B des Banners) sind noch nicht fest gewählt. Es ging mir leidglich um die Darstellung der einzelnen Blöcke.
Da die Farben ja immer noch im css-File verändert werden können sind diese erstmal vorläufig.

Die seite ist ja noch nicht fertig, sondern erst in der Erstellung. Ich habe sie lediglich mal auf die url gelegt um sie euch zugänglich zu machen.

Gruß, Heiko

Hallo,

ich denke, es ist wieder mal Zeit, dass ich mich zu Wort melde.

Als ich den Thread gestartet hatte und die ersten Antworten bekam habe ich mich wirklich etwas überfahren und teilweise sogar etwas persönlich beleidigt gefühlt.

Doch mittlerweile verstehe ich, was ihr sagen wollt.

Ich habe mich dann doch dazu entschlossen, mir der Hilfe von jemandem die Seite neu aufzusetzen.

Im Folgenden möchte ich nun gerne noch einige Dinge loswerden, dies soll keine Rechtfertigung sein, sondern soll lediglich meine Denkweise klarlegen.

1) Ich war mir durchaus bewusst, dass das design (Farben+Hintergrundbild) noch nicht optimal ist. Es ging mir bei diesem Thread lediglich darum, dass die Seite in verschiedenen Browsern anderst angezeigt wurde und ich in diesem Punkt Hilfe gesucht hatte. (Evtl. war der Threadtitel etwas ungünstig gewählt)

2) Das oft bemängelte Menü kam dadurch zu stande, dass ich beim Design offen bleiben wollte. Die div's im Menü sind dazu da, dass man den selektierten Menüpunkt farblich hervorheben kann. Nicht nur die Testbreite (wie beim Text-hintergrund) sondern einen farbigen Kasten. Auch das Untermenü-das aufgeklappt wurde, sollte evtl. später mit einem anderen Kasten hervorgehoben werden. Daher die ganzen divs.

Zu dem Menü:
Es wurde öfter empfohlen, das Menü mit einer Liste zu machen. Ich möchte aber in jedem Menüpunkt ein Untermenü einblenden. Laut meinen Kenntnissen müsste ich doch dann um die Einrückung und den farblichen Hintergrund machen zu können, die Liste für das Untermenü in einen div setzen und diesen als Listenelement in der oberen Liste verwenden.
Auch um den aktuell gewählten Menüeintrag farblich hervorzuheben (Nicht nur die Textbreite, sondern einen fixen Kasten) müsste ich dort wieder ein div verwenden.

Versteht mich bitte nicht falsch, doch nicht dass ich mich wieder ransetze und wieder in die selbe Richtung denke.

Jedenfalls habe ich gelernt, dass man sich bei dem Design 100% sicher sein sollte, bevor man mit der Seite beginnt. Ich hatte das mit dem design im css dann irgendwie missverstanden.
Ich dachte, dass man die Seite macht und sich dann später Gedanken zum genauen Design macht und dies im css erstellt.
Da habe ich dann wohl etwas falsch gedacht.

Gruß, heiko

Hallo,

vielen Dank für das Beispiel, das Hilft mir weiter.

Was ich damit gemeint habe war:
Dass ich evtl. das Untermenü in einer kleinen Box farblich hervorheben möchte. Dazu würde ich dann doch wieder ein div benötigen. Also einen rechteckigen Block, der um das Untermenü liegt und eine andere Hintergrund-Farbe hat.

Zudem wollte ich bei meiner Seite den Link, von der Seite, die gerade geöffnet ist kennzeichnen. Dazu hatte ich geplant, auch hier einen Block mit einer anderen Farbe zu verwenden, was wieder ein div benötigen wurde.
Es wäre zwar auch möglich, das li-Element mit einem id zu versehen und nur von diesem die Hintergrundfarbe zu setzen. Jedoch ist dann die Hintergundfarbe (Länge in pixel der Hintergundbreite) nur so breit wie auch der Text des Listeneintrages ist. Was bei unterschiedlichen Listeneinträgen auch unterschiedliche Breite bedeutet. Bei dem div könnte ich die Breite explizit setzen.

Ich hoffe, man versteht was ich meine. Ist etwas blöd zu erklären. Ich habe daher ein kleines Beispiel gemacht. Babei ist das erste div für die Kennzeichnung des derzeit ausgewählten Menüpunktes zuständig und das zweite für die farbliche Abhebung des Untermenüs.

<ul>
   <li>Menupunkt 1</li>
   <li>
      <div style="background-color: #ffffff; width: 200px;">
               Menupunkt 2
      </div>
      <div style="background-color: #fcfcfc; width: 200px;">
               <ul>
                     <li>Menupunkt 2.1</li>
                     <li>Menupunkt 2.2</li>
               </ul>
      </div>
   </li>
   <li>Menupunkt 3</li>
</ul>

Ich möchte an dieser Stelle nicht behaupten, dass eine farbliche Abhebung gut oder schlecht ist. Es ging mir leidglich darum, dass ich so eine Abhebung machen konnte.
Jedoch sieht man auch da schon wieder, dass viele div's reinkommen und es wieder unübersichtlich wird. Jedoch weiss ich nicht, wie ich es sonst lösen könnte.

Ich hoffe, man versteht, was ich meine.

Gruß, heiko