Placing Text Question

[Gadgee]

First up – my understanding of CSS is pretty limited but I have adopted a site which uses it and I need to make a change.

The site is at

http://keepactive.net

and I want to be able to put text over the ‘masthead’.

I have managed to get H1 and H2 working fine and they display the site name and the smaller text beneath but I now wish to add a third type of text which I have called H4 in the attached extract from the CSS file. (I want to use the H4 text to display the photo caption as opposed to having that text as part of the actual image file.)

No matter what I do I just cannot get the H4 text to appear over the masthead in any position. I am probably doing something stupid but just can’t see it.

The relevant bit from the CSS file.

#banner {background-image: url(‘images/topbars/service.jpg’);height:220px;}
#banner h1 {font-family:’trebuchet ms’;font-size:45px;color:#ffffff;}
#banner h2 {font-family:’trebuchet ms’;font-size:15px;color:#ffffff;}
#banner h4 {font-family:’trebuchet ms’;font-size:15px;color:#ffffff;}

body {background:#2d80be;}
.hmenu #nav, #nav a, #blogfloat a {background-color:#ffffff !important;color:#303030 !important;}
#nav a:hover, #nav a.on, #blogfloat a:hover, #blogfloat a.on {background-color:#2972ae !important;color:#f8f2f2 !important;}

#banner h1 {
top:20px;
left:10px;
}

#banner h2 {
top:180px;
left:600px;
}

#banner h4 {
top:10px;
left:20px;
}

Any suggestions will be seized upon!

Thanks in advance

[Shikkediel]

I’m not seeing any h4 element on that page…

[Atelierbram]

I want to use the H4 text to display the photo caption as opposed to having that text as part of the actual image file

In this case having this photo-caption being part of the image might not be such a bad thing, for it has little meaning for when the image isn’t visible (or for visually impaired people depending on screenreaders).

I have managed to get H1 and H2 working fine and they display the site name and the smaller text beneath

They are positioned absolute, but this is not really necessary when you put the image as a background-image in stead of inline.

My fork of your homepage layout

In the demo I did clean up some of the code.

When you use padding and margin to position those h1 and h2 elements, then maybe you can use absolute positioning to style the h4, if you really think this is needed. As I wrote before, I think it’s fine having it as part of the image.

But maybe you can do something like:

<h4><span class="visuallyhidden">Inverness Men's Shed is next to</span> Kessock Bridge</h4>

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

[Gadgee]

Many apologies – I was playing around with the css file on my local server.

Have now uploaded the current css file and some text in the banner H4 setting to

http://keepactive.net

(I can see a bit of the test text in the bottom left hand corner!)

Thanks for your interest and help.

John Tuach

[Gadgee]

Thanks for that – I will try and work through your suggestion as soon as I can.

I am always amazed how folk are always ready to help with questions such as mine. Just feel a bit guilty knowing that the chances of me being able to reciprocate are near nil.

If anybody has any questions regarding golf coaching or fly fishing for trout in Scotland then I might be able to help!

Thanks again.

Regards

John Tuach

[Shikkediel]

As it currently stands, the style for h4 would just need an additional position: absolute…

[Gadgee]

Many thanks for that – does just what I need.

(It does raise the question as to why H1 and H2 do not have position: absolute and can be placed anywhere but like so many other questions, probably best not to ask!

[Gadgee]

Just to say thank you for your time and suggestion.

As you can see, another poster has suggested “position: absolute” and that seems to work.

Right now I just want to get the site finished so will use it but have copied your CSS so that I can play about with it when time permits. I do like the look and feel you have given the site.

[Shikkediel]

Glad that worked. The other text elements also have absolute positioning but that is defined in another stylesheet, namely sp2.css. Any positioning would not have worked if it were left to the default static property.

[Author]

Posts