zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü verschiebt sich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.06.2011, 03:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2010
Beiträge: 32
SaltonSea befindet sich auf einem aufstrebenden Ast
Standard Menü verschiebt sich

Hallo,

ich habe einen Wert für die Länge des Menüs geändert und jetzt hat es sich verschoben. Finde bloß nicht die Stelle, wo ich es wieder ausgleichen kann.



Code:
body {
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	text-align:center;
	background-color:#5ba0d6;
}
* {margin:0px;padding:0px;}
.clear{clear:both;}
#container {
	margin: 0px auto;
	text-align: left;
	width: 979px;
}
#header {
	background-image:url(images/header.jpg);
	width:979px;
	height:232px;
	display:block;
}
#border {
	background-image:url(images/border.gif);
	background-repeat: repeat-y;
	width:979px;
}
#main {
	background-image:url(images/contentbg.gif);
	background-color:#abe4fe;
	margin: 0px 12px 0px 10px;
	background-repeat: repeat-x;
}
#left {
	width:261px;
	float:left;
	display:inline;
	background-image:url(images/contentbg.gif);
	background-color:#abe4fe;
	
}
#right {
	float:right;
	width:580px;
}
/***************** Content ***********************/
.content {
	width:530px;
}



.content h1 {
	/* background-image:url(images/cplusplus.png); */
	background-repeat:no-repeat; */
	width:520px;
	height:33px;
	text-indent:700px;
	overflow:hidden;
	border-top: 1px dashed #2e2304;
	margin: 10px 0px 15px 0px;
	padding: 0px 0px 10px 0px;
}

.content h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: bold;
	color: #003a65;
	padding: 0px 0px 0px 6px;
	font-weight:900;
}



.content p {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: bold;
	color: #003a65;
	padding: 0px 0px 0px 6px;
	font-weight:900;
}



.content a {
	color:#2e260f;
}
.content a:hover {
	color:#cf0002;
}



/***************** Menu ***********************/
#menu {
	background-image:url(images/menu.gif);
	width:261px;
	height:500px;  /*Länge des Menues*/
	margin-left:93px;
}
#menu ul {
	padding: 20px 0px 0px 0px;
	width:220px;
	margin-left:15px;
}
#menu li {
	background-image: url(images/arrow.gif);
	background-repeat: no-repeat;
	background-position: right center;
	border-bottom: 1px dotted #2e2304;  
	list-style-type: none;
	padding: 4px 40px 4px 0px;
	text-align:left;
}
#menu a {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 900;
	color: #0d50a7;
	text-decoration: none;
	font-size: 12px;
	
}
#menu a:hover {
	color:#e22133;
}
.lastchild{
	border-bottom: none !important;
}
#menubottom {
	background-image:url(images/menubottom.jpg);
	background-repeat:no-repeat;
	width:261px;
	height:76px;
	margin-left:93px;
}
#menubottom ul {
	padding: 20px 0px 0px 0px;
	width:240px;
	margin-left:15px;
}
#menubottom li {
	float:left;
	display:inline;
	width:77px;
	text-align:center;
}
#menubottom a {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	font-weight: bolder;
	font-size:10px;
	color: #0053c4;
	text-transform: uppercase;
}
#menubottom a:hover {
	color:#c40000;
}
/***************** Footer ***********************/
#footer {
	background-color:#8bcaef;
	background-image:url(images/borderfooter.gif);
	height:74px;
	width:979px;
}
#footerend {
	background-image:url(images/borderfooterend.gif);
	background-repeat: no-repeat;
	width:979px;
	height:9px;
	display:block;
}
#copyright {
	background-image:url(images/copyright.jpg);
	background-repeat:no-repeat;
	width:220px;
	height:43px;
	display:inline;
	margin-left:103px;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 800;
	color: #463d16;
	padding: 30px 20px 0px 20px;
	text-align:center;
}
#copyright a {
	font-family: Arial, Helvetica, sans-serif;
	color: #463d16;
}
Unter #menue hab ich den Wert auf 500px gesetzt. Die Länge des Menues soll auch so bleiben, aber dadurch hat sich was anderes verschoben (siehe rote Markierung auf dem Foto). Woran kann das liegen?

Gruß, SaltonSea
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2011, 18:49
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Bitte einen vollständigen Testcase posten oder (noch besser) ein Online-Beispiel. Mit einem Bild und CSS kann man nicht viel anfangen.

gruß,
take
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.06.2011, 21:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2010
Beiträge: 32
SaltonSea befindet sich auf einem aufstrebenden Ast
Standard

Hatte auch gehofft, dass man anhand der FARBE der Markierung eventuell die Stelle im Quelltext findet
Mit Zitat antworten
  #4 (permalink)  
Alt 20.06.2011, 22:09
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

der Quelltext ist aber nicht vollständig! Es fehlt der zum CSS-Code gehörige HTML-Code.

gruß,
take
Mit Zitat antworten
  #5 (permalink)  
Alt 21.06.2011, 19:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2010
Beiträge: 32
SaltonSea befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
<!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=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>

<body>
<div id="container">
	<div id="header">
		
	</div>
	<div id="border">
		<div id="main">
			<div id="left">
				<div id="menu">
					<ul>
						<li><strong>Mediendesign</strong></li>
						<li><a href="photoshop.html" target="_self">Adobe Photoshop</a></li>
						<li><a href="illustrator.html" target="_self">Adobe Illustrator</a></li>
						<li><a href="premiere.html" target="_self">Adobe Premiere</a></li>
						<li><a href="freehand.html" target="_self">Macromedia Freehand</a></li>
						<li><strong>Programmierung</strong></li>
						<li><a href="cplusplus.html" target="_self">C++</a></li>
						<li><a href="java.html" target="_self">Java</a></li>
						<li><a href="skriptsprachen.html" target="_self">Skriptsprachen</a></li>
						<li><strong>Datenbanken</strong></li>
						<li><a href="sql.html" target="_self">SQL</a></li>
						<li><strong>Betriebssysteme/Netzwerke</strong></a></li>
						<li><a href="windows.html" target="_self">Windows</a></li>
						<li><a href="linux.html" target="_self">Linux</a></li>
						<li><strong>Interaktive Systeme</strong></li>
						<li><a href="flash.html" target="_self">Adobe Flash</a></li>
						<li><a href="dokumente.html" target="_self">Dokumente</a></li>
						<li><a href="projekte.html" target="_self">Projekte</a></li>

					</ul>
				</div>
				<div id="menubottom">
					<ul>
						<li><a href="index.html" target="_self">Home</a></li>
						<li><a href="index.html" target="_self">Über mich</a></li>
						<li><a href="index.html" target="_self">Kontakt</a></li>
					</ul>
				</div>
			</div>
			<div id="right">
				<div class="content">
                    <br />
                    <img src="images/willkommen.png" width="300" height="32"/>
                  <p>&nbsp;</p>
					<p>&nbsp;</p>
					<p></p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					

					
				</div>

			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div id="footer">
		<div id="copyright">
			<span></span> 
		</div>
	</div>	
	<div id="footerend"></div>
</div>
</body>
</html>
Das ist der dazugehörige HTML-Code.

Hier die Testpage dazu
Mit Zitat antworten
  #6 (permalink)  
Alt 21.06.2011, 21:01
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Ganz ehrlich: ich (und viele andere wahrscheinlich auch) habe keinen Bock mich durch diesen Quälkot durchzusuchen. Allein für das Menü benutzt du 5 (!!!) divs + ul, nur weil du unbedingt alles als Grafik einbinden musst. CSS kann Gradients, runde Ecken, Schlagschatten, Transparenz, Schrifteinbettung... Wofür dann bitte diese vielen Bilder? Wir leben nicht mehr im Jahre 1999, IE 5 & 6 sind tot! (Gott sei dank )

gruß,
take
Mit Zitat antworten
  #7 (permalink)  
Alt 21.06.2011, 21:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2010
Beiträge: 32
SaltonSea befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von take_a_7 Beitrag anzeigen
Ganz ehrlich: ich (und viele andere wahrscheinlich auch) habe keinen Bock mich durch diesen Quälkot durchzusuchen. Allein für das Menü benutzt du 5 (!!!) divs + ul, nur weil du unbedingt alles als Grafik einbinden musst. CSS kann Gradients, runde Ecken, Schlagschatten, Transparenz, Schrifteinbettung... Wofür dann bitte diese vielen Bilder? Wir leben nicht mehr im Jahre 1999, IE 5 & 6 sind tot! (Gott sei dank )

gruß,
take
Ja, wenn Du kein bock hast Dir den Quelltext anzuschauen, dann antworte doch einfach nicht auf den Beitrag

Ich habe eine Frage gestellt, zu der Du scheinbar keine Antwort findest. Besser und anders machen kann man es immer, aber das war nicht die Frage.

Wenn jemand eine Frage zu Windows hat, dann sagste dem ja auch nicht, installier Dir Linux, das läuft besser.
Mit Zitat antworten
  #8 (permalink)  
Alt 21.06.2011, 21:38
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von SaltonSea Beitrag anzeigen
Wenn jemand eine Frage zu Windows hat, dann sagste dem ja auch nicht, installier Dir Linux, das läuft besser.
Nee, natürlich nicht. Windows (7 wohlgemerkt) hat nämlich (IMHO natürlich) inzwischen drastisch aufgeholt, was die Nachteile gegenüber Linux angeht (im Desktop-Bereich jedenfalls). Wenn der Fragensteller aber eine Frage hat, weil zum Beispiel ein Windows-Server bei ihm nicht das tut was er soll, sag ich ihm: nimm Linux, dass ist besser. Genauso sage ich dir: nimm CSS, dass ist besser, weil du eine Frage zur Webseitenentwicklung stellst. Wenn du einen Flyer gestalten würdest, hätte ich dich nicht für deine übermäßige Grafikennutzung kritisiert. Wenn du hier eine Frage stellst, musst du auch damit rechnen, dass Kritik kommt.

gruß,
take

EDIT: Nachtrag: der blaue Kasten der neben dem Menü sitzt ist das (sich wiederholende) Hintergrundbild von div#left, das teilweise von div#menu überdeckt wird. Dein Hintergrundbild ist einfach nicht hoch genug für die neue Menühöhe.

Geändert von take_a_7 (21.06.2011 um 21:46 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 21.06.2011, 21:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2010
Beiträge: 32
SaltonSea befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von take_a_7 Beitrag anzeigen
Nee, natürlich nicht. Windows (7 wohlgemerkt) hat nämlich (IMHO natürlich) inzwischen drastisch aufgeholt, was die Nachteile gegenüber Linux angeht (im Desktop-Bereich jedenfalls). Wenn der Fragensteller aber eine Frage hat, weil zum Beispiel ein Windows-Server bei ihm nicht das tut was er soll, sag ich ihm: nimm Linux, dass ist besser. Genauso sage ich dir: nimm CSS, dass ist besser, weil du eine Frage zur Webseitenentwicklung stellst. Wenn du einen Flyer gestalten würdest, hätte ich dich nicht für deine übermäßige Grafikennutzung kritisiert. Wenn du hier eine Frage stellst, musst du auch damit rechnen, dass Kritik kommt.

gruß,
take
Und wenn Du Deine Energie mal so in die Beantwortung meiner Frage gesteckt hättest, wäre Dir sicher aufgefallen, dass der Fehler nicht in der Einbindung von Grafiken liegt, sondern an falschen Werten von CSS.

Habs selbst hinbekommen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.06.2011, 21:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Was du rot markiert hast sind die sich wiederholenden Hintergrundbilder in #left und #menu.

Welchen Sinn siehst du darin, #left ganz links beginnen zu lassen und seine Inhalte aus ihm rauszuschieben?

Zitat:
dass der Fehler nicht in der Einbindung von Grafiken liegt, sondern an falschen Werten von CSS.
Aha?

Geändert von fricca (21.06.2011 um 21:48 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

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
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 17:45
Menü verschiebt sich bei <h1>-Padding yannsen (X)HTML 3 18.09.2006 16:58
Menü verschiebt sich Schrittweise nach unten(IE) Blacksoul CSS 2 06.06.2006 18:21
Menü verschiebt anderes Div Christian-J CSS 10 13.03.2005 20:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:14 Uhr.