Override <body> CSS for logo...

R

rajbrown

Hi, I'm putting together a webpage and so far have a basic style for
the body, a logo and a javascript menu. The problem is I can't figure
out how to space it so the logo appears at the top, followed by the
menu, followed by the rest of the text. If you look at:

http://www.rajbrown.dsl.pipex.com/menu2.html

you'll hopefully see what I mean. The main logo appears behind the menu
thanks to my margin-top setting on the body (style .main) of 80. If I
reduce it, then everything moves up including the text below the logo
image, thus making that text appear behind it instead!!

So, can I somehow put a style on the image (as I am trying to) to force
it to position at the top and leave the body as it is? Or is there a
better way of doing this to avoid the two clashing completely? I would
have a general style for all the text that I could apply at paragraph
level, but I want to have different formats of text as in the example,
so not sure that'll work.

Help - getting confused!!!

Thanks :)
 
D

dorayme

Hi, I'm putting together a webpage and so far have a basic style for
the body, a logo and a javascript menu. The problem is I can't figure
out how to space it so the logo appears at the top, followed by the
menu, followed by the rest of the text. If you look at:

http://www.rajbrown.dsl.pipex.com/menu2.html

you'll hopefully see what I mean. The main logo appears behind the menu
thanks to my margin-top setting on the body (style .main) of 80. If I
reduce it, then everything moves up including the text below the logo
image, thus making that text appear behind it instead!!
Click to expand...

So why did you choose background position to be bottom then...?
Really, why?

It is too big to be at the top and things to start seriously
underneath it. Suggest you reduce the px dims of the jpg
concerned.

You need units for your numbers. 80 what? px probably, so write
80px.

As for positioning the menu, honestly, first get rid of all the
javascript and make a menu that is called for in this case, a
simple inline list menu. Simp[le HTML and CSS - Google it up.

Forget about the relative positioning. Keep it simple. Put up
your logo as background image and note its natural height, set
this height for the top margin of the next block element
undereath and Bob will start being your uncle.
 
R

rajbrown

So why did you choose background position to be bottom then...?
Really, why?

It is too big to be at the top and things to start seriously
underneath it. Suggest you reduce the px dims of the jpg
concerned.

You need units for your numbers. 80 what? px probably, so write
80px.

As for positioning the menu, honestly, first get rid of all the
javascript and make a menu that is called for in this case, a
simple inline list menu. Simp[le HTML and CSS - Google it up.

Forget about the relative positioning. Keep it simple. Put up
your logo as background image and note its natural height, set
this height for the top margin of the next block element
undereath and Bob will start being your uncle.
Click to expand...

Hi, thanks for your response. Just playing around with different
backgrounds - that one is the top right hand quarter of a circular
image, so putting it at the bottom left seemed the obvious place for
it. Its only 27kb too but if I stick with it I'll reduce the size and
colours to make it more subtle.

Thanks for the menu tip - I didn't realise you could a decent menu
using html/css but I'll look into it and see what I can come up with.
 
D

dorayme

You need units for your numbers. 80 what? px probably, so write
80px.

As for positioning the menu, honestly, first get rid of all the
javascript and make a menu that is called for in this case, a
simple inline list menu. Simp[le HTML and CSS - Google it up.

Forget about the relative positioning. Keep it simple. Put up
your logo as background image and note its natural height, set
this height for the top margin of the next block element
undereath and Bob will start being your uncle.
Click to expand...

Hi, thanks for your response. Just playing around with different
backgrounds - that one is the top right hand quarter of a circular
image, so putting it at the bottom left seemed the obvious place for
it.
Click to expand...

So why did you say: "The problem is I can't figure out how to
space it so the logo appears at the top" in your first post?
Perhaps I misunderstood you?
Its only 27kb too but if I stick with it I'll reduce the size and
colours to make it more subtle.

Thanks for the menu tip - I didn't realise you could a decent menu
using html/css but I'll look into it and see what I can come up with.
Click to expand...

You sure can, and think of the saving of all that bandwidth and
complication with your js, that one was a humdinger of
complication!

You can do worse than start with:

http://alistapart.com/articles/taminglists/

There are likely simpler and better than the ones at:

http://www.tvrs.org.au/

but these are not all that bad and use no js. and are an example.
There are lots of others all over the internet.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to move logo up 4
Logo and nav disapear/appear on scroll, but on x-axis 0
Positioning CSS components 1
Working on mobile css menu with plenty of frustration! 2
I'm about to get in trouble with the HTML <body></body> tags 10
Stuck with html and css 25
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Help with some CSS 2

Members online

Total: 22 (members: 2, guests: 20)
Robots: 226

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,007
Latest member
OrderFitnessKetoCapsules

Latest Threads

Top