XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Navigations Bar anpassen (http://xhtmlforum.de/showthread.php?t=64902)

snakemaster 12.06.2011 14:32

Navigations Bar anpassen
 
Hallo miteinander

ich habe ein kleines problem ich würde gerne diese navigations bar hier unten

http://img194.imageshack.us/img194/5921/navibar.jpg

gerne so anpassen das sie zu einander passt. Da ich das schon probiert habe mit dem CSS und bis jetzt nichts herausfinde. würde ich gerne wissen ob ihr irgend etwas wisst. Oh ja und die second funktion habe ich gemacht die war noch nicht dabei.

Code:

/*===== header =====*/
#header .menu {
        background:url(images/menu-right.gif) 100% 0 no-repeat #fff;
}
        #header .menu .wrapper {
                background:url(images/menu-left.gif) 0 0 no-repeat;
                height:80px;
        }

#header .nav {
        float:left;
}
        #header .nav li {
                float:left;
                background:url(images/divider.gif) 100% 0 repeat-y;
        }
                #header .nav li a {
                        padding:0 118px 0 32px;
                        float:left;
                        line-height:80px;
                        text-decoration:none;
                        color:#313131;
                        text-decoration:none;
                        font-size:20px;
                }
                #header .nav li a:hover, #header .nav li a.current {
        background:url(images/nav-bg1.gif) 0 0 repeat-x;
        color:#fff;
        text-align: center;
                }
                #header .nav li.first a {
                        padding:0;
                }
                        #header .nav li.first a b {
                                float:left;
                                padding:0 52px 0 32px;
                        }
                        #header .nav li.first a:hover b, #header .nav li.first a.current b {
                                background:url(images/menu-left-act.gif) no-repeat 0 0;
                        }
                #header .nav li.second a {
                        padding:0;
                }
                        #header .nav li.second a b {
                                float:left;
                                padding:0 52px 0 32px;
                        }
                        #header .nav li.second a:hover b, #header .nav li.second a.current b {
                                background:url(images/menu-right-act.gif) no-repeat 0 0;
                        }

Ich danke euch shcon mal im vorraus.

Thielo 12.06.2011 14:38

Was passt denn nicht?

snakemaster 12.06.2011 14:44

Zitat:

Zitat von Thielo (Beitrag 495898)
Was passt denn nicht?

Nun es ist so ich möchte gerne das der contact ganz am rand ist und so ist wie der Main einfach spiegel verkehrt und nicht grün und das zwischen drin gleich mässig abstand hat.

Manfred62 12.06.2011 17:52

Das sind 5 Felder (li) --> jeweils "width: 20%; text-align: center;"
Vorausgesetzt, das übergeordnete Element hat eine Breite.

Manfred

snakemaster 12.06.2011 23:16

Zitat:

Zitat von Manfred62 (Beitrag 495907)
Das sind 5 Felder (li) --> jeweils "width: 20%; text-align: center;"
Vorausgesetzt, das übergeordnete Element hat eine Breite.

Manfred

Nun ich hab das problem gelöst aber jetzt ist wieder eins auf getaucht am ende von Contact gibt es eine grauliche linie die mit dem befehl

Code:

}
        #header .nav li {
                float:left;
                background:url(images/divider.gif) 100% 0 repeat-y;
        }

gemacht wird. Und ich will irgend wie machen das ich nur 4 von diesen linien benutzen und nicht 5.

Manfred62 12.06.2011 23:29

gib dem contact Link eine extra class ohne background Grafik.

Manfred

snakemaster 12.06.2011 23:37

Zitat:

Zitat von Manfred62 (Beitrag 495922)
gib dem contact Link eine extra class ohne background Grafik.

Manfred

habe ich schon gemacht

CSS

Code:

/*===== header =====*/
#header .menu {
        background:url(images/menu-right.gif) 100% 0 no-repeat #fff;
}
        #header .menu .wrapper {
                background:url(images/menu-left.gif) 0 0 no-repeat;
                height:80px;
        }

#header .nav {
        float:left;
}
        #header .nav li {
                float:left;
                background:url(images/divider.gif) 101% 0 repeat-y;
        }
                #header .nav li a {
                        padding:0 100px 0 0px;
                        float:left;
                        line-height:80px;
                        text-decoration:none;
                        color:#313131;
                        text-decoration:none;
                        font-size:20px;
                }
                #header .nav li a:hover, #header .nav li a.current {
        background:url(images/nav-bg1.gif) 0 0 repeat-x;
        color:#fff;
        text-align: center;
                }
                #header .nav li.first a {
                        padding:0;
                }
                        #header .nav li.first a b {
                                float:left;
                                padding:0 32px 0 32px;
                        }
                        #header .nav li.first a:hover b, #header .nav li.first a.current b {
                                background:url(images/menu-left-act.gif) no-repeat 0 0;
                        }
                #header .nav li.second a {
                        padding:0;
                }
                        #header .nav li.second a b {
                                float:right;
                                padding:0 20px 0 20px;
                        }
                        #header .nav li.second a:hover b, #header .nav li.second a.current b {
                                background:url(images/menu-right-act.gif) no-repeat 100% 0;
                        }
                                #header .nav li.third a {
                        padding:0;
                }
                        #header .nav li.third a b {
                                float:right;
                                padding:0 30px 0 25px;
                }
                                #header .nav li.forth a {
                        padding:0;
                }
                        #header .nav li.forth a b {
                                float:right;
                                padding:0 20px 0 20px;
                }
                                #header .nav li.fifth a {
                        padding:0;
                }
            #header .nav li.fifth a b {
                                float:right;
                                padding:0 14px 0 13px;
                }

Html

Code:

</head>

<body id="page1">
  <!-- header -->
  <div id="header">
          <div class="tail-left"></div>
    <div class="bg">
      <div class="container">
        <div class="menu">
          <div class="wrapper">
            <!-- .nav -->
            <ul class="nav">
              <li class="first"><a href="index.html"><b>main</b></a></li>
              <li class="third"><a href="index-1.html"><b>about</b></a></li>
              <li class="forth"><a href="index-2.html"><b>service</b></a></li>
              <li class="fifth"><a href="index-3.html" class="current"><b>portfolio</b></a></li>
              <li class="second"><a href="index-4.html"><b>contact</b></a></li>
            </ul>
            <!-- /.nav -->
            <!-- .adv-nav -->
            <!-- /.adv-nav -->
          </div>
        </div>
        <div class="logo"><a href="index.html"><img src="images/arabiantransparent .png" alt="" width="231" height="451" /></a></div>
        <!-- .banners -->
        <!-- /.banners -->
      </div>
    </div>
  </div>

wie du siehst hab ich das schon erstellt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:21 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023