I'm having a problem with a website I've been working on. Honestly, I may have taken an approach that is completely wrong to make this possible.
What I want is for there to be five images instead of buttons for my menu. The button size is 200px by 150px. I put all of the images in a div with the html a href and img tags to make this possible. It looks fine until your page isn't at least ~1000px wide. It will knock the last image down a line. You can view that here: http://travisbrassfield.com/. I'm still a starting web developer and decided to make a website for a friend, I used wordpress for some reason which I'm not really happy with but it's too late to go back now since everything else is done.
I've played around with some of the CSS on it, and the HTML, I'll supply the code below. It's probably all really wrong, I've just been getting short tempered with it not working and trying random snippets of code I've found here and there to see if something might work because I'm tired of messing with it. Any help will be GREATLY appreciated.
HTML:
<div class="navigationbar2">
<a href="../index.php"><img src="../img/homeMENU.png" alt="aa" width="200" height="150"></a>
<a href="../store-offline/"><img src="../img/storeMENU1.png" alt="aa" width="200" height="150"></a>
<a href="../art/"><img src="../img/artMENU.png" alt="aa" width="200" height="150"></a>
<a href="../photos"><img src="../img/photosMENU.png" alt="aa" width="200" height="150"></a>
<a href="../sketches/"><img src="../img/SKETCHmenu.png" alt="aa" width="200" height="150"></a>
<a href="../about/"><img src="../img/aboutMENU.png" alt="aa" width="200" height="150"></a>
</div>
CSS:
.navigationbar2 {
f
margin:auto;
max-height:200px;
max-width:1600px;
.navigationbar2 img {
float:left;
min-width:50%
min-height:50%
max-height:100%;
max-width:100%;
}
