As I work on creating this website based on a tutorial, it's clear that I am still in the learning stages. Unfortunately, the tutorial didn't provide an explanation for the unexpected behavior I'm experiencing.
Here's the CSS code snippet:
@charset "utf-8";
/* CSS Document */
body { font-family: Arial, Helvetica, sans-serif; }
.container
{
width: 800px;
margin: 0 auto;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
#main
{
background: url(images/header.jpg) repeat-x;
}
#main .container
{
background: url(images/shine_04.jpg) no-repeat;
}
#logo
{
background: url(images/logo.png) no-repeat;
height:104px;
width:301px;
}
#logo h1
{
text-indent: -9999px;
margin-top: 40px;
}
The corresponding HTML section is as follows:
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="tagline">
<h3>I Love Stuff</h3>
</div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end header -->
<div id="content">
<h2>Lorem ipsum, Dolor sit</h2>
<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
[...]In my CSS code, the #logo h1 selector aims to position the logo image slightly lower by using margin-top: 40px;. However, rather than just moving the logo, the entire page shifts downwards inexplicably. Despite investing nearly an hour in deciphering the logic behind this issue, I find myself unable to reach a conclusion.
My primary question remains: why does adjusting the logo's positioning affect the whole page layout? What steps should I take to rectify this unexpected behavior?