Need help with some design/css problems

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Ikke - 29 Oct 2006 21:05 GMT

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

Reply to this Message

dorayme - 29 Oct 2006 21:36 GMT

> Hi everybody,
>
[quoted text clipped - 10 lines]
> 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 all the words
 in the 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
[quoted text clipped - 5 lines]
> 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

Signature

dorayme

Reply to this Message

Ikke - 29 Oct 2006 21:59 GMT

> You can make the title a bit smaller than 300%, you can shorten
> the title, you can put Between all the words
>  in the 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  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

Reply to this Message

dorayme - 30 Oct 2006 01:48 GMT

> > 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.

Signature

dorayme

Reply to this Message

Ikke - 30 Oct 2006 13:13 GMT

<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

Reply to this Message

dorayme - 30 Oct 2006 22:29 GMT

> <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...

Signature

dorayme

Reply to this Message

Chris F.A. Johnson - 29 Oct 2006 23:53 GMT

> Hi everybody,
>
[quoted text clipped - 10 lines]
> 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.

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

Signature

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

Reply to this Message

Ikke - 30 Oct 2006 00:33 GMT

> 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

Reply to this Message

Chris F.A. Johnson - 30 Oct 2006 00:51 GMT

><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%.

Signature

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

Reply to this Message

Ikke - 30 Oct 2006 13:14 GMT

"Chris F.A. Johnson" <cfajohnson@gmail.com> wrote 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

Reply to this Message

Ben C - 30 Oct 2006 08:07 GMT

><snipped>
>> Then you don't want the side columns to be 15%.
[quoted text clipped - 4 lines]
> 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.

Reply to this Message

Ikke - 30 Oct 2006 13:15 GMT

<snip>

> This may be easier to achieve with positioning than with floats.
>
[quoted text clipped - 26 lines]
> 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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2006

Need help with some design/css problems