Hallo.
Vier Sachen noch:
1. Wie schon timtim gesagt hat: Zeichne dein Menü als Liste aus.
2. In deinem Untermenü hast du immer noch Text den du nicht ausgezeichnet hast.
3. Dein Fussbereich braucht eigentlich kein div ein <p> würde genügen. Falls du das div beibehälst (was semantisch nicht richtig ist) zeichne bitte den Text in deinem Fussbereich aus.
4. Warum setzt du dein <h3> vor dein <h2>?
Gruss
Elroy
Zitat von "timtim"... Nein, das ohne die <li> ist nicht ok, aber diese punkte können nacher durch das CSS entfernt werden. ...
Zitat von "Elroy"... 1. Wie schon timtim gesagt hat: Zeichne dein Menü als Liste aus. ...
Okay, ist geändert. Allerdings stehen jetzt die Menüpunkte in der Browseransicht untereinander. Eigentlich sollten Sie nebeneinander stehen ...
<!-- Inhalt Menü -->
<ul id="menue">
<li><a href="mermax.html">Mer & Max</a></li>
<li><a href="haushof.html">Haus & Hof</a></li>
<li><a href="waldfeld.html">Wald & Feld</a></li>
<li><a href="hundwolf.html">Hund & Wolf</a></li>
<li><a href="reisenevents.html">Reisen & Events</a></li>
<br />
<li><a href="impressum.html">Impressum</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="">Gästebuch</a></li>
<li><a href="index.html">Start</a></li>
</ul>Zitat von "Elroy"... 2. In deinem Untermenü hast du immer noch Text den du nicht ausgezeichnet hast. ...
Diesen Bereich habe ich geändert in "News", da es ja auf der Startseite eigentlich gar kein "Untermenü" gibt. Der Code schaut jetzt so aus. Ich hoffe mal, das ist jetzt richtig so:
<!-- Inhalt News -->
<div id="news">
<h3>
N.E.W.S.
</h3>
<p>
Das ist neu hier:
</p>
</div>Zitat von "Elroy"... 3. Dein Fussbereich braucht eigentlich kein div ein <p> würde genügen. Falls du das div beibehälst (was semantisch nicht richtig ist) zeichne bitte den Text in deinem Fussbereich aus. ...
Warum braucht der Fußbereich kein div? Sollte der Code so ausschauen?
<!-- Inhalt Fußbereich -->
<p id="fussbereich">
© 2010 by MerMax
<a href="mailto:mermax@mermax.de">mermax@mermax.de</a>
</p>Zitat von "Elroy"... 4. Warum setzt du dein <h3> vor dein <h2>? ...
Ähm - weil ich die Überschrift "Themenübersicht" im eigentlichen Inhaltsbereich für höherwertig halte als die Überschrift "News" - ist das ein Denkfehler?
Danke für Eure Geduld und Hilfe
LG, noeli-A-res
Zitat von "noeli-A-res"Eigentlich sollten Sie nebeneinander stehen
Die Formatierung machst du jetzt mit CSS, damit kannst du die li so platzieren, wie du willst und z.B. auch die Aufzählungszeichen ausschalten.
Gruß
Laura
Soooo ...........
Wenn ich Euch richtig verstanden habe, folgt jetzt der CSS-Teil - wobei ich noch immer überrascht bin, wie kurz der HTML-Teil jetzt ist. Im Moment kann ich mir noch immer nicht so recht vorstellen, dass jetzt nur noch CSS zum Zuge kommt ... hm, ich bin gespannt.
Erste Frage an Euch:
Macht es Sinn, eine feste Breite für die Seite festzulegen? Und wenn ja, welche Breite ist sinnvoll bzw. heute gebräuchlich?
Würde das in CSS dann z.B. so ausschauen?
body {
width:800px;
}LG, noeli-A-res
Hi timtim,
könntest Du mir denn sagen, was für eine feste Seitenbreite spricht - oder anders herum, warum die meisten zu einer variablen Seitenbreite raten würden? - quasi als Entscheidungshilfe für mich ... oder kann ich das auch später noch gefahrlos ändern?
Danke für Deine ausführliche und anschauliche Antwort.
Das mit der Angabe der Breite habe ich jetzt verstanden - ich werde also dann auch eine relative Breite in Prozent angeben (... warum 100,01 %?? ...).
Klasse "Anschauungsmaterial" übrigens auch die Seite von Basiii ... dann hoffe ich mal, dass ich es auch so oder ähnlich hinbekomme.
Als nächstes werde ich wohl dann versuchen, die Seite zu strukturieren - sprich die einzelnen Teile an die richtige Position zu bekommen, oder?
LG, noeli-A-res
Ein Bild mit der Grundstruktur gibt es schon in dem anderen Thread - wenn Du das meinst:
[Blockierte Grafik: http://img109.imageshack.us/img109/8803/struktur.jpg]
Und hier habe ich versucht, die Struktur mal "zu füllen":
[Blockierte Grafik: http://img130.imageshack.us/img130/6010/aufbau.jpg]
LG, noeli-A-res
Also so wie ich das sehe, möchtest du ein zentriertes Layout. Da stimmt die Aussage von timtim bezüglich der Breite nicht. Besser gesagt die Lösung ist nicht sonderlich clever. Wenn man das gesamte Layout zentrieren möchte, muss man zuerst die ganze Seite in einen Container packen:
<html>
<head>
</head>
<body>
<div id="seitenbereich">
<!-- Inhalt -->
</div>
</body>
</html>Danach musst du die einzelnen Bereiche (Kopf, Navigation, News, Text und Fuss) ebenfalls in einzelne Container packen. So hast du verschiedene "Pakete" die man nun mit CSS ausrichten kann:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>
</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="core.css"/>
</head>
<body>
<div id="seitenbereich">
<!-- Inhalt Kopfbereich -->
<div id="kopfbereich">
<h1 id="kopfbereich">Die MerMax-Seite</h1>
</div>
<!-- Inhalt Navigation -->
<div id="navigation">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!-- Inhalt News -->
<div id="news">
</div>
<!-- Inhalt Textbereich -->
<div id="hauptbereich">
</div>
<!-- Inhalt Fußbereich -->
<div id="fussbereich">
</div>
</div>
</body>
</html>Ich würde der Breite des äussersten Containers nicht in Prozent angeben. So passt sie sich zwar schön der Breite des Bildschirms an, aber bei sehr breiten Bildschirmen besteht nun die Gefahr das das gesamte Layout ausseinandergezehrt wird. Die Angabe der Breite in Pixel ist aber auch nicht die elegante Lösung. Die relative Grösseneinheit em kann deshalb gebraucht werden. Ich würde deshalb dem äussersten Container "seitenbereich" im CSS die Breite 50em zuweisen. Umgerechnet sind das 800px. Ich denke 800px ist die Ideale Breite für Webseiten. So wird auch die Bildschirmauflösung 800x600 unterstützt. Und mit einer Breite von 800px kann man die Website auch mit sehr viel Inhalt füllen.
Jetzt kannst du das ganze Layout mit CSS zentrieren und die Bereich ebenfalls mit CSS ausrichten.
Zitat von "NeoAramis"Danach musst du die einzelnen Bereiche (Kopf, Navigation, News, Text und Fuss) ebenfalls in einzelne Container packen.
Muss er das?
So wie das jetzt rüber kommt erklärst du ihm gerade er soll sein Layout mit divs machen.
Gruss
Elroy
Hallo zusammen - und danke für Eure Beiträge.
Also, ich werde mich wohl für eine feste Breite entscheiden - dabei hatte ich 800 px bereits in die engere Wahl gezogen. Mit er Einheit "em" kann ich nicht so recht etwas anfangen. Dazu fehlt mir wahrscheinlich die logische Vorstellungskraft ... :oops: (Gibts dazu vielleicht auch ein anschauliches Beispiel???)
Die einzelnen Bereiche in div-Container zu packen, war auch meine erste Idee - nur habe ich mich dann eines Besseren belehren lassen und die divs teilweise wieder entfernt ("ul" verhält sich wie "div" ...). Das habe ich doch richtig verstanden, oder?
In der Hoffnung, Eure Geduld nicht zu sehr zu strapazieren ...
LG, noeli-A-res
Zitat von "Elroy"
Muss er das?
So wie das jetzt rüber kommt erklärst du ihm gerade er soll sein Layout mit divs machen.
Müssen muss niemand. Einzelne Bereiche in divs packen ist sehr sinnvoll. Wird in vielen Seminaren, Referenzen etc. so beschrieben. Sobald man dann auch aufwendigere Laoyuts hat, merkt man sehr schnell, dass solche einzelne Pakete zu positionieren einfacher ist.
Zitat von "noeli-A-res"Hallo zusammen - und danke für Eure Beiträge.
Also, ich werde mich wohl für eine feste Breite entscheiden - dabei hatte ich 800 px bereits in die engere Wahl gezogen. Mit er Einheit "em" kann ich nicht so recht etwas anfangen. Dazu fehlt mir wahrscheinlich die logische Vorstellungskraft ... Embarassed (Gibts dazu vielleicht auch ein anschauliches Beispiel???)
Die einzelnen Bereiche in div-Container zu packen, war auch meine erste Idee - nur habe ich mich dann eines Besseren belehren lassen und die divs teilweise wieder entfernt ("ul" verhält sich wie "div" ...). Das habe ich doch richtig verstanden, oder?
Das em sollte nicht abschrecken. Es ist für die Gestaltung des Layouts insofern einfach, dass man dann ein flüssiges und elastisches Layout hat. Ich kann dir ein andermal (bin gerade ein bisschen gestresst wegen der Schule) erkären wie man ein stabiles, flüssiges, elastisches und zweispaltiges Layout erstellt. Du möchtest doch ein zweispaltiges Layout?
Damit Du dir das ganze einmal real anschauen kannst, gebe ich dir den Link meiner neuen Seite die noch in Bearbeitung ist: <!-- m --><a class="postlink" href="http://anver.ch/xhtml/">http://anver.ch/xhtml/</a><!-- m -->
Inhalt noch nicht beachten, der wurde nur einmal so hingeklatscht. Die CSS-Dateien sind in folgendem Verzeichnis: <!-- m --><a class="postlink" href="http://anver.ch/xhtml/css/">http://anver.ch/xhtml/css/</a><!-- m -->
Das ul bereits ein Block-Element ist und man es deshalb nicht in einen Container packen sollte, finde ich grundsätzlich falsch. Wenn es dann um die visuelle Formatierung geht, ist man dann froh, wenn man die Liste herumbewegen kann und man sich nicht um das Grundlayout sorgen muss, das es nicht zerfällt. Vor allem wenn es dann um ein zweispaltiges Layout geht, merkt man es sofort.
Aber wie gesagt, schau Dir einmal meine Seite an und probiere es an deiner aus.
Zitat von "noeli-A-res"In der Hoffnung, Eure Geduld nicht zu sehr zu strapazieren ...
Mach Dir da keine Sorgen, es ist unser Hobby, dies ist keine Zeitverschwendung für uns!
Zitat von "NeoAramis"
Müssen muss niemand. Einzelne Bereiche in divs packen ist sehr sinnvoll. Wird in vielen Seminaren, Referenzen etc. so beschrieben. Sobald man dann auch aufwendigere Laoyuts hat, merkt man sehr schnell, dass solche einzelne Pakete zu positionieren einfacher ist.!
Stimmt! Irgend jemand hat mal diesen Quatsch verzapft und er wurde sofort von anderen übernommen.
div ist ein HTML Tag und dient dazu mehrere Elemente zu grupieren, das ist alles.
Zitat von "NeoAramis"
Das ul bereits ein Block-Element ist und man es deshalb nicht in einen Container packen sollte, finde ich grundsätzlich falsch. Wenn es dann um die visuelle Formatierung geht, ist man dann froh, wenn man die Liste herumbewegen kann und man sich nicht um das Grundlayout sorgen muss, das es nicht zerfällt. Vor allem wenn es dann um ein zweispaltiges Layout geht, merkt man es sofort.
Wenn nicht mehrere Elemente zu gruppieren sind ist das div falsch. Es geht hier um die Semantik und nicht um deine persönlichen Vorlieben.
Wenn das Layout verfällt dann hat man grundsätzlich etwas falsch gemacht. Das hat dann nichts mehr mit einem div mehr oder weniger zu tun.
Gruss
Elroy
Endlich mal jemand der der gleichen Meinung ist wie ich, danke Elroy 
Mal im Ernst, warum sollte ein ul, um das kein div ist, das Layout zerschießen, wenn sich beide Tags genau gleich verhalten, falls man es nicht anders einstellt.
Das was hier erzählt wird, ist teilweise großer Quatsch. Vielleicht mal nachdenken oder nachschaun, bevor man hier so unsinnige Behauptungen aufstellt..
Danke erst einmal euch beiden! ... und auch Dir, Laura!
Ich sehe schon, das Thema "Strukturieren mit div" ist wohl ein sehr kontroverses. Einfach und logisch erschien es mir anfangs auch, allerdings wenn es nicht notwendig ist (bzw. semantisch falsch, wie Du schreibst), werde ich es auch nicht einsetzen.
Noch einmal zur Erinnerung: Die Struktur der Index-Seite sollte im Großen und Ganzen so erhalten bleiben, wobei den neuen Kopfbereich eine Grafik füllen soll und das Hauptmenü darunter plaziert wird.
Der HTML-Teil der neuen Index-Seite ist jetzt also fertig. Nun geht es ans "Eingemachte" ... und schon bin ich kläglich am Scheitern!
Ich habe versucht, der Seite eine Breite von 800 px zuzuweisen und sie vertikal zu zentrieren - allerdings ohne Erfolg! :oops: Lediglich die Hintergrundfarbe (zu Testzwecken) funktioniert! Wahrscheinlich ist der Code völlig daneben ... :oops: :oops:
body {
width:800px;
vertical-align:middle;
background-color:yellow;
}Ihr seht, jetzt bekommt Ihr richtig Arbeit ... obwohl ich versucht habe, es alleine hinzubekommen!
Grummel-Grüße, noeli-A-res
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!