unordered list css positioning

Question

I have two elements in my markup, a map and an unordered list:

<div id="map-se">

<ul class="sverige">
<li class="se1"><a href="#blekinge">Blekinge län</a></li>
<li class="se2"><a href="#dalarnas">Dalarnas län</a></li>
<li class="se3"><a href="#gavleborgs">Gävleborgs län</a></li>


 </ul>
 </div>

HERE is the link, what I want to do is to switch the position between them, I mean the map in the right and the unordered list in the left. Whichever I do is the map will be broken. Some suggestions?

Jim Jeffers · Accepted Answer · 2012-02-02 06:51:54Z

1

Your positioning problems are easily solved with simple absolute positioning on the list. Just use:

.map-visible-list {
   bottom: 0;
   position: absolute;
   right: 0;
}

And you can position the list wherever you want. The map container is already absolutely positioned so you can move the entire container wherever you need to move the map and then reposition the visible-list as you wish. Remember you can use top, bottom, right, or left. In addition you can also set negative values on positions to move the list outside of the map containers bounding box if you need to.

It's nothing fancy, but predictable, reliable, time saving, and it works!

answered Feb 2, 2012 at 6:51

Jim Jeffers

18k4 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sinemetu1 · Accepted Answer · 2012-02-02 00:10:03Z

0

From changing a couple things on that site this appears to be what you're looking for. Change the order that the elements are listed. So the list comes first and then the map second:

    <ul class="map-visible-list"></ul>
    <ul class="sverige css-map"></ul>
    <span class="cities sverige-cities"></span>

And then in your css:

    .cities.sverige-cities {
        margin-left: 180px;
    }

answered Feb 2, 2012 at 0:10

sinemetu1

1,7261 gold badge13 silver badges24 bronze badges

Comments

David Allen · Accepted Answer · 2012-02-02 00:24:41Z

0

I just moved the map-visible before its parent and added margin-left to css-map-container

<div id="main" role="main">
    <ul class="map-visible-list">...Your Stuff..</ul>
        <div id="map-se" class="css-map-container m430">
            <ul class="sverige css-map">....Your stuff...</ul>
            <span class="map-loader" style="left: 50%; margin-left: -49.5px; margin-top: -16px; top: 472.5px; display: none; ">Loading ...</span><span class="cities sverige-cities"></span>
        </div>
</div>

answered Feb 2, 2012 at 0:24

David Allen

1,1732 gold badges10 silver badges24 bronze badges

Collectives™ on Stack Overflow

unordered list css positioning

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related