top



Code:
<center>
            <style>
ul.topnav {
position: absolute;
left: 0;
right: 0;
  list-style: none;
  padding: 0 40px;
  margin: 0 auto;
  float: LEFT;
  width: 100%;
  background: #222;
  font-size: 1.0em;
  background: url(http://img228.imageshack.us/img228/7986/topnavb.gif) repeat-x;
}
ul.topnav li {
  float: left;
  margin: 0;
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
position: relative;
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
}
ul.topnav li a:hover{
  background: url(http://img228.imageshack.us/img228/7986/topnavb.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px;
  height: 35px;
  float: left;
  background: url(http://img52.imageshack.us/img52/3927/subnavb.gif
) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
  list-style: none;
  position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  border: 1px solid #111;
}
ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525; /*--Create bevel effect--*/
  border-bottom: 1px solid #444; /*--Create bevel effect--*/
  clear: both;
  width: 170px;
}
html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px;
  background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
  padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
  background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){

  $("ul.subnav").parent().append("<span></span>");

  $("ul.topnav li span").click(function() {

      $(this).parent().find("ul.subnav").slideDown('fast').show();

      $(this).parent().hover(function() {
      }, function(){
        $(this).parent().find("ul.subnav").slideUp('slow');
      });

     
      }).hover(function() {
        $(this).addClass("subhover");
      }, function(){ 
        $(this).removeClass("subhover");
  });

});
</script>
<div align = "center">
<ul class="topnav">
    <li><a href="http://radiosoundall.forumotion.com">Αρχική</a></li>
    <li><a href="http://radiosoundall.forumotion.com/portal">Πόρταλ</a></li>
    <li><a href="http://radiosoundall.forumotion.com/faq">Συχνές Ερωτήσεις</a></li>
    <li><!-- BEGIN switch_user_logged_in --><a href="http://radiosoundall.forumotion.com/memberlist">Λίστα Μελών</a></li>
<li><a href="http://radiosoundall.forumotion.com/groups">Ομάδες</a></li>
 <li>
        <a href="http://radiosoundall.forumotion.com/profile?mode=editprofile">Λογαριασμός</a>
        <ul class="subnav"><center>
            <li><a href="http://radiosoundall.forumotion.com/profile?mode=editprofile&tt=1">Πληροφορίες</a></li>
            <li><a href="http://radiosoundall.forumotion.com/profile?mode=editprofile&page_profil=preferences&tt=1">Επιλογές</a></li>
            <li><a href="http://radiosoundall.forumotion.com/profile?mode=editprofile&page_profil=signature&tt=1">Υπογραφή</a></li>
            <li><a href="http://radiosoundall.forumotion.com/profile?mode=editprofile&page_profil=avatars&tt=1">Εικόνα profile</a></li>
            <li><a href="http://radiosoundall.forumotion.com/profile?mode=editprofile&page_profil=friendsfoes&tt=1">Φίλοι & Εχθροί</a></li>
</center>
        </ul>
    </li>
<!-- END switch_user_logged_in -->
</ul>
</div>
<br>
<br>
<br>
<br>
</center>


I want the links to be centered but I can not do that.... Please help

thank's

sgeorge

Try this:

Code:
ul.topnav {
text-align: center !important;
}

If not works, you need to add margin-left or margin-right, because the li's are floated (:

Gangstar15 wrote:Try this:
Code:
ul.topnav {
text-align: center !important;
}

If not works, you need to add margin-left or margin-right, because the li's are floated (:

Did not work... So now margin... But how can I do it using margin to be centered ? So it can be done correctly to every screen...?

thank's

I don't know.. there is alot to do to make it centered

Can we do it or not ???


Please.... I want it to center the text...


thank you

EDIT: here is the link I got the toolbar from

http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

EDIT2: I have 2 ideas....but I do not know if they are possible... Let me share them with you.

1.How about centering the whole navbar but not the links ?
2.How about giving the navbar specified width and add the navbar background image to be left and right near to the navbar and repeated in -x ?

I will be looking forward for a solution...

thank's

I know where you got the tutorial, but you can also ask there..

Hm.. first try this:
in the ul.topnav there is the width 100%, try change it to 500px and see what will happen (:

Gangstar15 wrote:I know where you got the tutorial, but you can also ask there..

Hm.. first try this:
in the ul.topnav there is the width 100%, try change it to 500px and see what will happen (:

I already tried xD

It makes the width smaller and it makes the navbar not to take all the screen on -x axis

Try "auto" then (:

Nothing... Can't we force it in some way to move the links in the middle ?

Try adding this

Code:
text-align: center

Japorized wrote:Try adding this
Code:
text-align: center

I already have tried adding that:

Code:
ul.topnav {
text-align: center !important;
}

Can we have a look at the drop down menu? I mean the one you made.

The code is already posted on my 1st post..!

Since that they are floated <li> elements, they cannot be centered unless you put some margin between the <li>s.

margin: 0 auto; might center it.

Nope... mmmm forget it... I will add another navigation bar...

you can close the topic

Double posting is not allowed unless seperated by at least 24 hours.
» Locked