Layouten mit CSS und Divs - aufgeblähter Quellcode oder das gleiche wie Frames?

[Wordpressportal]

Hallo,
ich habe eine Frage die mich nun schon seit langem beschäftigt und wozu ich nie eine Antwort finden konnte. Wenn ich mit Dreamweaver eine Website erstelle und mir ein CSS-Template erstelle. Dann habe ich eine Index.html und eine style.css . In der Index.html werden alle Divs mit den Inhalten der Startseite gefüllt, also der Content der Startseite, Footer, Linkes Menü, Header + Logo. Wenn ich jetzt eine neue Seite machen will, die unter einem Menüpunkt erreichbar ist, muss ich dann die komplette index kompieren? Dann muss ich ja nach jeder Änderung in dem Menü alle Dateien ändern... Das kann´s also nicht sein. Wie kann ich dann mit Divs layouten und eine fertige Index basteln und dann in den anderen nur noch den unterschiedlichen Content einfügen und dann verlinken?
Wäre sehr dankbar für Antworten denn ich komme einfach nicht weiter bei meinen ganzen Sachen...

Mfg
Michael

 

[Lenchen]

Du kannst mal nach "include" googlen. Wenn dein Webspace php unterstützt kannst du z.B. dein Menu einfach mit

<?php
include 'menu.html';
?>

einfügen.
Das klappt allerdings nur, wenn du deine Seiten von .html in .php umbenennst und nicht lokal auf deinem Rechner (Außer mit Hilfe von Programmen, wie z.B. XAMMP)

 

[_Thor_]

Layout mit div ist genauso falsch, wie Layout mit Tabellen. <div> ist zum Gruppieren mehrerer Elemente gedacht, Layout wird einzig und allein mit CSS gemacht. In HTML gibst du deinem Inhalt nur die richtige Bedeutung, eine Überschrift zeichnet man mit <h1>-<h6> aus, eine Liste mit <ul>, <ol> oder <dl>, Fließtext mit <p>, Adressen mit <address> usw.

Dreamweaver und andere Generatoren benutzen dafür gerne <div>, weil sie ja nicht wissen können, welche Bedeutung der von dir eingegebene Text haben soll. Deswegen sind solche Generatoren eher ungeeignet zum erstellen von Webseiten. Ein einfacher Texteditor (notepad2, notepad++ o.Ä.) und einige Kenntnis in HTML und CSS liefern deutlich bessere Ergebnisse.

Für wiederkehrende Elemente einer Webseite bietet sich an, diese mit einer serverseitigen Scriptsprache einzubinden. In PHP wäre dies z.B. 'include'.

http://www.html.de/search.php?searchid=141133

 

[Wordpressportal]

Vielen Dank euch beiden für die Antworten... dachte mir schon so was als ich mir es erschließen wollte und kannte das von Wordpress... Php ist kein Problem da meine Webspaces eh Php unterstützen (Ich hab davor nur mit CMS gearbeitet). Die Index Datei muss dann auch in Php umgenannt werden, oder?
@thor: Das Layouten mit Divs wird doch immer so hochgelobt und alle sagen "Tabellen kannst du vergessen Layoute mit Divs... Joomla etc. setzen dies ja auch ein. Würdest du nur mit floats arbeiten? Und da ich keinen Windows habe bringt mir notepad nichts, bräuchte da ein Programm für den Mac, aber ich hab sowieso Dreamweaver... Und das geht ja sicher damit so viel ich weiss...

 

[_Thor_]

Tabellen sollte man keineswegs vergessen, sie sind die einzige Möglichkeit, tabellarische Daten sinnvoll auszuzeichnen. Fürs Layout sollte man sie allerdings nicht verwenden, das hat man gemacht, als es noch kein CSS gab.

Das Layouten mit Divs wird doch immer so hochgelobt...

Ja, weil die meisten garnicht wissen, wofür HTML gedacht ist, nämlich deinem Inhalt eine Bedeutung zu geben.

<div id="headline">Überschrift</div>

ist völlig unsinnig,

<h1>Überschrift</h1>

wäre richtig.

Um Inputfelder kommt ein <fieldset>, kein <div>. <p> braucht auch kein umgebendes <div>. Fließtext steht in einem <p>, braucht auch kein <div>, Listen stehen in <ul>, <ol>, <dl>.

Wenn dein Inhalt soweit ausgezeichnet ist, dass du mit dem Layout anfangen kannst, mag es nötig sein, um ein paar Elemente ein <div> zu spannen, um ihnen gemeinsame Formatierungen zu geben, das sollte dann aber auch schon alles sein.

Joomla etc. setzen dies ja auch ein

Aus eben dem Grund, den ich dir oben schon genannt habe, sie können die Semantik nicht erkennen, die kannst du nur per Hand selber schreiben.

Dafür ist Dreamweaver auch zu gebrauchen, allerdings nicht der WYSIWYG-Editor.

 

[Wordpressportal]

Wie layoutest du denn wenn nicht mit Divs? Float-Layout sind ja auch divs. Und wenn ich jetzt eine Website Template runterlade benenne ich die Datei einfach statt .html in .php um, oder? und die nächsten Seiten nenne ich auch .php und setze dann den php include Tag ein für das Menü, den Header etc.?

 

[_Thor_]

Wie layoutest du denn wenn nicht mit Divs?

Mit CSS!

Float-Layout sind ja auch divs.

Wo hast du das her? Du kannst jedes Element floaten, das muss kein div sein.

Und wenn ich jetzt eine Website Template runterlade benenne ich die Datei einfach statt .html in .php um, oder? und die nächsten Seiten nenne ich auch .php und setze dann den php include Tag ein für das Menü, den Header etc.?

Richtig.

 

[Efchen]

Das Layouten mit Divs wird doch immer so hochgelobt und alle sagen "Tabellen kannst du vergessen Layoute mit Divs... Joomla etc. setzen dies ja auch ein.

Viele Irre können nicht fliegen!
Es gibt auch immer noch Leute, die Tabellenlayouts hoch loben. Es gibt in vielen Lagen Leute, die etwas loben, was so eigentlich nicht gedact ist.
Wer Layout mit divs lobt, hat keine Ahnung, was HTML eigentlich ist. Layout mit CSS schließt ein, dass man HTML wieder seiner eigentlichen Bestimmung zuführt, das vergessen aber viele. Sie lernen das "neue Layouten" nicht bis zum Ende und machen nur wieder den selben Fehler wie mit Tabellen. Sie layouten mit HTML.

Würdest du nur mit floats arbeiten?

Das eine hat doch mit dem anderen nichts zu tun. divs sind HTML und float ist eine CSS-Eigenschaft. HTML ist für die logische Auszeichnung, CSS für Layout und Design. Ein HTML-Tag kann man nicht mit einer CSS-Eigenschaft vergleichen.

Und da ich keinen Windows habe bringt mir notepad nichts, bräuchte da ein Programm für den Mac, aber ich hab sowieso Dreamweaver... Und das geht ja sicher damit so viel ich weiss...

Es reicht ja ein normaler Texteditor.

Wie layoutest du denn wenn nicht mit Divs?

Ausschließlich mit CSS!

Float-Layout sind ja auch divs.

Quatsch. Da vergleichst Du wieder Äpfel mit Autos.
Außerdem kann man auch ein <p> oder ein <address> oder ein <ul> floaten.

Vielgenannt ist die "Trennung von Inhalt und Layout". Das heißt nicht nur, dass Du Styles in ein externes Stylesheet auslagern sollst, das heißt auch, dass Du auch gedanklich alles trennen sollst. Das heißt, dass Du IDs und Klassennamen nicht gemäß dem Layout vergibst, sondern einen Namen vergibst, der eine semantische Bedeutung hat. Das bedeutet auch, dass Du im Kopf begreifst, dass Du divs nicht mit float vergleichen kannst, das eine ist HTML, das andere ist CSS. Das kann man strikt voneinander trennen. Das heißt auch, dass wenn Du ein horizontales Menü hast, das getrost als <ul> auszeichnen kannst, auch wenn Dein Browser das vertikal ausgibt. Denn es ist irrelevant, wie HTML etwas darstellt, weil HTML nicht für die Darstellung gedacht ist. Dafür ist CSS und damit kannst Du ein Menü ganz einfach horizontal darstellen.

Das Element div, um nochmal darauf zurück zu kommen, ist eigentlich dafür da, mehrere Elemente zu gruppieren. Das macht man eigentlich meist nur zwecks gemeinsamer Formatierung mit CSS. Es ist unnötig, ein einzelnes Element noch in ein div zu packen. Alle Eigenschaften, die Du auf das div anwenden willst, kannst Du auch jedem anderen Block-Element geben.
Es ist richtig, dass divs im Zusammenhang mit CSS manchmal notwendig sind, aber in der Regel nur bei ausgefallenen Designs, z.B. um "runde Ecken" aus Grafiken zu realisieren oder ähnliches. Auch das "house that CSS built" ist aus reiner div-Suppe gekocht, dafür sieht es aus wie eine Grafik.
Aber Layout macht man nicht mit divs. Denn sie sind HTML und mit HTML macht man kein Layout.

Es ist so: Wer seine Inhalte nur in divs packt, ohne auf die Semantik zu achten, macht wieder den selben Fehler wie beim Layouten mit Tabellen - der Inhalt wird in falsche Tags gepackt, die eine Bedeutung vermitteln, die der Inhalt eigentlich nicht haben soll. CSS-Layout ist beides nicht.

 

[Wordpressportal]

Danke für die vielen Hilfen und antworten... Mir wurde das alles ziemlich falsch erklärt und ich denke dass das noch bei viel zu wenigen angekommen ist. Aber wie kann ich denn nun eine Website nur mit CSS-Layouten?

 

[Efchen]

Indem Du als erstes Deinen Inhalt mit HTML auszeichnest, d.h. ihm eine logische Bedeutung zuweist. Das kann dann z.B. so aussehen (ist nur ein Auszug, es fehlt der Doctype, der HTML-Header und der body):

<h1><img src="welcome.jpg" alt="Willkommen auf meiner Website" ></h1>

<ul id="Menu">
  <li><a href="seite1.html">Seite 1</a></li>
  <li><a href="seite2.html">Seite 2</a></li>
</ul>

<div id="Content">
  <h2>Seitentitel</h2>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Erst wenn die Struktur steht, erstellst Du ein externes Stylesheet. Das kann dann so aussehen:

body {
  background-color:blue;
  font-family:Arial,sans-serif;
  font-size:100.01%;
}
h1 {
  font-size:2em;
  color:white;
}
ul#Menu {
  float:right;
  width:10em;
  margin-top:0;
}

div#Content {
  margin-right:12em;
  background-color:white;
}
div#Content h2 {
  font-size:1.5em;
}

Das Layout übernimmt in diesem Beispiel weitestgehend der Browser selbst.

Block-Elemente (im Gegensatz zu Inline-Elementen) wie div oder ul nehmen normalerweise immer die gesamte Breite ein. Daher passen keine zwei solchen nebeneinander. Mit float kann man so ein Element aus dem normalen Textfluss nehmen, effektiv an den Rand stellen, wie hier geschehen. #Content und #Menu stehen dann nebeneinander. Alles andere macht der Browser für Dich.

Das ist jetzt mal so ein Anfang mit vielen Stichworten. Ich bin sicher, andere hier im Forum werden noch den ein oder anderen Link zum Thema einwerfen können.

 

[Patrick Leuppert]

Ich hoffe nur, dass dein Benutzername hier im Forum nicht bedeutet, dass du was mit Wordpress zu tun hast (außer das Benutzen).