Member Avatar for shiinko

Hello !
I'm new to Web Developing, and I'm trying to make rather simple template. By following this tutorial, first part of it (top extendable header and background) went ok, but the second part (adding top, centered logo) is not placed correctly- it's placed a little downwards and probably a little towards right.

You can see what I mean by watching this from set point:
http://www.youtube.com/watch?v=aU5VpTWNczU&feature=player_detailpage#t=473s

You can see my outcome here:
http://oi45.tinypic.com/s3eryv.jpg
Red should fit together and blue logo should fit on black header.

Outcome with header removed:
http://oi46.tinypic.com/wgya0.jpg
As you can see top red should stick to the top. If I remove centering that "border" also persists in any corner of page.

style.css:

body{

    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
    background: url(../images/Header.png) repeat-x top #003300;

}

#nav{

    height: 256px; width: 743px;
    margin: 0 auto;
    background: url(../images/Logo.png) no-repeat;

}

index.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" style="text/css" href="css/style.css" />
<title>Website</title>



</head>
<body>

<div id="nav"></div>


</body>
</html>

I'm beginner to CSS and HTML, I couldn't continue my work without knowing that. If there are better methods for headers like this or navigation bars on top, please let me know.

Thanks in advance !

  • 3 Contributors
  • 3 Replies
  • 227 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ObSys
Member Avatar for shiinko

Problem fixed, friend suggested me to use margin-top: 0; on body, which worked.

Member Avatar for JorgeM

I generally like to create a "wrapper" div. So all of your HTML will be within this wrapper. then you can apply a style to this wrapper such as a width so I can easily center it, or a margin on top, etc...

Member Avatar for ObSys

Shiinko if your new to web development, I would recommend reading about liquid layouts. A key feature for most web pages and it will help you with positioning problems etc.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.