CODEWITHSUNDEEP
htmlcss
E S
E S

Reputation: 358

Center mutliple divs and a IMG

I'm creating a site and now if i want to center multiple divs in a row it does center at the resolution 1920 x 1080 but it doesnt at a smaller 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's </p></div>
</a>
    <a href='index.php'>   

<img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
</a>

I already have tried to replace the margin with auto but that doesnt work...

Upvotes: 3

Views: 45

Answers (1)

Tony Ray Tansley
Tony Ray Tansley

Reputation: 669

I would advise using a framework such as http://getbootstrap.com/ or http://foundation.zurb.com/docs/. These give you the ability to work to a grid system quickly and easily, and you can dictate what size you want your starting widths to be etc. In zurb for example it would look something like.

<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's </p></div>
            </a>
            <a href='index.php'>   
                <img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
            </a>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions