Responsywne menu w css

pytanie zadane 16 lutego 2016 w HTML i CSS przez mowmiheniek Stary wyjadacz (11,900 p.)
zamknięte 17 lutego 2016 przez mowmiheniek

Witajcie,

Wcześniej zadałem już to pytanie, ale dostałem odpowiedź nie do końca mi pasującą. Możliwe, że źle sformułowałem pytanie. Teraz pytanie poprę kodem.

Mam takie menu:

Po zmianie rozdzielczości chciałbym, aby przyciski trzymały się takiej pozycji, ale dzieje się coś takiego:

Przycisk 4 i 5 zmienia pozycję, reszta jest dobra.

Brakuje mi pomysłów jak to ustawić.

Kod index:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="cointener">
   <div class="top">
       <img src="images/logo.jpg">

       <div class="menu">
           <div class="button1">
               <img src="images/o-nas.png"/>
           </div>
           <div class="button2">
             <img src="images/koszulki.jpg"/>
           </div>
           <div class="button3">
               <img src="images/butelki-ok.png"/>
           </div>
           <div class="button4">
               <img src="images/gadzety.png"/>
           </div>
           <div class="button5">
               <img src="images/kontakt.png"/>
           </div>
       </div>
  </div>
</div>

</body>
</html>

Kod css:

* {padding:0px;}

html {width:100%;height:100%;}
.container {margin: 0 auto;
    position: relative;
}


.top { width: 100%;}
.top img {width:100%;}

.menu {position: absolute;
    top: 0px;
    left: 0px;
    width: 40%;
}

.button1 {
    padding-top: 2%;
    padding-left: 85%;
    }


.button2 {
    padding-top: 0;
    padding-left: 85%;
    }
.button2 img {
    position: relative;
    padding-top: 49%;
    right: 43%;
}

.button3 {
    padding-top: 0;
    padding-left: 85%;
    }
.button3 img {
    position: relative;
    padding-top: 37%;
    right: 155%;
}


.button4 {
    padding-top: 0;
    padding-left: 85%;
    }
.button4 img {
    position: relative;
    right: 301%;
    top: -18px;
}

.button5 {
    padding-top: 0;
    padding-left: 85%;
    }
.button5 img {
    position: relative;
    right: 471%;
    top: -80px;
}

Rozumiem, że to przez użycie top w px, ale nie wiem jak to inaczej ustawić .

Dziękuję, za podpowiedzi.

komentarz zamknięcia: Rozwiązane

2 odpowiedzi

odpowiedź 17 lutego 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Najlepsza

Rozwiązanie problemu:

* {padding:0px;}

html {width:100%;height:100%;}
.container {margin: 0 auto;
    position: relative;
}


.top { width: 100%;}
.top img {width:100%;}

.menu {position: absolute;
    top: 0px;
    left: 0px;
    width: 40%;
}

.button1 {
    float: left;
    width: 10%;
    }
.button1 img {
    position: relative;
    padding-top: 679%;
    right: -196%;
}

.button2 {
    float: left;
    width: 10%;
    }
.button2 img {
    position: relative;
    padding-top: 615%;
    right: -327%;
}

.button3 {
    float: left;
    width: 10%;
    }
.button3 img {
    position: relative;
    padding-top:  470%;
    right: -450%;
}

.button4 {
    float: left;
    width: 10%;
    }
.button4 img {
    position: relative;
    padding-top:   284%;
    right: -502%;
}


.button5 {
    float: left;
    width: 10%;
    }

.button5 img {
    position: relative;
    padding-top:   63%;
    right: -488%;
}

odpowiedź 16 lutego 2016 przez jpacanowski VIP (101,940 p.)

Według mnie, musisz zwiększyć szerokość menu. Ale kod przejrzałem tak na szybko, ciężko tak bez Inspect Element.

komentarz 16 lutego 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Nie to nie przez to.

DIVy są poukładane w menu jeden pod drugim i to się sprawdza w pierwszych trzech przyciskach. (Ładnie się skalują i utrzymują pozycję.)

Dwa ostatnie obrazki wychodzą trochę nad swoje DIV-y i dodane do nich jest top w px.
Niestety nie wiem jak to ustawić inaczej :/