Homepage selbermachen 7.851 Themen, 35.615 Beiträge

Verfolgung starten Optionen

CSS Navigation bar-zentrieren?

kesart / 2 Antworten / Baumansicht 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
angelpage kesart „CSS Navigation bar-zentrieren?“
Optionen

Hättest mal die ganze URL nennen sollen. Da scheinen mir einige Unklarheiten und sichtbare Fehler zu bestehen:

- Steht dein HTML- Quelltext so allein oder mit anderen Containern/ Elementen auf einer HTML- Seite?

- Weshalb werden HTML und CSS nur halbherzig getrennt, z.T. doppelt oder sogar wiedersprüchlich verwendet?

- Schriftart <b> kann in CSS geführt werden

- Was heißt "zentriert" und "zur Seite"? HTML- Seite oder linke oder rechte Seite?

- Was soll das "base target"?

- Was soll "Microsoft Border"?

- Body- Tag im HTML- Dokument ist falsch gesetzt, auch hier CSS auslagern.


bei Antwort benachrichtigen
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