Homepage selbermachen 7.846 Themen, 35.563 Beiträge

Verfolgung starten Optionen

CSS Navigation bar-zentrieren?

kesart / 2 Antworten / Flachansicht Nickles

Hallo
Ich habe mit CSS eine neuer Navigation bar gestellt. Ich möchte dass die Bar zur Seite zentriet ist, kann mir jemanden bitte da mit helfen?

Hier die CSS stylesheet text:

#cssmenu {
    width: 980px;
    height: 27px;
    margin: 0;
    padding: 0;
    
background: #000000 url(images/bg-bubplastic.gif) top center repeat-x;
}
#cssmenu ul {
    
list-style: none;
    margin: 0;
    
padding: 0;
}
#cssmenu ul li {
    float: left;
    margin: 0;
    padding: 0;
    
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a {
    display: block;
    height: 27px;
    
padding-left: 25px;
    float: left;
    
text-transform: uppercase;
    font-family: ,arial;
    font-size: 10pt;
    
color: #FF0000;
    text-decoration: none;
}

#cssmenu ul li a span {
    
display: block;
    float: left;
    
height: 22px;
    
padding-top: 5px;
    
padding-right: 25px;
    
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
    
cursor: pointer;
}


#cssmenu ul li a:hover,
#cssmenu ul li.active a {
    
background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
    
background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}


Hier die Homepage seiten HTML:

" target="_blank" rel="nofollow">" target="_blank" rel="nofollow">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>KES Art Studio</title>
<base target="_self">
<meta name="Microsoft Border" content="none, default">
<link href="cssmenu/menu_assets/styles.css" rel="stylesheet" type="text/css">
</head>
</body>
<BODY bgcolor="#000000">

<div id='cssmenu' style="width: 980px; height: 25px">
<div><ul>
   <li><b><a href='main.htm'><span>Start</span></a></b></li>
   <li><b><a href='vita.htm'><span>Vita</span></a></b></li>
   <li><b><a href='gallerie.htm'><span>Galerie</span></a></b></li>
   <li><b><a href='information.htm'><span>Information</span></a></b></li>
   <li><b><a href='videos.htm'><span>Videos</span></a></b></li>
   <li><b><a href='link_inhalt_seite.htm'><span>Links</span></a></b></li>
   <li><b><a href='kontaktformular.htm'><span>Kontakt</span></a></b></li>
   <li><b><a href='gastbuch.htm'><span>Gästebuch</span></a></b></li>
   <li><b><a href='impressum.htm'><span>Impressum</span></a></b></li>
</ul>
</div>
</html>

bei Antwort benachrichtigen
Hättest mal die ganze URL nennen sollen. Da scheinen mir ... angelpage
kesart angelpage „Hättest mal die ganze URL nennen sollen. Da scheinen mir ...“
Optionen

Hi Angelpage,
danke fürs melden.
Die veschiedene fehler in der HTML habe ich raus genommen oder korrigiert. Die NAV Bar (eine Bausatz) war oben wie es sein soll ader nicht zeintriert zur Seite.

Ich bin CSS anfänger aber ich habe es geschaft die Code neu zu schreiben ohne bg-Images. Es funktioniert in alle Browsern es ist auch zentriert und funktioniert ohne Konflickt mit "Image LichtBox" und "Video LichtBox". :)
Um die Name in die geöffnete Seit weiß zu zeigen, nehme ich einfach die link raus: zB: ----<a href="gallerie.htm" title="To a new page">----- so dass nur ---<liGalerie</a></li>---

Hier ist die neuer Code:


CSS in Head

<style type="text/css">
      body {
        font-family: Arial, Verdana,  Helvetica, sans-serif;
        font-size: 14px;
font-weight: bold;
        background: #000000;
      }
      .horizontal_menu {
        border: none;
        background-color: #000000;
        padding: 15px;
        margin: 5px;
      }
      .horizontal_menu li {
        display: inline;
        list-style: none;
        margin: 20px;
      }
      .horizontal_menu li a {
        text-decoration: none;
        color: red;
      }
      .horizontal_menu li a:hover {
        text-decoration: none;
        color: white;
      }
    span.hps
    {}
</style>

</head>


BODY

<body><div align="center">
<ul class="horizontal_menu">
<li><a href="main.htm" title="To a new page">Start</a></li>
<li><a href="vita.htm" title="To a new page">Vita</a></li>
<liGalerie</a></li>
<li><a href="information.htm" title="To a new page">Information</a></li>
<li><a href="videos.htm" title="To a new page">Videos</a></li>
<li><a href="link_inhalt_seite.htm" title="To a new page">Links</a></li>
<li><a href="kontaktformular.htm" title="To a new page">Kontakt</a></li>
<li><a href="gastbuch.htm" title="To a new page">Gästebuch</a></li>
<li><a href="impressum.htm" title="To a new page">Impressum</a></li>  
    </ul>


VG

kesart
bei Antwort benachrichtigen