Using CSS for best layout - experts help please

G

Guest

Hi,

OK I'll cut right to the example:


http://62.149.36.16/~generic9/index-plainexaml.htm


I'm creating the above page, but what I'm trying to acheive is that top
right nav menu items (Contact Join us etc. ) are to the right most of the
screen they can be.

If I add new menu tems to this menu it would be nice if the always stayed on
one line and always stayed that the final item is on the most right.

Also the text that says "Another Interactive logo here -..etc." (which will
probably be replaced by a flash moive). I wanted this placed on the left of
the content.

I've tried to be very good with the use of my CSS, but I'm still a newbie
really but learning.

Can anyone help?

Thanks in advance.
 
E

Els

news.freedom2surf.net said:

Since you want to learn, first this:
The doctype isn't valid.
You have:
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">

That should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Make a habit of checking your code in the validator, and you'll catch
errors like that easily. With a valid doctype, your pages will have
more chance of being displayed correctly in different browsers.
http://validator.w3.org/

You also forgot the said:
I'm creating the above page, but what I'm trying to acheive is that top
right nav menu items (Contact Join us etc. ) are to the right most of the
screen they can be.

You floated their container right, but set the text-align to
"inherit". Apparently it's inheriting 'left'. Set it to 'right'
instead.
If I add new menu tems to this menu it would be nice if the always stayed on
one line and always stayed that the final item is on the most right.

In that case, I think you should not float it to the right with a 50%
width. As soon as you will have more items than fit in half you page's
width, it would wrap. (still to the right though, if you use
text-align:right; on the container)
Also the text that says "Another Interactive logo here -..etc." (which will
probably be replaced by a flash moive). I wanted this placed on the left of
the content.

You have set text-align:center; on the body, and if you don't change
that for its children, they will also be centered. If you want that
line of text to the left (and you probably will want the rest of your
page's text left-aligned as well), set 'text-align:left;' on the
container div.(div#mainContent). Then everything will be left aligned,
except for where you specifically set it otherwise.
I've tried to be very good with the use of my CSS, but I'm still a newbie
really but learning.

We've all started as newbies - you'll learn :)
 
B

Ben C

news.freedom2surf.net wrote: [...]
I'm creating the above page, but what I'm trying to acheive is that top
right nav menu items (Contact Join us etc. ) are to the right most of the
screen they can be.

You floated their container right, but set the text-align to
"inherit". Apparently it's inheriting 'left'. Set it to 'right'
instead.

And OP will also need to remove "float: left" and "display: block" from
..navMiniTopRight a-- at the moment those things are all left floats, so
they float to the left regardless of text-align.

He could set them to float: right, but then they'll end up in reversed
order. Text-align: right and not floated is better, I can't see any
reason why they need to be floats.
 
E

Els

Ben said:
news.freedom2surf.net wrote: [...]
I'm creating the above page, but what I'm trying to acheive is that top
right nav menu items (Contact Join us etc. ) are to the right most of the
screen they can be.

You floated their container right, but set the text-align to
"inherit". Apparently it's inheriting 'left'. Set it to 'right'
instead.

And OP will also need to remove "float: left" and "display: block" from
.navMiniTopRight a-- at the moment those things are all left floats, so
they float to the left regardless of text-align.

Missed that one completely...
He could set them to float: right, but then they'll end up in reversed
order. Text-align: right and not floated is better, I can't see any
reason why they need to be floats.

I often use floats for them so I can get paddings and margins on them.
Depends on the required look though. It's indeed not necessary at all
if it's just a line of links without rollovers or borders or anything.
 
G

Guest

OK Great input! Thanks.

Check out the updated.

http://62.149.36.16/~generic9/index-plainexaml.htm


Some points:

1)
The doctype isn't valid.
Hmm, used the dreamweaver default here - Maybe I set something wrong in
options - I'll check (also I removed the title for brevity but guess I
should have not done).

2) when I implemented Els changes only it wokred in IE but not in Firefox.
When applying Ben C extra changes worked in both. Don't fully understand
some aspects of how it works yet but repittion and experimentation is the
key to my learning.

3) Check out the link above in IE7 and Firfox. Note how the margin around
the right hand nav menu is bigger in Firefox. What can I do to get a
consistant display acorss these browsers (and ideally others)


Any other tips welcome and thank you again for this excellent advise
Note I also need to implement a right hand section where the main text is so
do not be suprised if the example contains a new section when you view it.

Thanks!!
 
E

Els

news.freedom2surf.net said:
http://62.149.36.16/~generic9/index-plainexaml.htm

1)
Hmm, used the dreamweaver default here - Maybe I set something wrong in
options - I'll check (also I removed the title for brevity but guess I
should have not done).

I don't have Dreamweaver, but I've never heard of it getting the
doctype itself wrong?
2) when I implemented Els changes only it wokred in IE but not in Firefox.
When applying Ben C extra changes worked in both.

I'm surprised it even worked in IE before you applied Ben's changes, I
had just missed the left floated elements altogether. Even IE would
float them left if you told them to...
Don't fully understand
some aspects of how it works yet but repittion and experimentation is the
key to my learning.

The basis is quite simple though: without any stylerules, everything
will be left aligned (unless you have set it to right-to-left for
Arabic or something). There are two ways to alter the position
horizontally, one is "float", which moves the element that is floated
to either left or right, depending on the value you gave the float
property, the other is "text-align" on the *parent* of the element.
This will only work if the child of that parent is an inline element
though, or plain text.
3) Check out the link above in IE7 and Firfox. Note how the margin around
the right hand nav menu is bigger in Firefox. What can I do to get a
consistant display acorss these browsers (and ideally others)

<ul> and <li> have different default margins and paddings in different
browsers. Set all padding and margin on both <ul> and <li> to zero,
then add where you want to add. This will make them show more
consistently across browsers.
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top