Need help with some design/css problems

[Ikke]

Hi everybody,

I've downloaded a design from www.oswd.org and have started rewriting the
css and html to end up with a new design for my site.

So far so good, but there are a few problems I don't seem to find a
solution for.

You can see the new design here: http://tesinfo.atspace.com/test.html (it's
based on Blew Wave, http://www.cirkuit.net/, by the way).

First, if I resize the browser window (say, 500x500), the title ends up on
two lines. No problem, but the menu is displayed over the title. How can I
make sure the menu always starts below the title?

Second, the three column layout is made to adapt to the width of the
screen: 15% on either side with 1% margin, and the rest in the center
column. Again, when the browser window is resized to a small size, either
the text (center) is displayed over the left image (in Opera), or the right
column is placed below the center one (IE).

Regardless of what browser the page is being displayed in, I'd like to have
the left and right column be shown completely, and the center column to
adapt to the remaining width.

Tips and suggestions are always welcome, by the way.

Thanks in advance for your time and help,

Ikke

[dorayme]

In article <Xn************************@195.130.132.70>,
Ikke <ik**@hier.bewrote:

Hi everybody,

I've downloaded a design from www.oswd.org and have started rewriting the
css and html to end up with a new design for my site.

So far so good, but there are a few problems I don't seem to find a
solution for.

You can see the new design here: http://tesinfo.atspace.com/test.html (it's
based on Blew Wave, http://www.cirkuit.net/, by the way).

First, if I resize the browser window (say, 500x500), the title ends up on
two lines. No problem, but the menu is displayed over the title. How can I
make sure the menu always starts below the title?

You can make the title a bit smaller than 300%, you can shorten
the title, you can put Between&nbsp;all&nbsp;the&nbsp;words
&nbsp;in&nbsp;the&nbsp;title.

As to the overlapping of increased text onto the menu, two
strategies: either make enough pixel margin provisions and don't
worry about extreme cases or make margins in ems so as to scale
with the font.

Second, the three column layout is made to adapt to the width of the
screen: 15% on either side with 1% margin, and the rest in the center
column. Again, when the browser window is resized to a small size, either
the text (center) is displayed over the left image (in Opera), or the right
column is placed below the center one (IE).

Regardless of what browser the page is being displayed in, I'd like to have
the left and right column be shown completely, and the center column to
adapt to the remaining width.

If you have images left and right, then % widths are not the best
way to go unless you are prepared to play the odds, simply
because pics of finite px width will often be bigger than any
percentage of a narrowed window...
One way to fix is to define the widths in px to ensure they hold
the pics. Another is to be very generous with your % and not to
worry. There is a third way (to explore), but it is a trickier
thing to do, perhaps a bit overkill here: % base their dimensions
in css. Then they themselves will scale with the % widths

--
dorayme

[Ikke]

dorayme <do************@optusnet.com.auwrote in
news:do**********************************@news-vip.optusnet.com.au:

<snipped>

You can make the title a bit smaller than 300%, you can shorten
the title, you can put Between&nbsp;all&nbsp;the&nbsp;words
&nbsp;in&nbsp;the&nbsp;title.

Thanks - I've added the non-breaking spaces and reduced the size to 250%.

As to the overlapping of increased text onto the menu, two
strategies: either make enough pixel margin provisions and don't
worry about extreme cases or make margins in ems so as to scale
with the font.

I'm trying to make the website look "perfect" (if there is such a thing)
from a minimum resolution 640x480 and up, but I'd like to be able to keep
a decent layout for smaller screens.

With the &nbsp;s and the 250% size, this should work.

<snipped>

If you have images left and right, then % widths are not the best
way to go unless you are prepared to play the odds, simply
because pics of finite px width will often be bigger than any
percentage of a narrowed window...

That's why I calculated the sizes on a minimum of 640x480 - but still,
I'm looking for another solution.

One way to fix is to define the widths in px to ensure they hold
the pics. Another is to be very generous with your % and not to
worry. There is a third way (to explore), but it is a trickier
thing to do, perhaps a bit overkill here: % base their dimensions
in css. Then they themselves will scale with the % widths

Ok, let's drop that tricky solution, and assume that I'm not the generous
type :)

Your first solution actually sounds perfect: I assign the left and right
region a fixed width in px, so the pics will be displayed perfectly.

But when I set the width in px, the center part suddenly gets displayed
below the left, and the right below the center part. How can I keep them
next to eachother?

Thanks for your help!

Ikke

[Chris F.A. Johnson]

On 2006-10-29, Ikke wrote:

Hi everybody,

I've downloaded a design from www.oswd.org and have started rewriting the
css and html to end up with a new design for my site.

So far so good, but there are a few problems I don't seem to find a
solution for.

You can see the new design here: http://tesinfo.atspace.com/test.html (it's
based on Blew Wave, http://www.cirkuit.net/, by the way).

First, if I resize the browser window (say, 500x500), the title ends up on
two lines. No problem, but the menu is displayed over the title. How can I
make sure the menu always starts below the title?

Remove "height: 70px;" from #header.

Second, the three column layout is made to adapt to the width of the
screen: 15% on either side with 1% margin, and the rest in the center
column. Again, when the browser window is resized to a small size, either
the text (center) is displayed over the left image (in Opera), or the right
column is placed below the center one (IE).

Regardless of what browser the page is being displayed in, I'd like to have
the left and right column be shown completely, and the center column to
adapt to the remaining width.

Then you don't want the side columns to be 15%.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[Ikke]

"Chris F.A. Johnson" <cf********@gmail.comwrote in
news:ov************@xword.teksavvy.com:

<snipped>

Then you don't want the side columns to be 15%.

Yes and no - in my example they need to be at least 15% to be shown
correctly in a 640x480 screen.

What I really want is that the left and right column are fixed, and the
center takes up the remaining space.

Thanks,

Ikke

[Chris F.A. Johnson]

On 2006-10-29, Ikke wrote:

"Chris F.A. Johnson" <cf********@gmail.comwrote in
news:ov************@xword.teksavvy.com:

<snipped>

> Then you don't want the side columns to be 15%.

Yes and no - in my example they need to be at least 15% to be shown
correctly in a 640x480 screen.

15% of 640 is not the same as 15% of 500.

What I really want is that the left and right column are fixed, and the
center takes up the remaining space.

If you want them fixed, make them fixed, not 15%.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[dorayme]

In article <Xn************************@195.130.132.70>,
Ikke <ik**@hier.bewrote:

dorayme <do************@optusnet.com.auwrote in
news:do**********************************@news-vip.optusnet.com.au:

One way to fix is to define the widths in px to ensure they hold
the pics.

Your first solution actually sounds perfect: I assign the left and right
region a fixed width in px, so the pics will be displayed perfectly.

But when I set the width in px, the center part suddenly gets displayed
below the left, and the right below the center part. How can I keep them
next to eachother?

First thing to do is get rid of those crazy gifs on the side! I
won't go into it here. Go though the css and html and simplify
everything. Get rid of the 70px height as Chris FA Johnson says.
You don't actually have to float the content... but you can.
Simpler to not set margins on the side panels for now and allow
more left and right margins for grace on the content div.

--
dorayme

[Ben C]

On 2006-10-29, Ikke <ik**@hier.bewrote:

"Chris F.A. Johnson" <cf********@gmail.comwrote in
news:ov************@xword.teksavvy.com:

<snipped>

> Then you don't want the side columns to be 15%.

Yes and no - in my example they need to be at least 15% to be shown
correctly in a 640x480 screen.

What I really want is that the left and right column are fixed, and the
center takes up the remaining space.

This may be easier to achieve with positioning than with floats.

This is similar to the problem FuzzyLogic had. He wanted the left column
160px, and the right column whatever was left. But you can't say:

float: left;
width: (100% - 160px);

But you can get this effect with positioning.

You can make the left:

position: absolute;
width: 150px;

the right:

position: absolute;
width: 150px;
right: 0px;

and the middle take up all the space in between with:

position: absolute;
left: 150px;
right: 150px;

Make sure you make the container for the positioned boxes position:
relative or position: absolute, to make all these position properties
refer to the right container.

[Ikke]

dorayme <do************@optusnet.com.auwrote in
news:do**********************************@news-vip.optusnet.com.au:

<snip>

First thing to do is get rid of those crazy gifs on the side! I
won't go into it here.

Huh? Why would I do that? If those gifs weren't there, there wasn't a
problem in the first place!

Go though the css and html and simplify
everything. Get rid of the 70px height as Chris FA Johnson says.
You don't actually have to float the content... but you can.
Simpler to not set margins on the side panels for now and allow
more left and right margins for grace on the content div.

I'm going to make an attempt at not floating everything - hopefully that
will simplify things...

Thanks,

Ikke

[Ikke]

"Chris F.A. Johnson" <cf********@gmail.comwrote in news:hcrf14-ocj.ln1
@xword.teksavvy.com:

<snip>

>Yes and no - in my example they need to be at least 15% to be shown
correctly in a 640x480 screen.

15% of 640 is not the same as 15% of 500.

That's why I said 640x480, which is the minimum resolution.

>What I really want is that the left and right column are fixed, and the
center takes up the remaining space.

If you want them fixed, make them fixed, not 15%.

But if I give them a fixed width, the content no longer holds between them!
That's why I have stuck to the 15%.

Thanks,

Ikke

[Ikke]

Ben C <sp******@spam.eggswrote in
news:sl*********************@bowser.marioworld:

<snip>

This may be easier to achieve with positioning than with floats.

This is similar to the problem FuzzyLogic had. He wanted the left column
160px, and the right column whatever was left. But you can't say:

float: left;
width: (100% - 160px);

But you can get this effect with positioning.

You can make the left:

position: absolute;
width: 150px;

the right:

position: absolute;
width: 150px;
right: 0px;

and the middle take up all the space in between with:

position: absolute;
left: 150px;
right: 150px;

Make sure you make the container for the positioned boxes position:
relative or position: absolute, to make all these position properties
refer to the right container.

Thank you very much - this sounds like something I can really use. I'm
going to give it a try.

Thanks again,

Ikke

[Michael Stemper]

In article <Xn************************@195.130.132.70>, Ikke writes:

>"Chris F.A. Johnson" <cf********@gmail.comwrote in news:hcrf14-ocj.ln1 @xword.teksavvy.com:

>>Yes and no - in my example they need to be at least 15% to be shown
correctly in a 640x480 screen.

15% of 640 is not the same as 15% of 500.

That's why I said 640x480, which is the minimum resolution.

Do you mean "minimum browser width"? Are you aware that not all browsers
prevent the user from making them as narrow as desired?

--
Michael F. Stemper
#include <Standard_Disclaimer>
No animals were harmed in the composition of this message.

[Ikke]

ms******@siemens-emis.com (Michael Stemper) wrote in
news:20*************************@walkabout.empros. com:

<snip>

Do you mean "minimum browser width"?

Yes.

Are you aware that not all
browsers prevent the user from making them as narrow as desired?

Yes. But that is not an issue.

Thanks,

Ikke

[dorayme]

In article <Xn************************@195.130.132.70>,
Ikke <ik**@hier.bewrote:

dorayme <do************@optusnet.com.auwrote in
news:do**********************************@news-vip.optusnet.com.au:

<snip>

First thing to do is get rid of those crazy gifs on the side! I
won't go into it here.

Huh? Why would I do that? If those gifs weren't there, there wasn't a
problem in the first place!

You had gifs of (natively) something like 1280X1024px, a part of
which had blue in the top left corner, the rest black. Both were
exactly the same as far as I could tell. Anyway, I made the
remark on the principle of removing all that is unnecessary when
tackling a problem. But not to worry, you have some good leads to
go on now. Best of luck...

--
dorayme