Newbie: Problems with menu background color not extending down page and aligning an image to text

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

James Frayne - 27 Nov 2005 20:25 GMT

Hi,

I am fairly new to using CSS and have been asked to design a new site
from scratch, I want to use a tableless layout with valid XHTML and CSS.
I used the strange banana random CSS generator
www.strangebanana.com/generator.aspx to come up with a basic layout and
I'm modifying that as necessary.

The first problem is that I want the background colour of the menu on
the left hand side to extend to the footer at the bottom of the page. I
have searched a bit for this and realise that this is a limitation of
CSS and that there are various workarounds, but I don't really
understand how to make them work or which one to use, can anyone help
explain fairly simply how to do it?

The site is at: http://seis.bris.ac.uk/~jf3537/index.html
and the CSS: http://seis.bris.ac.uk/~jf3537/style.css

Secondly at the top of the page I have some text which I want to be left
aligned and a logo which I want to be right aligned but I want them both
to be aligned vertically, I tried to float the image right but it moved
down the page as seen here: http://seis.bris.ac.uk/~jf3537/index1.html
what should I have done?

Thanks in advance,

Signature

James Frayne
james_fraynedoesnotlikespam@yahoo.co.uk
Remove doesnotlikespam to send mail.

Reply to this Message

Ian Rastall - 27 Nov 2005 20:41 GMT

>The first problem is that I want the background colour of the menu on
>the left hand side to extend to the footer at the bottom of the page.

In the #menu section of your CSS, you might try adding:

background-repeat: repeat-y;

>Secondly at the top of the page I have some text which I want to be left
>aligned and a logo which I want to be right aligned but I want them both
>to be aligned vertically,

I seem to remember the answer to that being at:

http://old.climbtothestars.org/coding/cssbasic/

Hope that helps,
Ian

Reply to this Message

Ian Rastall - 27 Nov 2005 20:44 GMT

>I seem to remember the answer to that being at:
>
>http://old.climbtothestars.org/coding/cssbasic/

Or, rather, here:

http://old.climbtothestars.org/coding/tableless/

Ian

Reply to this Message

James Frayne - 28 Nov 2005 21:39 GMT

>>I seem to remember the answer to that being at:
>>
[quoted text clipped - 5 lines]
>
> Ian

Thanks for the link, the answer was indeed there.
Just one slight niggle though, after doing the double float: left trick
Firefox 1.0.7 makes the height of the breadcrumb trail background colour
much greater than before. I tried to reduce it by specifying a height
but then Firefox doesn't display the text of the trail or displays it in
the menu sidebar. It displays as I want it to in IE6.
How can I make it display the same in Firefox as in IE6?

Regards,

Signature

James Frayne
james_fraynedoesnotlikespam@yahoo.co.uk
Remove doesnotlikespam to send mail.

Reply to this Message

Ian Rastall - 28 Nov 2005 23:24 GMT

>How can I make it display the same in Firefox as in IE6?

Hi James. I hate to give advice and then not be able to give any more,
but I'm not sure what the answer is. Hopefully someone else here will
know. Sometimes you can't get the same level of control in web design
that you get in desktop publishing.

Is this still where the test site is at?:

http://seis.bris.ac.uk/~jf3537/index.html
http://seis.bris.ac.uk/~jf3537/style.css

That might be enough for someone else to go on.

Ian

Reply to this Message

James Frayne - 29 Nov 2005 17:19 GMT

> Is this still where the test site is at?:
>
> http://seis.bris.ac.uk/~jf3537/index.html
> http://seis.bris.ac.uk/~jf3537/style.css

Yes, sorry Ian I should have said this in my previous post.

> That might be enough for someone else to go on.

Hopefully,

Thanks

Signature

James Frayne
james_fraynedoesnotlikespam@yahoo.co.uk
Remove doesnotlikespam to send mail.

Reply to this Message

Stephen Poley - 28 Nov 2005 19:29 GMT

>I am fairly new to using CSS and have been asked to design a new site
>from scratch, I want to use a tableless layout with valid XHTML and CSS.

You might do better with HTML 4.01 and CSS, unless you have very
specific authoring needs for XHTML. See past discussions in c.i.w.a.html
for the reasons.

>The first problem is that I want the background colour of the menu on
>the left hand side to extend to the footer at the bottom of the page. I
[quoted text clipped - 5 lines]
>The site is at: http://seis.bris.ac.uk/~jf3537/index.html
>and the CSS: http://seis.bris.ac.uk/~jf3537/style.css

Does this help?

http://www.xs4all.nl/~sbpoley/webmatters/layout3.html

Signature

Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Reply to this Message

James Frayne - 28 Nov 2005 21:42 GMT

> Does this help?
>
> http://www.xs4all.nl/~sbpoley/webmatters/layout3.html

Yes I think it will.
I don't have time to try it out today, but I will tomorrow,

Thank you.

Signature

James Frayne
james_fraynedoesnotlikespam@yahoo.co.uk
Remove doesnotlikespam to send mail.

Reply to this Message

James Frayne - 29 Nov 2005 17:04 GMT

> You might do better with HTML 4.01 and CSS, unless you have very
> specific authoring needs for XHTML. See past discussions in c.i.w.a.html
> for the reasons.

Thanks for the tip, will read the past discussions and decide
accordingly. I don't have a specific need to use XHTML, I just want to
use valid markup.

> Does this help?
>
> http://www.xs4all.nl/~sbpoley/webmatters/layout3.html

Yes it did.
Thanks again Stephen, I have done it now.

Signature

James Frayne
james_fraynedoesnotlikespam@yahoo.co.uk
Remove doesnotlikespam to send mail.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2005

Newbie: Problems with menu background color not extending down page and aligning an image to text