CODEWITHSUNDEEP
htmlcss
MW2000
MW2000

Reputation: 593

Using CSS instead of an image for logo, how do I...?

alt text

Ok so above is an image of pretty much what I'm trying to do. You see how the logo has a solid background behind 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.

Upvotes: 1

Views: 254

Answers (4)

Andrew Maraev
Andrew Maraev

Reputation: 17

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.

Upvotes: 1

KMW
KMW

Reputation: 109

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

Upvotes: 0

dst
dst

Reputation: 1788

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, ...).

Upvotes: 1

Dean Harding
Dean Harding

Reputation: 72658

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.

Upvotes: 3

Related Questions