Sponsored Links |
|
|||
Es beruhigt und freut mich mich ziemlich, dass ich gestern Abend auf ein sehr ähnliches Ergebnis gekommen bin
HTML-Code:
<!DOCTYPE html> <html> <head> <title>Dionya</title> <meta name="generator" content="text/html"> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div id="root"> <div id="HauptnavigationDiv"> <nav> <ul id=Hauptnavigation> <li> <span> <em>Start</em> </span> </li> <li> <a href="Produkte.htm">Produktuebersicht</a> </li> <li> <a href="Kontakt.htm">Kontakt</a> </li> <li> <a href="Geschichte.htm">Geschichte</a> </li> </ul> </nav> </div> <div id="Neuigkeitentliste"> <h1>Aktuelles</h1> <article> <h2 id="highest_news">Computex 06.04.2014</h2> <p>Wie viele bereits wissen waren wir vom 01. bis zum 04. Juni auf der Computex in Taipeh und haben dort einige neue Produkte vorgestellt, einen kleinen Ueberblick ueber die Neuvorstellungen koennt ihr hier finden: <a href="/Produkte/cpx14.htm">Computex 2014</a></p> </article> <article> <h2>CES 04.01.2014</h2> <p>Dionya war diesen Januar auf der CES und hat dort das neue Gehaeuse "Dionya Dizang" vorgestellt, Informationen dazu findet ihr hier: <a href="/Produkte/Dizang.htm">Dizang</a></p> </article> <article> <h2>E3 21.07.2013</h2> <p>Auf der Weltgroessten Spielemesse wurde das neue Gehaeuse "Dionya Dosojin" vorgestellt, das sich speziell an Gamer richtet. Wer sich dafuer interessiert kann sich hier unser Vorstellungsvideo ansehen: <a href="/Produkte/Dosojin.htm">Dosojin</a></p> </article> <article> <h2>01.04.2013</h2> <p>Nach jahrelangen Planungen ist es endlich so weit: Es gibt eine neue Firma am Computermarkt: Dionya ist seit heute als offizieller Hersteller von Computerbauteilen eingetragen, und puenktlich zur Gruendung der Firma praesentieren wir heute unser erstes Gehaeuse, das Dionya Daikoku, dass sich mit seiner UVP von 139,99€ besonders an Enthusiasten richtet. Interessenten koennen sich hier ueber das Gehause informieren: <a href="/Produkte/Daikoku.htm">Daikoku</a></p> </article> </div> <nav> <div id="ProduktnavigationDiv"> <img src="banner_head.jpg" height="172" width="172" alt="Firmenlogo"> <ul id=Produktnavigation> <li> <span> <h3>Produktuebersicht</h3> </span> </li> <li> <a href="Kodama.htm">Kodama </a></li> <li> <a href="Fujin.htm">Fujin </a></li> <li> <a href="Dizang.htm">Dizang </a></li> <li> <a href="Dosojin.htm">Dosojin </a></li> <li> <a href="Daikoku.htm">Daikoku </a></li> </ul> </div> </nav> <footer> <a href="Impressum.htm">Impressum</a> <img src="banner_down.jpg" alt="Produktbanner"> </footer> </div> </body> </html> Liege ich richtig, dass das semantisch korrekt bzw wenigstens annehmbar ist, und dass ich auf diesem System aufbauend das Design definieren soll? (Der von mir gelesene Artikel zur Semantik war da recht eindeutig, aber lieber fragen, als dann noch mal schreiben ) |
Sponsored Links |
|
|||
Hallo,
du gehst in die richtige Richtung, kannst dich allerdings von der Vergangenheit noch nicht so recht lösen. Über allem muss beim Thema Semanik stehen: Die Semantik dient einzig und allein deinen Besuchern - nicht dir als Webseitenersteller oder Webseitenbetreiber. Wenn du mit Hilfe einer vermeintlichen Semantik Besucher auf eine falsche Fährte locken willst oder etwas verkaufen willst, was die gar nicht wollen ist da schlicht falsch. Insgesamt kann eine Seite erst beurteilt werden, wenn sie mit Inhalt gefüllt ist. Wenn du also halbfertige Ergebnisse vorstellst musst du damit rechnen falsch beurteilt zu werden. Code:
<div id="root"> Code:
<div id="HauptnavigationDiv"> Code:
<div id="Neuigkeitentliste"> Code:
<article> Code:
<nav> Code:
<div id="ProduktnavigationDiv"> Gruss MrMurphy |
|
||||
das sieht schon besser aus. Einsparen kannst auch:
<span> <em>Start</em> </span> // eins von beiden langt <h1> fehlt dir eigentlich in der Struktur. "Aktuelles" ist imho keine h1, sondern eine untergeordnete Überschrift (Unterseite). Die wichtigste Überschrift sollte etwas aussagen über das Projekt, die Firma, Name oder Domain. |
|
|||
Habe gerade erst gemerkt, dass man HTML-Abschnitts-Tags ja auch Designeigenschaften zuweisen kann
Das macht das ganze natürlich einfacher, und der einzige Div den es jetzt noch gibt ist der, der den Inhalt angibt. HTML-Code:
<!DOCTYPE html> <html> <head> <title>Dionya</title> <meta name="generator" content="text/html"> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <nav> <ul id=Hauptnavigation> <li> <span>Start</span> </li> <li> <a href="Produkte.htm">Produktuebersicht</a> </li> <li> <a href="Kontakt.htm">Kontakt</a> </li> <li> <a href="Geschichte.htm">Geschichte</a> </li> </ul> </nav> <div id="Inhalt"> <main> <h1>Aktuelles</h1> <article> <h2 id="highest_news">Computex 06.04.2014</h2> <p>Wie viele bereits wissen waren wir vom 01. bis zum 04. Juni auf der Computex in Taipeh und haben dort einige neue Produkte vorgestellt, einen kleinen Ueberblick ueber die Neuvorstellungen koennt ihr hier finden: <a href="/Produkte/cpx14.htm">Computex 2014</a></p> </article> <article> <h2>CES 04.01.2014</h2> <p>Dionya war diesen Januar auf der CES und hat dort das neue Gehaeuse "Dionya Dizang" vorgestellt, Informationen dazu findet ihr hier: <a href="/Produkte/Dizang.htm">Dizang</a></p> </article> <article> <h2>E3 21.07.2013</h2> <p>Auf der Weltgroessten Spielemesse wurde das neue Gehaeuse "Dionya Dosojin" vorgestellt, das sich speziell an Gamer richtet. Wer sich dafuer interessiert kann sich hier unser Vorstellungsvideo ansehen: <a href="/Produkte/Dosojin.htm">Dosojin</a></p> </article> <article> <h2>01.04.2013</h2> <p>Nach jahrelangen Planungen ist es endlich so weit: Es gibt eine neue Firma am Computermarkt: Dionya ist seit heute als offizieller Hersteller von Computerbauteilen eingetragen, und puenktlich zur Gruendung der Firma praesentieren wir heute unser erstes Gehaeuse, das Dionya Daikoku, dass sich mit seiner UVP von 139,99€ besonders an Enthusiasten richtet. Interessenten koennen sich hier ueber das Gehause informieren: <a href="/Produkte/Daikoku.htm">Daikoku</a></p> </article> </main> <aside> <img src="banner_head.jpg" height="172" width="172" alt="Firmenlogo"> <ul id=Produktnavigation> <li> <span> <h3>Produktuebersicht</h3> </span> </li> <li> <a href="Kodama.htm">Kodama </a></li> <li> <a href="Fujin.htm">Fujin </a></li> <li> <a href="Dizang.htm">Dizang </a></li> <li> <a href="Dosojin.htm">Dosojin </a></li> <li> <a href="Daikoku.htm">Daikoku </a></li> </ul> </aside> </div> <footer> <a href="Impressum.htm">Impressum</a> <img src="banner_down.jpg" alt="Produktbanner"> </footer> </body> </html> @Manfred62 Zum Thema H1: Das Problem ist, es gibt auf der Website ja so gesehen keine "Grundlegende Information". Deswegen habe ich einfach die Funktion der Website "Aktuelles zu vermitteln" als h1 genommen. Geändert von Oromis (31.08.2014 um 21:11 Uhr) |
|
||||
Als Anregung: auf der Testseite sieht man das Ergebnis mit css zu meinem o.g. html.
Keinerlei feste Höhen. Nur relative Masseinheiten em + % (ausser border und box-shadow). |
Stichwörter |
css, horizontale container, splittern, verschieben |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Horizontales Menü kalibrieren | _SIE_ | CSS | 1 | 06.07.2013 13:09 |
Horizontales Menü centriert, Menühintergrund über ganze Seite | PowerNerd | CSS | 19 | 05.05.2012 22:06 |
horizontales Menü in horizontales Pulldown-Menü ändern | Stephan1958 | CSS | 5 | 11.01.2012 14:37 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
horizontales Menü | sarahg | CSS | 9 | 10.02.2009 15:25 |