CSS help!

[jamslam]

Hey once again,

I am here today to ask for some help. I started writing my own message board
from scratch in August, I have just finished what I could finish the in the
Admin Control Panel today, and I started working on the design of the front
end.

This is the current admin panel.. the design and coding is not too important
to me, as only few people will be using it.

http://www.webtrickscentral.com/wtcBB/admin

Here is the front end schema I have so far:

http://www.webtrickscentral.com/wtcBB/

If you resize your window (i'm on 1280x1024, and it looks ok on that res...)
to a smaller one than that, you'll notice the image buttons will wrap, and
so will the login and the navigation information. I am using the "float"
property, and has worked up until now. I just cannot figure out how to do
this without that wrapping.

I really don't want to resort to tables, as I have yet to see a message
board today made entirely with CSS, and I want to be unique in doing it
(excuse my ignorance if there is one already.. I'm sure there is).

So how would I go about fixing this?

Thanks for any help <G>

-jamslam

 

[altamir]

http://www.webtrickscentral.com/wtcBB/

If you resize your window (i'm on 1280x1024, and it looks ok on that
res...) to a smaller one than that, you'll notice the image buttons
will wrap, and so will the login and the navigation information. I am
using the "float" property, and has worked up until now. I just cannot
figure out how to do this without that wrapping.

I really don't want to resort to tables, as I have yet to see a
message board today made entirely with CSS, and I want to be unique in
doing it (excuse my ignorance if there is one already.. I'm sure there
is).

So how would I go about fixing this?

1) why are you using <h2>'s for menu? use list (<ul> and <li>) insetad.
2) put your menu icons ('home'...'logout') inside a DIV or UL and give it
an explicit width, let's say 600px, and float it.
3) give a wtcBB logo absolute position and make your layout a little bit
wider to fit 800x600 resolution.

It's not a perfect solution, because when the window is narrower than 800px
menu goes over a logo or vice versa.

 

[rf]

Hey once again,

I am here today to ask for some help. I started writing my own message board
from scratch in August, I have just finished what I could finish the in the
Admin Control Panel today, and I started working on the design of the front
end.

This is the current admin panel.. the design and coding is not too important
to me, as only few people will be using it.

http://www.webtrickscentral.com/wtcBB/admin

Here is the front end schema I have so far:

http://www.webtrickscentral.com/wtcBB/

If you resize your window (i'm on 1280x1024, and it looks ok on that res...)
to a smaller one than that, you'll notice the image buttons will wrap, and
so will the login and the navigation information. I am using the "float"
property, and has worked up until now. I just cannot figure out how to do
this without that wrapping.

I really don't want to resort to tables, as I have yet to see a message
board today made entirely with CSS, and I want to be unique in doing it
(excuse my ignorance if there is one already.. I'm sure there is).

So how would I go about fixing this?

Why fix it. If you do manage to you will introduce a horizontal scroll bar.

IHMO the buttons are better off dropping down than disappearing off the edge
of the canvas. It appears to me as it is working correctly now.

The worst thing you can do is position: fixed the div containing the
buttons. They will then overlap the logo.

Cheers
Richard.

 

[jamslam]

Why fix it. If you do manage to you will introduce a horizontal scroll bar.

IHMO the buttons are better off dropping down than disappearing off the edge
of the canvas. It appears to me as it is working correctly now.

The worst thing you can do is position: fixed the div containing the
buttons. They will then overlap the logo.

Cheers
Richard.

Yea I'm pretty sure I fixed it now. I don't intent to position anything in
the layout, unless I have to. I just don't look forward to setting up a
table-like environment with 6 columns in CSS...

My only other question is this: When you shrink your window size beyond a
certain point, it just looks horrible- especially in mozilla. Is there any
fix to that? or should it be left as is?

Thanks again!
-jamslam

 

[Leif K-Brooks]

give a wtcBB logo absolute position and make your layout a little bit
wider to fit 800x600 resolution.

Why use absolute widths at all? Percentage is your friend.

 

[jamslam]

Hey once again,

I am here today to ask for some help. I started writing my own message board
from scratch in August, I have just finished what I could finish the in the
Admin Control Panel today, and I started working on the design of the front
end.

This is the current admin panel.. the design and coding is not too important
to me, as only few people will be using it.

http://www.webtrickscentral.com/wtcBB/admin

Here is the front end schema I have so far:

http://www.webtrickscentral.com/wtcBB/

If you resize your window (i'm on 1280x1024, and it looks ok on that res...)
to a smaller one than that, you'll notice the image buttons will wrap, and
so will the login and the navigation information. I am using the "float"
property, and has worked up until now. I just cannot figure out how to do
this without that wrapping.

I really don't want to resort to tables, as I have yet to see a message
board today made entirely with CSS, and I want to be unique in doing it
(excuse my ignorance if there is one already.. I'm sure there is).

So how would I go about fixing this?

Thanks for any help <G>

-jamslam

I have another question:

http://www.webtrickscentral.com/wtcBB

If you look in the style sheet, you will notice that I have the
"div.welcome_guest" vertical-align property set to "middle", and I have the
p element of that division set to middle.. none of these work. How in the
world can I get that text in the middle of the box?

 

[rf]

Do all of those people have perfect vision? You have specified font size in
pixels of points I presume. This preculudes anybody using IE from resizing
their fonts. They will then use their accessibility options to ignore your
font sizes. Your design then breaks like this:

http://users.bigpond.net.au/rf/test/wtc/wtc.jpg

Note those buttons did not enlarge as they are pictures of text. I can't
read them.

My only other question is this: When you shrink your window size beyond a
certain point, it just looks horrible- especially in mozilla. Is there any
fix to that? or should it be left as is?

You have specified height all over the place. Don't. Let the browser
determine the height of an element.

I can see why you want to do this, you are *translating* a table design.
Don't. *Rewrite* it. CSS positioning works totally differently to a table.
It is, by default, liquid. Everything you specify reduces this liquidity. In
this case specifying the height of that welcome div has caused problems. IE,
in whatever mode it is running, has chosen to use the height of the content
to determine the height of the div. Mozilla on the other hand has chosen to
use your height recommendation and simply let the content overflow the div.

Kiss principle and quietly suggest things to be browser, do not vehemently
limit the browser. If you limit the browser to the point where it has to
make a choice then you are in trouble.

Your CSS:

Don't use verdana.
Don't use font size anywhere, especially font size < 100%.
You may use a font size > 100% for emphasis.
You may use a font size < 100% (say 90) for things that are not meant to be
read, like coypright notices.
Don't repeat CSS attributes when they have been inherited.
Don't specify defaults, like width: 100%.
What is that spacer rule for? Apply clear (if you must) to the element that
requires it. This rule is like those old fashioned spacer gif's

Yeah, I know, it's a slow Sunday evening

Cheers
Richard.

 

[jamslam]

Do all of those people have perfect vision? You have specified font size in
pixels of points I presume. This preculudes anybody using IE from resizing
their fonts. They will then use their accessibility options to ignore your
font sizes. Your design then breaks like this:

http://users.bigpond.net.au/rf/test/wtc/wtc.jpg

Note those buttons did not enlarge as they are pictures of text. I can't
read them.

The submit buttons? They are just set to a pixel perfect font. I'll change
the font to a percentage, but the *looks* of the admin control panel aren't
too important to me, so I'll see what I can do.

You have specified height all over the place. Don't. Let the browser
determine the height of an element.

Hmmmm... alright, I'll try that out.

I can see why you want to do this, you are *translating* a table design.
Don't. *Rewrite* it. CSS positioning works totally differently to a table.
It is, by default, liquid. Everything you specify reduces this liquidity. In
this case specifying the height of that welcome div has caused problems. IE,
in whatever mode it is running, has chosen to use the height of the content
to determine the height of the div. Mozilla on the other hand has chosen to
use your height recommendation and simply let the content overflow the div.

Kiss principle and quietly suggest things to be browser, do not vehemently
limit the browser. If you limit the browser to the point where it has to
make a choice then you are in trouble.

I'll take that into consideration

Your CSS:

Don't use verdana.
Don't use font size anywhere, especially font size < 100%.
You may use a font size > 100% for emphasis.
You may use a font size < 100% (say 90) for things that are not meant to be
read, like coypright notices.
Don't repeat CSS attributes when they have been inherited.
Don't specify defaults, like width: 100%.
What is that spacer rule for? Apply clear (if you must) to the element that
requires it. This rule is like those old fashioned spacer gif's

Well, I will do all of that, but remember, once this message board is done,
it will be distributed to people (for free of course). So they will be able

Yeah, I know, it's a slow Sunday evening

Sunday early morning here heh

Cheers
Richard.

Thanks once again... I really do appreciately you helping me

-jamslam

 

[jamslam]

Oh yes, I forgot a few things, whoops.

1. The one and only reason why I had height there was for the border
separating the login and the links. When I get rid of the height, the border
doesn't stretch. If I use a border-left on the division on the right
(containing the login), it will work, as long as the stuff on the right does
not wrap.

2. How can I vertically align the text in the "welcome_guest" division? It
won't let me >_<

-jamslam

 

[Toby A Inkster]

I can see why you want to do this, you are *translating* a table design.
Don't. *Rewrite* it.

Toby say: "Good CSS is not about knowing what to put in -- it's about
knowing what to leave out."

 

[rf]

Oh yes, I forgot a few things, whoops.

Yep. you forgot to quote the bits of the last post so I could read this one
in context. I assume you are talking about
http://www.webtrickscentral.com/wtcBB/

1. The one and only reason why I had height there was for the border
separating the login and the links. When I get rid of the height, the border
doesn't stretch. If I use a border-left on the division on the right
(containing the login), it will work, as long as the stuff on the right does
not wrap.

Once again you are trying to take a table layout and pixel for pixel
reproduce it using div/span/CSS. This is not going to happen.

I said elsewhere that you have to redesign your implementation. Sometimes
you have to redesign your design as well. (remember that seperation:
design -> implementation).

2. How can I vertically align the text in the "welcome_guest" division? It
won't let me >_<

Sometimes you have to examine the tools to hand. In this case you are having
so much trouble realising your design using not-tables (read CSS) that you
are in a bind.

Lets look, once again, at the shape of the data.

One can argue that a form is actually a table. It is, in your case, columns
of "lets send it to the host" stuff and, within those columns, the "stuff",
namely what is being sent.

So, your table row headings are
'Username', and 'Password'
Your (only) row under this heading row is the one containing the input
fields.

Is this tabular data? Up to you

Similarly, you have a "login block". This block is, well, a row. The left
hand side of the row is a description of what the right hand side is. The
right hand side is, well, it is the right hand side.

Is this a table?

It would be Real Handy if this could be a table because then both sides of
the table (the two cells) would behave exactly as you wish them to, that is
line up the right height and whatever.

I really think this just might be a table

Refer to my response in your other thread. What do you have on your page? A
logo, some navbar stuff and then a login *block*.

What is that login block?

It's a table. So what.

In that two by one table is: a description, a form.

The form is what: a block elelment. Inside the form is what? a table. A
table of parameters and values.


Cheers
Richard.

 

[rf]

Toby say: "Good CSS is not about knowing what to put in -- it's about
knowing what to leave out."

?


Cheers
Richard

 

[Toby A Inkster]

?

http://www.google.com/search?q="knowing+what+to+leave+out"

 

[altamir]

Why use absolute widths at all? Percentage is your friend.

Putting some layout elements like collection of images (which have fixed
size because... they are images) into fixed width container isn't a crime,
and it doesn't mean you can't make your layout liquid.

 

[jamslam]

[snip]

Similarly, you have a "login block". This block is, well, a row. The left
hand side of the row is a description of what the right hand side is. The
right hand side is, well, it is the right hand side.

[/snip]

Hmmm, I understood everything you said except for this. I don't understand
how the links in the "welcome_guest" division can be considered as a
descript for the "login_guest" division.

I understand how the form can be setup as a table- with the username and
password as the fields, and the input values populating the table, like you
said.

But how are the links (telling you what forum or thread (it will be a
hierarchy) you are in) a description of the login block?

www.webtrickscentral.com/wtcBB

This is definitely giving me new hope for tables... heh <G>

-jamslam

 

[rf]

[snip]

Similarly, you have a "login block". This block is, well, a row. The left
hand side of the row is a description of what the right hand side is. The
right hand side is, well, it is the right hand side.

[/snip]

Hmmm, I understood everything you said except for this. I don't understand
how the links in the "welcome_guest" division can be considered as a
descript for the "login_guest" division.

Hmmm. I don't understand this bit either. Perhaps I copy/pasted the wrong
link in my prior post. I was sure I was looking at a login form with a
welcome and a description of the login form to the left. Perhaps I misread
the content to the left of the form.

If the text is intimately related to the form then it realy is part of some
sort structure that contains the text and the form. The structure should be
layed out on the canvas and flow around on the canvas at resize as a single
unit. A table is arguably the correct tool to realise that structure.

If the text or links or whatever have no relationship to the form then no,
the two could not be considered to be a table.

Cheers
Richard.

 

[Richard Clark]

If you resize your window (i'm on 1280x1024, and it looks ok on that res...)

to a smaller one than that, you'll notice the image buttons will wrap, and
so will the login and the navigation information.

At 640x480 the 5 image buttons near the top of the page are one on top of
another near the upper left, with a whole lot of blank space to the right.

View source shows the buttons in an unordered list [UL] with each as a list
item [LI]. Did you want them side by side from left to right? or what?


Special Veteran's Day Message
http://members.aol.com/RichClark7/veterans.htm

Pilgrims and the Mayflower Compact
http://members.aol.com/RichClark7/pilgrims.htm