• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

ungewolltes vertikales zentrieren

Ja habe ich ;) Und so wie ich das verstanden habe bedeutet das beispielsweise für mich anstelle von einem div-"container" mit der ID = "header" schlicht das Tag <h1> zu verwenden, weil dann jedem sofort klar ist worum es sich handelt.
Genau dafür ist HTML entwickelt worden, um dem Inhalt eine Bedeutung zu geben und für nichts anderes.

Wenn ich das falsch verstanden habe, entschuldigt bitte!^^
Das hast du schon richtig verstanden.

Wenn ich es aber richtig verstanden habe, dann schlägt sich da leider mein Starrsinn nieder. Denn ich finde, dass jemanden der meinen Quellcode liest eher erkennt, dass an einer Stelle ein Header ein Menü oder sonstwas erstellt wird, wenn da auch "Header", "Menu" oder etwas in der Richtung steht. Ich möchte an dieser Stelle nochmal betonen, dass das nur meine Meinung ist! ;)
Dann hast du dich noch nicht ausführlich mit den alternativen Clients beschäftigt, die z.B. von Sehbehinderten und Blinden verwendet werden, denn diese Clients (Screenreader), richten sich nach den verwendeten Tags. Für sie ist
HTML:
<div id="header"></div>
keine Überschrift,
HTML:
<h1></h1>
aber sehr wohl. Und dieser kleine Unterschied ist z.B. dafür ausschlaggebend dafür, ob der Screenreader von Überschrift zu Überschrift springen kann und sich der Benutzer zum Artikel navigieren kann, den ihn interessiert, oder ob er sich alle Artikel anhören muss und erraten darf, was eine Überschrift ist und was nicht. Das wäre in etwa so, als ob alle Überschriften in einer Zeitung die gleiche Formatierung wie der dazugehörige Artikel hätten, dann würdest du auch nicht mehr erkennen, was eine Überschrift ist und was nicht. Möchtest du so deine Zeitung lesen? Sicher nicht.

Da also die richtige Semantik meiner Meinung nach weder einen Übersichtsvorteil noch den Quellcode verkleinern würde, werde ich bei den divs bleiben.
Damit machst du es den Personen, die auf Hilfsmittel und semantischen Quellcode angewiesen sind, unnötig schwer.
 
Werbung:
Damit machst du es den Personen, die auf Hilfsmittel und semantischen Quellcode angewiesen sind, unnötig schwer.

Ja das sehe ich ein ;) Und trotz besseren Wissens bleibe ich nun aber doch bei den divs. Denn, wenn ich nun anfange für jedes meiner Seitenelemente das passendste HTML-Tag rauszusuchen und diese dann mit CSS zu formatieren steige ich nach 2 Wochen selber nichtmehr durch. Ich denke, dass das schon irgendwie vertretbar ist, wenn man bedenkt, dass die Seite niemals interessant sein wird für Sehbehinderte.

Das soll aber nicht bedeuten, dass ich nun vorhabe das immer so bei meinen Seiten zu machen. Ich möchte es nur bei meiner ersten Seite - zumal die sehr komplex werden soll - nicht schwerer machen als nötig.
Bei meinen nächsten kleineren Projekt, werde ich dann anfangen mit den richtigen HTML-Tags zu arbeiten und wenn ich dann genug Sicherheit in der Verwendung Dieser habe, werde ich sie auch auf das jetzige Projekt übertragen.

Dann als Schlusswort nochmal ein GROSSES DANKESCHÖN an alle, die mir geholfen haben - besonders an Effchen und Thor für ihre Geduld :).
 
Ja das sehe ich ein ;) Und trotz besseren Wissens bleibe ich nun aber doch bei den divs. Denn, wenn ich nun anfange für jedes meiner Seitenelemente das passendste HTML-Tag rauszusuchen und diese dann mit CSS zu formatieren steige ich nach 2 Wochen selber nichtmehr durch.
Also ich persönlich finde es deutlich einfacher einen Quellcode zu verstehen, wenn dort Überschriften als <h1> bis <h6> ausgezeichnet sind, Listen als <ul>, <ol> oder <dl>, Text als <p>, wichtiges als <em>, sehr wichtiges als <strong>, tabellarische Daten als <table> usw.
Ausserdem macht es das Formatieren per CSS deutlich einfacher, denn so kannst du z.B. alle Überschriften erster Ordnung <h1> ansprechen und musst ihnen nicht extra eine Klasse geben.
Code:
h1 {font-weight: bold;}

Ich denke, dass das schon irgendwie vertretbar ist, wenn man bedenkt, dass die Seite niemals interessant sein wird für Sehbehinderte.
Das denkst du, aber frag mal die Betroffenen. Woher willst du wissen, welche Interessen die betroffene Person hat? Oder glaubst du, dass in der Altersgruppe, die du mit deiner Seite ansprechen willst, keine Sehbehinderten sind? Das wäre etwas naiv.

Das soll aber nicht bedeuten, dass ich nun vorhabe das immer so bei meinen Seiten zu machen. Ich möchte es nur bei meiner ersten Seite - zumal die sehr komplex werden soll - nicht schwerer machen als nötig.
Bei meinen nächsten kleineren Projekt, werde ich dann anfangen mit den richtigen HTML-Tags zu arbeiten und wenn ich dann genug Sicherheit in der Verwendung Dieser habe, werde ich sie auch auf das jetzige Projekt übertragen.
Löblicher Vorsatz, ich hoffe nur, dass du ihn dann auch umsetzt.
 
Werbung:
Wie ein Philosoph einmal sagte: "Bei einen Kommunikationsproblem, liegt die Verantwortung beim Sender nicht beim Empfänger."
Hmmm...das war sicher nicht Deine Absicht, darüber auch noch zu diskutieren, aber IMHo trifft das in einem geschriebenen Forum nicht zu. Ich kann schreiben was ich will, je nach Laune des Empfängers und je nach Inhalt kann es oder wird es missverstanden werden. Besonders, wenns negativ ist.

Hätte ich das doch mal früher gelesen habe nun die gesamte Seite nach dem Prinzip mit den Divs umgestellt
Das ist kein Prinzip, das ist - sorry - Schwachsinn, den irgendwer - hoch soll er leben, so hoch dass niemand mehr dran kommt - mal verbreitet hat.

Abgesehen vom Header. Um die Buttons da so darzustellen, dass sie nicht über dem Logo in der Mitte liegen, fällt mir einfach nichts besseres ein als eine Tabelle. *schäm*
Der grundlegende Fehler, den Du machst, ist das Du HTML dazu einsetzen willst, ein Darstellungsproblem zu lösen. Das ist schon vom Ansatz her völlig falsch. Bei der Auszeichnung des INhalts denke nicht an das Aussehen, die Buttons sind ein Menü, ein Menü wird als <ul> ausgezeichnet. Fertig ist HTML. Der Rest ist Sache von CSS.

so wie ich das verstanden habe bedeutet das beispielsweise für mich anstelle von einem div-"container" mit der ID = "header" schlicht das Tag <h1> zu verwenden, weil dann jedem sofort klar ist worum es sich handelt.
Jein. Das Tag für eine Überschrift zu verwenden - Ja.
Damit jeder weiß, worum es sich handelt - Nein.
Es geht nicht darum, was jemand weiß, sondern darum, dass die Spezifikation von HTML festlegt, dass <h1> eine Überschrift 1. Grades ist. Das ist eindeutig, kann von Programmen (z.B. Suchmaschinen!) fehlerfrei interpretiert werden. Ob das Element nun "header", "Überschrift" oder "Hans" heißt, ist egal. Genausowenig ist ein Element, das "Überschrift" heißt, eine Überschrift, wenn es nicht mit dem entsprechenden Tag ausgezeichnet ist.

Da also die richtige Semantik meiner Meinung nach weder einen Übersichtsvorteil noch den Quellcode verkleinern würde, werde ich bei den divs bleiben.
Es geht weder um Übersicht, noch um Quellcode, sondern schlicht um die Bedeutung.
<div id="header"> ist keine Überschrift, <h1> schon.
Wie soll jemand (insbesondere Programme wie Suchmaschinen oder Vorlesebrowser) Deinen Inhalt richtig bewerten, wenn Du ihm nicht die richtigen Tags gibst. Auf der Straße stehen an Stellen mit vorgeschriebener Höchstgeschwindigkeit auch runde Schilder mit rotem Rand und einer Zahl drin und nicht große Plakatwände, auf denen steht "Langsam fahren!" - letztere würdest Du ja auch ignorieren.

Und trotz besseren Wissens bleibe ich nun aber doch bei den divs.
Dann hättest Du auch bei den Tabellen bleiben können. So hast Du einen Unfug durch anderen Unfug ersetzt und nichts dabei gelernt. War es das wert?

Denn, wenn ich nun anfange für jedes meiner Seitenelemente das passendste HTML-Tag rauszusuchen und diese dann mit CSS zu formatieren steige ich nach 2 Wochen selber nichtmehr durch.
Das glaubst Du doch selbst nicht, oder?

Ich denke, dass das schon irgendwie vertretbar ist, wenn man bedenkt, dass die Seite niemals interessant sein wird für Sehbehinderte.
Nein, ist nicht vertretbar.
1. Ist Diskriminierung in Deutschland verboten.[1]
2. Ist eine Suchmaschine, die Deine Inhalte versucht zu indizieren, auch "sehbehindert".

Ich möchte es nur bei meiner ersten Seite - zumal die sehr komplex werden soll - nicht schwerer machen als nötig.
Es macht das ganze ja einfacher. Und ich persönlich sehe keinen Sinn darin, beim Lernen einer Sache erstmal alles falsch zu lernen, um es dann nochmal lernen zu müssen, wo das zweite Mal Lernen dann schwieriger wird, weil sich die falschen Arbeitsweisen dann schon festgefahren haben.

Bei meinen nächsten kleineren Projekt, werde ich dann anfangen mit den richtigen HTML-Tags zu arbeiten und wenn ich dann genug Sicherheit in der Verwendung Dieser habe, werde ich sie auch auf das jetzige Projekt übertragen.
Naja, verbieten kann Dir das ja keiner...aber so viel Zeit, wie Du damit verschwendest, möchte ich mal haben!

Dann als Schlusswort nochmal ein GROSSES DANKESCHÖN an alle, die mir geholfen haben - besonders an Effchen und Thor für ihre Geduld :).
Schlusswort? :-) SCNR.

-Efchen

Nachtrag:
[1] Jugendlicher spielt World of Warcraft. Vater ist Blind. Vater möchte aber wissen, was Sohn da macht. Er weiß, dass das Internet, in diesem Fall das WWW, Blinden ungeahnte Möglichkeiten bietet, sie können endlich wieder ein normales soziales Leben führen. Sie können Bücher lesen, sie können in der virtuellen Welt quasi alles machen. Wenn da nicht die engstirnigen Webmaster wären, die sich nicht vorstellen können, dass ein Blinder Bücher bestellen will oder sich eben über WoW informieren möchte...
 
Es geht weder um Übersicht, noch um Quellcode, sondern schlicht um die Bedeutung.
<div id="header"> ist keine Überschrift, <h1> schon.

Mein Problem ist auch nicht, dass ich nicht Überschriften in das <h>-Tag setzen möchte etc. Ich wüsste bei manchen Dingen nur einfach nicht welches Tag passen würde.
Meine Seite ist ja nun so aufgebaut, dass ich ein div für das Banner habe eines für den Inhalt in der Mitte und je eines für die beiden Seiten. Welches Tag soll ich denn Alternativ für die verwenden? Ich meine effektiv sind es doch nur Container für die eigentlichen Inhalte. Ein Tag für Container ist mir aber nicht bekannt *überlegt* aber vllt gibt es ja eines ^^
 
Wenn du mehrere Elemente gruppieren musst, damit sie alle gefloated werden können, ist ein <div> die richtige Wahl. So z.B. für deine Menüs auf der linken Seite. Das heißt aber nicht, dass du auch deine Menüs als <div> auszeichnest, sondern lediglilch um die Listen ein <div> legst. Die Menüs bleiben dabei Listen und die Überschriften bleiben dabei <hx>

Das würde dann in etwa so aussehen
HTML:
<div id="navWrapper">
  <h2>Portal</h2>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
  <h2>Member</h2>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
  <h2>Admin</h2>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</div>
 
Werbung:
Wenn du mehrere Elemente gruppieren musst, damit sie alle gefloated werden können, ist ein <div> die richtige Wahl.

Ok, wenn ich dafür die divs behalten darf, habe ich keine Probleme mehr. Für den Rest fällt mir spontan ein richtiges Tag ein.

Danke dir Thor, werde mich dann ransetzen und das ganze in entsprechend richtige Semantik umwandeln. Ich hoffe sehr, dass ich es richtig mache ;)
 
Ok, wenn ich dafür die divs behalten darf, habe ich keine Probleme mehr.
Dafür sind sie gemacht.

Für den Rest fällt mir spontan ein richtiges Tag ein.
Für die meisten Elemente ist das auch recht einfach und eindeutig.

Danke dir Thor, werde mich dann ransetzen und das ganze in entsprechend richtige Semantik umwandeln. Ich hoffe sehr, dass ich es richtig mache ;)
Wenn du dir nicht sicher bist, frag einfach nach.
 
Mein Problem ist auch nicht, dass ich nicht Überschriften in das <h>-Tag setzen möchte etc. Ich wüsste bei manchen Dingen nur einfach nicht welches Tag passen würde.
Na, das ist aber deutlich leichter, als die deutschen Verkehrszeichen und ihre Bedeutung zu lernen. Es sind ja nur ein paar wenige Tags, die HTML bietet. Das lernt man schnell in ein paar Stunden. Oder weniger.

Ich meine effektiv sind es doch nur Container für die eigentlichen Inhalte.
Divs? Nein.
Ja.
divs sind Container. Wie alle anderen Tags auch. Man unterscheidet hier Block- und Inline-Elemente, aber das wird erst später, bei CSS relevant.
Aber der eigentliche Inhalt kommt nicht in <div>s, denn das ist das "allgemeine Blockelement", das nur zum Gruppieren dient, den Inhalt aber nicht näher beschreibt.
Fließtext ist <p>, Überschriften <h1> bis <h6>. Adressen <address>. Menüs (Listen) <ul>, tabellarische Daten <table>. Damit haben wir schon die allerwichtigsten abgedeckt. Es gibt dann noch sortierte Listen oder Definitionslisten, Zitate und sowas...oder die Inline-Elemente <em> für "wichtig" oder <strong> für "sehr wichtig".

Ein Tag für Container ist mir aber nicht bekannt *überlegt* aber vllt gibt es ja eines ^^
Liegt wohl daran, dass alle Tags Container sind und "Container" keine semantische Bedeutung für den Inhalt ist. Ein Container ist etwas, wo man Inhalt rein tut, aber nichts, was den Inhalt beschreibt. Dein Inhalt *ist* kein Container, sondern er kommt *in* einen Container. Aber *was ist* der Inhalt? Text? Ein Bild? Eine Überschrift, Adresse, Zitat, Liste?
 
Werbung:
Ok bin fertig. Habe abgesehen von den divs für das Layout alle entfernt und durch meiner Meinung nach passende HTML-Tags ersetzt: Private Server World of Warcraft (WoW) RefNEX

Nicht ganz zufrieden bin ich mit der Lösung für das Hintergrundbild der Menüs. Effektiv ist es ja wieder nur ein Container mit einen Hintergrundbild, weswegen ich da ebenfalls ein div verwendet habe.

So sieht nun der HTML-Code für ein Menü aus:
HTML:
                     <h1>Portal</h1>
                        <div>
                          <ul>
                            <li> <a href="">Home</a> </li>
                            <li> <a href="">Forum</a> </li>
                            <li> <a href="">News</a> </li>
                            <li> <a href="">Archive</a> </li>
                            <li> <a href="">Projects</a> </li>
                            <li> <a href="">Impressum</a> </li>
                          </ul>
                        </div>
                     <img src ="http://www.html.de/images/menubg_footer.png" alt ="menufooter">


Der CSS-Code dafür wie folgt:
HTML:
        div#right ul, div#left ul {
          margin: 0px auto;
          padding: 0px;
          list-style-type: none;
        }
        
        div#right ul li a, div#left ul li a {
          background-image: url("http://www.html.de/images/button.png");
          background-repeat: no-repeat;
          background-position: center;
          display: block;
          margin: 0px;
          padding: 1px;
          font-size: 15px;
          text-decoration: none;
          color: #FFE4C4;
          height: 20px;
          letter-spacing: 1px;
          text-align: left;
          padding-left: 30px;
        }
        
        div#right ul li a:hover, div#left ul li a:hover {
          background-image: url("http://www.html.de/images/button_hover.png");
          color: #FF7F00;
        }

        div#right h1, div#left h1 {
          background-image: url("http://www.html.de/images/menubg_header.png");
          background-repeat: no-repeat;
          width: 206px;
          height: 39px;
          line-height: 39px;
          margin: 0px auto;
          margin-top: 25px;
          padding: 0px;
          color: #FF7F00;
          font-size: 18px;
          letter-spacing: 1px; 
        }

        div#right div, div#left div {
          background-image: url("images/menubg_body.png");
          background-repeat:repeat-y;
          width: 206px;
          margin: 0px auto;
          padding: 0px;
          color: #FFE4C4;
          text-align: left;
        }
 
Schon viel besser, aber auf das <div> kannst du auch noch verzichten und der ul das Hintergrundbild geben.

Beim Login ist es ähnlich, da kannst du das <div> entfernen, Eingabefelder und label kommen in ein <fieldset>.

Das <p> im content braucht auch kein <div>, da du ihm auch direkt das Hintergrundbild geben kannst.

Im header hast du das rechte Menü als <dl> ausgezeichnet, besser wäre auch hier <ul>, zumal eine <dl> keine <li> hat, sondern nur <dt> und <dd>.
 
Schon viel besser, aber auf das <div> kannst du auch noch verzichten und der ul das Hintergrundbild geben.

...

Das <p> im content braucht auch kein <div>, da du ihm auch direkt das Hintergrundbild geben kannst.
Ich hatte auch zuerst versucht dem ul bzw. dem p-Tag direkt das Hintergrundbild zu geben. Dabei ergibt sich nur leider ein Problem.

Wenn ich beim p-Tag das Hintergrundbild einfüge kann ich die Grenzen für die Schrift nichtmehr mit padding-left und padding-right eingrenzen. D.h. die Schrift berührt immer den Rand des Hintergrundbildes. Beim ul hatte ich dieses Problem nicht, da ich da den paddingbefehl nicht benötige, aber damits einheitlich bleibt, habe ich dann für beides das div verwendet.

//Edit: Ich habe das mal mit dem p-tag für den Inhaltsbereich in der Mitte gemacht. Das Problem, welches ich oben beschrieben habe kannst du also nun leicht auf der Seite erkennen.

Der CSS-Code für das p-Tag:
HTML:
       div#content p {
          background-image: url("images/contentbg_body.png");
          background-repeat:repeat-y;
          background-position: center;
          width: 511px;
          margin: 0px auto;
          padding: 0px;
          padding-left: 7px;
          padding-right: 7px;
          text-align: justify;
        }
//


Im header hast du das rechte Menü als <dl> ausgezeichnet, besser wäre auch hier <ul>, zumal eine <dl> keine <li> hat, sondern nur <dt> und <dd>.
Damit das ganze entsprechend aussieht, muss ich den beiden Listen leider unterschiedliche float-Eigenschaften zuweisen. Also entweder verwende ich ul und dl oder ich weise ihnen wieder Klassen zu. ^^


Beim Login ist es ähnlich, da kannst du das <div> entfernen, Eingabefelder und label kommen in ein <fieldset>.
Von dem Tag hatte ich ja bisher noch nie gehört. Werde es direkt mal umsetzen. :)


Ich habe aber leider noch ein ganz anderes Problem. Der Internetexplorer verursacht mal wieder Probleme:

  1. Das Menü "Events" wird teilweise vom Footer/Copyright überdeckt. Kann es sein, dass der Befehl <br clear="all"> im IE nicht richtig funktioniert?
  2. Bei jedem Menü ergibt sich eine horizontale Spalte im Hintergrund. Anscheinend setzt der IE für Bilder, die mit dem <img>-Tag eingefügt werden, automatisch einen kleinen Abstand. margin: 0px; hilft da leider auch nicht. ^^
 
Zuletzt bearbeitet:
Werbung:
Wenn ich beim p-Tag das Hintergrundbild einfüge kann ich die Grenzen für die Schrift nichtmehr mit padding-left und padding-right eingrenzen. D.h. die Schrift berührt immer den Rand des Hintergrundbildes.
Ich wüsste nicht, warum padding dann nicht mehr gehen sollte, nur weil ein Hintergrundbild gesetzt ist.
*edit* Du musst die Breite des <p> um die Pixel des paddings verringern. Sehr gut sichtbar, wenn du dem <p> mal einen border gibst.

Beim ul hatte ich dieses Problem nicht, da ich da den paddingbefehl nicht benötige, aber damits einheitlich bleibt, habe ich dann für beides das div verwendet.
Das ist unnötig, lass es weg.

Damit das ganze entsprechend aussieht, muss ich den beiden Listen leider unterschiedliche float-Eigenschaften zuweisen. Also entweder verwende ich ul und dl oder ich weise ihnen wieder Klassen zu. ^^
Die Klasse wäre die richtige Wahl, da es sich nicht um Definitionen handelt.

Von dem Tag hatte ich ja bisher noch nie gehört. Werde es direkt mal umsetzen. :)
Als Stichwörter dazu noch <legend> und <label>

Das Menü "Events" wird teilweise vom Footer/Copyright überdeckt. Kann es sein, dass der Befehl <br clear="all"> im IE nicht richtig funktioniert?
Ja, die CSS-Eigenschaft heißt clear: both;

Bei jedem Menü ergibt sich eine horizontale Spalte im Hintergrund. Anscheinend setzt der IE für Bilder, die mit dem <img>-Tag eingefügt werden, automatisch einen kleinen Abstand. margin: 0px; hilft da leider auch nicht.
Du kannst mal display: block; für das image versuchen.
 
Ok Thor... Damit hast du auf Anhieb alle meine Probleme gelöst ^^ Danke dir.

Habe jetzt mal alles wieder hochgeladen und du könntest jetzt nochmal rüberschaun wenn du das möchtest. Ansonsten habe ich nur noch ein Problem:

Da ich nun das <p>-Tag verwende um beispielsweise das Menü Events darzustellen kann ich innerhalb dieses Tags das <hr>-Tag nichtmehr verwenden ohne, dass das Hintergrundbild unterbrochen wird. Gibt es da irgendeine Alternative?^^
 
Jetzt solltest du noch die Fehler beheben, der Validator kann dir dabei helfen [Invalid] Markup Validation of http://emusam.de/test/ - W3C Markup Validator

Das <fieldset> muss in dem <form> stehen, nicht ausserhalb, die <input>-Felder brauchen noch eine ID, damit das <label> damit verbunden ist und die Listen im Bereich Server brauchst du nicht zu verschachteln.

Da ich nun das <p>-Tag verwende um beispielsweise das Menü Events darzustellen kann ich innerhalb dieses Tags das <hr>-Tag nichtmehr verwenden ohne, dass das Hintergrundbild unterbrochen wird. Gibt es da irgendeine Alternative?^^
Lass es doch so, wie es jetzt ist. Warum das <hr /> da solche Probleme macht, kann ich dir leider gerade nicht sagen. Eigentlich sollte das gehen.
 
Werbung:
Jetzt solltest du noch die Fehler beheben, der Validator kann dir dabei helfen [Invalid] Markup Validation of http://emusam.de/test/ - W3C Markup Validator

Das <fieldset> muss in dem <form> stehen, nicht ausserhalb, die <input>-Felder brauchen noch eine ID, damit das <label> damit verbunden ist und die Listen im Bereich Server brauchst du nicht zu verschachteln.

Habe mich um alles gekümmert. Abgesehen von dem fehlenden <legend>-Tag, aber ich brauche halt keine Überschrift für das Formular^^.

Ich denke, dass wir das Ganze nun auch hier abschließen können. Denn für die nächsten Probleme, die vllt später auftreten werden, wäre ein neuer Thread wohl passender. Hat ja alles nichtsmehr mit vertikalen zentrieren zu tun. ;)


Dann bleibt mir nurnoch zu sagen: DAAAAANKESCHÖN :)
 
Eine Sache ist mir noch aufgefallen, Du hast alle Deine Überschriften als Überschriften erster Ordnung ausgezeichnet. Ich wage das zu bezweifeln, dass die Überschriften alle gleichwertig sind.
Rein vom optischen her müsste Deine Überschrift 1. Ordnung eigentlich lauten "World of Refnex". Wobei wir bei der Frage sind, warum das Bild, das doch eindeutig Content enthält, per CSS eingebunden wird, wo doch CSS nicht für den Content da ist, sondern HTML.
Code:
<h1><img src="http://emusam.de/test/images/banner.png" alt="World of Refnex - Next Generation" /></h1>
So wie es im Moment ist, vermittelst Du dem sehenden Nutzer eben das als Überschrift, alle anderen - inkl. Suchmaschinen - wissen aber nichts davon.

Alle anderen Überschriften sind mindestens zweiter Ordnung. Wahrschienlich die im Text <h2> und die über den Menüs <h3>.

Übrigens ist der Text im "div#content p" zu dunkel, vor der Hintergrundfarbe kann man den kaum lesen.

Gut. War doch nicht so schwer, oder? :-)
 
Rein vom optischen her müsste Deine Überschrift 1. Ordnung eigentlich lauten "World of Refnex". Wobei wir bei der Frage sind, warum das Bild, das doch eindeutig Content enthält, per CSS eingebunden wird, wo doch CSS nicht für den Content da ist, sondern HTML.

Na ja das Banner muss ich leider per CSS einbinden. Na gut ich könnte statt eines divs für den Bannerbereich auch das <h1>-Tag verwenden. Das sehe ich ein. ;)
Aber das Problem ist, dass das Banner ja auch den Hintergrund für die Schaltflächen oben enthält und wenn ich nun das Banner per HTML mit <img> einbinde kann ich die Schaltflächen nichtmehr darauf paltzieren. Eine andere Möglichkeit wäre es natürlich das Banner in zwei Grafiken aufzuteilen und dann den Hintergrund für die Schaltflächen oben direkt deren <ul>-Tag zuzuweisen. Wäre wohl das sinnwollste, jedoch weis ich dann nicht, wie ich es hinbekommen soll, dass die Schaltflächen nicht in der Mitte über den Teil des Logo sitzen, der noch über den Schaltflächenhitnergrund hinausragt.

Also wenn du entweder eine Möglichkeit kennst wie ich Objekte, wie Schaltflächen, auf ein mit <img> eingebundenes Bild lege, oder wie ich einer horizontalen Liste beibringe in der Mitte immer einen bestimmten Platz freizulassen, sag bescheid ;)


Was deinen Einwand allgemein angeht, stimmt schon. Werde der Überschrift des Inhaltsbereich mal eine höhere Ordnung zuweisen. ;)
 
Werbung:
Na ja das Banner muss ich leider per CSS einbinden.
Warum? Es ist Content drin, daher muss es per HTML-Tag eingebunden werden. Sonst ist der Contentn nicht verfügbar.

Aber das Problem ist, dass das Banner ja auch den Hintergrund für die Schaltflächen oben enthält und wenn ich nun das Banner per HTML mit <img> einbinde kann ich die Schaltflächen nichtmehr darauf paltzieren.
Die Semantik bzw. der Inhalt darf nicht unter der Optik leiden. Du kannst nicht wichtigen Inhalt (und eine Überschrift ist für mich sehr wohl wichtig) rausnehmen, nur weil sonst vermeintlich die Optik leiden würde.

Was spricht dagegen, das Banner zweizuteilen? Es ist sowieso ungünstig, eine Grafik mit fester Höhe dem Menü als Hintergrund zu geben. Vergrößer mal die Schrift in Deinem Browser. Der Text ragt dann über Deinen Hintergrund hinaus, genauso wie bei den Menüs an der Seite.

Eine andere Möglichkeit wäre es natürlich das Banner in zwei Grafiken aufzuteilen
Ach, ich kann mir einfach nicht angewöhnen, bis zum Ende zu lesen, bevor ich antworte ... ;-)

jedoch weis ich dann nicht, wie ich es hinbekommen soll, dass die Schaltflächen nicht in der Mitte über den Teil des Logo sitzen, der noch über den Schaltflächenhitnergrund hinausragt.
Vermutlich suchst Du "z-index".

Also wenn du entweder eine Möglichkeit kennst wie ich Objekte, wie Schaltflächen, auf ein mit <img> eingebundenes Bild lege
Mit "z-index".

oder wie ich einer horizontalen Liste beibringe in der Mitte immer einen bestimmten Platz freizulassen, sag bescheid
Mit einem entsprechend großen Abstand eines Listenelements.
 
Habe mich nun für eine Mischlösung entschieden.^^ Habe die Grafik aufgeteilt und bei der Liste erzeuge ich den freien Platz in der Mitte durch unterschiedliche Float-Eigenschaften der <li>-Tags. Dafür musste ich allerdings zwei Klassen erstellen.

Nun sollte aber alles Semantisch stimmen oder? :)

//EDIT:
Wegen der Schriftfarbe. Ist nur eine Testseite, die Schriftfarben und Arten sind eh noch willkürlich gewählt. ^^
 
Zurück
Oben