Wyśrodkowanie strony w css

[franz001]

Witam
Jestem tu nowy i dopiero zaczynam przygodę z css, więc proszę o wyrozumiałość, bo mam problem wyśrodkowaniem tego menu. Oto kod w html:

<div class="nav_container">
<!-- main navigation: horizontal list -->

<ul id="navMenu">
<li class="first"></li>
<li><a href="#" class="navServices_a" title="Services"></a></li>
<li><a href="#" class="navAbout" title="About"></a></li>
<li><a href="http://www.wp.pl" class="navPortfolio" title="Portfolio"></a></li>
<li><a href="#" class="navBlog" title="Blog"></a></li>
<li><a href="#" class="navContact" title="Contact"></a></li>
<li><a href="#" class="navContact" title="Contact"></a></li>
<li><a href="#" class="navContact" title="Contact"></a></li>
<li class="last"></li>
</ul>
</div>

A tutaj css:

/* ---------------------------
PAGE ELEMENTS
------------------------------ */

.clear {
clear:both;
}


/* -----------------------------
MAIN NAVIGATION */

.nav_container {
margin:0 auto;
width: 840;
padding-top:auto;

}
#navMenu{
display: inline;
margin: 0;
padding: 0px;
position: relative;
z-index: 1;
}
#navMenu li{
float: center;
display: inline;
}

#navMenu ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}



a.navAbout, a.navAbout_a{
display:block;

float:left;

width:120px;
height:45px;
background: url("../images/about_button.jpg");
background-repeat:no-repeat;
position: relative;

}
a.navAbout:hover{

background: url("../images/about_button.jpg") 0 90px;
}
a.navAbout_a{

background: url("../images/about_button.jpg") 0 45px;
}


a.navAbout, a.navAbout_a{
display:block;

float:left;

width:120px;
height:45px;
background: url("../images/about_button.jpg");
background-repeat:no-repeat;
position: relative;

}
a.navAbout:hover{

background: url("../images/about_button.jpg") 0 90px;
}
a.navAbout_a{

background: url("../images/about_button.jpg") 0 45px;
}

a.navServices, a.navServices_a{
display:block;

float:left;

width:120px;
height:45px;
background: url("../images/services_button.jpg");
background-repeat:no-repeat;
position: relative;

}
a.navServices:hover{
background: url("../images/services_button.jpg") 0 90px;
}
a.navServices_a{

background: url("../images/services_button.jpg") 0 45px;
}

a.navPortfolio, a.navPortfolio_a{
display:block;

float:left;

width:120px;
height:45px;
background: url("../images/portfolio_button.jpg");
background-repeat:no-repeat;
position: relative;

}
a.navPortfolio:hover{
background: url("../images/portfolio_button.jpg") 0 90px;
}
a.navPortfolio_a{
background: url("../images/portfolio_button.jpg") 0 45px;
}
a.navBlog, a.navBlog_a{
display:block;

float:left;

width:120px;
height:45px;
background: url("../images/blog_button.jpg");
background-repeat:no-repeat;
position: relative;

}
a.navBlog:hover{
background: url("../images/blog_button.jpg") 0 90px;
}
a.navBlog_a{
background: url("../images/blog_button.jpg") 0 45px;
}

a.navContact, a.navContact_a{
display:block;
float:left;
width:120px;
height:45px;
background: url("../images/contact_button.jpg");
background-repeat:no-repeat;
position: relative;

}
a.navContact:hover{

background: url("../images/contact_button.jpg") 0 90px;
}
a.navContact_a{

background: url("../images/contact_button.jpg") 0 45px;
}
a.navContact, a.navContact_a{
display:block;
float:left;
width:120px;
height:45px;
background: url("../images/contact_button.jpg");
background-repeat:no-repeat;
position: relative;
}

a.navContact:hover{

background: url("../images/contact_button.jpg") 0 90px;
}
a.navContact_a{

background: url("../images/contact_button.jpg") 0 45px;
}

Bardzo proszę o pomoc. Jest też problem z tłem obrazków na przyciski, które robiłem w photoshopie bez tła, a na stronie mają białe. Zależy mi żeby były przezroczyste, w jaki sposób to zrobić?

 

[octonapewno]

co do tła obrazków to porostu w photoshopie je usuń i zapisz je jako *.png bo jpg nie "obsługuje" przezroczystości.

a co do skryptu to zauważyłem taki błąd że nie napisałeś w .nav_container "px" przy width. I to może powodować błąd bo styl może się nie wykonywać kiedyś tak miałem.

 

[Dark Smark]

Pamiętaj też o świetnej kompatybilności starszych wersji z CSS XD. Więc testuj na różnych przeglądarkach i poszukaj informacji o IE CSS, IE HACK, IE CSS hack itd.. : )

 

[franz001]

octonapewno dziękuję za pomoc :lol: Rzeczywiście, przeoczyłem jednostki w szerokości i teraz się wyśrodkowuje spokojnie Obrazki przycisków menu zapisałem w gif i są odpowiednio przezroczyste na brzegach.