0

Hello I am having some serious trouble, i have created an image which is a navigation, this navigation has 8 images, which are all aligned perfectly as to how i want them, but i would like to center the whole thing on all devices.

}

#box2 {
position: fixed;
width:100%
margin: auto;
 }
<head>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
</head>
<body>
<div id="box2">
<a href=""><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/111.png" width="500"  style="position: absolute; top: 100px; left: 500px; "/>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65"  style="position: absolute; border: 0px solid white; top: 240px; left: 530px; "/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid blue; top: 170px; left: 785px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid green; top: 140px; left: 650px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid red; top: 280px; left: 890px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid purple; top: 435px; left: 565px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width=65" style="position: absolute;  border: 0px solid grey; top: 435px; left: 820px;"/></a>
<a href="http://tridentas.co.uk/bowwownow"><img src="http://www.tridentas.co.uk/tridentascouk/bowwownow/wp-content/uploads/2015/10/home1.png" width="65" style="position: absolute; border: 0px solid yellow; top: 325px; left: 690px;"/></a>
</div>
</body>

Any help would be great, i just need the whole thing to be centered on all devices including, pc / laptop / mobile / tablet.

I have tried over 30 different questions and answers from stackoverflow none has helped me, so i decided to post my personal problem.

Brian
  • 127
  • 11
  • If you can, please post a fiddle link. I am not able to use code snippet here. – Dejan Munjiza Oct 24 '15 at 21:45
  • jsfiddle: https://jsfiddle.net/s2qpsase/ – Brian Oct 24 '15 at 21:47
  • 1
    The problem is your absolutely positioned elements are way off centre. Define a maximum width/height for your parent box, then you can horizontally centre align it with a simple `margin-left: auto; margin-right:auto`. Adjust the left+top on the absolutely positioned elements so they fit inside the parent box and you're done. You're also missing a quote on one of the width attributes. – Mike Causer Oct 24 '15 at 22:35
  • Thanks i have fixed my issue now was a little complicated but was no help from the duplicate post so basically no thanks to Paulie_D – Brian Oct 24 '15 at 23:24

0 Answers0