CODEWITHSUNDEEP
htmlcssmenu
BDdL
BDdL

Reputation: 131

CSS : centering a fixed menu with no specific width

i've been struggling with something: centering my CSS menu!! i can't figure out how to do it. What am i doing wrong?

http://jsfiddle.net/yfVs2/

Upvotes: 0

Views: 239

Answers (3)

Prashobh
Prashobh

Reputation: 9542

may be because of you have used float:left.

Upvotes: 0

Subash
Subash

Reputation: 7256

You used position fixed. So the margin auto doesn't work with fixed position. You can do the following:

  1. Remove the fixed positioning. Wrap in a div and assign width 100%.
  2. Set width for you ul. If you want you ul to increase as li increases, you can set ul width to inherit.
  3. If you still cant do it, make a comment and I will upload the code for you. But I am sure you can do it yourself.

Upvotes: 1

madeye
madeye

Reputation: 1406

Try this

.menu {
    height: 80px;
    border: 1px solid rgba(255,255,255,0.3);
    position: fixed;
    top: -8px;
    left: 50%;
    margin-left: -200px; /* half of the .menu width if you don't know width delete this line */
}

And if you're not going to know the width of this element you can dynamically calculate it with javascript/jquery.

$(document).ready(function() {
    var wdth = $('.menu').width();
    wdth = wdth/2;
    $('.menu').css('margin-left', -wdth);
});

Here is the working example http://jsfiddle.net/yfVs2/11/

Upvotes: 2

Related Questions