18 replies [Last post]
mickycss02
Offline
Regular
Last seen: 9 years 38 weeks ago
Joined: 2006-06-06
Posts: 49
Points: 14

Hi,

I've created a horizontal navigation with the UL and LI elements left floating.
Should I put the classes below on the li's rather than the a elements?

a {
text-decoration:none;
}

a.home {
display:block;
width:99px; height:27px;
background:url(images/home-button.gif);
}

a.profile {
display:block;
width:184px; height:27px;
background:url(images/companyprofile-button.gif);
}

a.service {
display:block;
width:115px; height:27px;
background:url(images/services-button.gif);
}

a.projects {
display:block;
width:123px; height:27px;
background:url(images/projects-button.gif);
}

a.contact {
display:block;
width:126px; height:27px;
background:url(images/contact-button.gif);
}

Thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You could but it's not

You could but it's not necessary. One change I would make though is to move the display: block; and height: 27px; to plain anchor selector where they are the same throughout.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 13 years 40 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

horizontal menus in a UL?

questions questions questions
# why use an intrinsically vertical layout then force it to horizontal when a pile of A tags would have layed out horizontally in the first place?
# There is no title text so when the user hovers, nothing changes and no little yellow explanatory box.
# People running with images off will see absolutely nothing
# Screen readers have nothing to read to the visually impaired
# Many cell phones without CSS will render it vertically
# When printed, many people will get a blank where the menu was because backgrounds default to non-print
# Haven't tested this but when you tab through a series of A tags, the focus moves to the text - but you have no text. will a non-mouse person be able to tab the menu system? On all browsers?
# When you change the text size on Firefox, the menu will not change but the rest of the page will.

As I am finding out the hard way, there is a bit more to this game than just getting something to work!

Just doin' my best at www.jinotega.com
Tony Robins

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 13 years 40 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

double post

Figuere truble double posted now, what can I use the space for?

Contact Us AyudaMe! About Us

Dang! This is a CSS forum and I didn't use (hardly) any. Bad boy!

Just doin' my best at www.jinotega.com
Tony Robins

Triumph (not verified)
Anonymous's picture
Guru

jinoturistica

jinoturistica wrote:
questions questions questions
# why use an intrinsically vertical layout then force it to horizontal when a pile of A tags would have layed out horizontally in the first place?

Why use a list for a list of links? The question answers itself. Because it's a LIST of links. Semantic use of markup is the reason. Doing otherwise is simply incorrect and bad practice.

An unordered list can be styled as horizontal or vertical or multileveled without any change in the markup. I don't even know how you'd accomplish a multileveled menu without a list without a bunch of extra attributes and/or unnecessary markup.

mickycss02
Offline
Regular
Last seen: 9 years 38 weeks ago
Joined: 2006-06-06
Posts: 49
Points: 14

Should I change it

Should I change it and remove the background from the A tag to something more like this?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

no, change it and put some

no, change it and put some text in like this:

then use one of the text/image replacement techniques.

Verschwindende wrote:
  • CSS doesn't make pies

mickycss02
Offline
Regular
Last seen: 9 years 38 weeks ago
Joined: 2006-06-06
Posts: 49
Points: 14

Hi, I put in text links and

Hi,

I put in text links and removed the text on the image. The text doesn't look as smooth but it's better in terms of accessibility.

I don't want to use text/image replacement techniques.

Thanks.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 13 years 40 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

pile of A links

Yes, Triumph, a UL can be restyled without touching the markup and semantically its correct to call it a 'list'. For all things vertical, thats what I use. Turn off CSS and you degrade to a vertical list which is very desirable.

For a horizontal layout, however politically correct and semantic it may be, a vertical list just is not a good starting point unless there are other considerations. Turn off CSS and that sweet horizontal list turns your page into a shambles.

Guess we'll have to politely disagree Smile

Just doin' my best at www.jinotega.com
Tony Robins

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

If your page is a shambles

If your page is a shambles without CSS then I politely suggest that this means you are writing bad code. Proper semantic html is supposed to ignore issues of display and style entirely anyway.

What, after all, is a menu if not a list of options? A list of options. That being so then surely the right way to mark it up with html is to put it in one of the structures specifically designed to hold lists, generally the UL element.

Your html should say nothing at all about how you want the page to look. Your page might not even "look" at all, since the visitor may be blind and using an aural browser. Html is for marking up the meaning or structure of content, and that's all. CSS is for styling, not html.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Triumph (not verified)
Anonymous's picture
Guru

jinoturistica wrote:...

jinoturistica wrote:
... Guess we'll have to politely disagree Smile ...

That's a very welcome change to my life right now. LOL

If you ensure that you are semantically marked up then anything that doesn't handle CSS (such as a phone or a blender [?]) should be able to view your page sans-style and it should still make sense.

Sans style? Oh, how plebeian. Tongue

Oops, sorry Ed. I missed your post. Cheers

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 13 years 40 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

Mr. Seedhouse, Attached is a

Mr. Seedhouse, Attached is a pix of the non-CSS display of the top of this very forum. As you'll see there are 2 lists,

1) main menu coded as a UL. Navigation menus are usually unordered so, semantically, reasonable.

2) breadcrumb trail coded as a bunch of links. Semantically, breadcrumb trails are ordered lists.

However, 1) degraded badly while 2) degraded perfectly

If I grin any more my face will fall in half. Smile

AttachmentSize
ul.JPG 9.61 KB

Just doin' my best at www.jinotega.com
Tony Robins

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I have used this site

I have used this site without styles before, and it is perfectly usable that way. In any event I do not come to this site because of it's styling, (actually in at least one way I come here in spite of it's styling, for instance it's small default font sizes) but because of it's content.

And in fact if you talk to people about why they visit and use web sites you'll find, I think, that it has virtually nothing to do with how good or bad the page looks, but rather what it's content is.

A badly styled page is risky because you will often lose first time visitors, but if your content is good enough the user will overcome that barrier.

It is you who are missing the point, and the point was made originally by the very guy that invented the world wide web in the first place, Tim Berners-Lee, which is that html is meant to be used to mark up the meaning of content, and not to style it. The Web is not paper! It isn't even a monitor or any particular kind of display. The web is a flexible medium for the exchange of information, or content. Html is meant for marking up that content according to it's meaning or structure.

A page should be usable without it's style applied, but how it looks is much much less important than the content it provides. Your html should be written without any regard to style issues. That's what CSS is for and it is and example of the programmer's design idea of "separation of concerns".

IF you mark up your content with semantic and valid html the result will be generally perfectly usable without styles. With properly applied CSS it can, if done right, make that content even more accessible and also good looking. These are important issues not to be ignored, but distinctly secondary to the content that the page is providing.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 13 years 40 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

there you go.

If there was only one way to create web pages, everyone would do it and web designers would be paid peanuts.

Just doin' my best at www.jinotega.com
Tony Robins

Triumph (not verified)
Anonymous's picture
Guru

jinoturistica wrote:...

jinoturistica wrote:
... However, 1) degraded badly while 2) degraded perfectly ...

Ah, now I see what you're trying to say but unfortunately you're wrong on this subject:

  1. "degraded" as expected
  2. got it wrong.

If you'd like to take it a step further let's look at it this way:

Here is a list of links:

  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
  • xxx
  • xxx
  • xxx
    • yyy
    • yyy
    • yyy
    • yyy
  • xxx
  • xxx
and here is just a bunch of links:
xxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyyxxxyyy

Now let's talk about degradation... http://www.imaginekitty.com/noStyleLinks.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

jinoturistica wrote:Mr.

jinoturistica wrote:
Mr. Seedhouse, Attached is a pix of the non-CSS display of the top of this very forum. As you'll see there are 2 lists,

1) main menu coded as a UL. Navigation menus are usually unordered so, semantically, reasonable.

2) breadcrumb trail coded as a bunch of links. Semantically, breadcrumb trails are ordered lists.

However, 1) degraded badly while 2) degraded perfectly

If I grin any more my face will fall in half. Smile

The error here is in describing the ul list as degrading badly it does not it does what it should do without styles applied to force the visual rendering to a horizontal layout. The aim is not to recreate the look of the CSS styles view in a plain text mode but that elements are contained within some form of semantic context, a list for a set of links is correct and the vertical arrangement of them not a problem, handhelds should be happy with this as well, a set of inline links is fine as well as long as there is some form of separator to break the links so that screen readers don't try and read them as a jumble.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 13 years 40 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

'tis war you want, eh?

I'll raise that ante with examples of my own.

Your example permitted 2, shall we say, "adjustments" to sway the casual viewers. You permitted me zero(Innocent HTML markup and permitted yourself an HTML structure.

By simply adding a space between my links, text wrap became possible and the overrun in your demo was eliminated. Dropping a DIV between each group of xxx and yyy in my links immediately made obvious that a structure existed.

Some screen readers announce "list of 100 items" when they hit a list structure and then offer to skip to the end. As you'll see from my example, that is trivially easy to simulate with the first link in the list.

I now see even less reason to use a UL for a list. After CSS removed the bullet, the indent, made it inline, and fixed the margins and padding, the only thing left was the list-ness of the thing. And the only known reason for the list-ness was the announcement by screen readers. Well, if the announcement can come from the first link itself ... what else is there but semantics and political correctness?

Enough fun for now, back to my real job. being retired.

Just doin' my best at www.jinotega.com
Tony Robins

Triumph (not verified)
Anonymous's picture
Guru

Oh, you're just being

Oh, you're just being contrary. I know some people get off on that sort of thing so have at it. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

mickycss02 wrote:I don't

mickycss02 wrote:
I don't want to use text/image replacement techniques.

Thanks.

er . . . . why not?

Verschwindende wrote:
  • CSS doesn't make pies