Using CSS for best layout - experts help please

am 30.11.2007 21:09:37 von unknown

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.

Re: Using CSS for best layout - experts help please

am 30.11.2007 21:26:40 von Els

news.freedom2surf.net wrote:

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

Since you want to learn, first this:
The doctype isn't valid.
You have:
"http://www.w3.org/TR/html4/DTD/strict.dtd">

That should be:
"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 element in the <head>. This is compulsory. > 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 :-) -- Els http://locusmeus.com/ </article> <article> <h2>Re: Using CSS for best layout - experts help please</h2>am 30.11.2007 23:19:22 von Ben C On 2007-11-30, Els <els.aNOSPAM@tiscali.nl> wrote: > 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. </article> <article> <h2>Re: Using CSS for best layout - experts help please</h2>am 01.12.2007 10:18:14 von Els Ben C wrote: > On 2007-11-30, Els <els.aNOSPAM@tiscali.nl> wrote: >> 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. -- Els http://locusmeus.com/ </article> <article> <h2>Re: Using CSS for best layout - experts help please</h2>am 01.12.2007 21:33:14 von unknown 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!! </article> <article> <h2>Re: Using CSS for best layout - experts help please</h2>am 02.12.2007 20:43:11 von Els news.freedom2surf.net wrote: > http://62.149.36.16/~generic9/index-plainexaml.htm > > 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). 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. -- Els http://locusmeus.com/ </article> <footer> <a href="/">Index</a> | <a href="/impressum.php">Impressum</a> | <a href="/datenschutz.php">Datenschutz</a> | <a href="https://www.xodox.de/">XODOX</a> </footer> </main> </body> </html>