Menu responsive

Status
Niet open voor verdere reacties.

ronnievos1

Gebruiker
Lid geworden
9 mei 2013
Berichten
42
Hallo,

Ik heb een 3 tal afbeeldingen als menu maar hoe krijg ik ze mooi aan elkaar zonder tussenruimte en responsive zodat hij mee schaald met de verschillende grote's van een mobiel?

29993768_1701373699941922_2019514648_o.jpg

Hierbij de code die word gebruikt in het html gedeelte.

Code:
<center>

<a href="radio.html"><img src="radio.png" style="width: 375px; max-width: 32%; height: auto;"></a>
<a href="http://server-66.stream-server.nl:1935/Bonanzateam/Bonanzateam/playlist.m3u8"><img src="cam.png" style="width: 375px; max-width: 32%; height: auto;"></a>
<a href="chat.html"><img src="chat.png" style="width: 375px; max-width: 32%; height: auto;"></a>

</center>

Groeten Ronnie Vos
 
Kan je hiermee verder
Code:
[B]html[/B]

<div class="topmenu">
<a href="pagina1.html">
<img src="afb1.jpg" alt="">
</a><a href="pagina2.html">
<img src="afb2.jpg" alt="">
</a><a href="pagina3.html">
<img src="afb3.jpg" alt="">
</a>
</div>

[B]css[/B]

/* reset wat waardes */
.topmenu, .topmenu a, .topmenu img {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}
/* center menu max 320px breed */
.topmenu {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
/* 3 knoppen elk 1/3 breed */
.topmenu a {
    display: inline-block;
    width: 33.333%;
}
/* responsive image */
.topmenu img {
    display: block;
    width: 100%;
    height: auto;
}
Hier heb ik bij <a> inline-block gebruikt, dan is het belangrijk dat er geen Enter, Tab of Spatie zit in </a><a

Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan