Header CSS

HTML & CSS
1

The default dimensions for a logo graphic within the header of this site: http://clickbasics.com/cawse/ is 187x54 px “or bigger” as the designer says. I have uploaded a test image of the default size, but would like to upload an image that takes up the entire space of the header. What size would that be, and what changes would I need to make to the CSS?

2

I went ahead and added a :bigger header image. Doesn’t look too bad, though I’d like to remove some of the space above and below.

3

You could just remove or reduce all the padding and margins:

.themonic-logo {
[COLOR="#FF0000"]padding: 5px;[/COLOR]
}

.themonic-logo {
[COLOR="#FF0000"]padding: 17px;[/COLOR]
float: left;
[COLOR="#FF0000"]margin: 10px 0;[/COLOR]
}

It’s not a great idea to place text in an mage like that, though. Better to have it as real text.

4

It looks like you’ve adjusted the space now by reducing the padding to 5px.

I would probably have done that logo as an h1 using a Gilder Levin image replacement technique and get some text content into the page as that telephone number and slogan is inaccessible to screen readers and the like.

Edit:

oops beaten by Ralph :slight_smile: