Using CSS instead of an image for logo, how do I...?
Ok so above is an image of pretty much what I'm trying to do. You see how the logo has a solid background behi开发者_如何学Pythonnd it that reaches to the VERY top of the page (so there's no white at the top)... that's what I'm trying to do.
This is my html for that part:
<body>
<div id="wrapper">
<div id="divider">
<h1>NAME / SLOGAN</h1>
<ul class="underlinemenu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SUBSCRIBE</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">LOGIN</a></li>
</ul>
</div> <!-- end divider -->
I'm pretty sure I could just add a image and position it there for the wrapper, so my <h1> logo would be over it, but I think that would be pretty inefficient.
I mean there's just two solid colors, black and white... so couldn't that be done with CSS?
When I tried to do it I ended up with a "block"... not what I wanted. There was still white at the very top. I want it more to be like, say, someone cut a piece out of the paper (where the black is) if that makes sense.
You need to make sure you don't have any padding in the body:
body { padding: 0; }
This will ensure your content goes all the way to the very top of the window.
There is a global whitespace reset:
* {
margin: 0;
padding: 0;
}
The default margins and paddings are removed and you have no unwanted gaps. The only thing to be aware of: you have to style every gap on your site (e.g. for lists , headings, ...).
First of all, check if there is any margins or padding for h1, #divider, #wrapper or body. If so, set it to 0px.
Logo can be done using div with set width/height and background-image properties.
Instead of using <h1>LOGO</h1> for your logo, how about using <span class="logo">LOGO</span>
and put this in your CSS file?
.logo {
margin:0;
padding:0;
background:black;
color:white;
font-size:2em; }
You can add width, height, and display:inline-block too if you want to adjust the logo box size
加载中,请稍侯......
精彩评论