[EDITOR/WYSIWYG] Design, Aufbau, Code und Ladezeiten [HTML/CSS]

[Rippie]

Hallo,

ich hatte schon angekündigt, dass ich mein Design hier vorstellen würde und heute ist es dann endlich so weit.
Link zur Seite : Kadett-Info.de - Der Kadett von A bis Z
basic.css : http://kadett-info.de/20/test/basic.css
aenderung.css : http://kadett-info.de/20/test/aenderungen/aenderungen.css

Was mir bei den ersten Tests aufgefallen ist, ist dass es irgendwei probleme mit dem Aufbau der Seite gibt. Dabei hab ich mir eigentlich Mühe gegeben den Code relativ einfach zu halten und die Grafiken so klein wie möglich. Trotzdem kann man teilweise für einen Bruchteil einer Sekunde (vor allem unter "letzte Änderungen") den hintergrund der Grafiken sehen.
Vielleicht hat da ja noch jemand einen heissen Tip für mich.
Das ist übrigens die 2. Testversion.
Die erste hat noch mehr Probleme mit dem Seitenaufbau durch den Google Translator: Kadett-Info.de - Der Kadett von A bis Z

Vielleicht hat ja noch jemand einen Tip für mich. Würde mich jedenfalls freuen, wenn ich ein paar Meinungen oder Ratschläge bekomme.
Ich hätte die Seite auch komplett in CSS erstellt. Leider bin ich da immer wieder auf Probleme mit der Positionierung von Elementen gestoßen, dass ich es irgendwann aufgegeben habe, zumal der Später Inhalt der Seite jeden CSS-Vorteil wieder aushebelt

Danke schonmal,

Gruß Chris
PS: Wie schon auf der Startseite zu lesen könnt ihr euch die aktuelle Version (nicht mein Design) der Seite unter Kadett-Info.de - Der Kadett von A bis Z ansehen.

 

[Waffelheld]

Hallo,

Design/Aufbau
- Contentbereich mit "ping-pong-Effekt-"Text, sprich, viel zu lang gezogen. Ich muss beim lesen ständig die horizontale Scrollbar hin und her bewegen.
- Oben benutzt du Grün und Beige, und unten der Fuß ist gelb und schwarz/grau
- warum denn bitte diese Farben? Grün ok, aber Beige? Passt irgendwie nicht wirklich und der Farbton ist auch nicht besonders ansprechend
-Wozu hat die Website diesen kleinen Abstand oben und links zum Rand? kein Weltuntergang aber irgendwie störend
- wenn man mit der Maus die Navileiste entlang fährt, schaut es so aus als ob die ganze Leiste ein einziger Link wäre, ich hoffe du weißt was ich meine

Code
- Tabellenlayout ist nicht wirklich aktuell
- 3 wirklich unnötige Syntaxfehler
- Navileiste ist keine wirkliche Navileiste sondern einfache Tabellenzellen
- hätte man das "onClick="location.href='" nicht auch einfach mit einem "<a href="">" lösen können, oder hat das einen besonderen Grund?

 

[Rippie]

mh... doch so viel
Mit dem "Ping-Pong-Text" willste mir vermutlich sagen, dass deine Bildschirmauflösung kleiner ist, als die der Seite. Hab ich das jetzt richtig verstanden?
Die Seite habe ich mit einer width von 1119 erstellt, so wie die vorherige Seite auch war. Es hat sich komischerweise nie jemand beschwert, obwohl ich ursprünglich maximal eine Größe angepast auf 1024X768 haben wollte. Mir wurde gesagt, dass der Standard heute irgendwo darüber liegt, daher habe ich die neue Seite eben in der gleichen Größe erstellt. Es hat sich ja bis heute niemand darüber beschwert, obwohl die Seite seit einem Jahr läuft.
Die Farben waren eher Zufällig, da das ursprünglich grün/weiß/graue bzw. blau/weiß/graue Design überhaupt nicht schön ausgesehen hat.
Die Kombination aus Grün und beige war eine für mich optisch überzeugende Kombination. Ich habe einige Leute (Nutzer der Seite) vor einiger Zeit zum ersten Entwurf befragt und habe keine negative Meinung dazu gehört, weshalb ich es so beibehalten habe.
Der Balken unten symbolisiert die Opel-Farben und hat eigentlich sonst keine Bedeutung. Wäre aber wohl am schnellsten zu ändern.
Der Rand entsteht durch die mittige Positionierung. Meine Bildschirmgröße beträgt irgendwas mit 1200px. Dadurch fällt es mir nicht auf. Die Seite hat bei mir nach Links und Recht noch 100px platz und nach oben eben 9px, weil ich es optisch besser fand.
Müsste ich mal sehen, wie es bei 1024px aussieht.

Was die Navileiste angeht... Dass es eine Tabelle ist, ist irgendwie kein Kritikpunkt. Ich wusste es in CSS nicht umzusetzen und habe für meinen Fall auch keine direkte Lösung gefunden.
Dass es wie EIN Link ausseht ist eigentlich normal, wenn man mehrere Grafiken nebeneinander mit einem Link versieht. Auch wenn es nur bg-Grafiken sind, so hat es schons einen Grund warum ich nicht den Text selbst als Link verwende. Es ist nämlich äusserst unkonfortabel, wenn man auf einem großen Button ersteinmal den Link suchen muss. Es wird hier aber noch einen Hover-Effekt geben um das Problem optisch zu lösen.
Damit erkjlärt sich das "onclick" ja eigentlich auch von selbst. Es ist einfacher als ein "a {display:block...".

Wenn ich mir Evelyns Bauchtanzseite ansehe, finde ich die Kombination aus Lila und Beige/Gelb/ocker oder was auch immer das ist, wesentlich "schmerzhafter" als grün und beige. Daher kann ich die Kritik an meiner Farbwahl gar nicht so ganz nachvollziehen.
Freue mich aber über weiter Einzelheiten und ggf. auch über etwas Positives an der Seite

Danke, Gruß Chris

 

[bobomampf]

Als allererstes: Das Design ist wirklich ein Horror!!
Die Autos als Menübuttons sehen ja sowas von graußlig aus.. Sorry.. Und das Beige erste
Das die Navigation eine Tabelle ist, ist ein Kritikpunkt, im Prinzip ist die ganze Homepage eine Tabelle, was richtig kacke und vorzeitlich ist.. Das hat man vor 10 Jahren so gemacht, heute macht man das mit CSS und Div's.. Ne Navigation macht man mit einer Liste..
Dann fallen in der Navigation die ganzen &nbsp;&nbsp;&nbsp; auf, die einfach unnötig sind und anders geregelt werden sollten. Außerdem ist die gesamte Seite zu breit, zwar nicht für mich aber viele Besucher haben einfach noch eine Auflösung von 1024 px, die müssen dann bei die Horizontal scrollen..

Mach die Seite komplett neu! Ist nicht böse gemeint, aber du kannst heutzutage einfach keine Seite mehr mit Tabellen machen, das ist als würdest du Frames nehmen (von vorvorgestern)..
Und wenn du es einfach nicht besser kannst, dann lass dir die Seite machen!! So ist das nix.. Da würd ich dann einfach nen Fachmann dazu holen, der dir das ordentlich macht und designt.. Das geht gar nicht wie es jetzt ist :/

 

[Waffelheld]

html

<li>navigation 1</li>
<li>navigation 2</li>
<li>navigation 3</li>

css

li
{list-style:none;
float:left;}

so macht man normalerweise Navigationsmenüs
Üblich ist heut zutage eine Bildschirmbreite von 1024 oder 1200, wobei man auch kleinere Auflösungen beachten sollte, da Netbooks z.Z. ja irgendwie im Kommen sind und die haben ja meist kleine Bildschirme. Mit dem Ping-Pong-Effekt meine ich auch, das die Augen einfach eine viel zu lange Strecke zurück legen müssen. In Zeitungen z.B. wird der Text ja auch nicht über die gesamte Breite geschrieben sondern in kleine Spalten, weil es sich einfach leichter liest.
Zu den Links:
wieso denn bitte Link suchen? Lässt sich doch wie du im Prinzip schon geschrieben hast mit CSS lösen. onClick für sowas zu missbrauchen ist nicht wirklich ne gute Methode.
Zu den Farben: Lila und Gelb passen sehr wohl zusammen, Stichwort Komplementärfarben. Zudem waren meine Werke nicht das Thema ;) Es geht nur darum dir zu helfen

 

[vitus37]

Hallo Rippie,

Damit erkjlärt sich das "onclick" ja eigentlich auch von selbst. Es ist einfacher als ein "a {display:block...".

weiß ja nicht, ob das so viel einfacher ist für jemanden, der mit seinem Handy surft oder JavaScript deaktiviert hat (so wie ich). Mal ganz abgesehen davon, dass Suchmaschinen mit der Website rein gar nichts anfangen können.

Mir wurde gesagt, dass der Standard heute irgendwo darüber liegt, daher habe ich die neue Seite eben in der gleichen Größe erstellt.

Einen Standard für die Breite einer Webseite gibt's nicht. Eine Website hat auf jedem Endgerät barrierefrei nutzbar zu sein.

Das Design finde ich nicht wirklich ansprechend. Du hast die - denke ich- Mühe gegeben, das Design durch Grafiken modern und fein wirken zu lassen, aber hier ist weniger mehr. Mir fehlen klare Strukturen und Linien, vor allem im Bereich des Hauptcontents.

Würde mich auch nochmal neu daran setzen.

Gruß

 

[Rippie]

Danke @ Waffelheld.
Das ist glaub ich die bisher hilfreichste Antwort die ich in diesem Forum erhalten habe.
Das hatte ich soweit bereits umgesetzt. Probleme hatte ich aber mit der zentrierten Positionierung der jeweiligen Grafiken und des Textes.
Ich werde mir da nochmal alles angucken und es erneut versuchen.

Die Frage ist nur, ob der Inhalt der späteren Seite den CSS-Vorteil nicht zunichte macht. Denn der Großteil des Inhaltes besteht ja nunmal aus Tabellen/Listen.

Und bei den Farben fand ich den Übergang von Grün auf beige eigentlich am elegantesten. Deutlich besser als auf weiß. Ich habe noch einige weitere Testentwürfe mit Anderen Farben gemacht. Ich werde diese mal raussuchen.
Die Basis-Elemente der Seite sind jedoch immer die gleichen.

EDIT:
mh... mit dem Wissen dass ich inzwischen über CSS habe konnte ich die Navi nun ohne Probleme setzen. Denke das aktuelle Design könnte ich morgen mal in CSS abliefern, heute hab ich leider keine Zeit dafür.
Ich habe aber immernoch ein Problem mit der Schriftzentrierung -.-

<li><div class="eins">text</div></li>
Das Div enthält das Image und den Text, weil ich es auf li nicht anwenden konnte, ausser wenn dann alle Tabellen so aussehen.
Alternative wäre noch dem NAVI-Container eine BG-Grafik zuzuweisen und dann mit der li-Tabelle zu arbeiten. Ich hatte jetzt aber noch keine solche Grafik liegen.
So gehts dann auch:
<li class="eins">text</li>
Ich habe nun aber immernoch das Problem, dass der Text Top sitzt und bei class-Anwendung auf li bekommt der Text nen Punkt davor. Wie kann ich das ändern?

 

[Waffelheld]

<div id="navi">
<ul>
<li><a href="link1">listenpunkt 1</a></li>
<li><a href="link2">listenpunkt 2</a></li>
<li><a href="link3">listenpunkt 3</a></li>
</ul>
</div>

css
#navi li
{list-style:none;
float:left;}

#navi a
{display:inline-block;
height:XXpx;
width:XXpx;
text-align:center;}

so müsste es funktionieren.
Mach das Layout aber wirklich mit div-Containern und nicht mit einer Tabelle. Belies dich am besten nochmal ein wenig.

 

[Rippie]

Ja ich hab container.
Mal vereinfacht:
<Container>
Head
headline
Navi
body
footer
</Container>

Ich werde nun erst morgen dazu kommen, danke auf jeden Fall schonmal... Ich muss jetzt mal eben 350km nach Willhelmshaven fahren ;)

Gruß Chris

 

[behalx]

Sehr interessantes Design. Jedoch etwas zu einfach... Würde die Seite umrahmen und einen anderen Hintergrund für den "Nicht-Content-Bereich" wählen. Und ich finde das der Logo zu viel Platz einnimmt...

 

[Rippie]

@behalx
zu einfach? Ich hatte ja mit allem gerechnet, aber nicht mit "zu einfach". Eher mit sowas wie "zu überladen". Was meinste mit zu einfach. Kannst dich aussprechen, ich beisse nicht
Ich überarbeite es lieber jetzt als nach dem Release, der sich inzwischen immer weiter nach hinten verschiebt.
Die Farbe um den Contentbereich werde ich noch ändern, das ist auch nicht so mein Geschmack. Der Head von seiner größe ist natürlich ein Problem. Das liegt aber hauptsächlich am Navi, dass eigentlich wesentlich schmaler geplant ist. Das Design ist eine Folge der Tatsache, dass man Test nicht frei auf einer Seite positionieren kann, sondern eben nur zentrieren. Um den Text dann da hin zu bekommen, wo er sein soll, mussten die Grafiken in der Höhe wachsen, damit der Text eben genau auf dem Fahrzeug sitzt.

@Waffelheld
Ich hab mir das heute noch einmal angesehen.
Dein Lösungsansatz ist interessant. Ich wusste nicht, dass man li für eine ID spezifizieren kann. Das macht die ganze Anglegenheit natürlich etwas einfacher.
Trotzdem ist es vermutlich nicht die Beste Lösung. Das Hauptproblem liegt darin, dass für jede Zelle eine eigene Hintergrundgrafik zur Verfügung stehen muss.
Zwar könnte man das auch über eine Grafik lösen die einfach den Navi_Bereich komplett ausfüllt, dann passt aber die Zentrierung nicht mehr richtig und ich muss wieder ausbessern.
Letzten Endes bleibt auch bei deiner Lösung das Problem, dass der Text zwar im Center steht aber immernoch on top. Auch mit vertical-align lässt sich diese Problematik nicht lösen:

Da gibt es dann auch eine einfachere Lösung, wo das gleiche Problem besteht:

Hier ein CSS-Entwurf
test

 

[Waffelheld]

du kannst jeder li auch eine ID oder class geben. zb. <li id="li1"> oder <li class="li1">, so kannst du jedem Punkt eine eigene Backgroundgrafik zuordnen. der verticale zentrierungsproblem kannst du llt auch mit einem margin-top oder padding-top lösen. Wie gesagt, belies dich nochmal ein wenig zu CSS, da scheinst du noch nicht so fit drin zu sein.

 

[Rippie]

hab ich doch schon gemacht ;)
Ich bin nur manchmal etwas... neben der Spur...
In meinem Entwurf im ersten Post gibt es diesen Button "letzte Änderungen" der bei mouseover nen hover-effekt hat. Aktuell wechselt er nur die Farbe, ursprünglich hat er den Effekt gehabt, dass es aussieht als würde man hin runterdrücken. Da sich der Button nun optisch um 1px nach unten und links bewegte musste auch die Schrift um eben diese Distanz bewegt werden. Das Problem war das Gleiche wie hier. Hab ich die Schrift per CSS formatiert, stand sie on top. Blitzgedanke "Div in Div".
Schlau gedacht, funktionierte natürlich nicht. Ich hab wahrlich 2 Wochen ettliche Stunden aufgebracht um dieses verdammte Problem zu lösen und eigentlich hatte ich die Lösung und ich wusste, dass ich so nah dran war, wie es nur ging. Es fehlte nur noch der "Punkt auf dem i". Und jetzt hab ich mit dem gleichen Ansatz das Problem gelöst. Ich hatte einfach nur margin nicht auf der Rechnung. Ich habs mit allem Probiert. Mit padding und was es sonst so für Möglichkeiten gibt. Ich hab es über a definiert über das drüberliegende div. Aber das Innere Div hab ich immer vernachlässigt.

So sieht das jetzt aus:
test

Nun ist nur die Frage ob das so richtig gelöst ist. Es sieht gut aus, aber entspricht es auch einem ordentlichen Code.
Dann hätte ich nochmal 2 Andere Dinge.
1.
Ich benötige einen guten Besucherzähler mit Statistiken und so weiter, den ich auf dem eigenen Server betreiben kann. Muss kein kostenloser sein, darf aber auch kein vermögen kosten. Wichtig ist nur, dass alles aufgezeichnet wird und nicht nur die Top 10 Referer oder wieviele Leute über diese in den letzten 10 Tagen auf meine Seite gekommen sind. Ich möchte schon, dass alle Daten aufgezeichnet und ausgewertet werden.

2.
Ich weiß nicht, ob sich jemand meine Seite mal angesehen hat, aber es gibt viele Inhalte wo Tabellen unausweichlich sind:
Kadett-Info.de - Der Kadett von A bis Z
Sollte ich das irgendwie anders lösen (Mal abgesehen davon, dass die Tabelle optisch nicht so der bringer ist) oder ist das mit einer Tabelle die übersichtlichste Lösung? Man könnte es sicher auch per li setzen, aber macht man das so?

Gruß Chris
PS: Danke für die Hilfe

 

[vitus37]

2.
Ich weiß nicht, ob sich jemand meine Seite mal angesehen hat, aber es gibt viele Inhalte wo Tabellen unausweichlich sind:
Kadett-Info.de - Der Kadett von A bis Z
Sollte ich das irgendwie anders lösen (Mal abgesehen davon, dass die Tabelle optisch nicht so der bringer ist) oder ist das mit einer Tabelle die übersichtlichste Lösung? Man könnte es sicher auch per li setzen, aber macht man das so?

Naja stelle die Überlegung an, welche Daten vorliegen. Eine Liste? Ein Paragraph? Eine Tabelle? ...
Es liegen offensichtlich tabellarische Daten vor, also ist hier semantisch gesehen eine Tabelle nicht nur eine übersichtliche Lösung, sondern auch vollkommen korrekt.
Tabellen sind nichts schlechtes oder gar böses, das kommt oftmals so herüber. Man sollte sie nur nicht missbrauchen: Tabellenmissbrauch.

Wegen des Besucherzählers: Siehe dir mal Piwik an, das ist dafür, dass es kostenlos ist, recht gut. Im Magazin „Markt und Mittelstand“ wurde die kostenpflichtige Software „Etracker“ (ich glaube ab zehn Euro/Monat) ziemlich gut bewertet.
Ansonsten gäbs da auch noch Google Analytics.
In jedem Fall sollte man sich um nötige Datenschutzmaßnahmen kümmern.

Gruß

 

[Waffelheld]

Ein div innerhalb eines inline-Elements wie li ist nicht valide. lässt sich 100%ig anders lösen. z.B. geb dem jeweiligen Link die class und den li auch eine höhe und breite, sollte auch gehen. Zudem beginnt eine list aufzählung mit dem <ul>-Tag und endet auch mit diesem. Wenn du validen Code haben willst, dann solltest du das korrigieren. Wahrscheinlich musst du dann das css auch noch ein wenig anpassen.
Tabelle in dem Fall ist vollkommen ok, dient ja nicht fürs Layout. Lässt sich aber natürlich noch ein bisschen anpassen, Borderbreite, -style, -farbe.

ps: class verwenden wenn du diese in einem Dokument öfters brauchst und id beim einmaligen nutzen.

 

[Rippie]

Naja stelle die Überlegung an, welche Daten vorliegen. Eine Liste? Ein Paragraph? Eine Tabelle? ...

Bei dieser Seite wäre dann CSS wieder einfacher oder?
Ich frage nur, damit ich ungefähr einschätzen kann, wie ich die Performance meiner Seite im Griff behalte. Ich kann selbst momentan nocht nicht abschätzen wo CSS einer Tabelle überlegen ist und wie viel das ausmacht.
Das werde ich dann im Einzelfall noch mal mit einem Testprogramm ausprobieren. 2 mal die Gleiche Seite mit gleichem Inhalt. Einmal in einer normalen Tabelle formatiert und einmal in CSS.
Der Übersicht würde es in diesem Falle ja nicht viel anhaben:

Kadett-Info.de - Der Kadett von A bis Z

Wegen des Besucherzählers: Siehe dir mal Piwik an, das ist dafür, dass es kostenlos ist, recht gut. [...]
In jedem Fall sollte man sich um nötige Datenschutzmaßnahmen kümmern.
Gruß

Piwik sieht wirklich sehr gut aus. Das reicht völlig aus. Ich hatte es auch eventuell falsch formuliert. Es geht nicht darum so viel wie möglich über die User zu erfahren, sondern ich interessiere mich hauptsächlich dafür welche Seiten am häufigsten besucht wurden und wo die Leute her kommen (sowohl Netzbezogen als auch Global) um meine Seite entsprechend des Nutzerverhaltens anpassen zu können oder entsprechend zu erweitern.
Ich nutze aktuell einen online-Zähler und der hat hin und wieder aussetzer und zeigt bspw. nur die besten 40 referer an. Die Übersicht ist da deutlich besser als bei Piwik, aber die Daten werden natürlich aus kostengründen nur sehr gering gehalten. So wird mir nur für den Zeitraum wo ich nicht dort eingeloggt war angezeigt, wieviele Leute aus welchem Land da waren. Logge ich mich wieder ein, habe ich nur einen ungefähren schnitt der letzten X wo dann kleinere Länder rausfallen.
Piwik sollte da vollkommen ausreichen, viele der Daten benötige ich garnicht


Danke auf jeden Fall für den Tip.

@ Waffelheld

Ich werde es ausprobieren. Ich hoffe, dass ich morgen nicht so viel Zeit mit anderen Diongen verbringe, dass ich da weiter ausprobieren kann.
Danke nochmal für die Tips

Gruß Chris

 

[vitus37]

Bei dieser Seite wäre dann CSS wieder einfacher oder?
Ich frage nur, damit ich ungefähr einschätzen kann, wie ich die Performance meiner Seite im Griff behalte. Ich kann selbst momentan nocht nicht abschätzen wo CSS einer Tabelle überlegen ist und wie viel das ausmacht.
Das werde ich dann im Einzelfall noch mal mit einem Testprogramm ausprobieren. 2 mal die Gleiche Seite mit gleichem Inhalt. Einmal in einer normalen Tabelle formatiert und einmal in CSS.

Ich glaube du hast bis jetzt weder den Sinn von HTML, noch den von CSS verstanden.
HTML steht für HyperText Markup Language und beschäftigt sich also mit der Auszeichnung von Inhalten nach ihrer Bedeutung (=Semantik).
CSS dient hingegen der Formatierung und dem Layout einer Seite.
Eine Liste, ein Paragraph, eine Tabelle kann nicht mit CSS bewältigt werden, CSS kann all das nur formatieren.

Das eine kann das andere nicht ersetzen, ihre Einsatzzwecke sind grundlegend verschieden. Das hat auch nichts mit Performance zu tun. Es geht rein um die strikte Trennung von Inhalt und Design in HTML und CSS.

Ich rate dir dich tiefer gehend mit einer Einführung zu HTML und CSS zu befassen, auch den Link zum Tabellenmissbrauch zu lesen.

 

[bobomampf]

Ich glaube du hast bis jetzt weder den Sinn von HTML, noch den von CSS verstanden.
HTML steht für HyperText Markup Language und beschäftigt sich also mit der Auszeichnung von Inhalten nach ihrer Bedeutung (=Semantik).
CSS dient hingegen der Formatierung und dem Layout einer Seite.
Eine Liste, ein Paragraph, eine Tabelle kann nicht mit CSS bewältigt werden, CSS kann all das nur formatieren.

Das eine kann das andere nicht ersetzen, ihre Einsatzzwecke sind grundlegend verschieden. Das hat auch nichts mit Performance zu tun. Es geht rein um die strikte Trennung von Inhalt und Design in HTML und CSS.

Ich rate dir dich tiefer gehend mit einer Einführung zu HTML und CSS zu befassen, auch den Link zum Tabellenmissbrauch zu lesen.

Dem ist nichts mehr hinzuzufügen! Ich gehe sogar noch weiter und rate dir, den Quatsch nicht selbst zu machen, wenn du wirklich kommerziellen Erfolg mit der Seite haben willst.. Dann hast du gutes Design, richtigen Code und nicht so nen Murks.. Sorry!

Ansonsten ist es ne gute Übung aber total für den Ar*** wenn du es nicht komplett neu machst! Keine Tabellen, sondern DIV's und CSS!!!!!

 

[Rippie]

@bobomampf

"Sie sind raus, bobomampf!"

@Waffelheld
Das Problem liegt doch aber genau da. Setze ich dem Link die Class, habe ich auch das BG-Image da drin. Also muss ich a auf 100% setzen.
Li kann ich keine Größe zuordnen, da die BG-Images immer unterschiedlich groß sind.
Das ließe sich zwar alles anpassen, ist aber nicht die Lösung des Problemes.
Denn eines ist sicher, sobald ich das DIV entferne steht der Text wieder on top, egal wie ich die classes nun verteile.
Mit Padding bei a lässt sich zwar der Text auf eine passende Höhe bringen, verschiebt gleichzeitig aber auch den gesamten Einzugsbereich von a aus der Tabelle. Der Text steht dann wo er hin soll, aber der Link befindet sich dann entsprechend weit auch unterhalb des Buttons. Mit margin verschiebt sich dann der gesamte a-block nach unten. Ich müsste a also kleiner machen, was wieder nicht Sinn der Sache ist.
Das DIV in Li ist die aktuell einzige Möglichkeit die ich gesehen habe.
Und laut validator (hab 3 getestet) gibt es nichts zu meckern.
Ich versuche seit mehreren Wochen genau dieses Problem zu lösen und finde keinen Weg dafür. Sicher könnte ich jetzt mit <p> und <br> arbeiten, was aber irgendwie nicht im Sinne des Erfinder ist.

EDIT:
Nachdem ich <ul></ul> gesetzt habe geht garnichts mehr -.-
Die Liste macht alles nur nicht das was sie soll. Aufeinmal gibt es links nen Abstand von ca 40px und ich hab bisher keinen Weg gefunden das zu verhindern.
Das Problem scheint nur innerhalb der Div-Container zu bestehen.
Man ist das alles mist. Ständig ist wieder irgednwas neues. Hätte ich bloß nie diese bescheierte Idee gehabt die Seite neu zu entwerfen... Jetzt stehe ich zwischen einem fertigen Tabellen-Layout das zu langsam aufgebaut wird und einem CSS-Entwurf bei dem ständig was neues ist...

 

[vitus37]

In solch einem Fall gibt man jedem Navigationselement eine eigene ID, hier jedem Listenelement, um Abstände, Größen und Positionen (auch das Hintergrundbild bei dir) je individuell anpassen zu können.