help with CSS design

[Joe]

I'm designing a company website. I'm relatively new to CSS and I'm having
trouble creating what seems to me a very simple design:

- body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:

http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:

http://www3.telus.net/tinkernet/mockup/mockup.jpg

[RoseW]

Re: help with CSS design

Joe wrote:
RE: body background: fixed full page image
- banner: fixed, 100 pixels high, full-width, transparent background
- nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
semi-transparent tiled image background
- content box: scrolling, auto height, auto width, opaque text,
semi-transparent tiled image background
- footer: fixed, 30 px high, full width, transparent background

Here is as far as I could get in the actual design:

http://www3.telus.net/tinkernet/mockup/mockup.html

---------
There appears to be two background images behind the content. The image of
wood with knots interferes with the readability. Either edit this repeating
image to remove the knots or leave it out.
Rose

[Arne]

Re: help with CSS design

Once upon a time *Joe* wrote:
[color=blue]
> I'm designing a company website. I'm relatively new to CSS and I'm having
> trouble creating what seems to me a very simple design:
>
> - body background: fixed full page image
> - banner: fixed, 100 pixels high, full-width, transparent background
> - nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
> semi-transparent tiled image background
> - content box: scrolling, auto height, auto width, opaque text,
> semi-transparent tiled image background
> - footer: fixed, 30 px high, full width, transparent background
>
> Here is as far as I could get in the actual design:
> http://www3.telus.net/tinkernet/mockup/mockup.html
>
> mockup:
> http://www3.telus.net/tinkernet/mockup/mockup.jpg
>
>[/color]

Check your (X)HTML with http://validator.w3.org/ and your CSS with

http://jigsaw.w3.org/css-validator/validator-uri.html

BTW. The background image (bg-about.jpg) is 262 kB and that far to
much even for broadband users.

--
/Arne

Proud User of Mozilla Suite. Get your free copy here:
*English* http://www.mozilla.org/products/mozilla1.x/
*Svenska* http://www.mozilla.se/mozilla.shtml

[Joe]

Re: help with CSS design

I agree with you about the current state of readability of the text, however
what I really need help with is making the page look like my mockup and have
the properties I listed in the description.

"RoseW" <wdmn@NShuronte l.on.ca> wrote in message
news:lsz%d.9500 0$vO1.587530@nn rp1.uunet.ca...[color=blue]
> Joe wrote:
> RE: body background: fixed full page image
> - banner: fixed, 100 pixels high, full-width, transparent background
> - nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
> semi-transparent tiled image background
> - content box: scrolling, auto height, auto width, opaque text,
> semi-transparent tiled image background
> - footer: fixed, 30 px high, full width, transparent background
>
> Here is as far as I could get in the actual design:
> http://www3.telus.net/tinkernet/mockup/mockup.html
>
> ---------
> There appears to be two background images behind the content. The image of
> wood with knots interferes with the readability. Either edit this
> repeating
> image to remove the knots or leave it out.
> Rose
>
>[/color]

[Joe]

Re: help with CSS design

I agree with you about size of my background file, however what I really
need help with is making the page look like my mockup and have the
properties I listed in the description.

"Arne" <user@domain.in valid> wrote in message
news:3a82lvF67a cdnU1@individua l.net...[color=blue]
> Once upon a time *Joe* wrote:
>[color=green]
>> I'm designing a company website. I'm relatively new to CSS and I'm
>> having
>> trouble creating what seems to me a very simple design:
>>
>> - body background: fixed full page image
>> - banner: fixed, 100 pixels high, full-width, transparent background
>> - nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
>> semi-transparent tiled image background
>> - content box: scrolling, auto height, auto width, opaque text,
>> semi-transparent tiled image background
>> - footer: fixed, 30 px high, full width, transparent background
>>
>> Here is as far as I could get in the actual design:
>> http://www3.telus.net/tinkernet/mockup/mockup.html
>>
>> mockup:
>> http://www3.telus.net/tinkernet/mockup/mockup.jpg
>>
>>[/color]
>
> Check your (X)HTML with http://validator.w3.org/ and your CSS with
> http://jigsaw.w3.org/css-validator/validator-uri.html
>
> BTW. The background image (bg-about.jpg) is 262 kB and that far to
> much even for broadband users.
>
> --
> /Arne
>
> Proud User of Mozilla Suite. Get your free copy here:
> *English* http://www.mozilla.org/products/mozilla1.x/
> *Svenska* http://www.mozilla.se/mozilla.shtml[/color]

[me]

Re: help with CSS design

"Joe" <executive@telu s.net> wrote in message
news:fmw%d.5364 0$ZO2.44862@edt nps84...[color=blue]
> I'm designing a company website. I'm relatively new to CSS and I'm having
> trouble creating what seems to me a very simple design:
>
> - body background: fixed full page image
> - banner: fixed, 100 pixels high, full-width, transparent background
> - nav bar: fixed, 200 px wide, auto-height, opaque nav icons,
> semi-transparent tiled image background
> - content box: scrolling, auto height, auto width, opaque text,
> semi-transparent tiled image background
> - footer: fixed, 30 px high, full width, transparent background
>
> Here is as far as I could get in the actual design:
> http://www3.telus.net/tinkernet/mockup/mockup.html
>
> mockup:
> http://www3.telus.net/tinkernet/mockup/mockup.jpg[/color]

Due to the inherent limitations of fluid design with CSS positioning it will
be impossible for you to create an exact match of your mock-up, at least in
IE on Windows. Since this is a company site I expect it is a requirement
that your site work in IE on Windows. It is however quite easy to do what
you want with tables or (my least favorite design method) frames. If you're
interested let me know and I will post code.
Good Luck,
me

[Beauregard T. Shagnasty]

Re: help with CSS design

me wrote:
[color=blue]
> Due to the inherent limitations of fluid design with CSS
> positioning it will be impossible for you to create an exact match
> of your mock-up, at least in IE on Windows.[/color]

It is certainly possible, and even easy, to do a fluid design with
CSS, even in IE.
[color=blue]
> Since this is a company site I expect it is a requirement that your
> site work in IE on Windows. It is however quite easy to do what
> you want with tables or (my least favorite design method) frames.[/color]

Or CSS.
[color=blue]
> If you're interested let me know and I will post code.[/color]

Probably not necessary.

To Joe: here is a mess of templates, one of which is bound to fit
your needs.

http://nemesis1.f2o.org/templates.php

This one may work:

http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html

Make a copy of it and experiment.

--
-bts
-This space intentionally left blank.

[me]

Re: help with CSS design


"Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in message
news:3ad9giF69j 9nhU1@individua l.net...
[snip]

Thanks for taking the bait.
[color=blue]
> To Joe: here is a mess of templates, one of which is bound to fit
> your needs.
> http://nemesis1.f2o.org/templates.php[/color]

Close but no cigar, not according to his mockup.
[color=blue]
> This one may work:
> http://www.benmeadowcroft.com/webdev...ft-column.html[/color]

Ditto above. :-(
Signed,
me

[Beauregard T. Shagnasty]

Re: help with CSS design

me wrote:[color=blue]
> "Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in
> message news:3ad9giF69j 9nhU1@individua l.net... [snip]
>
> Thanks for taking the bait.[/color]

Tasty bait...
[color=blue][color=green]
>> To Joe: here is a mess of templates, one of which is bound to
>> fit your needs. http://nemesis1.f2o.org/templates.php[/color]
>
> Close but no cigar, not according to his mockup.[/color]

I'm sure you expected one of them to contain Joe's background picture?
[color=blue][color=green]
>> This one may work:
>> http://www.benmeadowcroft.com/webdev...ft-column.html[/color]
>
> Ditto above. :-([/color]

Ben's template would work exceptionally well with Joe's design. It has
a content block, a left menu, and a background image. Content and menu
are in proper linear order in the HTML as well.

Joe, if you're still reading, all you would need to do is substitute
your content and colors and images. Further, it has an excellent print
stylesheet. Give it a try.

It even works in IE.

--
-bts
-This space intentionally left blank.

[me]

Re: help with CSS design

"Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in message
news:3adcreF67p d07U1@individua l.net...[color=blue]
> me wrote:[color=green]
> > "Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in
> > message news:3ad9giF69j 9nhU1@individua l.net... [snip]
> >
> > Thanks for taking the bait.[/color]
>
> Tasty bait...
>[color=green][color=darkred]
> >> To Joe: here is a mess of templates, one of which is bound to
> >> fit your needs. http://nemesis1.f2o.org/templates.php[/color]
> >
> > Close but no cigar, not according to his mockup.[/color]
>
> I'm sure you expected one of them to contain Joe's background picture?
>[color=green][color=darkred]
> >> This one may work:
> >> http://www.benmeadowcroft.com/webdev...ft-column.html[/color]
> >
> > Ditto above. :-([/color]
>
> Ben's template would work exceptionally well with Joe's design. It has
> a content block, a left menu, and a background image. Content and menu
> are in proper linear order in the HTML as well.
>
> Joe, if you're still reading, all you would need to do is substitute
> your content and colors and images. Further, it has an excellent print
> stylesheet. Give it a try.
>
> It even works in IE.[/color]

Nope, sorry, doesn't address the OP's problem, not if he wants an exact
match to his mock up.

actual design:

http://www3.telus.net/tinkernet/mockup/mockup.html

mockup:

http://www3.telus.net/tinkernet/mockup/mockup.jpg

Look again and put your glasses on this time.
Signed,
me

[Beauregard T. Shagnasty]

Re: help with CSS design

me wrote:[color=blue]
> Nope, sorry, doesn't address the OP's problem, not if he wants an
> exact match to his mock up.[/color]

You expect someone to hand him finished work?

Joe could fiddle with Ben's template - while learning something - and
have a nice page in a half-hour or so.

--
-bts
-This space intentionally left blank.

[me]

Re: help with CSS design

"Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in message
news:3adeeaF646 sepU1@individua l.net...[color=blue]
> me wrote:[color=green]
> > Nope, sorry, doesn't address the OP's problem, not if he wants an
> > exact match to his mock up.[/color]
>
> You expect someone to hand him finished work?
>
> Joe could fiddle with Ben's template - while learning something - and
> have a nice page in a half-hour or so.[/color]

Maybe but it won't be an exact match of his mockup. CSS positioning can't
match the OP's mockup exactly. You're in denial.
Signed,
me

[Beauregard T. Shagnasty]

Re: help with CSS design

me wrote:
[color=blue]
> Maybe but it won't be an exact match of his mockup. CSS positioning
> can't match the OP's mockup exactly.[/color]

Right. It will be better.
[color=blue]
> You're in denial.[/color]

<ROF,L>

--
-bts
-This space intentionally left blank.

[me]

Re: help with CSS design

"Beauregard T. Shagnasty" <a.nony.mous@ex ample.invalid> wrote in message
news:3adh4gF64q 5ntU2@individua l.net...[color=blue]
> me wrote:
>[color=green]
> > Maybe but it won't be an exact match of his mockup. CSS positioning
> > can't match the OP's mockup exactly.[/color]
>
> Right. It will be better.
>[color=green]
> > You're in denial.[/color]
>
> <ROF,L>[/color]

He didn't ask for what you call "better" he asked for an exact match to his
mockup. If I suggested what I thought was better (fixed fonts, non-fluid
etc) some crazie would be flaming me right now. :-0
Signed,
me

[C A Upsdell]

Re: help with CSS design

me wrote:[color=blue]
> He didn't ask for what you call "better" he asked for an exact match to his
> mockup. If I suggested what I thought was better (fixed fonts, non-fluid
> etc) some crazie would be flaming me right now. :-0[/color]

In point of fact the OP did not ask how to make an exact match. He
asked for "help with is making the page look like my mockup".