[css]bekomme Navi nicht "center" Probleme mit margin / float

[Goblin]

Hallo Ihr Alle

Erst einmal ein herzliches Hallo an Euch alle. Seit Tagen versuche ich eine Navigation mittig zu bekommen die ich später in ein IPB einfügen möchte anstatt der dort inbegriffenen Navigation.

Die Navi habe ich nun auch eigentlich komplett fertig bekommen und mich an eine Anleitung gehalten. Nun hab ich aber das Problem, dass die Navigation einfach nicht in die Mitte will.

Nach wirklich tagelanger Suche bin ich wohl auf dutzende Hinweise u. Erklärungen zu "margin" und "float" gestossen, welche wohl für mein Problem verantwortlich sind.

Ich weis nun auch, dass ich in Etwa so vorgehen müsste:

Code: Alles auswählen

<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
body {
  font-size: 18px;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
}
#page {
margin: auto;
width: 1280px;
}
#header {
  background-color: #5e0022;
  padding: 15px;

Ich schaffe es allerdings nicht dieses auch auf meine aktuelle Navigation um zu setzen. Das liegt wohl daran, dass ich ein absoluter CSS Neuling bin der sich erst einarbeitet. Ich weis mehr HTML als CSS. Bei html wäre es einfach mit der veralteten Variante "<center></center>"

Ich habe die Navigation extra schnell online gestellt, dass Ihr einen Blick darauf werfen könnt. Hier ist der Link zur Navi:

Code: Alles auswählen

http://www.dragon-age-wacht.de/navigationdemo/index.html

Es würde mir wirklich wahnsinnig helfen wenn mir eventuell jemand den Coden gleich so abändert, dass die Navigation "center" ist, also mittig und zwar nur horizontal. Also die index.html und die menu.css abändert. So könnte ich nachher sehen wie das gemacht wurde und so daraus eine Lehre ziehen. Versucht zu erklären hat man es mir schon einige Male aber leider ohne Erfolg wie man sieht. Ich weis einfach nicht wie ich das Gelernte dort im Code umsetzen soll? Auch mit FireBug bin ich nicht weiter gekommen der mir sonst eigentlich fast immer hilft.

Für jede Hilfe wäre ich Euch sehr dankbar.

Herzliche Grüsse und einen schönen Tag, Goblin

[sejuma]

Wenn die Breite fix bleibt, dann kannst du es so machen: (ggf. width-Wert anpassen):

Code: Alles auswählen

div#menu {
margin:30px auto;
width: 800px;
}

Ansonsten etwas aufwendiger und mit besagten Nachteilen behaftet:
http://www.ohne-css.gehts-gar.net/0063.php

[Goblin]

Vielen vielen Dank für Deine Antwort. Das hat schon mal sehr viel mehr Licht ins Dunkel gebracht. Ganz klar komme ich aber immer noch nicht.

Die Tabs der Navi bleiben so, werden also nicht noch mehr. Aber die breite der Seite in die diese Navi integriert werden soll variiert natürlich pro Bildschirmauflösung des Members der das Forum besucht. Verstehst Du was ich sagen möchte? Meine Auflösung ist 1280 Pixel also würde bei meinem Bildschirm auch eine Navi Breite von 1280 ausreichen. Wenn aber nun der nächste Member die Seite mit einer Auflösung von 1600 Pixel besucht dann bringt mir die "width" Einstellung quasi schon nichts mehr. Oder sehe ich das falsch?

Somit wäre die zweite Variante die Du mir gezeigt hast wohl die bessere für mich. Also die Navi in einen Container zu stecken und mit den Prozent Angaben zu arbeiten. Ich hab mir das Beispiel auch sehr lange angesehen und auch fleissig herum probiert ob ich das Beispiel umsetzen kann. Es gelingt mir aber leider nicht.

Wäre vielleicht von Euch jemand so nett und würde mir das bitte passend machen? Ich füge hier mal meine menu.css und meine index.html ein. Vielleicht hat ja jemand soviel Laune, dass er oder sie mir das kurz abändert?

menu.css

Code: Alles auswählen

/**
*********************************************
* Prototype of styles for horizontal CSS-menu
* @data 30.06.2009
*********************************************
* (X)HTML-scheme:
*  <div id="menu">
*      <ul class="menu">
*          <li><a href="#" class="parent"><span>level 1</span></a>
*              <div><ul>
*                  <li><a href="#" class="parent"><span>level 2</span></a>
*                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
*                  </li>
*              </ul></div>
*          </li>
*          <li class="last"><a href="#"><span>level 1</span></a></li>
*      </ul>
*  </div>
*********************************************
*/

/* menu::base */
div#menu {
    height: 52px;
    padding-left: 6px;
    background: url(images/left.png) no-repeat;
    _background: url(images/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 6px;
    background: url(images/right.png) no-repeat right 0;
    _background: url(images/right.gif) no-repeat right 0;   
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0 0px 0 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 52px;
    left: 0;
    visibility: hidden;
    width: 180px;
     margin: 0px 0 0 -4px;
    padding: 0;
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    _background: url(images/subsubmenu-top.gif) no-repeat 0px 0; 
}
div#menu ul ul {
     z-index: 12;
    padding: 0px 4px 10px 4px;
    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
    _background: url(images/submenu-bottom.gif) no-repeat 0px bottom;       
    margin: 10px 0 0 0;   
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 50px;
    display: block;
    float: left;
    line-height: 50px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
div#menu span {
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Helvetica,Arial,FreeSans,sans-serif;
    background: none;
    line-height: 50px;   
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 0;
    line-height: 50px;
    height: 52px;
    margin-right: 5px;
    _margin-right: 1px;
    background: none;
    text-transform: uppercase;
}
div#menu a:hover {
    background:  url(images/selected-right-sub.png)  no-repeat right -1px;
}
div#menu a:hover span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background: url(images/selected-right-sub.png)  no-repeat right -1px;
}
div#menu li.current a span,
div#menu ul.menu>li:hover>a span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
}

div#menu ul.menu>li:hover>a span {
     color: #07b3e1;
}
div#menu li {  }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li {
    background: none;
    padding: 0;
}
div#menu ul ul a {
    padding: 0px;
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    font-size: 13px;
    color: #fff;
    z-index: -1;
    padding-left: 5px;
    white-space: normal;
    width: 152px;
    margin: 0 8px;
    text-transform: none;
}
   
div#menu ul ul a span {
     padding: 0 5px;
    line-height: 25px;
    font-size: 13px;
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background:none;
}
div#menu ul ul a:hover {
background:none;
background-color: #3c3c3c;
}
div#menu ul ul a:hover span {
   background:none;
   color: #07b3e1;
}
div#menu ul ul a.parent {
  background: url(images/submenu-pointer.png) no-repeat right bottom;
  _background-image: url(images/submenu-pointer-hover.gif);
}
div#menu ul ul a.parent span {
  background:none;
}
div#menu ul ul a.parent:hover {
  background: url(images/submenu-pointer.png) no-repeat right bottom;
  _background: url(images/submenu-pointer-hover.gif) no-repeat right bottom;
  background-color: #3c3c3c;
}
div#menu ul ul a.parent:hover span {
  background:none;
}
div#menu ul ul span {
   
    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul div {
    width: 180px;
    padding: 0;
    margin: -62px 0 0 165px !important;
}
div#menu ul ul ul {
    padding: 10px 4px 0 4px;   
}
div#menu ul ul div li {
    position:relative;
    top:-10px;
}

/* lava lamp */
div#menu li.back {
    background: url(images/selected-left-sub.png) no-repeat 0 0;
    width: 5px;
    height: 52px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0px 0 0 0;
}

div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(images/selected-right-sub.png) no-repeat right 0;
    height: 52px;
    margin: 0 0 0 5px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}


index.html

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Style 05 (Black) - Menu by Apycom.com</title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>

<style type="text/css">
* { margin:0;
    padding:0;
}
html { background:#333333; }
body {
    margin:260px auto;
    width:auto;
    height:80px;
    overflow:hidden;
    background:#000;
   
}
div#menu {
    margin:30px 0 0 95px;
    position:auto;
   
}

</style>

<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Die Wacht Gaming</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
        <li><a href="#" class="parent"><span>Gamers Art Base</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul></div>
        </li>
        <li><a href="#"><span>Social Accounts</span></a></li>
        <li class="last"><a href="#"><span>Kontakt u. Support</span></a></li>
    </ul>
</div>
<a href="http://apycom.com/"</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

Sollte sich eine gute Seele finden die sich mir Lump erbarmt, so sei Ihm Dank versichert

LG Goblin

[sejuma]

Du kannst eigentlich schon bei der ersten, einfacheren Variante bleiben.
Denn die navi erstreckt sich ja nicht auf die Gesamtfensterbreite, sondern ist begrenzt. Sie wird dann nur innerhalb des Fensters horizontal zentriert.

Für die zweite Variante sollte es so klappen:

Code: Alles auswählen

div#menu {
    height: 52px;
    padding-left: 6px;
    background: url(images/left.png) no-repeat;
    background: url(images/left.gif) no-repeat;

clear: both;
float: left;
width: 100%;
overflow: hidden;
}

Füge hinzu:

Code: Alles auswählen

.menu {
float: left;
position: relative;
left: 50%;
margin: 0 auto;
padding: 0;
list-style-type: none;
}

.menu li {
float: left;
position: relative;
right: 50%;
}

Beachte:

Die Styleangaben sind in deinem HTML-Teil an dieser Stelle falsch, sie gehören in die CSS-Datei oder innehalb des head-Bereichs:

<body>

<style type="text/css">
* { margin:0;
padding:0;
}
html { background:#333333; }
body {
margin:260px auto;
width:auto;
height:80px;
overflow:hidden;
background:#000;

}
div#menu {
margin:30px 0 0 95px;
position:auto;

}

</style>
<div id="menu">

Von diesem Teil kannst du #div#menu ohnehin löschen und body solltest du eine width von 100% geben, ebenso html. Alle anderen Werte außer dem background machen eigentlich keinen Sinn.