HighDots Forums  

Help re how to float nav items around graphic ?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Help re how to float nav items around graphic ? in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #11  
Old   
Joe exCSSive
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-08-2005 , 08:46 AM






On Fri, 08 Jul 2005 00:35:58 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

Quote:
Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

where does the page I've put together at:
http://www.sundialontario.com/testmockup.htm

rank within your scheme of "Holy Crap...that's God-awful !"
Again, what I mean is, if I have to deliver soon, have I got something
that would at least get a passable grade ?


1) Look at it with a Gecko browser.
I've just installed Mozilla. Thanks !

Quote:
2) There's a missing graphic
Got it !!

Quote:
3) It falls apart to quickly when zoomed
5) The menu isn't properly centered
13) It causes a horizontal scrollbar for a < 770px wide viewport
14) Reduced size Verdana causes problems (Google for the why)
I see what you mean now...I'll look at this more closely.

Quote:
4) Most of the menu code seems to have been copied from my example, but
without the graphic. This makes much of the code superfluous.
I'll do a final review to "tighten up" the code within an external
style sheet.

Quote:
6) Useless meta tags
8) "Company Logo" makes no sense as alt content
12) The "Wonderful Company" text is hard to read
For the sake of this example, names have been changed to protect the
innocent"

Quote:
7) CSS should be externalized
I have an external style sheet. I only included those portions
referenced by this sample page.

Quote:
9) The page lacks structure, it has no h1 heading
In the final version, the logo & address will be h1

Quote:
10) It doesn't validate
http://validator.w3.org/check?uri=ht...testmockup.htm

11) No character encoding specified
Oops...I'm on it !

Looks like I've got a bit of work to do !

Thanks for your feedback !

Joe





Reply With Quote
  #12  
Old   
Spartanicus
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-08-2005 , 09:38 AM






Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

Quote:
1) Look at it with a Gecko browser.

I've just installed Mozilla. Thanks !
Note that where we refer to Mozilla and/or Firefox, usually any browser
that uses Gecko as it's rendering engine will do. Given that you stated
that you already had and used Firefox, there is little point in adding
Mozilla to your test suite since they both use the same rendering
engine.

Given your claim that you test in FF, how come you missed the fact that
the menu is corrupted when viewed with a Gecko browser?

Quote:
8) "Company Logo" makes no sense as alt content
12) The "Wonderful Company" text is hard to read

For the sake of this example, names have been changed to protect the
innocent"
That doesn't change either of the above two points. If the text in the
graphic says "foobar", then the appropriate alt content should probably
also be "foobar".

Quote:
9) The page lacks structure, it has no h1 heading
In the final version, the logo & address will be h1
The address should not be marked up with h1.

--
Spartanicus


Reply With Quote
  #13  
Old   
Joe exCSSive
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-08-2005 , 10:29 AM



On Fri, 08 Jul 2005 13:38:58 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:


Quote:
Given your claim that you test in FF, how come you missed the fact that
the menu is corrupted when viewed with a Gecko browser?
Again, I must be missing something. This is what I see when I view
it in FireFox:
http://www.sundialontario.com/images/capturepage.jpg

I don't see any corruption. What "corruption" are you referring to ?

Quote:
8) "Company Logo" makes no sense as alt content
12) The "Wonderful Company" text is hard to read

For the sake of this example, names have been changed to protect the
innocent"

That doesn't change either of the above two points. If the text in the
graphic says "foobar", then the appropriate alt content should probably
also be "foobar".
When I publish the website, the company (let's call it XYZ) logo
(graphic) will be included and will be a quality graphic. The alt
text will be "XYZ Company Logo".

Quote:
9) The page lacks structure, it has no h1 heading
In the final version, the logo & address will be h1

The address should not be marked up with h1.
Right you are ! Both will remain in the "top of page" code, but only
the logo with appropriate alt text will be marked h1.

Thanks again for keeping me on my toes !

Joe


Reply With Quote
  #14  
Old   
Spartanicus
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-08-2005 , 11:10 AM



Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

Quote:
Given your claim that you test in FF, how come you missed the fact that
the menu is corrupted when viewed with a Gecko browser?

Again, I must be missing something. This is what I see when I view
it in FireFox:
http://www.sundialontario.com/images/capturepage.jpg

I don't see any corruption. What "corruption" are you referring to ?
http://homepage.ntlworld.com/spartan...ialontario.png

I get this with FF 0.9.2 and Mozilla 1.5, could be a bug that has since
been fixed though.

Quote:
When I publish the website, the company (let's call it XYZ) logo
(graphic) will be included and will be a quality graphic. The alt
text will be "XYZ Company Logo".
"XYZ" is better.

--
Spartanicus


Reply With Quote
  #15  
Old   
=?windows-1252?Q?Christoph_P=E4per?=
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-08-2005 , 12:14 PM



Spartanicus:
Quote:
I get this with FF 0.9.2 and Mozilla 1.5, could be a bug that has since
been fixed though.
Is there really a point in testing any Firefox (Firebird, Phœnix)
version prior to 1.0? Mozilla 1.x and Netscape 6.x maybe, though. I do
not know which FF version number correspondents to which of Moz or NS,
but if you do, you can of course use FF instead of the whole suite, but
testing both it pointless.


Reply With Quote
  #16  
Old   
Spartanicus
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-08-2005 , 01:11 PM



Christoph Päper <christoph.paeper (AT) nurfuerspam (DOT) de> wrote:

Quote:
I get this with FF 0.9.2 and Mozilla 1.5, could be a bug that has since
been fixed though.

Is there really a point in testing any Firefox (Firebird, Phœnix)
version prior to 1.0?
I used to update FF and/or Mozilla versions, but found it pointless. Not
once did I find a (confirmed) CSS bug being fixed, or a missing CSS
feature added. Same story on speed, it's just as slow a beast and a
resource hog as the early versions. The interface is also just as
dreadful as it ever was.

I also stopped submitting Gecko CSS bugs for that reason. If what I see
is a bug that has since been fixed then it's a first for me.

--
Spartanicus


Reply With Quote
  #17  
Old   
Joe exCSSive
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-08-2005 , 06:30 PM



On Fri, 08 Jul 2005 15:10:04 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

Quote:
Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

Given your claim that you test in FF, how come you missed the fact that
the menu is corrupted when viewed with a Gecko browser?

Again, I must be missing something. This is what I see when I view
it in FireFox:
http://www.sundialontario.com/images/capturepage.jpg

I don't see any corruption. What "corruption" are you referring to ?

http://homepage.ntlworld.com/spartan...ialontario.png

I get this with FF 0.9.2 and Mozilla 1.5, could be a bug that has since
been fixed though.
Well, whatever it is, I think it's contagious !! I've been struggling
away and have come up with
http://www.sundialontario.com/index3.html

I now see the same crap in IE and I can't figure why (among other
problems there).

Quote:
When I publish the website, the company (let's call it XYZ) logo
(graphic) will be included and will be a quality graphic. The alt
text will be "XYZ Company Logo".

"XYZ" is better.
Please take a look now.

I know I've got BIG problems with "scalability" and I don't know how
to fix them. I think a lot of it has to do with the fact that I'm
centering the page and putting a border around it. D'ya think ?
I've been fighting with it all day & I just can't figure how to keep
it looking consistent...no matter what I do, it turns to crap the
first time I increase text size (actually, I've now buggered IE
completely whereas http://www.sundialontario.com/testmockup.htm
was not nearly so bad).

I've looked at some of your pages and they all scale up/down with no
issues. There's very little content on my page and I think going to a
"widescreen" version would look absolutely hideous...but I'm wondering
whether that is my only recourse.

Where have I gone wrong & what can I do ?

Thanks !

Joe



Reply With Quote
  #18  
Old   
Joe exCSSive
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-11-2005 , 11:29 AM



On Fri, 08 Jul 2005 15:10:04 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

Quote:
Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

Given your claim that you test in FF, how come you missed the fact that
the menu is corrupted when viewed with a Gecko browser?

Again, I must be missing something. This is what I see when I view
it in FireFox:
http://www.sundialontario.com/images/capturepage.jpg

I don't see any corruption. What "corruption" are you referring to ?

http://homepage.ntlworld.com/spartan...ialontario.png

I get this with FF 0.9.2 and Mozilla 1.5, could be a bug that has since
been fixed though.
Well, whatever it is, I think it's contagious !! I've been struggling
away and have come up with
http://www.sundialontario.com/index3.html

I now see the same crap in IE and I can't figure why (among other
problems there).

Quote:
When I publish the website, the company (let's call it XYZ) logo
(graphic) will be included and will be a quality graphic. The alt
text will be "XYZ Company Logo".

"XYZ" is better.
Please take a look now.

I know I've got BIG problems with "scalability" and I don't know how
to fix them. I think a lot of it has to do with the fact that I'm
centering the page and putting a border around it. D'ya think ?
I've been fighting with it all day & I just can't figure how to keep
it looking consistent...no matter what I do, it turns to crap the
first time I increase text size (actually, I've now buggered IE
completely whereas http://www.sundialontario.com/testmockup.htm
was not nearly so bad).

I've looked at some of your pages and they all scale up/down with no
issues. There's very little content on my page and I think going to a
"widescreen" version would look absolutely hideous...but I'm wondering
whether that is my only recourse.

Where have I gone wrong & what can I do ?

Thanks !

Joe



Reply With Quote
  #19  
Old   
fredo
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-11-2005 , 02:28 PM



A small point, and not germane to the fascinating discussion so far:
you have body{margin:5% auto;} which sets the vertical margins as well
as the horizontal, horizontal being the axis that <percentage> talks
about. That accounts for the "swimming" effect you see when you resize
the window (as it was, that is; the present layout, with its eternal
horizontal scroll bar, masks the effect).

I've been much happier when I've set vertical margins to some fixed
value, a <length>, like 3em or 40px. Then I don't get seasick.

-- fredo


Reply With Quote
  #20  
Old   
Joe exCSSive
 
Posts: n/a

Default Re: Help re how to float nav items around graphic ? - 07-12-2005 , 09:10 AM



On 11 Jul 2005 11:28:10 -0700, "fredo" <fredo (AT) key-horse (DOT) com> wrote:

Quote:
A small point, and not germane to the fascinating discussion so far:
you have body{margin:5% auto;} which sets the vertical margins as well
as the horizontal, horizontal being the axis that <percentage> talks
about. That accounts for the "swimming" effect you see when you resize
the window (as it was, that is; the present layout, with its eternal
horizontal scroll bar, masks the effect).

I've been much happier when I've set vertical margins to some fixed
value, a <length>, like 3em or 40px. Then I don't get seasick.

-- fredo
Thanks for your reply. However, "body{margin:5% auto;}" was in the
previous version. The latest version is:

http://www.sundialontario.com/index3.html

I now see the same crap in IE and I can't figure why (among other
problems there).

I know I've got BIG problems with "scalability" and I don't know how
to fix them. I think a lot of it has to do with the fact that I'm
centering the page and putting a border around it. I just can't
figure how to keep it looking consistent...no matter what I do, it
turns to crap the first time I increase text size.

There's very little content on my page and I think going to a
"widescreen" version would look absolutely hideous...but I'm wondering
whether that is my only recourse.

I've tried variations on what you've suggested and I'm really getting
nowhere fast.

I'm now thinking that I'll just have to use tables after all (and that
really sucks !), seeing as nothing I try with CSS is working for me.

Joe



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.