PDA

View Full Version : Set the style sheet to accomodate any length of text



effpeetee
Jul 5th, 2009, 09:42 PM
This site here (http://exitfegs.co.uk/three.html) has the relevant style sheet in the head section for convenience. I want to set it so that it will accomodate any length of text. All my machinations, too numerous to catalogue, have not succeeded.

The help of an intelligent, kind and responsive genius will be rewarded with a nice warm glow for helping a doddering old fogey fullfill his dreams.

Cor! did I write all that tripe.:eek:

Hopefully,:thumbsup:

Frank alias effpeetee

Things are more like they are now than they ever were before. - Dwight D. Eisenhower.

_Aerospace_Eng_
Jul 6th, 2009, 03:28 AM
I'm not sure what you are wanting to do. Did you want the gray box to be around the text?

Kodah
Jul 6th, 2009, 05:44 AM
One quick solution, if the problem is like _Aerospace_eng_ has suggested, the grey box, would be to insert a couple of line breaks (<br />) after your <h1> and <h6> headings. If that is indeed the problem, it's caused by the absolute positioning of your headings. The container <div class="post_title">, where the headings are, is collapsed.

bazz
Jul 6th, 2009, 08:09 AM
not tested but, I would begin by removing the absolute positioning from both headings.

bazz

Kodah
Jul 7th, 2009, 11:44 PM
yeah that should work as long as you use relative positioning with negative values to maintain the dropshadow effect.

poor little forgotten bears :~{

effpeetee
Jul 8th, 2009, 04:52 PM
Aero., Kodah and Bazz.
I'm not sure what you are wanting to do. Did you want the gray box to be around the text?
Yes, as long as it is tidy and centered I am not too fussy about it. I just do not want to keep having to adjust it . I will make the text to fit in with the box.

I will try making it all relative.

EDIT: Doesn't work. The problem is that the shadow on the text is a separate item and has to be accurately placed relative to the main text.

I will probably just make bmp's of them. That should solve the problem.

Know of any good programs for that.

Frank.

SB65
Jul 8th, 2009, 06:28 PM
Hi Frank

How about nesting a span tag within a p tag and positioning the span absolutely on top of the p? If that makes sense..

Then the p doesn't need to be positioned absolutely so the grey background extends around it.

So your .post_title html needs to change to:



<div class="post_title">
<p>Little Ted is the Koala. Our other friend is Dmitri.<span>Little Ted is the Koala. Our other friend is Dmitri. </span></p>
</div>

with css amended to:


.post_title p {
position:relative;
top:0px;
left:0px;
font-size:30px;
color:#555555;
padding:0;
margin:0;
text-align:left
}

.post_title p span {
position:absolute;
top:-3px;
left:-3px;
font-size:30px;
color:#FFAA00;
padding:0;
margin:0;
}

Kodah
Jul 8th, 2009, 06:36 PM
Set your foreground text relative, set the shadow text absolute. In the correct read order this should work the way you want it to. In the wrong order you can use z-index to layer correctly. Nearly the same as above...doh!

effpeetee
Jul 8th, 2009, 08:57 PM
This is the result. (http://exitfegs.co.uk/three.html)

I still need to centre it. Probably try a wrapper around it. Thank you all for your help. I had had so much of it that I got totally muddled. I intend to make the style sheets into one.

Thanks again.

Frank