How to move each individual navlink?

I want to move each individual navlink using CSS but I can't seem to figure out how. Here is an example below of how I want it to look like.



I want to move each navlink to the side of my logo like in that picture, 3 on each side. How can I do this?



Here is my navlink code.

Code:

a {
color: #ff4847;
text-decoration: none;
-moz-transition: color .3s ease-in-out;
-ms-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
-webkit-transition: color .3s ease-in-out;
}
a:link{
    color: #dedede;
    text-decoration: none;
    }
a.mainmenu {
color: #774b6e;
text-decoration: none;
}
a:active{
    color: #dedede;
    text-decoration: underline;
    }
a:hover{
    color: #fefefe;
    text-decoration: none;
    }
a.forumtitle {
   color: #dedede;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 1.2em;
   font-weight: normal;
   text-decoration: none;
   }
a.forumtitle:hover {
   color: #fefefe;
   text-decoration: none;
   }
a.forumtitle:active {
    color: #dedede;
    }
a.topictitle {
   font-family: Century Gothic,Arial,Helvetica,sans-serif;
   font-size: 1.1em;
   font-weight: normal;
   color: #dedede;
   text-decoration: none;
   }
div.topic-title-container {
   display: inline;
   }
.topic-title {
   display: inline;
   font-size: 12px;
   text-align: left;
   }
.topic-title-post {
   }
a.topictitle:hover {
   color: #fefefe;
   text-decoration: none;
   }
a.topictitle:active {
    color: #dedede;
    }

Hello sonyman,

Could you provide a link to your forum ?

Thanks.

Ange Tuteur wrote:Hello sonyman,

Could you provide a link to your forum ?

Thanks.

http://gjtesting.forumotion.com/

I'm still working on it so it doesn't look right, but pretty much, the logo on the left should be in the center and the navlinks at the top should be to the sides of the logo. The navbar is also fixed so I will fix that once I figure out how to do this. Thanks.

EDIT: Still working on it so depending on when you look at the site, stuff might look different.

Try this code:

Code:

a.mainmenu {
margin-left: 5px;
}

You can change the "5" in 5px to anything you'd like. It increases the distance. However it may or may not work with your forum version.

Ramdaman wrote:Try this code:

Code:

a.mainmenu {
margin-left: 5px;
}

You can change the "5" in 5px to anything you'd like. It increases the distance. However it may or may not work with your forum version.

Thanks, but this just changes the distance between each navlink. I want to move each one individually. 3 one each side of the logo that should be on the center.


EDIT: Just realized I pasted the wrong code when I made the topic, here is my navlinks code.

Code:

a {
color: #ff4847;
text-decoration: none;
-moz-transition: color .3s ease-in-out;
-ms-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
-webkit-transition: color .3s ease-in-out;
}
a:link{
    color: #dedede;
    text-decoration: none;
    }
a.mainmenu {
color: #774b6e;
text-decoration: none;
}
a:active{
    color: #dedede;
    text-decoration: underline;
    }
a:hover{
    color: #fefefe;
    text-decoration: none;
    }
a.forumtitle {
   color: #dedede;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 1.2em;
   font-weight: normal;
   text-decoration: none;
   }
a.forumtitle:hover {
   color: #fefefe;
   text-decoration: none;
   }
a.forumtitle:active {
    color: #dedede;
    }
a.topictitle {
   font-family: Century Gothic,Arial,Helvetica,sans-serif;
   font-size: 1.1em;
   font-weight: normal;
   color: #dedede;
   text-decoration: none;
   }
div.topic-title-container {
   display: inline;
   }
.topic-title {
   display: inline;
   font-size: 12px;
   text-align: left;
   }
.topic-title-post {
   }
a.topictitle:hover {
   color: #fefefe;
   text-decoration: none;
   }
a.topictitle:active {
    color: #dedede;
    }


DOUBLE EDIT: I fixed my logo and positioned it how it should be, now all I need now is help to position the links on either side of the logo in the center.


http://gjtesting.forumotion.com/

I only see 4 navlinks, so it might vary for you. See how this looks :

Code:

div#page-header div.navbar ul.linklist {
  top:285px;
  left:0;
  right:0;
  text-align:center;
  z-index:3;
}

#page-header a[href="/"] { margin-right:150px }
#page-header a[href="/register"], #page-header a[href^="/profile"] { margin-left:150px }

#i_icon_mini_index {
  position:absolute!important;
  top:10% !important;
  left:45% !important;
}
#i_icon_mini_portal {
  position:absolute!important;
  top:20% !important;
  left:40% !important;
}
#i_icon_mini_members {
  position:absolute!important;
  top:30% !important;
  left:35% !important;
}
#i_icon_mini_profile {
  position:absolute!important;
  top:10% !important;
  left:55% !important;
}
#i_icon_mini_message {
  position:absolute!important;
  top:20% !important;
  left:60% !important;
}
#i_icon_mini_logout {
  position:absolute!important;
  top:30% !important;
  left:65% !important;
}

Ange Tuteur wrote:I only see 4 navlinks, so it might vary for you. See how this looks :

Code:

div#page-header div.navbar ul.linklist {
  top:285px;
  left:0;
  right:0;
  text-align:center;
  z-index:3;
}

#page-header a[href="/"] { margin-right:150px }
#page-header a[href="/register"], #page-header a[href^="/profile"] { margin-left:150px }

Thank you so much for this helpful answer, it solved my question.   I just slightly fixed the code to look like how I wanted it to. I just have one more question. When one logs into the site, the navlinks change dramatically. It ends up looking like this.


It goes from this : 


To this : 

I was just wondering if you might know of a solution to this, maybe in the CSS coding or maybe even a javascript code. I already know how to get rid of the navlinks as I already got rid of some, maybe there is a way to change the way navlinks change when your logged in? 
 
Thanks.


EDIT: I was looking at the navbar and links and noticed only a few of them were causing problems. The "Memberlist" navlink seems to be spacing out the links to the side of them. Another one of the links causing problems were the "You have no new messages" which takes up alot of space, and changes whether you have a message or not. Also the "[Log out (insert name here)]" also causes a problem since depending on how big your name is, it could distort the look of the entire navbar. I was thinking that maybe there is a way to change the names of these? Like changing the "[Log out (insert name here)]" to just simply "Log out"?

Add this to your stylesheet for the memberlist link :

Code:

#page-header a[href="/memberlist"] {
  margin-left:-150px;
  margin-right:150px;
}

It should offset the margin from the portal, and add a margin to the right of it.

think using % is better then px because different people have different aspect ratios and it keeps it the same on all of them .. but hey thats  just me
also thought my style of links going down side was better

Ange Tuteur wrote:Add this to your stylesheet for the memberlist link :

Code:

#page-header a[href="/memberlist"] {
  margin-left:-150px;
  margin-right:150px;
}

It should offset the margin from the portal, and add a margin to the right of it.

It looks alot better now, thanks for all your help  .

thetwistedkilla wrote:think using % is better then px because different people have different aspect ratios and it keeps it the same on all of them .. but hey thats  just me
also thought my style of links going down side was better

I tried your code and it just centered all of the links on the top, im not sure why. But thanks for your help   . Also are you sure? I have 2 screens, one large and one small and they both look about right on them.