CODEWITHSUNDEEP
htmlcss
Call Me Dummy
Call Me Dummy

Reputation: 55

Unable to position HTML elements using CSS

I am trying to make a webpage, but I am having trouble positioning certain HTML elements using CSS. Below is the code I wrote:

<!DOCTYPE html> 
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "description" content = "This is the homepage of this website">
        <title>Home</title>
        <style>
            body{margin-top: 0px; background-color: #FBFBFB;}
            .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; }
            .header img{float: left; padding: 5px; background-color: orange;}
            .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; letter-spacing: 1.2px; background-color: pink;}
            .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; top: 0px; left: 70px; background-color: lime;}
        </style>
    </head>
    <body>
        <div class = "container" >
            <div class = "header">
                <img src = "a.png" alt = "logo" width = "100" height = "100"></img>
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
            </div>
        </div>
    </body>
</html>

This is the output I am getting

enter image description here

I want to take the tagline part closer to the Website name, I tried changing padding and margin to 0px but no luck. How can I do this ? Further If I introduce border like this 

.header{border: 1px solid black;}

It takes the image to the top as shown in the below screenshot enter image description here

Why is this happening ?

Upvotes: 1

Views: 367

Answers (4)

Pete
Pete

Reputation: 58432

you need to remove the margin from the .header h1 tag - instead of your margin-left:100px; try margin: 0 0 0 100px. Also some browsers put top margin onto p tags so you may want to reset that margin too.

You can't add padding or background-color to your image tag

If you have chrome, try using the inbuilt dom inspector (right click and inspect element), it will show you what is happening with your elements

I would personally restructure your html so it looks like this:

    <div class = "container" >
        <div class = "header">
            <div class="imageHolder"><img src = "http://lorempixel.com/100/100" alt = "logo" /></div>
            <div class="textHolder">
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
            </div>
        </div>
    </div>

and then you can use the following styles:

body{margin-top: 0px; background-color: #FBFBFB;}
.container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; }
.header .imageHolder {float: left; width:110px; background-color: orange;}
.header .imageHolder img {margin:5px;}
.header .textHolder {float:right; width:1090px;}
.header h1{font-size: 40px; font-family: "lucida console"; letter-spacing: 1.2px; background-color: pink; margin:0;}
.header p {margin:0; color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; background-color: lime; margin-left:-30px; width:1120px;}

http://jsfiddle.net/peteng/XJVW3/

Upvotes: 2

sAnS
sAnS

Reputation: 1163

Try this your image have width 100px and padding 5+5 so try adding left 110px instead of 70px ... edit

add margin-top: 0px; header p and .header h1 margin-bottom: 0px; to make remove the space between p and h1

<!DOCTYPE html> 
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "description" content = "This is the homepage of this website">
        <title>Home</title>
        <style>
            body{margin-top: 0px; background-color: #FBFBFB;}
            .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; }
            .header img{float: left; padding: 5px; background-color: orange;}
            .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; margin-bottom:0px; letter-spacing: 1.2px; background-color: pink;margin-bottom: 0px;}
            .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px;  top: 0px; margin-left: 110px; background-color: lime;margin-top: 0px;}
        </style>
    </head>
    <body>
        <div class = "container" >
            <div class = "header">
                <img src = "a.png" alt = "logo" width = "100" height = "100"></img>
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

abhishekgarg
abhishekgarg

Reputation: 1473

try this!!

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "description" content = "This is the homepage of this website">
        <title>Home</title>
        <style>
            body{margin-top: 0px; background-color: #FBFBFB;}
            .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; }
            .header img{float: left; padding: 5px; background-color: orange;}
            .header h1{font-size: 40px; font-family: "lucida console"; letter-spacing: 1.2px; background-color: pink;}
            .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; background-color: lime;}
        </style>
    </head>
    <body>
        <div class = "container" >
            <div class = "header"">
                <img src = "http://thecontentwrangler.com/wp-content/uploads/2011/08/User.png" alt = "logo" width = "100" height = "100"></img>
                <div>
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

ASGM
ASGM

Reputation: 11381

Both the <h1> and the <p> have margins by default which could cause the space you see to appear. Adding this CSS should fix it:

.header h1 {margin:0 0 0 100px;}
.header p {margin:0;}

The border altering the position of the elements is a separate question, and is due to something called "margin collapsing" which the answer to this question elsewhere on StackOverflow already explains well: Adding CSS border changes positioning in HTML5 webpage.

The solution to this is to add top padding to the .header element to compensate for the collapsed margins:

.header {padding-top:30px;}

Upvotes: 2

Related Questions