help with CSS design

**Lauri Raittila** · Jul 21 '05, 01:35 AM

Re: help with CSS design

in comp.infosystem s.www.authoring.stylesheets, Joe wrote:[color=blue]
> Thank you for the lovely tips and stuff, but all I want to do is make my
> page look like the mockup.[/color]

Don't top post. This is not help desk. Plonk.
[color=blue][color=green][color=darkred]
> >> Here is as far as I could get in the actual design:
> >> http://www3.telus.net/tinkernet/mockup/mockup.html[/color]
> >
> > Works as you describe?[/color][/color]

In Opera. I couldn't find single flaw. Exept of course the ones I already
mentioned.
[color=blue][color=green]
> > Where is your problem?[/color][/color]

My question which you never answered
[color=blue]
> If you know how, then please just post a
> skeleton html.[/color]

I have other things to do. Situation might change if money is involved,
try email. But I still think your layout idea is broken...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

**Joe** · Jul 21 '05, 01:35 AM

Re: help with CSS design

> Don't top post. This is not help desk. Plonk.
I don't know what you're talking about.
[color=blue]
> Where is your problem?
> Works as you describe?[/color]
no it doesn't. read the decription. look at the jpeg.
[color=blue][color=green]
>> If you know how, then please just post a skeleton html.[/color]
> I have other things to do. Situation might change if money is involved,[/color]
Well, I have offered two different approaches to start with but you haven't
offered any help with them. You claim the solution is easy, yet you
consistently ignore my original problem, and essentially tell me "you don't
want that. This is what you really want". I don't need that kind of help.

me · Jul 21 '05, 01:35 AM

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]

The primary constraints on your goal are that you wish to have a BG image
for the whole page and a scrollable content area. This can be achieved but
not with a fluid design.

In the following example I've used fixed layout positioned from the top left
of the browser window to achieve what I believe is suitable for your
purposes. I chose to fit my design in a 780 pixel wide browser window (to
leave room for a right hand scroll bar), I then set all layers to match that
width (or combined width), resize them to suit your needs. I placed my style
sheet in the head of the document for simplicity but you could link to it if
you prefer and doing so may well be easier in the long run.

You'll also need to use a fixed font size to fully achieve your design goal.
With minor modification the following can be made to match your mockup. Open
a new file in Dreamweaver, clear out the code, paste in the following (in
code view), then apply any styles you need. Also make sure to have the
layers, properties and styles boxes/pallets open for speedy use and check
the box in the layers pallet to "Prevent Overlaps" (not required but
useful). You may also need to tidy up line wraps incurred here. Use the
following in good health:
Good Luck,
me

<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFF F">
<div id="masthead" style="position :absolute; width:780px; height:102px;
z-index:3; left: 0; top: 0" class="masthead ">Mast
Head </div>

<div id="nav" style="position :absolute; width:200px; height:350px;
z-index:2; left: 0px; top: 102px" class="nav">
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
<p>link</p>
</div>
<div id="content" style="position :absolute; width:580px; height:336px;
z-index:4; left: 200px; top: 102px; overflow: auto">through
a top-down, proactive approach we can remain customer focused and
goal-directed,
innovate and be an inside-out organization which facilitates sticky
web-readiness
transforming turnkey eyeballs to brand 24/365 paradigms with benchmark
turnkey
channels implementing viral e-services and dot-com action-items while we
take
that action item off-line and raise a red flag and remember touch base as
you
think about the red tape outside of the box and seize B2B e-tailers and
re-envisioneer
innovative partnerships that evolve dot-com initiatives delivering
synergistic
earballs to incentivize B2B2C deliverables that leverage magnetic
solutions
to synergize clicks-and-mortar earballs while facilitating one-to-one
action-items
with revolutionary relationships that deliver viral markets and grow
e-business
supply-chains that expedite seamless relationships and transform back-end
relationships
withthrough a top-down, proactive approach we can remain customer focused
and
goal-directed, innovate and be an inside-out organization which
facilitates
sticky web-readiness transforming turnkey eyeballs to brand 24/365
paradigms
with benchmark turnkey channels implementing viral e-services and dot-com
action-items
while we take that action item off-line and raise a red flag and remember
touch
base as you think about the red tape outside of the box and seize B2B
e-tailers
and re-envisioneer innovative partnerships that evolve dot-com initiatives
delivering
synergistic earballs to incentivize B2B2C deliverables that leverage
magnetic
solutions to synergize clicks-and-mortar earballs while facilitating
one-to-one
action-items with revolutionary relationships that deliver viral markets
and
grow e-business supply-chains that expedite seamless relationships and
transform
back-end relationships withthrough a top-down, proactive approach we can
remain
customer focused and goal-directed, innovate and be an inside-out
organization
which facilitates sticky web-readiness transforming turnkey </div>
<div id="footer" style="position :absolute; width:780px; height:1px;
z-index:1; left: 0px; top: 452px" class="footer"> Footer</div>
</body>
</html>

**Joe** · Jul 21 '05, 01:36 AM

Re: help with CSS design

> "Joe" <executive@telu s.net> wrote in message[color=blue]
> news:fmw%d.5364 0$ZO2.44862@edt nps84...[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]
>
> The primary constraints on your goal are that you wish to have a BG image
> for the whole page and a scrollable content area. This can be achieved but
> not with a fluid design.[/color]

Making the structure of the page scale nicely to any window size (I think
that's what you mean by fluid design) was supposed to be one of the
highlights of this layout, but I give up. I even tried slicing up the
background but nothing has worked. This is my first CSS page and I've
already stumbled on an "impossible layout". I'll just a start a new concept
from scratch with the new limitations in mind.
It seems to me that CSS has helped to pretty up HTML a little bit, but is
otherwise inept at creating flexible infrastructure or anything practical,
and has a far from intuitive design process. People have had to invent so
many hacks and workarounds just to get it to do what they want, and
different browsers cannot even agree on how to render it. Not to mention
all the bugs, and the fact that apps like Dreamweaver and Frontpage don't
even seamlessly integrate CSS.
Nonetheless, thank you all for the help.

help with CSS design

Comment

Comment

Comment

Comment