Hilfe CSS Menu

lichtenhagen · 01.04.13, 11:35

Hallo zusammen,

bastel grad wie eine Irre an unsere Hp rum und schaff es einfach nicht die mit dem Generator erstelle Navigationsleiste / Menü mittig unter meinem Slider zu positionieren.
Stattdessen wird die Navi immer am linken Bildschirmrand des Browser angelegt und von da aus zum rechten Rand weiterlaufen gelassen ( ich denke zumindest mal das es Browserabhängig ist). Ich steh hier total auf dem Schlauch und find in der CSS einfach nicht meinen Ansatzpunkt.

Hier mal die CSS ( erstellt mit einem Generator ):

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAAC UDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYI I=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #f1f1f1;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAAC UDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYI I=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f1f1f1;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAAC UDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAAC UDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu > ul > li ul a {
color: #333;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #f1f1f1;
border-bottom: 1px dotted #f7f7f7;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #d8d8d8;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #d8d8d8;
border-bottom: 1px dotted #e7e7e7;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #bebebe;
}

Und hier habt ihr nen Screen wie das momentan bei mir aussieht:

[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

die Navi funktioniert einwandfrei, ich würde sie halt nur am drüber liegenden Slider ( das pinke Ding drüber ausrichten oder zumindest mit ner Breite von 900px ). Da ich absoluter "nicht mal" Anfänger bin hab ich keine Ahnung wo ich das machen kann/muss.
Die Navi läuft übrigens in einem seperaten CSS. Hat es damit vielleicht was zu tun.
Wie lauten denn die Parameter für diese Ausrichtung. Vielleicht liegt der Fehler ja auch in der Style.Css der HP.

Für Hilfen und Geduld gegenüber einem blutigen Anfänger wäre ich sehr dankbar.

LG

Mac

PS: google hat mir bislang rausgespuckt das es was mit margin, position, absolut und relativ, oder px zu tun haben könnte, da ich aber nicht weiss welche der vielen Möglichkeiten es ist und ich nicht zuviel in der CSS herumspielen möchte frag ich lieber mal nach bevor nachher garnichts mehr läuft^^

kkhamburg · 01.04.13, 23:11

Ohne den kompletten Code wird dir niemand helfen können.

Poste mal dein komplettes CSS und den dazugehörigen HTML-Code.

lichtenhagen · 02.04.13, 09:46

ok, kapier zwar nicht wofür den html code aber bitte sehr.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sunrise</title>
<meta name="keywords" content="" />
<meta name="des*****ion" content="" />
<s***** type="text/javas*****" src="jquery-1.7.1.min.js"></s*****>
<s***** type="text/javas*****" src="jquery.slidertron-1.1.js"></s*****>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Archivo+Narro w:400,700" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="styles.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="#">HP Titel</a></h1>
</div>
</div>
<div id="banner" class="container">
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"> <a class="link" href="#">Full story ...</a> <img src="#.jpg" alt="" /> </div>
<div class="slide"> <a class="link" href="#">Full story ...</a> <img src="#.jpg" alt="" /> </div>
<div class="slide"> <a class="link" href="#">Full story ...</a> <img src="#.jpg" alt="" /> </div>
<div class="slide"> <a class="link" href="#">Full story ...</a> <img src="#.xcf" alt="" /> </div>
</div>
</div>
<div class="indicator">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<s***** type="text/javas*****">
$('#slider').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
advanceDelay: 3000,
speed: 'slow',
navPreviousSelector: '.previous-button',
navNextSelector: '.next-button',
indicatorSelector: '.indicator ul li',
slideLinkSelector: '.link'
});
</s*****>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#.html'><span>Home</span></a></li>
<li class='active has-sub'><a href='#.html'><span>News</span></a>
<li class='active has-sub'><a href='mitglieder.html'><span>Mitglieder</span></a>
<li class='active'><a href='forum.html'><span>Forum</span></a></li>
<li class='active'><a href='#.html'><span>GGE Tools</span></a></li>
<li class='active last'><a href='kontakt.html'><span>Kontakt</span></a></li>
</ul>
</div>
<div id="page" class="container">
<div id="content">
<div id="onecolumn">
<h2>Herzlich Willkommen auf unserer Website!</h2>
<p>Da sich die Site noch in der Entwicklung unter den strengen Händen eines totalen Amateurs befindet bitte ich um Rücksichtnahme. Ansonsten wünsche ich euch viel Spaß. LG Mac</p>
</div>
<div id="two-column">
<div class="box-content">
<h2 class="title title01">Viele verschiedene Features</h2>
<p>Da ich kein Profi bin kann die Entwicklung sehr viel Zeit in Anspruch nehmen. Ich gebe aber mein Bestes jeden Vorschlag zu berücksichtigen.^^</p>
</div>
<div class="box-content">
<h2 class="title title02">Mitmachen erwünscht</h2>
<p>Wer sich mit Design, Webdesign, HTML, PHP oder anderem auskennt darf natürlich gerne helfen oder sogar das Ruder für die HP übernehmen. Immer her mit den Ideen.</p>
</div>
</div>
</div>
<div id="sidebar">
<div id="sbox1">
<a style="text-decoration:none;border-style:none;background-color:#FFFFFF;color:#000000;font-size:16px;" target="_blank" href="http://www.schnelle-online.info/Atomuhr-Uhrzeit.html" id="soitime99837319263">Atom Uhr</a><br/><a style="text-decoration:none;border-style:none;background-color:#FFFFFF;color:#000000;font-size:16px;" target="_blank" href="http://www.schnelle-online.info/Kalender.html" id="soidate99837319263">Kalender</a>
<s***** type="text/javas*****">
SOI = (typeof(SOI) != 'undefined') ? SOI : {};(SOI.ac21fs = SOI.ac21fs || []).push(function() {
(new SOI.DateTimeService("99837319263", "DE")).setWeekdayMode(5).start();});
(function() {if (typeof(SOI.scrAc21) == "undefined") { SOI.scrAc21=document.createElement('s*****');SOI.s crAc21.type='text/javas*****'; SOI.scrAc21.async=true;SOI.scrAc21.src=((document. location.protocol == 'https:') ? 'https://' : 'http://') + 'homepage-tools.schnelle-online.info/Homepage/atomicclock2_1.js';var s = document.getElementsByTagName('s*****')[0]; s.parentNode.insertBefore(SOI.scrAc21, s);}})();
</s*****>
<ul class="list-style1">

<p><a href="#" class="link-style">Read More</a></p>
</li>
<li><iframe src="Kalender"></iframe>
<p><a href="#" class="link-style">Read More</a></p>
</li>
</ul>
</div>
<div id="sbox2">
<h2>Jede Menge Platz</h2>
<p class="testimonial">Ich habe garnicht genug Content um die Site zu füllen. Wer Beiträge erstellen möchte immer her damit.</p>
<div class="author"><img src="pic03.jpg" width="80" height="80" alt="" /><span class="name">Macintoshrealjumper</span><span class="position">Amateur Häuptling</span><span>Web Noob</span></div>
</div>
</div>
</div>
<div id="footer" class="container">
<div id="fbox1">
<h2>Linkbox</h2>
<ul class="style1">
<li class="first"><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="fbox2">
<h2>noch ne Box</h2>
<ul class="style1">
<li class="first"><a href="#">Link6</a></li>
<li><a href="#">Link7</a></li>
<li><a href="#">Link8</a></li>
<li><a href="#">Link9</a></li>
<li><a href="#">Link10</a></li>
</ul>
</div>
<div id="fbox3">
<a id="454381" href="BESUCHERZÄHLER"></s*****>
</ul>
</div>
</div>
</body>
</html>

und hier noch der Auszug aus der design.css:

/** MENU */

#menu {
float: right;
width: 600px;
height: 99px;
}

#menu ul {
float: right;
margin: 0px;
padding: 70px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-left: 3em;
}

#menu a {
display: block;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 1.10em;
font-weight: 600;
color: #B6B6B6;
}

#menu .active a
{
color: #FFFFFF;
}

#menu a:hover {
text-decoration: underline;
}

Wie oben im css zu sehen ist wird dort:

float:right ( rot markiert ) zugewiesen. Das ist es doch was der Navi leiste sagt dass sie fließen soll, oder?

Vielleicht kann mir jemand bitte helfen.

Danke nochmal vorab.

LG

Mac

kkhamburg · 02.04.13, 11:56

Leider machst du es einem nicht gerade leicht dir zu helfen.

So fehlt immer noch ein Großteil deiner CSS.

Du kannst aber mal folgendes versuchen :

Ersetze

Code:

<div id='cssmenu'>

durch

Code:

<div id="cssmenu" class="container">

Und bitte gewöhne dir an Code-Ausschnitte in die richtigen BBCodes-Tags zu setzen, das macht das lesen deutlich einfacher.

lichtenhagen · 02.04.13, 15:15

alles klar, danke jetzt läufts auch.

kapiere allerdings immer noch nicht so ganz warum dieser Generator dem Menu nicht selbst die class=container zugewiesen hat bzw. warum auf dieses Thema in dem Tutorial was es dazu gab nicht hingewiesen wurde. Hab mir echt im Netz den Wolf dazu abgesucht und dachte wirklich schon das es was mit der css zu tun haben muss....aber jetzt ist der Fehler klar - und auch total Amateurhaft danach zu fragen, hätte ich selbst sehen können bzw. müssen. Klar das dass ding ohne Klassenzuweisung nicht ordentlich laufen kann.

Übrigens sry für den Code, hab erst grad eben gesehen wie ich den hier in nem Extra CodeFenster einfügen kann.

Vielen lieben Dank für deine Geduld und Hilfe kkhamburg. Ich wünschte nur ich hätt dich schon vor 4 Tagen gefragt

hätt ich mir die Verzweiflung und miese Laune weils nicht klappt wies soll sparen können^^

Danke nochmal.

Schönen Tag noch.

LG

Mac

kkhamburg · 02.04.13, 23:13

Dann hast du spätestens jetzt auch verstanden warum es wichtig ist auch den HTML-Part zu zeigen.

Aber schön zu hören das es nun funktioniert.