How to keep the navigation in the same place?

Hello sitepoint friends

This is my first post here, so a big “hello forum!”.

I have a simple question to begin with.
I basically want to keep the top navigation in position when the different navigation points are clicked. Because the active element is bold it pushes the other elements around and the navigation looks different depending on what navigation point is clicked. I would like the navigation to always stay in the same position with the most right element (“KONTAKT”) having the same horizontal position with the footer element “IMPRESSUM”. If you know what i mean.
Sorry, my english isn’t that great.

Thanks a lot and goodbye

Here is the site:http://www.nenno-architektur.de/leistungen.html

Hi BuchwaldM, welcome to SitePoint! :wave:

Easiest solution is to give each item a width and centre the link in it.

I apolgise if this is redundant. But remeber to do those in css not the outdated html

Let us suppose you are centring li tags…
Do not do this
<li align=“center” width=“103px”><a href=“link.html”>click me</a></li>

do This (in css)

li a{
Margin: 0 auto;
Width:100px;
}

I.hoped that helped somewhat,
Team 1504

Hello guys

thanks for the help from both of you.
Removing the double padding already solved the problem.
Li and .active span had padding at the same time, so it pushed out more than needed. Now it’s all right.
And i was told that i couldn’t use fixed widths because i use inline li.
A solution with float was given, but that was not neccesary anymore.

Thanks and bye

And i was told that i couldn’t use fixed widths because i use inline li.

The solution I mentioned should have included to use display:inline-block for the width to work. Sorry. :slight_smile:

Anyway, you had already solved the alignment; in the linked page the list had text-align: right so the Kontakt link were already at all times aligned with the Impressum link in the footer.

Glad you solved the padding issue too and thanks for the feedback. :slight_smile: