zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü zersplittert

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 31.08.2014, 12:57
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

hier mal ein sinnvolles html Beispiel. Es gibt nur 3 Klassen. Möchte man die html5 Tags nicht verwenden, ersetzt man diese halt mit divs. Dann ergeben sich weitere 4 Klassen. Z.B.: div class="footer" ...
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Dionya</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
	<div class="wrap">
		<ul class="main-navi cf">
			<li><strong>Start</strong></li>
			<li><a href="#">Produkte</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Geschichte</a></li>
		</ul>
		<section>
			<h2>Aktuelles</h2>
			<article>
				<h3>Computex 06.04.2014</h3>
				<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 Überblick über die Neuvorstellungen könnt ihr hier finden</p>
			</article>
			<article>
				<h3>CES 04.01.2014</h3>
				<p>Dionya war diesen Januar auf der CES und hat dort das neue Gehäuse "Dionya Dizang" vorgestellt, Informationen dazu findet ihr hier:</p>
			</article>
			<article>
				<h3>E3 21.07.2013</h3>
				<p>Auf der Weltgrössten Spielemesse wurde das neue Gehäuse "Dionya Dosojin" vorgestellt, das sich speziell an Gamer richtet. Wer sich dafür interessiert kann sich hier unser Vorstellungsvideo ansehen:</p>
			</article>
			<article>
				<h3>01.04.2013</h3>
				<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 pünktlich zur Gründung der Firma präsentieren wir heute unser erstes Gehäuse, das Dionya Daikoku, dass sich mit seiner UVP von 139,99€ besonders an Enthusiasten richtet. Interessenten können sich hier über das Gehäuse informieren.</p>
			</article>
		</section>
		<aside>
			<img src="banner_head.jpg" alt="" height="172" width="172">
			<h3>Produktübersicht</h3>
			<ul>
				<li><a href="#">Kodama</a></li>
				<li><a href="#">Fujin</a></li>
				<li><a href="#">Dizang</a></li>
				<li><a href="#">Dosojin</a></li>
				<li><a href="#">Daikoku</a></li>
			</ul>
		</aside>
		<footer>
			<a href="#">Impressum</a>
			<img src="banner_down.jpg" alt="">
		</footer>
	</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 31.08.2014, 14:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2014
Beiträge: 8
Oromis befindet sich auf einem aufstrebenden Ast
Standard

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 )
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 31.08.2014, 15:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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">
Ist überflüssig, also ersatzlos weg.

Code:
<div id="HauptnavigationDiv">
Ist überflüssig, also ersatzlos weg.

Code:
<div id="Neuigkeitentliste">
Das sehe ich zur Zeit eher als Hauptinhalt, also main-Element benutzen.

Code:
<article>
Deine Texte sind eher Anreißer zum weiterlesen, also keine in sich geschlossenen fertigen Informationen. Deshalb passt hier eher das section-Element.

Code:
<nav>
In dem zweiten nav-Element kann ich keine Hauptnavigation erkennen, deshalb ist das aside-Element sinnvoller.

Code:
<div id="ProduktnavigationDiv">
Überflüssig - ersatzlos streichen.

Gruss

MrMurphy
Mit Zitat antworten
  #14 (permalink)  
Alt 31.08.2014, 15:33
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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.
Mit Zitat antworten
  #15 (permalink)  
Alt 31.08.2014, 21:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2014
Beiträge: 8
Oromis befindet sich auf einem aufstrebenden Ast
Standard

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>
...dann mach ich mich mal ans Design und melde mich später noch mal zur "Absegnung"

@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)
Mit Zitat antworten
  #16 (permalink)  
Alt 31.08.2014, 23:17
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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).
Mit Zitat antworten
  #17 (permalink)  
Alt 31.08.2014, 23:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.08.2014
Beiträge: 8
Oromis befindet sich auf einem aufstrebenden Ast
Standard

Also waren wirklich die festen Höhen der Grund für das zersplittern? (denn die blieben ja gleich, die NavigationsContainer wurden nur immer breiter)
Mit Zitat antworten
Antwort

Stichwörter
css, horizontale container, splittern, verschieben

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:11 Uhr.