Welcher Weg ist zum Design umsetzen der Richtige?

Z

Zweirad

Grünschnabel
Hallo Community,

ich bin momentan etwas verwirrt, da ich nicht genau weiß, welcher Weg für die Design Umsetzung jetzt genau der Richtige wär. Ich habe ein Buch zum lernen und habe mir nebenbei noch Videos angeschaut.
Die einen machen es mit <div> Containern und die anderen packen das Design per <header></header> und per <body></body>, (etc) Tag auf die Website.
Was ist denn nun ein "moderner" Weg um ein Design umzusetzen? Und wie wende ich den dann an?

Ich bedanke mich für die Antworten!
schönen Sonntag,
Zweirad.
 
Hi

body und div schließen sich nicht aus, im Gegenteil.
Von daher versteh ich deine Frage nicht ganz.

header: Wenn du schreibst "header und body", meinst du da nicht eher head?
Das ist etwas ganz anderes.


Jedenfalls..
HTML inkl. den HTML5-Tags, wo sie semantisch hingehören, und CSS, CSS, CSS...
 
Hm, ne ich glaub das meinte ich nicht.

Ich schreib mal kurz nen Code, kann aber auch sein, dass der falsch ist.


Code: 
<!DOCTYPE html>
<html>

        <head>
            <title>Ein Beispiel</title>
        </head>

<header>Überschrift(?)</header>

<body>
    <div id="content">
    </div>

</body>
</html>

Und der CSS Code dazu:

Code: 
header {
    width: 100%;
    height: 80px;
    background-color: white;
}

#content {
    width: 100%;
    height: 800px;
    background-color: blue;
}

So zum Beispiel, meinst Du, das sie sich sozusagen "ergänzen"?
Ich habs noch nicht ganz verstanden oder denke einfach nur zu doof.

Vielleicht verstehst Du durch den Code, was ich meine!

Grüße Zweirad
 
Header sollte Teil vom Body sein.

Zeug wie header, nav, footer, article usw.usw.
sind vom Prinzip her nur div´s, die allerdings
nur den speziellen Namen bekommen sollen,
wenn sie auch einen entsprechenden Sinn haben.

Also prinzipiell das Seitenlayout mit Divs.
Listen und Tabellen etc., wo man Listen und Tabellen anzeigen will,
aber nicht zum Strukturieren der HTML-Elemente.

Und auch, wenns theoretisch mit normalen divs funktioniert,
kann man bestimmte divs eben ihrer Bestimmung nach "umbenennen"

Ein div, in dem eine Überschrift und ein Logo zusammen am oberen Seitenrand sind,
ist wohl ein <header>

Der graue Balken hier am unteren Seitenrand, wo Links zu Impressum usw. sind,
ist ein <footer> (na gut, hier nicht, aber könnte einer sein)

Die Links eines Navigationsmenüs packt man in ein nav.

Usw.
 
Hi,
HTML: 
<!DOCTYPE html>
<html>
 
        <head>
            <title>Ein Beispiel</title>
        </head>
 
<header>Überschrift(?)</header>
 
<body>
    <div id="content">
    </div>
 
</body>
</html>
ist falsch.
Es müsste wenn dann so aussehen:
HTML: 
<!DOCTYPE html>
<html>
 
        <head>
            <title>Ein Beispiel</title>
        </head>
  
<body>
    <div id="content">
        <header>Überschrift(?)</header>
   </div>
 
</body>
</html>
Aber wenn du HTML5 nimmst dann sollte man auch <article> bzw. <section> anstatt <div id="content"> nehmen. HTML5 schreibt vor das <div> erst genommen werden darf wenn wirklich kein anderes semantisches Element mehr passt.

Grüße
 
Alles klar, super! Danke. :)

Und die Schreibweise in der CSS-Datei muss die immer gleich sein? Also wenn ich einmal mit # geschrieben habe, muss das so weitergeführt werden? Oder geht auch mal "." oder gar nichts?

Edit: und wie und wo benutze die ich <section> und <article> Tags? Wie die divs auch?
 
Zuletzt bearbeitet:
Frage 1: Das ist nicht in einem Satz zu beantworten. Auch nicht mit 10, 100...
:google: CSS-Selector, und/oder einfach CSS generell

Frage 2:
Ebenfalls, :google: nach HTML5 Tags
Section und Article sind wie Header/Footer/Nav auch divs (von der Funktion her),
aber jeweils mit einem bestimmten Sinn für den Inhalt.
 
Okey, okey.

Dann eine letzte Frage. Ich schreibe jetzt im Body Bereich <section id="hier"></section>, richtig? Und den verlinke ich dann per der ID?

Das Ding ist, auch wenn ich im body Tag mit <div> Containern arbeite, zeigt er mir im Browser nichts an
 
Zuletzt bearbeitet:
Wie sollen wir wissen, ob section das Richtige für die (uns unbekannte) Stelle ist?
Wie sollen wir wissen, ob eine id sinnvoll ist?

Und das der Browser ein ganz normales <div>...</div>
(edit: ohne jedes CSS) nicht anzeigt glaub ich nicht.
 
Hi,
nun im Quellcode wird das Div ganz bestimmt stehen.
Ob du von de mDiv auch was siehst ist eine Frage des zugewiesenen CSS.
Es gibt ganz klare Regeln wie ein Div, welches ein Blockelement ist zu reagieren hat.

Zum Thema ID und Klasse. Ich habe mir abgewöhnt überhaupt IDs zu verwenden. Den auch Klassen kannst du ja einmalig verwenden.
ICh habe diese Lehre gezogen als ich einmal eine Webseite gestaltet udn geschrieben habe wo das Backend mittels Wicket/Java erzeugt wurde. Da wurden IDs dynamisch von System erzeugt udn man durfte einfach nicht damit im Frontend arbeiten da sich diese auch wieder ändern konnten und eigentlich nur für das Javasystem zur Verfügung standen.
Außerdem umgeht man mit dem Verzicht das Problem doch mal eine ID zweimal verwendet zu haben.

Aber das ist meine persönliche Arbeitsweise und keine allgemeine Regel!

Grad die neuen HTML5 Elemente sind etwas verzwickt in der Verwendung. Hier habe ich selbst auch noch öfters Probleme ob die Semantik nun auch meiner Verwendung entspricht.
Auf html5 Doctor werden die Elemente eigentlich ganz gut erklärt.

Was meinst du mit
Und den verlinke ich dann per der ID?
Zum Vergrößern anklicken....
Meinst du nur ansprechen oder wirklich verlinken?

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück