CODEWITHSUNDEEP
htmlcssmarkup
Mr Jonny Wood
Mr Jonny Wood

Reputation: 3854

css for html markup container for a

This is a bit of a general question but aim for concise html markup with minimal css in my projects and this is something that has bugged me for a long time.

I often use a container element (eg: h1) with a fixed size a link and background image.

EG: Markup: 

<h1 id="branding"><a href="site.com">Brand Name</a></h1>

Css:

h1#branding {
     display:block;
     width:200px;
     height:50px
}

h1#branding a {
     display:block;
     width:200px;
     height:50px;
     text-indent:-999em;
     background-image:url(path/to/img.png) no-repeat 0 0;
}

As you can see I include the fixed size on both h1 and a elements. I do this as I've seen visual issues in the past on some older browsers when I don't give the containing element the width and height values.

I also use this technique for some navigation with a <ul><li><a>..</a></li></ul> structure and have to add dimensions to the ul, li and a elements which makes the CSS repetative and lengthy...

...is there a better way?

Upvotes: 1

Views: 239

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37665

If I understand correctly what you asking, you could assign all the shared properties to one CSS class which the respective elements use:

/* All shared properties */
h1#branding, h1#branding ul, h1#branding li, h1#branding a {
    display:block;
    width:200px;
    height:50px
    background-image:url(path/to/img.png) no-repeat 0 0;
}

/* Individual properties */
h1#branding a {
    text-indent:-999em;
}

Upvotes: 2

Marco Miltenburg
Marco Miltenburg

Reputation: 6138

Why load the image via a background image in your CSS? Why not simply use an <img> tag? I can understand it a bit if you want to make use of CSS sprite images but it seems like you are not doing that (or at least your example code doesn't show it). Using an <img> tag makes using display:block and specifying the width and height twice unnecessary. You then only specify the width and height once for the image itself. E.g.:

<a href="site.com" title="Brand Name"><img src="path/to/img.png" width="200" height="50" alt="Brand Name" /></a>

Surrounding the (what I assume) logo with an <h1> tag is also not the best practice from an SEO point of view. You should reserve the <h1> tag for the page title, not the company or brand name. The only page where this could be done is the homepage but even there I would not do it.

If you want to stick with using CSS background images and a <h1> tag around the logo then your CSS code is indeed correct.

Upvotes: 1

Related Questions