CODEWITHSUNDEEP
htmlcss
ShellRox
ShellRox

Reputation: 2602

Absolute positioned elements mess up when browser scales

I am creating dropdown menu for my website, they look very nice on laptop resolution ( 1280 x 800 ), but unfortunately, they mess up very badly when they are scaled on bigger size, they separate from each other, even though they are absolute.

HTML code of one of dropdown navigation links:

<ul class="down-bar" style="list-style:hidden">
    <div class="dropdown">
        <input type="checkbox" value="drop" id="drop-1" class="dropper">
        <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Buttons <b class="caret"> &#9660;</b></label></li>
        <div class="dropdown-menu">
            <a href="#" class="fix1"><label class="image1" style="width:30px;height:30px;position:absolute;top:1%;left:3%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image2" style="width:30px;height:30px;position:absolute;left:3%;top:11%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image3" style="width:30px;height:30px;position:absolute;left:3%;top:21%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix2"><label class="image4" style="width:30px;height:30px;position:absolute;left:3%;top:31%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image5" style="width:30px;height:30px;position:absolute;left:3%;top:41%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix3"><label class="image6" style="width:30px;height:30px;position:absolute;left:0.7%;top:51%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image7" style="width:30px;height:30px;position:absolute;left:0.7%;top:61%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix4"><label class="image8" style="width:30px;height:30px;position:absolute;left:1.5%;top:71%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix5"><label class="image9" style="width:30px;height:30px;position:absolute;left:0.7%;top:81%;cursor:pointer;"></label>Btn</a>   
            <a href="#" class="fix6"><label class="image10" style="width:30px;height:30px;position:absolute;left:1%;top:91%;cursor:pointer;"></label>Btn</a>                    
        </div>
    </div>

Please note that i didn't add exact original code, for specific purposes. Class image(n) for example image1, holds picture next to the text, However fix(n) class was for longer texts so it could fit in properly. ( I used text-indent ) for that.

Full Result. ( It includes original website buttons, for exact support, try scaling it down and up ).

I think i am making these dropdown menu's wrong, and need to make them with different position types, is that true? if so then what to i need to change?

Upvotes: 0

Views: 80

Answers (1)

Abk
Abk

Reputation: 2233

Try fixing it by setting maximum width for the navigation menu container.

.down-bar{
  max-width: 1200px; /* try different value */
}

The menu item will maintain the same distance on zoom in or out.

Upvotes: 1

Related Questions