[Tfug] simple CSS question

[Slack]

Here's what I can tell you. I'm not a CSS expert by far, but I've done my 
share... As I see it, the problem with the bottom bar cannot be avoided... 
What I would do is one of two things... Make it so that the CSS element for 
that bar has it's width reduced so that it will not affect the right 
navigation area (in its current setup this should call for you to use a 
static setup that does not rezise with the width of the window). Or you could 
move the nav bar to the left side and do the same thing (this would allow the 
page to adjust to the width of the window)... On the other hand you could 
make it so that the nav bar also adjusts to the size of the window, but based 
on the size of the users' window this could get ridiculous.

Or you could make the element that contains the content (the one above that 
bottom bar), have a static "bottom". You'd have to have the element itself 
scroll to contain content beyond the bottom of the window, but then you could 
place that bottom bar so that it always appears at the bottom. This is not 
the best idea in my opinion...

On the other issue about the text wrapping the picture.. If I understand 
correctly you want the text to read down one side, and the picture to stay on 
the other side. Thus having no text wrap under the picture, right? If so, 
then you could use a simple table to do this. One table, with two cells. One 
cell for the text, and one for the picture. This is what I use when I run 
into situations like that... Here's a good CSS and HTML link you may find 
useful... I hope this helped and wasn't just a bunch of rambling. :)

http://www.w3schools.com/css/css_reference.asp

http://www.w3schools.com/html/html_reference.asp

Good luck!

Allen

On Monday 12 July 2004 17:22, John Gruenenfelder wrote:
> Hello all.
>
> I've got a simple CSS question that I hope you can help with.  I redesigned
> the website for my machine at work (http://bach.as.arizona.edu).  The old
> one was ugly and not too useful.  The new one is... still not useful, but
> easier to navigate to someplace more useful.  :)
>
> Anyhow, the basic design is based on a template I downloaded at the Open
> Source Web Design site.  It's a really simple CSS template.  Simple enough
> that I can understand what it's doing.
>
> There are two fairly minor layout issues that I'm having trouble
> understanding, due mostly to my limited CSS knowledge.  The site in
> question (it's small) is at:
>   http://bach.as.arizona.edu/~johng/newsite
>
> If you click on the "Who we Are" link on the navbar, the resulting page is
> fairly short.  The bottom bar, where the author/date info is, is not at the
> bottom of the window.  This causes the right end of it to pass underneath
> the nav bar.  I was hoping that the different "div" areas would be smart
> enough to not overlap each other.  Is there any way to fix this?  Note that
> if you have a very narrow browser window, the page may be elongated enough
> that you won't notice the effect.
>
> The second problem is really minor.  On the main page of the new site there
> is a small portrait of J.S. Bach.  When there was less text in the first
> block (next to the picture), the horizontal bar separating the next section
> would go underneath the picture.  You can reproduce this if you browser
> window is very wide.  This problem isn't big, and can be avoided in
> practice by simply adding more text in certain areas, but I'd like to know
> if it can be fixed.
>
> If you need them, the two stylesheets are:
>   http://bach.as.arizona.edu/~johng/newsite/globalformatting.css
>   http://bach.as.arizona.edu/~johng/newsite/globallayout.css
>
> Thanks for any help!