ansaurus

Question

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

Answer 1

+3 A:

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.

Dean Harding 2010-08-05 05:00:55

Stargazer712 2010-08-05 05:04:16

If there's no padding then something like... h1.logo { background-color: #000000; }should work?

MW2000 2010-08-05 05:05:59

@MW2000: correct. @Stargazer712: I wouldn't do `* { margin: 0; padding: 0; }`, I would use a "proper" [CSS reset](http://meyerweb.com/eric/tools/css/reset/) file, since the "*" solution can screw up form controls and the like...

Dean Harding 2010-08-05 05:14:49

I tried that it didn't work :/. I added `body { padding: 0; }` and then used `<h1 style="color: #FFFFFF" class="logo">NAME / SLOGAN</h1>` and `h1.logo {background-color: #000000;}`This is what happened: http://i33.tinypic.com/i5db2t.pngWhen I'm trying to do something more like: http://i34.tinypic.com/2agrvyd.png

MW2000 2010-08-05 05:29:12

Answer 2

A:

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 setted width/height and background-image properties.

the vk 2010-08-05 05:03:16

You mean background-color properties? I don't want to use images.

MW2000 2010-08-05 05:08:27

@MW2000, Well, it is an another way to do this. h1.logo { background-color: #000000; color:#ffffff} will do the trick.

the vk 2010-08-05 05:31:06

Answer 3

+1 A:

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

alopix 2010-08-05 05:12:53

Answer 4

A:

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

KMW 2010-08-06 19:37:15

ouch. sorry, didn't mean to offend anyone

KMW 2010-08-06 20:41:30

ansaurus

tags:

views:

answers:

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

related questions