Css menü will nicht unter mein banner

Hallo bplaced community,

ich probiere nun schon Stundenlang daran herum ein Horizontales CSS Menü (also nebeneinander) unter mein Seitenbanner zu bringen.

Ich bekomm das aber aus mir unerklärlichen gründen nicht ganz hin das Menü wird nicht direkt unter dem banner angezeigt wie eigentlich von mir gewünscht sondern immer mit einen halben oder ganzen cm abstand zum banner kann mir jemand sagen an was das vielleicht liegen kann über ein kleines code bsp. von euch wie ihr das machen würdet wäre ich sehr dankbar…

ein Link wäre gut, damit wir das nachvollziehen können…

Danke Simi für deine schnelle antwort hier mal ein screen und der link zur datei…

http://www.sweetzone.bplaced.net/site/test.png
http://www.sweetzone.bplaced.net/site/index.php

hier der code

[code]

Seitentitel
   
     
[/code]

ach ja hier noch das CSS

Hat nix gebracht. Was für ein Chaos, besonders die css-Datei. Da steigt ja wirklich niemand durch. Ich würde alles verwerfen und nochmal von vorne anfangen.

Und wenn du schon unbedingt das Tabellen-Layout beibehalten willst, würde ich als erste Verbesserungsmaßnahme den Banner und die Navigation in jeweils eine eigene Zelle packen.

Sorry, aber das macht echt keinen Spaß, sich da durchzuwuseln. Deshalb hat wohl auch noch keiner der Spezialisten hierauf geantwortet.

Gruß, Gerhard

Nabend,

<!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>
<link href="style2.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seitentitel</title>
<style type="text/css">
#navi { margin: 0; padding: 0; text-align: center; } 
#navi a:link, #navi a:visited { float: left; padding: 0 20px; line-height: 20px; font-weight: bold; text-decoration: none; color: #0000FF; background-color: #00D4FF; border-right: 3px solid #586CA0; } 
#navi a:active { color: #ECD814; background-color: #0092AF; border-right: 3px solid #3C5070; } 
#navi a:hover{ color: #94883C; background-color: #005CFF; border-right: 3px solid #243438; }
</style>
</head>
<body>
	<div style="width:940px; margin:0px auto;">
		<div id="header" style="width:100%; height:100px; margin:0px auto; text-align:center; background-image:url(header.jpg); background-repeat:no-repeat; border:thin solid #000000;">
		</div>
		<div id="navi" style="width:100%; text-align:left">
			<a href="">Home</a>
			<a href="">MyZone</a>
			<a href="">News</a>
			<a href="">Forum</a>
		</div>
	</div>
</body>
</html>

…und bevor wieder eine das meckern anfangen will, der Code ist zu 100% valid!

Greez

Sehr gut gemacht, Phil.

Aber warum die Navigation in maxos Tabellen-Layout im Verhältnis zum Banner verschoben gewesen ist, bleibt im Dunkeln? Ich hab’s nämlich nicht heraus bekommen.

g-h-b

moinsen,

tja g-h-b, die Frage kann ich dir beantworten, da bei mir selbst das Tabellendesign wie gewünscht funktioniert hat. Also lokal sieht es aus wie er es wollte, was ich komisch finde ist zum einen die Zeile:

<link href="neu.css" rel="stylesheet" type="text/css" />

weil, irgendwie scheints die entweder nicht zu geben oder es steht was komisches drin, jedenfalls taucht sie im hier geposteten Quelltext gar nicht auf.
Aber was den Fehler eigentlich verursacht ist die Tatsache das in einem StyleSheet nur CSS Code steht und keine HTML Tags.
entfernt man nun <style></style> aus der style2.css, klappts auch mit dem Tabellendesign. :smiley:
Da ich persönlich aber keinen Sinn in der Tabelle und der Liste sehe, hab ichs gleich auf Div’s umgebastelt.
Ich sags aber trotzdem nochmal, falls maxo wieder auf die Idee kommt den CSS Teil auszulagern: KEINE STYLE TAGS IM STYLESHEET, ONLY CSS CODE :slight_smile:

Greez

hier nochmal die aufgeräumte style2.css:

#navi{margin:0;padding:0;text-align:center}
#navi ul,#navi li{margin:0;padding:0;display:inline;list-style-type:none}
#navi a:link,#navi a:visited{float:left;padding:0 20px;line-height:20px;font-weight:bold;text-decoration:none;color:#0000FF;background-color:#00D4FF;border-right:3px solid #586CA0}
#navi a:active{color:#ECD814;background-color:#0092AF;border-right:3px solid #3C5070}
#navi a:hover{color:#94883C;background-color:#005CFF;border-right:3px solid #243438}

hab den beitrag mal ins richtige forum verschoben :wink:

maxo bitte nächstes mal darauf achten das ganze im richtigen bereich zu posten. danke

[quote=“Phil”]…was ich komisch finde ist zum einen die Zeile:

<link href="neu.css" rel="stylesheet" type="text/css" />
[/code][/quote]
Die steht nicht im oben geposteten Quelltext.

[quote="Phil"][code]<style></style>

[/quote]
Steht auch nicht in dem geposteten css-Code.

Offenbar hast du die Dateien heruntergeladen - während ich den Quellcode kopiert und als Datei lokal gespeichert hab. Das bedeutet, dass der gute maxo nicht den originalen Quellcode gepostet hat.

Der Fehler ist aber auch mit dem geposteten Code zu sehen.

Aber wir wollen es nicht ausufern lassen. So wichtig ist es nicht. Dein Code funktioniert ja.

Gruß, g-h-b

Moin :slight_smile:

<link href="neu.css" rel="stylesheet" type="text/css" />

…steht wirklich nur in der OnlineVersion des Quelltextes zugeb

…wenn du das 1:1 kopiert hast dann haste du auch <style> und </style> mitkopiert weil das nur die HTML konforme Version von und ist :slight_smile:
schau einfach mal bei dir lokal rein, bin mir ziemlich sicher das du sowas drin stehen hast, löschs raus und es sollte gehen :slight_smile:

Greez

Hi,

ganz schön viele Antworten vielen Dank euch allen.

  1. Muss mich entschuldigen :susp: für den oben etwas zerschossenenen code durch das viele rumprobieren lokal hab ich wohl einen älteren code auf den webspace geladen als ich hier gepostet habe. :unamused:

  2. Ich hab das Problem aber jetzt gelöst Phil sei dank in meiner CSS waren folgende zeilen
    drin deshalb ging das ganze nicht.

&lt;style&gt; &lt;/style&gt;

Ihr wisst gar nicht wie lange ich an diesem blöden Stück code unter dem banner herum probiert habe…

Aber jetzt ist das ganze ja gelöst vielen Dank euch allen! :hail:

Hi @ all,

muss euch leider noch mal belästigen das CSS menü macht mir immer noch kleine Probleme
und zwar in so fern das ich es es nicht hinbekomma das es am rechten Rand abschließt.

http://www.sweetzone.bplaced.net/site/pic.jpg

hier mein jetziger code:

[code]

Seitentitel
Home MyZone News Forum ???? Fun
Hier folg Inhalt...
[/code]

und der CSS:

[code]#navi
{
margin: 0;
padding: 0px;
text-align:center;
}

#navi ul, #navi li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navi a:link, #navi a:visited {
float: left;
line-height: 23px;
width: 114px;
margin: 0;
padding: 2px 15px;
text-decoration: none;
color: #667788;
background-color: #EEFFFF;
border: 1px solid #DCDCDC;
}

#navi #akt {
color: #4E4E4E;
background-color: #33FF00;
border: 1px solid #660000;
}

#navi a:hover, #navi a:hover #akt {
color: #667788;
background-color: #DDEEFF;
border: 1px solid #DCDCDC;
}

[/code]

falls jemand das ganze auf dem Webspace anschauen will

http://www.sweetzone.bplaced.net/site/index.php

Ich hoffe ihr könnt mir nochmal helfen…

Morgen,

dumm ist der, der nicht fragt, wenn er nicht weiter kommt …
Ich hab dir sowohl die HTML Seite, als auch das Stylesheet nochmals überarbeitet und denke, das müsste das sein was du willst.

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>
<link href="style2.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seitentitel</title>
</head>
<body>
<div style="width:880px; margin:0px auto; border:thin solid #000000; text-align:center;">
	<div id="header" style="width:100%; height:90px; text-align:center; background-image:url(header.jpg);">
	</div>
	<div id="navi">
	<table class="navi" cellpadding="0" cellspacing="0">
		<tr>
			<td><a href="index.php">Home</a></td>
			<td><a href="myzone/index.php">MyZone</a></td>
			<td><a href="news.php">News</a></td>
			<td><a href="forum/index.php">Forum</a></td>
			<td><a href="">????</a></td>
			<td><a href="myzone/fun.php">Fun</a></td>
		</tr>
	</table>
	</div>
	<div style="width:100%; text-align:left; margin-top:20px;">
		Hier folg Inhalt...
	</div>
</div>
</body>
</html>

und das Stylesheet:

table {width:100%; border-bottom:thin solid #DCDCDC;}
td {width:146px; background-color: #EEFFFF; border: 1px solid #DCDCDC;}

#navi a:link, #navi a:visited {
display:block;
padding: 2px 15px;
line-height:  23px;
color: #667788;
text-decoration: none;
}

#navi a:hover{
display:block;
padding: 2px 15px;
line-height:  23px;
color: #667788;
text-decoration: none;
background-color: #DDEEFF;
}

störe dich nicht an der Tabelle die nun deine Links beinhaltet. Damit lässt sich einfach besser als mit Float arbeiten und sind, was das Positionieren von mehreren Elementen nebeneinander angeht, immernoch mein Mittel erster Wahl. Menü geht jetzt über die ganze Seite und auch die ganze Tabellenzelle ist anklickbar :slight_smile: Sollte also das sein was du wolltest.

Greez

Danke Phil sieht super aus…

nur eine kleinigkeit wäre da noch und zwar mit mozilla geht das ganze aber im internet explorer
hab ich folgendes problem wenn ich dort an dieser stelle z.b.

http://www.sweetzone.bplaced.net/site/neu/pic.jpg

über das css menü gehe färbt er sich nicht und ich kann es auch nicht anklicken ich muss immer genau auf den text klicken.

In mozilla geht das ganze auch so aber halt im internet explorer nicht…
Im vorherigen code hat es noch in beiden Browsern funktioniert aber jetzt nicht an was kann das liegen…??

PS ich hoff ich hab das ganze verständlich erklärt…

Für die wo es selbst probieren wollen

http://www.sweetzone.bplaced.net/site/neu/index.php

nabend,

hatte es nur im IE7.0 probiert und im FF, da ging es. Habe aber die css Datei nochmal überarbeitet und nun gehts es in IE7.0/6.0 und im FF, Opera und Co hab ich nicht getestet.

Neue style2.css:

table {width:100%; border-bottom:thin solid #DCDCDC;}
td {width:146px; background-color: #EEFFFF; border: 1px solid #DCDCDC;}

#navi a:link, #navi a:visited {
display:block;
width:100%;
line-height:  23px;
color: #667788;
text-decoration: none;
}

#navi a:hover{
display:block;
width:100%;
line-height:  23px;
color: #667788;
text-decoration: none;
background-color: #DDEEFF;
}

sollte nun passen

Vielen Dank Phil nun siehts in beiden Browsern perfekt aus :slight_smile: