Shadow effect with relative positioning

**Barbara de Zoete** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

On Tue, 4 Jan 2005 16:15:32 -0000, Nik Thomas <nik.thomas> wrote:
[color=blue]
> www.loyalwatcher.com/cssindex4.htm[/color]

No answer to your question, but go see
<http://home.wanadoo.nl/b.de.zoete/_test/loyalwatcher.pn g>. See how the menu on
the left side of your page drops to below all other content? Is this how you
want the page to be?

(WinXP Opera7.54)

--
,-- --<--@ ---- PretLetters: 'woest wyf', met vele interesses: -----------.
| weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html> |
| webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html > |
| zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html> |
`----------------------------------------------------- --<--@ ------------'

**Spartanicus** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

"Nik Thomas" <nik.thomas> wrote:
[color=blue]
>I have used the index page at www.loyalwatcher.com/cssindex4.htm to try and
>work through as many issues as possible before converting the rest of the
>site. This page validates as html 4.01 strict and the CSS at
>www.loyalwatcher.com/main.css passes the W3C validator.
>
>When testing the page using Dan Vine's Safari Emulator, the shadowed text
>appears in two lines, and the colours aren't as suggested. Is this method
>not reliable (and is there an alternative), or do I just need to tweak my
>CSS?[/color]

Creating a shadow effect this way is silly, it requires 2 content
instances of "Loyal Watcher". Use an image for fancy headers, provide
the text as alt content, and wrap it in an appropriate header markup.
Using 2 h1's is rarely proper markup.
[color=blue]
>Any comments on html/CSS structure or site design also welcomed.[/color]

The way you used immediately followed the h1's with an h2 is imo bad
form, the h2 content belongs in the h1.

The header div seems superfluous, style the h1 instead.

The new page falls apart in Opera, the blue background doesn't look good
imo, the yellow/white on white text in the webring box is impossible to
read.

Specifying a windows charset is not very nice.

--
Spartanicus

**Nik Thomas** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

Spartanicus.exe failed a Turing test with
[color=blue]
>
> Creating a shadow effect this way is silly, it requires 2 content
> instances of "Loyal Watcher". Use an image for fancy headers, provide
> the text as alt content, and wrap it in an appropriate header markup.
> Using 2 h1's is rarely proper markup.[/color]

Noted.[color=blue]
>[color=green]
>> Any comments on html/CSS structure or site design also welcomed.[/color]
>
> The way you used immediately followed the h1's with an h2 is imo bad
> form, the h2 content belongs in the h1.[/color]

Noted.[color=blue]
>
> The header div seems superfluous, style the h1 instead.[/color]

Okay - I think it's probably from an earlier test where I had
<Header><Nav><C ontent>. I'll look at that.[color=blue]
>
> The new page falls apart in Opera,[/color]

Nuts. This is a bit of a lunchtime-at-work hobby and I can't install any
other browsers (NN4.6 is helpfully provided in addition to IE5.5). I'd
hoped to avoid any issues by having a relatively simple structure and using
valid html. Is the reason for this one that you can explain to me easily?
[color=blue]
> the blue background doesn't look
> good imo, the yellow/white on white text in the webring box is
> impossible to read.[/color]

Hmm, I'm seeing Navy on Gray, which is what I had intended. Any ideas why
this might be?
[color=blue]
>
> Specifying a windows charset is not very nice.[/color]

Noted. A quick google suggests ISO-8859-1 might be better?

--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

**Nik Thomas** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

Barbara de Zoete.exe failed a Turing test with
[color=blue]
> See how
> the menu on the left side of your page drops to below all other
> content? Is this how you want the page to be?[/color]

No, I'd rather hoped to have the navigation and content side-by-side. :-(

Is this to do with IE and Opera interpreting the

div.Leftnav {
position:absolu te;
left:1em;
top:10px;
}

to be with reference to different 'absolute' reference points? If it is,
changing the order to <LeftNav><Heade r><Main> should sort it out, but leaves
the source-ordering screwy?

Nik
--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

**Gus Richter** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

Nik Thomas wrote:[color=blue]
> When testing the page using Dan Vine's Safari Emulator, the shadowed text
> appears in two lines, and the colours aren't as suggested. Is this method
> not reliable (and is there an alternative), or do I just need to tweak my
> CSS?[/color]

Technically speaking: The colors look ok to me. I suggest that you place
your Drop Shadow within a relatively positioned wrapper and place your
two items (z-index is not needed) absolutely within the wrapper this way
with values to your liking:

..wrapper {position:relat ive;top:20px;he ight:70px;text-align:center;}
..titleshadow {position:absol ute;top:4px;lef t:3px;color:#99 2222;width:100% ;}
..title {position:absol ute;top:0;left: 0;color:white;w idth:100%;}

<div class=wrapper>
<div class="titlesha dow"><h1>Loyal Watcher</h1></div>
<div class="title">< h1>Loyal Watcher</h1></div>
</div>

And place the following item separately next:
<h2 class="center"> The Magazine of CURNU Alumni Society</h2>
With this in your stylesheet:
..center {text-align:center;}

You also have to fix up a lot more on the site.

--
Gus

**Spartanicus** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

"Nik Thomas" <nik.thomas> wrote:
[color=blue][color=green]
>> The new page falls apart in Opera,[/color]
>
>Nuts. This is a bit of a lunchtime-at-work hobby and I can't install any
>other browsers (NN4.6 is helpfully provided in addition to IE5.5). I'd
>hoped to avoid any issues by having a relatively simple structure and using
>valid html. Is the reason for this one that you can explain to me easily?[/color]

Case, LeftNav in the html, Leftnav in the css.
[color=blue][color=green]
>> the blue background doesn't look
>> good imo, the yellow/white on white text in the webring box is
>> impossible to read.[/color]
>
>Hmm, I'm seeing Navy on Gray, which is what I had intended. Any ideas why
>this might be?[/color]

Untested: check class case?
[color=blue][color=green]
>> Specifying a windows charset is not very nice.[/color]
>
>Noted. A quick google suggests ISO-8859-1 might be better?[/color]

Should be fine.

--
Spartanicus

**Nik Thomas** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

Gus Richter.exe failed a Turing test with
[color=blue]
>
> You also have to fix up a lot more on the site.[/color]

Thanks, Gus. Do you mean there are major issues with the cssindex4 page, or
within the rest of the site? If the latter, then yes, there's plenty to
keep me busy.

Nik

--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

**Nik Thomas** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

Spartanicus.exe failed a Turing test with
[color=blue][color=green]
>>Is the reason for this one
>> that you can explain to me easily?[/color]
>
> Case, LeftNav in the html, Leftnav in the css.
>[/color]

Thank you, I'd forgotten that was a requirement.
[color=blue][color=green][color=darkred]
>>> the blue background doesn't look
>>> good imo, the yellow/white on white text in the webring box is
>>> impossible to read.[/color]
>>
>> Hmm, I'm seeing Navy on Gray, which is what I had intended. Any
>> ideas why this might be?[/color]
>
> Untested: check class case?[/color]

The main class elements are okay, but there are a number of case issues to
resolve in the css, so I'll sort these out and see if it fixes anything.

Thanks for you time.

Nik
--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

**Gus Richter** · Jul 21 '05, 12:44 AM

Re: Shadow effect with relative positioning

Nik Thomas wrote:[color=blue]
> Gus Richter.exe failed a Turing test with
>
>[color=green]
>>You also have to fix up a lot more on the site.[/color]
>
>
> Thanks, Gus. Do you mean there are major issues with the cssindex4 page, or
> within the rest of the site? If the latter, then yes, there's plenty to
> keep me busy.
>[/color]

I focused on the drop shadow portion, but the impression I got was that
the page was unfinished and needed work. I may be wrong.

--
Gus

Shadow effect with relative positioning

Shadow effect with relative positioning

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment