Grundlegende Frage zum Seitenaufbau

[Efchen]

Gerne. Ich bin gespannt :-)

 

[Hase]

Sorry, hatte letzte Woche Berufschule, und da war nix mit Internet...

Habs jetzt mal kurz hochgeladen.

Meine "Test" Seite ist auf HMB Schweisstechnik
die einzelnen Dateien habe ich gepackt und auch hochgeladen: http://www.hmb-schweisstechnik.de/test.zip

EDIT: Was ich noch vergessen habe, habe mir das Layout ein wenig von den Testseiten auf http://fwpf-webdesign.de abgeschaut... also nicht wundern

MFG Hase

 

[Elroy]

Hallo.

Ich würde einen anderen Doctype nehmen. Nimm Strict anstatt Transitional.

Du hast zuviele div ein deinem Quelltext.
Die divs für Header, Sidebar und sind überflüssig und semantisch nicht korrekt.
Dein Footer ist semantsich nicht richtig ausgezeichnet.
Nimm die <br/> raus die brauchst du nicht.

Gruss
Elroy

Gruss
Elroy

 

[Hase]

warum sollte ich Strict verwenden, Transitional hat doch eigendlich keinen nachteil, aber Strict hat strengere regeln, oder nicht?
Die nicht benötigten Divs habe ich rausgenommen, den rest brauche ich.
Warum ist mein "Footer" sematisch nicht richtig ausgezeichnet?
und was hast du an den divs auszusetzen?

MFG Hase

 

[Efchen]

warum sollte ich Strict verwenden, Transitional hat doch eigendlich keinen nachteil, aber Strict hat strengere regeln, oder nicht?

"Transitional" bedeutet "Übergangs~", aber Du setzt ja keinen Doctype für den Übergang (von einer alten Website auf dem Weg zu anständigem Code), also gibts eigentlich keinen Grund, für eine Transitional-Variante. Mit Strict lernst Du besser.

Die nicht benötigten Divs habe ich rausgenommen, den rest brauche ich.

Das war so nicht das, was ich mir erwartet hatte.

Warum ist mein "Footer" sematisch nicht richtig ausgezeichnet?

Weil Du da Text drin stehen hast, ihn aber als "Gruppe" mit einem div ausgezeichnet hast. Du hast die divitis und HTML nicht verstanden.

und was hast du an den divs auszusetzen?

Du hast zu viele davon verwendet und Dich auf sie verlasen, anstatt HTML zu lernen.

Hmmm...ich glaube in diesem Thread hatte ich das noch nicht so deutlich gesagt, aber ein Anfänger sollte nicht mit divs um sich werfen, sondern als erstes mal nur den Text semantisch korrekt auszeichnen. Ohne Rücksicht auf das Aussehen. Du bist Anfänger, gestehst den divs eine besondere Rolle zu, die sie nicht haben, und begehst gerade den selben Fehler, wie viele viele andere auch. So kann man HTML aber nicht lernen.

Versuchs nochmal, das Design ganz weg zu lassen und konzentriere Dich nur auf den Inhalt und die semantissche Auszeichnung. Dabei solltest Du merken, dass Du für diesen Schritt allein eigentlich keine divs benötigst (was nicht heißen soll, dass sie BÖSE wären, sie sind genauso sinnvoll wie Tabellen - aber an der richtigen STelle!).
Versuchs nochmal. Ohne Layout/Design. Und mit vollständigem Inhalt.

 

[Hase]

ok, hab mich leider aber auch verschrieben,
wollte sagen, dass die die nicht benötigten </br> rausgenommen habe ("Nimm die <br/> raus die brauchst du nicht.")
ok, dass mit dem strict ist mir jetzt auch klaar.

wegen meinen divs: wie sollte ich dann über css gezielt einen bestimmten bereich ansprechen?
html hab ich verstanden, weiß nur noch nicht so recht, wann ich es wie umsetze...
und das layout kann ich auch nicht ganz ausblenden, da ich ja so schreiben will, dass das layout integriert werden kann. (aber, ja ich weiß, als testseite brauch ichs nicht...)

 

[Elroy]

wegen meinen divs: wie sollte ich dann über css gezielt einen bestimmten bereich ansprechen?

Wie spichst du denn die divs an?
Das geht mit fast jedem anderen Element genau so.

Möchtest du ein z.B. ein h1 formatieren kannst du diesem h1 eine Klasse oder eine ID geben oder du formatierst den h1 Tag direkt.

Gruss
Elroy

 

[Hase]

gut, jetzt glaub ich, habe ich es verstanden... das "div" nehme ich nur zum gruppieren von elementen her, aber den text schreibe ich in ein seperates element, oder?
Gut, übersichtlicher wird es auf jeden fall, aber was hätte das für einen nachteil, wenn ich das einfach in die divs schreibe, währe das vom html prinzip her falsch?

Also wenn man das so sieht, sind die ganzen einführungen in html falsch aufgebaut, da sollten manche dinge vor dem ganzen kommen...

ich werde das ganze mal überarbeiten, und gebe es dann zur kontrolle an euch ;)

MFG Hase

 

[_Thor_]

gut, jetzt glaub ich, habe ich es verstanden... das "div" nehme ich nur zum gruppieren von elementen her, aber den text schreibe ich in ein seperates element, oder?

Richtig!
Fließtext kommt in ein <p>, Überschriften in <h1> bis <h6>, Listeneinträge in <ul>, <ol> oder <dl>, Eingabefelder sind <input> oder <textarea>, deren Bezeichnung ist ein <label>, umschlossen werden Eingabefelder von einem <fieldset>.

Das könnte jetzt noch einige Zeilen so weiter gehen, aber ich denke mal ich mach hier schluss.

Gut, übersichtlicher wird es auf jeden fall, aber was hätte das für einen nachteil, wenn ich das einfach in die divs schreibe, währe das vom html prinzip her falsch?

Ja, das wäre es. HTML ist nur für die Semantik zuständig. D.H. mit HTML gibst du deinem Inhalt eine Bedeutung. Welche Bedeutung hätte Fließtext, der in einem <div> steht? Gruppierte Buchstaben? Macht nicht wirklich viel Sinn, oder? Ein <p> hingegen sagt, der Folgende Text ist ein Paragraph, also ein Textabschnitt. Damit kann man viel mehr anfangen als mit gruppierten Buchstaben, oder?

Also wenn man das so sieht, sind die ganzen einführungen in html falsch aufgebaut, da sollten manche dinge vor dem ganzen kommen...

Du hast es erfasst, aber Efchen hat dir ja schon eine gute Seite zum lernen gegeben. Die ist auf dem aktuellen Stand der Dinge. Etwas besseres wirst du momentan nur sehr schwer finden.

ich werde das ganze mal überarbeiten, und gebe es dann zur kontrolle an euch ;)

Tob dich aus, wir sind gespannt.

 

[Hase]

also jetzt habe ich mal alles in meiner indexdatei (bis jetzt nur diese online) richtig ausgezeichnet.
habe immer noch viele divs drinnen, aber um die werde ich mich erst morgen kümmern

MFG Hase

 

[Efchen]

wegen meinen divs: wie sollte ich dann über css gezielt einen bestimmten bereich ansprechen?

Das ist einer der vielen Anfängerfehler. Es wird geglaubt, man bräuchte die divs, um diese zu formatieren. Aber man kann JEDES Element formatieren. Das wurde ja schon gesagt, aber ich wollte das nur nochmal ganz deutlich sagen.

und das layout kann ich auch nicht ganz ausblenden, da ich ja so schreiben will, dass das layout integriert werden kann.

Doch das geht. Wenn es kein ultrakompliziertes Layout ist (ist es bei Dir nicht), dann geht das. Probier es einfach mal. Du wirst Dir dadurch nichts kaputt machen oder mehr Arbeit. Denn die Kunst bei HTML&CSS ist ja, dass das Layout einfach auf das aufsetzt, was Dir die HTML-Auszeichnung bietet.

Gut, übersichtlicher wird es auf jeden fall, aber was hätte das für einen nachteil, wenn ich das einfach in die divs schreibe, währe das vom html prinzip her falsch?

Ja. Damit gibst Du Deinem Inhalt nicht die Bedeutung, die Du eigentlich vergeben willst. Schreibst Du Text in ein div, sagst Du, bei dem Text handelt es sich um eine Gruppe - völliger Unfug. Du zeichnest ja auch eine Überschrift nicht mit <address> aus oder so. Suchmaschinen oder Vorlesebrowser sind auf solche Angaben angewiesen. Google erkennt eine Überschrift nur, wenn sie mit einem Überschriftstag ausgezeichnet ist. Eine Suchmaschine kann ja nicht *sehen*, wie also sollte sie eine Überschrift erkennen können, wenn nicht durch entsprechende Auszeichnung? Vorlesebrowser lesen Überschriften natürlich anders vor, als Fließtext. Aber das geht nur, wenn sie Überschriften auch wirklich erkennen.

Also wenn man das so sieht, sind die ganzen einführungen in html falsch aufgebaut

Mein Reden! Das ist leider die traurige Wahrheit, viele lassen sich davon verführen, die wenigsten denken daran, dass man im Internet zwar viele Informationen findet, aber leider eben auch viele falsche, weil niemand die Angaben überprüft!

In Deiner Seite ist nun noch ein div#header. Das ist semantisch Unsinn. Ebenso, dass Du das Bild als Hintergrundbild eingebunden hast, obwohl es Content enthält. Content ist immer HTML, CSS ist nur Zierde. Das gilt auch für Bilder. <img> für Bilder mit Content (der steht dann im alt-Attribut!!!), background-image für Bilder, die zur Zierde sind.
So sollte es aussehen:

<h1><img src="header.jpg" alt="HMB Schweißtechnik GmbH - Schweissen Schneiden Automatisieren" /></h1>

Dann ist da noch ein <br> inmitten des Menüs. Das muss raus. Wenn Du einen Abstand willst, mach das mit margin.

Wenn Du Deinen Header als <h1> auszeichnest, dann muss Dein bisheriges <h1> natürlich zu <h2> werden, denn die beiden Überschriften sind ja nicht gleichwertig.

Und der div#footer kann noch weg, da ist ja nur ein Element drin. Da darf auch gerne das p#footer heißen. Aber alles, was Du mit dem div außen rum machen kannst, kannst DU genausogut mit dem p machen.

 

[Hase]

achso, ich wusste nicht, dass es üblich ist auch andere sachen wie z.b. bilder in eine überschrift zu packen...
gut, dass werde ich dann natürlich gleich beheben, vielen dank

ok, dass mit dem <br> im menü habe ich übersehen, werde ich auch gleich ändern.

MFG Hase

 

[skizZ]

[...] Aber alles, was Du mit dem div außen rum machen kannst, kannst DU genausogut mit dem p machen.

*hust* sag bitte gleich dazu, dass das <p>-Tag nicht zum gruppieren ist.

 

[Hase]

*hust* sag bitte gleich dazu, dass das <p>-Tag nicht zum gruppieren ist.

also soweit kann ich auch mitdenken...

die ganze problematik ist nur, weil ich auch andere sachen "programmiere" kenn ich die vorgehensweiße nicht bei html nicht, und gehe an sachen einfach anders ran...
und wie schon gesagt, die einführungen ins html sind nicht gerade für DAU's geschrieben... drum bitte ich ein wenig zum verständniss

MFG Hase

 

[skizZ]

Am Meisten lernst du, wenn du deine Webseiten hier im Webseitencheck mal auseinander nehmen lässt. Da wirst du auf alle Fehler hingewiesen und wenn Efchen gut drauf ist hast du auch keine Lust mehr an HTML :)

 

[Efchen]

achso, ich wusste nicht, dass es üblich ist auch andere sachen wie z.b. bilder in eine überschrift zu packen.

Was heißt denn hier "üblich"? "Üblich" ist nichts. Es kommt doch auf die Bedeutung des Inhalts an. Da gibts keine Regeln oder "übliche" Dinge, Du allein legst fest, was Dein Inhalt bedeuten soll. Und wenn Du ein Bild als Überschrift einbindest (es steht ja Text drauf!), dann wird das natürlich auch als Überschrift ausgezeichnet! Das ist nur logisch, hat aber mit "üblich" eigentlich nichts zu tun.

die ganze problematik ist nur, weil ich auch andere sachen "programmiere" kenn ich die vorgehensweiße nicht bei html nicht

Ich bin auch Programmierer. HTML hat mit Programmieren nichts zu tun, das ist was ganz anderes. Da kann man nicht wie an ein Programm rangehen. Bei HTML gehts nur um die Bedeutung des Inhalts. Das ist um Längen einfacher als Programmieren. Ein Programmieer übernimmt in HTML nur, dass er auf die Syntax aufpasst und keine syntaktischen Fehler einbaut.

und wie schon gesagt, die einführungen ins html sind nicht gerade für DAU's geschrieben... drum bitte ich ein wenig zum verständniss

Das Problem ist, dass fast alle HTML-Einführungen selber nicht begriffen haben, wozu HTML eigentlich da ist. HTML ist nämlich so einfach, dass es eigentlich jeder DAU verstehen MUSS. Es ist nichts schwieriges daran. Wer Lesen und Schreiben kann, muss auch Semantik vergeben können.

Den Link habe ich wahrscheinlich schon gepostet: Einführung | Webdesign mit XHTML und CSS

Da ist es eigentlich sehr einfach beschrieben.

wenn Efchen gut drauf ist hast du auch keine Lust mehr an HTML :)

Wenn ich schlecht drauf bin, dann hat er keine Lust mehr darauf, Websites zu erstellen. Wenn ich gut drauf bin, dann macht es bei ihm *klick* und er versteht es auf einmal!

 

[Hase]

Dann ist da noch ein <br> inmitten des Menüs. Das muss raus. Wenn Du einen Abstand willst, mach das mit margin.

also hab ich dich im bezug auf den abstand richtig verstanden, ich soll einfach das menü in zwei teile aufteilen und einem teil ein margin-bottom geben?

also so?

<div id="sidebar">
	<div id="menü1">
		<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="weld.html">Schweissen</a></li>
		<li><a href="cut.html">Schneiden</a></li>
		<li><a href="auto.html">Automatisieren</a></li>
		</ul>
	</div>
	<ul>
	<li><a href="unternehmen.html">Unternehmen</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
	<li><a href="anfahrt.html">Anfahrt</a></li>
	<li><a href="sonstiges.html">Sonstiges</a></li>
	</ul>
</div>

oder so?

<div id="sidebar">
	<div id="menü1">
		<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="weld.html">Schweissen</a></li>
		<li><a href="cut.html">Schneiden</a></li>
		<li><a href="auto.html">Automatisieren</a></li>
		</ul>
	</div>
	<div id="menü2">
		<ul>
		<li><a href="unternehmen.html">Unternehmen</a></li>
		<li><a href="kontakt.html">Kontakt</a></li>
		<li><a href="anfahrt.html">Anfahrt</a></li>
		<li><a href="sonstiges.html">Sonstiges</a></li>
		</ul>
	</div>
</div>

währe ja eigendlich beides richtig, aber von der "sauberen gruppierung" her, würde ich 2. bevorzugen, oder nicht?

MFG Hase

 

[_Thor_]

Einfach nur

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="weld.html">Schweissen</a></li>
  <li><a href="cut.html">Schneiden</a></li>
  <li><a href="auto.html">Automatisieren</a></li>
</ul>
<ul>
  <li><a href="unternehmen.html">Unternehmen</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
  <li><a href="anfahrt.html">Anfahrt</a></li>
  <li><a href="sonstiges.html">Sonstiges</a></li>
</ul>

Allerhöchstens

<div>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="weld.html">Schweissen</a></li>
    <li><a href="cut.html">Schneiden</a></li>
    <li><a href="auto.html">Automatisieren</a></li>
  </ul>
  <ul>
    <li><a href="unternehmen.html">Unternehmen</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="anfahrt.html">Anfahrt</a></li>
    <li><a href="sonstiges.html">Sonstiges</a></li>
  </ul>
</div>

Ein einzelnes Menü brauchst du nicht gruppieren.

 

[Hase]

verdammt! hab das irgendwie immer noch nicht begriffen, dass ich mit css ja jedes element ansprechen kann...
weiß nicht, irgendwie... naja ka...

Danke für den Tipp...

MFG Hase

EDIT: So hab das geändert jetzt online gestellt.

MFG Hase

 

[Efchen]

also hab ich dich im bezug auf den abstand richtig verstanden, ich soll einfach das menü in zwei teile aufteilen und einem teil ein margin-bottom geben?

Jein.
Wieso eigentlich das Menü in zwei Teile aufteilen?
Wenn Du schreibst "das Menü", dann soll es doch offensichtlich ein lolgisch zusammengehörendes Menü sein, wo nur nach einem Menüpunkt ein Abstand kommt, oder? Oder sind es wirklich zwei logisch voneinander getrennte Menüs, die nichts miteinander zu tun haben?

Sind es wirklich zwei logische Menüs, dann ist die Lösung, die Ihr schon erarbeitet habt, richtig. Wenn aber alle Menüpunkte zusammengehören, dann darf es auch nur eine einzige Liste sein. Da gibst Du dann halt dem Menüpunkt, wo der Abstand hin soll, eine Klasse und formatierst da den Abstand rein.

Wenn Du ein Menü in zwei Menüs aufteilst, nur um einen Abstand reinzumachen, dann machst Du wieder Layout mit HTML, was so nicht der Sinn ist.