«

Have uploaded my latest site to www.aisholt.org Bear in mind this is a
charitable and amateur effort. I used the lightweight CMS ' Pluck'
because it doesn't require mySQL so the site will work on the 10Mb free
webspace I got for registering the domain - no hosting charge. I heavily
edited and adapted a free theme from another user. Still have to add a
page or two but there are two things I can't get right:

1. The Gold lettering on the right of each page, the other text
doesn't wrap around it properly. I made a new div called it 'content'
and put the following in the css:

#content {
position: relative;
top: -70px;
float: right;
width: 300px;
margin-left: 10px;
margin-right: 10px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 26px;
text-align: center;
color: #8C7858;
}

But the main text seems to wrap around the empty space below 'content'
after it was moved up 70px. Is this normal behaviour? How should I have
done it?

2. This must be basic. I wanted the Item in the nav menu along the
top which is currently selected to be red to match the page title below
the header picture, so if you are on the page 'Services' services is
Red. Can't seem to do that with the css. Probably easy.

Thanks,

Tim w

In article <jgp7r9$tgh$>,
Tim W <> wrote:

> www.aisholt.org... two things I can't get right:
>
> 1. The Gold lettering on the right of each page, the other text
> doesn't wrap around it properly.

Get rid of

position: relative;
top: -70px;

>
> 2. This must be basic. I wanted the Item in the nav menu along the
> top which is currently selected to be red to match the page title below
> the header picture, so if you are on the page 'Services' services is
> Red. Can't seem to do that with the css. Probably easy.

Change

#menu a {color: #B1B5B8;

to

#menu a {color: #914042;

--
dorayme

Tim W <> writes:

> Have uploaded my latest site to www.aisholt.org Bear in mind this is a
> charitable and amateur effort. I used the lightweight CMS ' Pluck'
> because it doesn't require mySQL so the site will work on the 10Mb
> free webspace I got for registering the domain - no hosting charge. I
> heavily edited and adapted a free theme from another user. Still have
> to add a page or two but there are two things I can't get right:
>
> 1. The Gold lettering on the right of each page, the other text
> doesn't wrap around it properly. I made a new div called it 'content'
> and put the following in the css:
>
> #content {
> position: relative;
> top: -70px;
> float: right;
> width: 300px;
> margin-left: 10px;
> margin-right: 10px;
> padding: 0px;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 26px;
> text-align: center;
> color: #8C7858;
> }
>
> But the main text seems to wrap around the empty space below 'content'
> after it was moved up 70px. Is this normal behaviour? How should I
> have done it?

Yes, that's normal. Relative positioning does not alter the flow. As
for fixing it, there's a lot of options but they are all "fragile". For
example, you could lie about the image height, let it overflow its
container, and add a top margin to the text you *don't* want to appear
higher up (i.e. the page title). I'd be inclined not to bother.

> 2. This must be basic. I wanted the Item in the nav menu along the
> top which is currently selected to be red to match the page title
> below the header picture, so if you are on the page 'Services'
> services is Red. Can't seem to do that with the css. Probably easy.

The CMS gives the currently selected menu item the ID "active" so you
can select it with:

#menu #active a { color: ... }

I've written it like that (with the seemingly redundant #menu selector)
so that this rule will have very high specificity. If I hadn't you'd
have work out how all the rules setting menu item colours interact. If
you can do that, then go ahead and make the rule simpler: having rules
with very high specificity tends to make style sheets very inflexible.

--
Ben.

On 06/02/2012 20:20, dorayme wrote:
> In article<jgp7r9$tgh$>,
> Tim W<> wrote:
>
>> www.aisholt.org... two things I can't get right:
>>
>> 1. The Gold lettering on the right of each page, the other text
>> doesn't wrap around it properly.
> Get rid of
>
> position: relative;
> top: -70px;
>
>> 2. This must be basic. I wanted the Item in the nav menu along the
>> top which is currently selected to be red to match the page title below
>> the header picture, so if you are on the page 'Services' services is
>> Red. Can't seem to do that with the css. Probably easy.
> Change
>
> #menu a {color: #B1B5B8;
>
> to
>
> #menu a {color: #914042;
>
Ha, Ha, very funny. I know just, just enough to know that you are taking
the ****.

Tim w

On 06/02/2012 21:11, Ben Bacarisse wrote:
> Tim W<> writes:
>
>> Have uploaded my latest site to www.aisholt.org Bear in mind this is a
>> charitable and amateur effort. I used the lightweight CMS ' Pluck'
>> because it doesn't require mySQL so the site will work on the 10Mb
>> free webspace I got for registering the domain - no hosting charge. I
>> heavily edited and adapted a free theme from another user. Still have
>> to add a page or two but there are two things I can't get right:
>>
>> 1. The Gold lettering on the right of each page, the other text
>> doesn't wrap around it properly. I made a new div called it 'content'
>> and put the following in the css:
>>
>> #content {
>> position: relative;
>> top: -70px;
>> float: right;
>> width: 300px;
>> margin-left: 10px;
>> margin-right: 10px;
>> padding: 0px;
>> font-family: Georgia, "Times New Roman", Times, serif;
>> font-size: 26px;
>> text-align: center;
>> color: #8C7858;
>> }
>>
>> But the main text seems to wrap around the empty space below 'content'
>> after it was moved up 70px. Is this normal behaviour? How should I
>> have done it?
> Yes, that's normal. Relative positioning does not alter the flow. As
> for fixing it, there's a lot of options but they are all "fragile". For
> example, you could lie about the image height, let it overflow its
> container, and add a top margin to the text you *don't* want to appear
> higher up (i.e. the page title). I'd be inclined not to bother.

I wondered if there might be nothing actually wrong.
>
>> 2. This must be basic. I wanted the Item in the nav menu along the
>> top which is currently selected to be red to match the page title
>> below the header picture, so if you are on the page 'Services'
>> services is Red. Can't seem to do that with the css. Probably easy.
> The CMS gives the currently selected menu item the ID "active" so you
> can select it with:
>
> #menu #active a { color: ... }
>
> I've written it like that (with the seemingly redundant #menu selector)
> so that this rule will have very high specificity. If I hadn't you'd
> have work out how all the rules setting menu item colours interact. If
> you can do that, then go ahead and make the rule simpler: having rules
> with very high specificity tends to make style sheets very inflexible.
Excellent, thanks, fixed it now with your help. Funny I had attempted
that but got it a bit different and the color changed only while the
mouse button was actually down. Not sure I know what was going on there
but now definitely right.

Tim W

Tim W <> writes:

> On 06/02/2012 20:20, dorayme wrote:
>> In article<jgp7r9$tgh$>,
>> Tim W<> wrote:
>>
>>> www.aisholt.org... two things I can't get right:
>>>
>>> 1. The Gold lettering on the right of each page, the other text
>>> doesn't wrap around it properly.
>> Get rid of
>>
>> position: relative;
>> top: -70px;
>>
>>> 2. This must be basic. I wanted the Item in the nav menu along the
>>> top which is currently selected to be red to match the page title below
>>> the header picture, so if you are on the page 'Services' services is
>>> Red. Can't seem to do that with the css. Probably easy.
>> Change
>>
>> #menu a {color: #B1B5B8;
>>
>> to
>>
>> #menu a {color: #914042;
>>
> Ha, Ha, very funny. I know just, just enough to know that you are
> taking the ****.

That's very unlikely given what I've seen of dorayme's posts.

--
Ben.

In article
<0.a3d96870108af868e3b3.20120206211158GMT.87fwenis >,
Ben Bacarisse <> wrote:

> Tim W <> writes:
>
> > www.aisholt.org ... two things I can't get right:
> >
> > 1. The Gold lettering on the right of each page, the other text
> > doesn't wrap around it properly.

On the home page, for example, presumably Tim is wanting the text "To
the Anglican Parish Church of Aisholt, Somerset,...country church." to
go under the "O Lord..." where there *seems* to be room.

> > I made a new div called it 'content'
> > and put the following in the css:
> >
> > #content {
> > position: relative;
> > top: -70px;
> > float: right;
> > width: 300px;
> > margin-left: 10px;
> > margin-right: 10px;
> > padding: 0px;
> > font-family: Georgia, "Times New Roman", Times, serif;
> > font-size: 26px;
> > text-align: center;
> > color: #8C7858;
> > }
> >
> > But the main text seems to wrap around the empty space below 'content'
> > after it was moved up 70px. Is this normal behaviour? How should I
> > have done it?
>
> Yes, that's normal. Relative positioning does not alter the flow. As
> for fixing it, there's a lot of options but they are all "fragile". For
> example, you could lie about the image height, let it overflow its
> container, and add a top margin to the text you *don't* want to appear
> higher up (i.e. the page title). I'd be inclined not to bother.
>

I agree. You could perhaps alter the html and have the gold abs
positioned relative to the div the bg pic is in. This would involve
scrubbing your

<div id="content">
<p>O Lord Open Thou Our Lips<br>And Our Mouth Shall Show forth Thy
Praise</p>
</div>

altogether and associated css and doing the equivalent of:


<div id="logo" style="position: relative;">
<h1>All Saints Church Aisholt</h1>
<p style="position: absolute; bottom: -1em; right:0;font-size: 1.2em;
padding: 0; width: 15em; text-align: left;">O Lord Open Thou Our
Lips<br>And Our Mouth Shall Show forth Thy Praise</p>
</div>

Just a thought. It places the psalmic words pretty well where they are
intended to be for most folk, and is simpler and does not interfere
with the text below. I removed centre aligning but that is my taste.

btw:

* The footer is too small to read when all else is comfortable.

* Best to use em or % for font-size rather than px.

* Consider marking up the services dates as a UL

--
dorayme

On 07/02/2012 02:10, dorayme wrote:
> In article<jgpo5j$s5j$>,
> Tim W<> wrote:
>
>> On 06/02/2012 20:20, dorayme wrote:
>>> In article<jgp7r9$tgh$>,
>>> Tim W<> wrote:
>>>
>>>> www.aisholt.org... two things I can't get right:
>>>>
>>>> 1. The Gold lettering on the right of each page, the other text
>>>> doesn't wrap around it properly.
>>> Get rid of
>>>
>>> position: relative;
>>> top: -70px;
>>>
>>>> 2. This must be basic. I wanted the Item in the nav menu along the
>>>> top which is currently selected to be red to match the page title below
>>>> the header picture, so if you are on the page 'Services' services is
>>>> Red. Can't seem to do that with the css. Probably easy.
>>> Change
>>>
>>> #menu a {color: #B1B5B8;
>>>
>>> to
>>>
>>> #menu a {color: #914042;
>>>
>> Ha, Ha, very funny. I know just, just enough to know that you are taking
>> the ****.
> Actually, no, Tim. I might have got it wrong but not my style to do
> this to you. Just thought you overlooked a colour style and wanted all
> to be red in the menu. Sorry.
>
> Is it that whatever page you are on, the menu item referring to the
> page you are on should be red? This is what I have done for such
> things:
>
> * At the top of the document for say the home page:
>
> <?php $thisPage="index"; ?>
>
> * In an includes (or you can just have the menu html in full in each
> doc) something like:
>
> <ul>
>
> <li<?php if ($thisPage=="index") echo " id=\"currentpage\""; ?>"><a
> href="index.php">Home</a></li>
>
> ...
>
> </ul>
>
> The style for this being something like
>
> #currentpage a {
> color: #c00;
> background: ...;
> text-decoration: underline;
> }
>
> If you don't want to be so auto, you can simply relocate the id to the
> current menu item in the nav list on each page and not use php. On a
> Mac, select and drag!
>
> Anyway, I hope this does not misunderstand you again? At least about
> the colour question?
>

My mistake then. Sincere apologies. Your help is greatly valued.

Tim w

On 07/02/2012 04:12, dorayme wrote:
> In article
> <0.a3d96870108af868e3b3.20120206211158GMT.87fwenis >,
> Ben Bacarisse<> wrote:
>
>> Tim W<> writes:
>>
>>> www.aisholt.org ... two things I can't get right:
>>>
>>> 1. The Gold lettering on the right of each page, the other text
>>> doesn't wrap around it properly.
> On the home page, for example, presumably Tim is wanting the text "To
> the Anglican Parish Church of Aisholt, Somerset,...country church." to
> go under the "O Lord..." where there *seems* to be room.
Exactly that.
>>> I made a new div called it 'content'
>>> and put the following in the css:
>>>
>>> #content {
>>> position: relative;
>>> top: -70px;
>>> float: right;
>>> width: 300px;
>>> margin-left: 10px;
>>> margin-right: 10px;
>>> padding: 0px;
>>> font-family: Georgia, "Times New Roman", Times, serif;
>>> font-size: 26px;
>>> text-align: center;
>>> color: #8C7858;
>>> }
>>>
>>> But the main text seems to wrap around the empty space below 'content'
>>> after it was moved up 70px. Is this normal behaviour? How should I
>>> have done it?
>> Yes, that's normal. Relative positioning does not alter the flow. As
>> for fixing it, there's a lot of options but they are all "fragile". For
>> example, you could lie about the image height, let it overflow its
>> container, and add a top margin to the text you *don't* want to appear
>> higher up (i.e. the page title). I'd be inclined not to bother.
>>
>
> I agree. You could perhaps alter the html and have the gold abs
> positioned relative to the div the bg pic is in. This would involve
> scrubbing your
>
> <div id="content">
> <p>O Lord Open Thou Our Lips<br>And Our Mouth Shall Show forth Thy
> Praise</p>
> </div>
>
> altogether and associated css and doing the equivalent of:
>
>
> <div id="logo" style="position: relative;">
> <h1>All Saints Church Aisholt</h1>
> <p style="position: absolute; bottom: -1em; right:0;font-size: 1.2em;
> padding: 0; width: 15em; text-align: left;">O Lord Open Thou Our
> Lips<br>And Our Mouth Shall Show forth Thy Praise</p>
> </div>
>
> Just a thought. It places the psalmic words pretty well where they are
> intended to be for most folk, and is simpler and does not interfere
> with the text below. I removed centre aligning but that is my taste.
Thanks. I will take a look at that when I have some time later.
>
> btw:
>
> * The footer is too small to read when all else is comfortable.
Okay, Yes.
> * Best to use em or % for font-size rather than px.
I sort of knew that but I didn't write the theme from scratch and just
left that as it was. The theme started life at www.freecsstemplates.org
, was turned into a theme by someone else and then butchered by me for
my own use.
>
> * Consider marking up the services dates as a UL
You will have to explain that. Do you mean ul instead of a table?

Thanks,

Tium W

In article <jgqrq4$gjo$>,
Tim W <> wrote:

> On 07/02/2012 02:10, dorayme wrote:
....
> >
> > Is it that whatever page you are on, the menu item referring to the
> > page you are on should be red? This is what I have done for such
> > things:
> >
> > * At the top of the document for say the home page:
> >
> > <?php $thisPage="index"; ?>
> >
....
> >
> > Anyway, I hope this does not misunderstand you again? At least about
> > the colour question?
> >
>

I noted later that you had solved this problem with Ben B's help.
Excellent.

Been a bit distracted with work today, my clients simply do not
understand the pressures of usenet and if they want changes to their
sites or to artwork I try to startle and amaze them with my promptness
so that they have vivid *memories of their resulting feelings of
satisfaction* to counter any possible pain they feel when I finally
get around to billing them - not that I am that expensive, mind you,
but if they are anything like me, paying anyone anything for anything
hurts a lot... shopkeepers around here know to administer valium to
force me to let go of notes bigger than $20, my fingers seem not to
want to let go, it is so embarrassing!

--
dorayme