CODEWITHSUNDEEP
htmlcss
First Nameere Er
First Nameere Er

Reputation: 21

simple html and css assistance

i have a logo called gif.gif, what i am trying to do is position it on the top left corner. At the moment there is a gap, i want no padding or margins.

This is my html and css

CSS

#header, .img 
margin:0px;
padding:0px;

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
    </head>
    <body>
        <div id="header">
            <div class="logo">
                <a href="https://www.google.co.uk"/><img src="gif.gif"/></a>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 86

Answers (4)

edonbajrami
edonbajrami

Reputation: 2206

Add to the body:

body{margin:0px; padding:0px;}

You can eliminate this kind of problems if you use reset.css or normalize.css

Upvotes: 0

bdfios
bdfios

Reputation: 667

Try this:

body
{
margin:0px;
padding:0px;

}

Upvotes: 1

Fabio Kobuti
Fabio Kobuti

Reputation: 34

Try reset your css before your start do anything.

<style type="text/css">
    * {
        margin:0;
        padding:0;
        list-style:none;
        vertical-align:baseline;
    }
</style>

I make a simple test with css reset above and works fine. Just paste before all css in your html file.

Upvotes: 0

user1467267
user1467267

Reputation:

Consider approaching it purely in CSS, like so;

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
        <style>
            html, body {
                margin: 0px;
                padding: 0px;
            }

            #header {
                margin: 0px auto;
                width: 960px;
            }

            .logo {
                display: block;
                width: 200px;
                height: 200px;
                background-image: url('gif.gif');
            }

            .logo:hover {
                /* Some hover styling here */
            }
        </style>
    </head>
    <body>
        <div id="header">
            <a href="https://www.google.co.uk" class="logo"></a>
        </div>
    </body>
</html>

You would make your a tag a block (non-inline). I assumed the size to be 200x200 pixels. You can change that to your liking. The a tag will still maintain it's hyperlink properties, but display differently.

Upvotes: 0

Related Questions