Center mutliple divs and IMG
I am creating a site and now if I want to center multiple divs in a row, it is centered at 1920 x 1080 resolution, but it does not have a lower resolution ... pls help ... here is my code:
<style>
p {color:white; font-size: 150%; font-family: verdana; margin-top: 7.5%; }
body {margin:0 auto; padding:0; }
a {text-decoration: none}
div { background-color:blue; position:absolute;padding:0; margin:0; text-align: center; }
img {position:absolute;padding:0; margin:0;}
div:hover {background-color: f900fe}
#logo { float:right; margin:0 auto; padding:0; position:absolute;left:25.9%; margin-left:-95px; width:200px; height:56px; margin-top:0%; min-height:56px; max-height:56px ; min-width: 56px; max-width: 56px}
#home { float:right;margin:0 auto; padding:0;position:absolute;left:25.9%; margin-left:-39px; width:200px; height:6%; margin-top:0%; min-height:56px; max-height: 56px; min-width:10.42%;}
#video { float:right;margin:0 auto; padding:0; position:absolute;left:25.9%; margin-left:158px; width:200px; height:6%; margin-top:0%; min-height:56px; max-height: 56px; min-width:10.42%;}
#contact { float:right;margin:0 auto; padding:0;position:absolute;left:25.8% ; margin-left:358px; width:200px; height:6%; margin-top:0%; min-height:56px; max-height: 56px; min-width:10.42%}
</style>
<a href='index.php'>
<div id='home' title='Ga naar de homepage'>
<p> <strong> Home </P>
</div>
</a>
<a href='Contact/index.php'>
<div id='contact' title='Neem contact met ons op'>
<p> <strong> Contact </p>
</div>
</a>
<div id='Video' title="Bekijk onze video's!">
<a href='video/index.php'>
<p> <strong> Video </p></div>
</a>
<a href='index.php'>
<img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
</a>
I already tried to replace the auto margin, but it doesn't work ...
+3
source to share
1 answer
I would suggest using a framework like http://getbootstrap.com/ or http://foundation.zurb.com/docs/ . This gives you the ability to quickly and easily work with the grid, and you can define what size you want the starting width to be. In zurb, for example, it would look like something.
<div class="row">
<div class="large-4 columns">
<a href='index.php'>
<div id='home' title='Ga naar de homepage'>
<p> <strong> Home </P>
</div>
</a>
</div>
<div class="large-4 columns">
<a href='Contact/index.php'>
<div id='contact' title='Neem contact met ons op'>
<p> <strong> Contact </p>
</div>
</a>
</div>
<div class="large-4 columns">
<div id='Video' title="Bekijk onze video's!">
<a href='video/index.php'>
<p> <strong> Video </p></div>
</a>
<a href='index.php'>
<img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
</a>
</div>
</div>
</div>
+1
source to share