Horizontales Menü zersplittert

Oromis · #1 (**permalink**) 30.08.2014, 00:53

Guten Abend Xhtmler

bei meinem kleinen Hobbyprojekt (eine Website für eine imaginäre Firma erstellen) bin ich auf ein Problem beim Menü gestoßen. Es scheint das im FaQ beschriebene Problem 2 zu sein, also dass ein Container den übergeordneten verlässt. Wie beschrieben tritt es auch beim IE nicht auf.

Wichtig dabei ist, dass das Problem bei Standardgröße nicht auftritt (zumindest bis FullHD), sondern nur wenn man rauszoomt.

Leider bin ich aber trotz der immensen Anzahl an verlinkten Tutorialseiten nicht in der Lage das Problem zu lösen, und hoffe, dass mir hier ein paar Leute die sich besser mit CSS auskennen als ich (was so ziemlich auf alle hier zutreffen sollte

) helfen könne, den Fehler zu beseitigen.

Die Website: Klick
CSS Datei: Klick

Vielen Dank im voraus
Oromis

MrMurphy · #2 (**permalink**) 30.08.2014, 07:07

Hallo,

hast du deinen Link auch selbst mal ausprobiert? Bei mir funktioniert er nicht.

Gruss

MrMurphy

Oromis · #3 (**permalink**) 30.08.2014, 10:25

Puhh, da scheint der Hoster Probleme zu haben :/ (denn gestern Abend gings noch)

Also dann:
HTML:

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="text/html">
<meta charset="utf-8"/>
<title>Dionya</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<style type="text/css">
 a.c2 {text-decoration: none;}
 a.c1 {text-decoration=none;}
</style>
</head>
<body>
<div id="root_site">
<div class="navi_main_container">
<div class="navi_first_container">Start</div>
<a href="http://www.Dionya.de/Produktuebersicht" class="c1"></a>
<div class="navi_mainstream_container">Produktuebersicht</div>
<a href="http://www.Dionya.de/Kontakt" class="c1"></a>
<div class="navi_mainstream_container">Kontakt</div>
<a href="http://www.Dionya.de/Geschichte" class="c1"></a>
<div class="navi_last_container">Geschichte</div>
</div>
<div class="clearfix"></div>
<div class="content_main_container">
<div class="content_left_main">
<div class="content_left_headline">Aktuelles</div>
<div class="content_left_underheadline_top">Computex 06.04.2014</div>
<div class="content_left_container">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</div>
<div class="content_left_underheadline">CES 04.01.2014</div>
<div class="content_left_container">Dionya war diesen Januar auf der CES und hat dort das neue Gehaeuse "Dionya Dizang" vorgestellt, Informationen dazu findet ihr hier:</div>
<div class="content_left_underheadline">E3 21.07.2013</div>
<div class="content_left_container">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:</div>
<div class="content_left_underheadline">01.04.2013</div>
<div class="content_left_container">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.</div>
</div>
<div class="content_right_main">
<div class="header_background"><img src="banner_head.jpg" width="172" height="172" alt="Firmenlogo"></div>
<div class="content_first_container">Produebersicht</div>
<a href="http://www.Dionya.de/Kodama" class="c2"></a>
<div class="content_mainstream_container">Kodama</div>
<a href="http://www.Dionya.de/Fujin" class="c2"></a>
<div class="content_mainstream_container">Fujin</div>
<a href="http://www.Dionya.de/Dizang" class="c2"></a>
<div class="content_mainstream_container">Dizang</div>
<a href="http://www.Dionya.de/Dosojin" class="c2"></a>
<div class="content_mainstream_container">Dosojin</div>
<a href="http://www.Dionya.de/Daikoku" class="c2"></a>
<div class="content_second_container">Daikoku</div>
</div>
</div>
<div class="footer_main_container">
<div class="footer_left_container"><a href="http://www.Dionya.de/Impressum">Impressum</a></div>
<div class="footer_image_container"><img class="banner_down" src="banner_down.jpg" alt="Banner"></div>
</div>
</div>
</body>
</html>

CSS:
[Spoiler]

Code:

body
 {
	background: url(background.png);
	font-family: Verdana;
	font-size: 16px;
 }

 
 #root_site
 {
	height: 757px;
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 40px;
	background-color: #FCFCFC;
	border: solid 1px #000;
}

	.navi_main_container
	{
		width: 860px;
		height: 40px;
	}


			.navi_first_container
			{
				width: 215px;
				height: 24px;
				float: left;
				text-align: center;
				background-color: #C6C6C6;
				padding-top: 8px;
				padding-bottom: 8px;
				box-shadow: inset 0 0 25px 5px #888;
			}
			
			.navi_mainstream_container
			{
				width: 214px;
				height: 24px;
				float: left;
				text-align: center;
				color: #000;
				border-left: solid 1px #000;
				padding-top: 8px;
				padding-bottom: 8px;
			}
			
			.navi_mainstream_container:hover
			{
				background-color: #F0DDDD;
				box-shadow: inset 0 0 25px 5px #F9BCBC;
			}

			.navi_last_container
			{
				width: 214px;
				height: 24px;
				float: left;
				text-align: center;
				color: #000;
				border-left: solid 1px #000;
				padding-top: 8px;
				padding-bottom: 8px;
			}
			
			.navi_last_container:hover
			{
				background-color: #F0DDDD;
				box-shadow: inset 0 0 25px 5px #F9BCBC;
			}
	
	.content_main_container
	{
		width: 860px;
		height: auto;
		border-top: solid 1px #000;
		clear: both;
	}
		
		.content_left_main
		{
			width: 643px;
			height: auto;
			float: left;
		}
		
			.content_left_headline
			{
				width: 643px;
				height: 23px;
				font-family: Sans-serif;
				font-size: 22px;
				font-weight: bold;
				padding-left: 10px;
				padding-top: 6px;
				text-decoration: underline;
				color: #2F2929;
			}

				.content_left_underheadline_top
				{
					width: 615px;
					height: auto;
					color: #2E2424;
					font-family: Helvetica;
					font-size: 17px;
					padding-top: 9px;
					padding-left: 15px;
				}
				
				.content_left_underheadline
				{
					width: 620px;
					height: auto;
					color: #2E2424;
					font-family: Helvetica;
					font-size: 17px;
					padding-top: 6px;
					padding-left: 15px;
					border-top: dotted 1px #877171;
				}
				
				.content_left_container
				{
					width: 608px;
					height: auto;
					font-family: Calibri;
					font-size: 15px;
					padding-top: 0px;
					padding-left: 27px;
				}
			
		.content_right_main
		{
			width: 215px;
			height: auto;
			float: right;
		}

			.header_background
			{
				width: 194px;
				height: 194px;
				padding: 20px 0 0 20px;
				border-left: solid 1px #000;
			}

			.header_background img
			{
				box-shadow: 0 0 20px #555;
			}


			.content_first_container
			{
				height: 33px;
				width: 214px;
				color: #000;
				text-decoration: none;
				font-size: 17px;
				font-family: Georgia;
				border-left: solid 1px #000;
				border-top: solid 1px #000;
				border-bottom: solid 1px #000;
				text-align: center;
				padding-top: 10px;
			}
			
			.content_mainstream_container
			{
				height: 30px;
				width: 214px;
				color: #000;
				text-decoration: none;
				font-size: 17px;
				font-family: Georgia;
				border-left: solid 1px #000;
				border-bottom: solid 1px #000;
				text-align: center;
				padding-top: 10px;
			}		
			
			.content_mainstream_container:hover
			{
				background-color: #B6D5EC;
				box-shadow: inset 0px 0px 45px 10px #7AB6E4;
				text-shadow: 0px 0px 25px #7AB6E4;
			}		
			
			.content_second_container
			{
				height: 30px;
				width: 214px;
				color: #000;
				text-decoration: none;
				font-size: 17px;
				font-family: Georgia;
				border-left: solid 1px #000;
				border-bottom: solid 1px #000;
				text-align: center;
				padding-top: 10px;
			}		

			.content_second_container:hover
			{
				background-color: #B6D5EC;
				box-shadow: inset 0px 0px 45px 10px #7AB6E4;
				text-shadow: 0px 0px 25px #7AB6E4;
			}			
			
			
	.footer_main_container
	{
		width: 100%;
		height: 200px;
		float: left;
		border-top: solid 1px #000;
		padding-top: 10px;
		padding-bottom: 5px;
		margin-top: 30px;
		margin-bottom: 90px;
	}
	
		.footer_left_container
		{
			width: 129px;
			height: 200px;
			float: left;
			padding-top: 80px;
			padding-left: 10px;
			font-size: 18px;
			font-weight: bold;
			font-family: Verdana;
		}
		
			.footer_left_container a
			{
				color: #443A3A;
				text-decoration: none
			}
		
			.footer_left_container a:hover
			{
				color: #000;
				text-shadow: 0 0 15px #333;
			}
		
		.footer_image_container
		{
			width: 704px;
			height: 100%;
			float: right;
			padding-top: 27px;
		}
		
			.footer_image_container img
			{
				box-shadow: 0 0 20px #555;
			}

So solls aussehen: Klick
So siehts beim rauszoomen aus: Klick

Manfred62 · #4 (**permalink**) 30.08.2014, 15:26

ev. ist es hilfreich, erstmal die Fehler zu beheben: Validator

Zudem ist das ziemlich vermurkst. Divititis pur, Schriftgröße in pt ist für den Printbereich gedacht. Feste Höhen für alles taugen nix (sind vermutlich auch das Problem).

Die Basics bekommst du hier: Little Boxes

Oromis · #5 (**permalink**) 30.08.2014, 19:16

So, sowohl der HTML als auch der CSS Validator sind jetzt zufrieden.
Die Basics sind gelesen. die Schriftgrößen in px geändert. Gegen die Divititis werde ich auch noch was unternehmen.

Die festen Höhen sind teilweise durch "auto" ersetzt.

Auch zersplittert die Seite dank clear nicht mehr komplett, eine Lösung für das Verrutschen des Navigationsmenüs habe ich aber noch nicht gefunden :/

Und bei sehr starkem rauszoomen springen auch immer mehr Objekte und Texte aus ihren Boxen. Da stelle ich mir spontan die Frage: Kann ich den Browsern denn nicht einfach das rauszoomen "verbieten"?

MrMurphy · #6 (**permalink**) 30.08.2014, 20:23

Hallo

Zitat:

Kann ich den Browsern denn nicht einfach das rauszoomen "verbieten"?

Nein. Es gibt zwar Lösungen, aber die die funktionieren nicht zuverlässig.

Viel gravierender ist aber: Niemals Niemals Niemals in die Benutzereinstellungen der Browser eingreifen. Kein Besucher mag es, wenn sein Browser nicht wie gewohnt funktioniert.

Um die Jahrtausendwende war es ein ziemlich "beliebtes Spiel" in den Browserweinstellungen herumzupfuschen. Ergebnis: Die Seiten, die das gemacht haben, sind ganz schnell verschwunden. Die hatten nämlich keine Besucher mehr, zudem wurden die Webseitenbetreiber als "Dankeschön" berechtigterweise gnadenlos beschimpft.

Wenn du dir das antun willst...

Gruss

MrMurphy

Oromis · #7 (**permalink**) 30.08.2014, 20:28

Oh nein, an einen derartigen Zugriff hatte ich nicht gedacht. Auf Internet Seiten wo Bilder gekauft werden ist aus Sicherheitsgründen die Benutzung der rechten Maustaste deaktiviert, damit man nicht ohne weiteres die Bilder klauen kann. An so etwas dachte ich.
Denn andere Ideen habe ich nicht, außer das Design neu zu gestalten :/

MrMurphy · #8 (**permalink**) 30.08.2014, 20:50

Hallo

Zitat:

Auf Internet Seiten wo Bilder gekauft werden ist aus Sicherheitsgründen die Benutzung der rechten Maustaste deaktiviert, ...

Genau von so einem Mist habe ich geschrieben. Wenn etwas nicht "geklaut" werden soll gehört es nicht ins Internet. Also ganz einfach.

Rechte Maustaste sperren geht gar nicht.

Gruss

MrMurphy

Manfred62 · #9 (**permalink**) 30.08.2014, 20:51

Zitat:

Zitat von Oromis

Die Basics sind gelesen...

diese Aussage ignorier ich einfach mal

Little Boxes liest und versteht man nicht in einer Stunde.

Dein html ist ziemlicher Crap, sorry. Informier dich über Semantik. Eine Navigation ist i.d.R. eine Liste. Deine Links in den Navis funktionieren nicht, usw..

Mit sauberem logischem html braucht man fast keine Klassen bei deinem Layout.

Oromis · #10 (**permalink**) 30.08.2014, 21:05

Von komplett verstehen hab ich auch nichts geschrieben

Natürlich ist für ein komplettes Verständnis eines Tutorials mit solchem Umfang viel (mehr) Zeit erforderlich, ich habe mir heute nur die für das Problem benötigten Punkte vorgenommen und den Rest überflogen.

Zur Navigation: Wie meinst du das mit "Liste"? Vertikal?
Und zu den Links: Die führen deswegen ins Leere, weil die entsprechenden Seiten nicht existieren. Bzw sie existieren im Website Ordner, sind aber nur Tests, die auf einem älteren Stylesheet basieren (unter anderem deswegen ist das auch so unaufgeräumt, ich hatte eine css Datei für diese und alle weiterführenden Seiten)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Horizontales Menü kalibrieren	_SIE_	CSS	1	06.07.2013 12:09
Horizontales Menü centriert, Menühintergrund über ganze Seite	PowerNerd	CSS	19	05.05.2012 21:06
horizontales Menü in horizontales Pulldown-Menü ändern	Stephan1958	CSS	5	11.01.2012 13:37
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 08:55
horizontales Menü	sarahg	CSS	9	10.02.2009 14:25