CODEWITHSUNDEEP
cssposition
Cojocaru Daniel
Cojocaru Daniel

Reputation: 139

unordered list css positioning

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?

Upvotes: 1

Views: 2827

Answers (3)

Jim Jeffers
Jim Jeffers

Reputation: 17930

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!

Upvotes: 1

David Allen
David Allen

Reputation: 1163

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>

Upvotes: 0

sinemetu1
sinemetu1

Reputation: 1726

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;
    }

Upvotes: 0

Related Questions