Zaloguj | Zarejestruj | FAQ
Anonymous

CSS Men Bar help

+ Odpowiedz

Posty: 5 Strona 1 z 1


CSS Men Bar help

przez wolf_adventures » Wt kwi 22, 2014 11:28 am

I've been trying to create a horizontal men bar with CSS and HTML, and while the actual design looks fine, I can't get it to display in the middle of the page. I've tried text-align and margin:auto, but no luck....
Here is the code for the HTML:
Kod: Zaznacz cały
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
</ul>

.....and the CSS:
Kod: Zaznacz cały
#nav {
   display:none;
   text-align:center;
   font-size:2em;
   font-family:Century;
   list-style-type:none;
   background-color:green;
   color:white;
   text-align:center;
}
#nav a {
   color:white;
   text-decoration:none;
}
#nav a:hover {
   background-color:#339933;
   color:white;
}
#nav li {
   text-align:center;
}
@media screen and (max-width: 800px) {
   #nav {
       display:inline;
    }   
    #nav li {
        display:inline;
    }
}

Avatar użytkownika

wolf_adventures

  • Posty: 3
  • Dołączył(a): Wt kwi 22, 2014 11:15 am
--
<a href="http://www.cullenmouze.eu/">My website</a>

Re: CSS Men Bar help

przez comport9 » So maja 31, 2014 12:56 am

Try encapsulating the "ul" in a <nav></nav> and then put "nav { text-align: center; }" in your css. BTW, you have text-align:center twice.
Avatar użytkownika

comport9

  • Posty: 28
  • Dołączył(a): N lis 04, 2012 5:35 pm

Re: CSS Men Bar help

przez wolf_adventures » So maja 31, 2014 9:05 am

comport9 napisał(a):Try encapsulating the "ul" in a <nav></nav> and then put "nav { text-align: center; }" in your css. BTW, you have text-align:center twice.

I'll try that :)
Avatar użytkownika

wolf_adventures

  • Posty: 3
  • Dołączył(a): Wt kwi 22, 2014 11:15 am
--
<a href="http://www.cullenmouze.eu/">My website</a>

Re: CSS Men Bar help

przez XainPro » So maja 31, 2014 11:21 am

What do you mean by
can't get it to display in the middle of the page ?
if you mean to align text to center then use

#nav li {text-align:center;}

or explain it further !
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: CSS Menu Bar help

przez wolf_adventures » So maja 31, 2014 11:41 am

XainPro napisał(a):What do you mean by
can't get it to display in the middle of the page ?
if you mean to align text to center then use

#nav li {text-align:center;}

or explain it further !

I've tried that, but it does not seem to be working...
Avatar użytkownika

wolf_adventures

  • Posty: 3
  • Dołączył(a): Wt kwi 22, 2014 11:15 am
--
<a href="http://www.cullenmouze.eu/">My website</a>


+ Odpowiedz

Strona 1 z 1