Styling drop-down menu

@lkeeneyOct 01.2014

I have a a website I am designing with a drop-down menu of nine different links. My client wants the text in some of these to be centered and others to be aligned to the left. Is there some way of using CSS selectors for the nine different drop-down links?

Here is an example. The actual text is different from what I have shown:

[CODE] <li><a href=”#”>The Story of Paintings</a> <div> <a href=”story/index.shtml#top”>It All Began</a> <a href=”story/index.shtml#p2″>Finding Our Artist</a> <a href=”story/index.shtml#p3″>From here to there</a> <a href=”story/index.shtml#p4″>6-Hour Meeting</a> <a href=”story/index.shtml#p5″>Paintings Arrive</a> <a href=”story/index.shtml#p6″>From there to here</a> <a href=”story/index.shtml#p7″>From here to there</a> <a href=”story/index.shtml#p8″>New Trip</a> <a href=”story/index.shtml#p9″>Launch</a> </div> </li> [/CODE]

to post a comment

CSS

8 Comments(s) _↴

@kralcxOct 03.2014 — #examples:

<i>
 </i>&lt;a href="story/index.shtml#top"&gt;&lt;span style="center"&gt;It All Began&lt;/span&gt;&lt;/a&gt;
 &lt;a href="story/index.shtml#p2"&gt;&lt;span style="left"&gt;Finding Our Artist&lt;/span&gt;&lt;/a&gt;
 &lt;a href="story/index.shtml#p3"&gt;&lt;span style="center"&gt;From here to there&lt;/span&gt;&lt;/a&gt;

@lkeeneyauthorOct 03.2014 — #examples:

<i>
 </i>&lt;a href="story/index.shtml#top"&gt;&lt;span style="center"&gt;It All Began&lt;/span&gt;&lt;/a&gt;
 &lt;a href="story/index.shtml#p2"&gt;&lt;span style="left"&gt;Finding Our Artist&lt;/span&gt;&lt;/a&gt;
 &lt;a href="story/index.shtml#p3"&gt;&lt;span style="center"&gt;From here to there&lt;/span&gt;&lt;/a&gt;

[/QUOTE]

Thank you so much.

I don't know why I didn't think of doing it this way. I guess it is because I very seldom (almost never) use in-line styling. I will have to try and remember this.

@deathshadowOct 03.2014 — #Complete waste of markup to use those span... there's NO reason for them to even exist since there's:

1) Nothing preventing you from putting the style on the anchor.

2) style="center" or style="left" is gibberish and invalid CSS.

3) you shouldn't be putting crap like alignment in the markup.

First thing I'd ask is WHY are some of them different? That's usually what you use for a class name, then you put a CLASS on the anchors saying which ones are DIFFERENT and why.

OF course, why are you using a DIV and a run-on sentence of nothing but inline-level tags?

"It All Began Finding Our Artist From here to there 6-Hour Meeting Paintings Arrive From there to here From here to there New Trip Launch"

... as a run-on doesn't make a whole lot of sense, and that's what using JUST anchors in there does. That's why menu choices are usually put inside a LIST just like the list you seem to have for the parent. Remember, anchor might mean it's a link point, but that doesn't change the semantic / grammatical / structural meaning of it's content.

Let's say that "it all began" and "New trip" are "featured stories" which is why their alignment is different:

 &lt;li&gt;
 &lt;a href="#"&gt;The Story of Paintings&lt;/a&gt;
 &lt;ul&gt;
 &lt;li class="featured"&gt;&lt;a href="story/index.shtml#top"&gt;It All Began&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="story/index.shtml#p2"&gt;Finding Our Artist&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="story/index.shtml#p3"&gt;From here to there&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="story/index.shtml#p4"&gt;6-Hour Meeting&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="story/index.shtml#p5"&gt;Paintings Arrive&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="story/index.shtml#p6"&gt;From there to here&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="story/index.shtml#p7"&gt;From here to there&lt;/a&gt;&lt;/li&gt;
 &lt;li class="featured"&gt;&lt;a href="story/index.shtml#p8"&gt;New Trip&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="story/index.shtml#p9"&gt;Launch&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;

That would be the proper semantic markup for that.

Let's say the parent UL is #storyMenu

#storyMenu li li {
 text-align:center;
 }
 
 #storyMenu li li.featured {
 text-align:left;
 }

All you need -- set the ones that are the vast majority of cases as the tag's default behavior, then set the handful that are different with a class describing WHY they are different -- WITHOUT saying [b]how[/b] they are different in the markup as presentation has no business there in the first place.

@lkeeneyauthorOct 04.2014 — #Complete waste of markup to use those span... there's NO reason for them to even exist since there's:

1) Nothing preventing you from putting the style on the anchor.

2) style="center" or style="left" is gibberish and invalid CSS.

3) you shouldn't be putting crap like alignment in the markup.

...

All you need -- set the ones that are the vast majority of cases as the tag's default behavior, then set the handful that are different with a class describing WHY they are different -- WITHOUT saying [b]how[/b] they are different in the markup as presentation has no business there in the first place.[/QUOTE]

This website is completely different from any other website I have ever designed.

First, the text I show in the example is not the actual text on the website. I have done this because my client insisted I sign a non-disclosure agreement which prevents me from releasing any information on the website until they make the website live.

The actual text in each of the drop-down menu links is very long, covering numerous lines. I don't understand why my client wants some of them aligned left and some of them center aligned.

My client insists on having all these pages on a single web page. They also insist that each one of these links link to a specific vertical portion of the page which shows the text for the particular subject. They also insist that these pages be exactly 710 pixels high so these pages fill the screen on a specific Apple computer.

They want the page set up so the viewer using this particular Apple computer can scroll up and down and view each of these 9 different pages, and they don't want the viewer to see any space above or below the individual page content. They want a link at the bottom of each of these 9 pages that take them back to the top of the page where the navigation bar can be seen.

They are concerned down to the single pixel lever of everything on these pages.

This is the most frustrating website I have ever designed.

@deathshadowOct 04.2014 — #Sounds like a print designer who doesn't know enough about the Internet to be ALLOWED to have a website.

@lkeeneyauthorOct 04.2014 — #Sounds like a print designer who doesn't know enough about the Internet to be ALLOWED to have a website.[/QUOTE]

Wow, how did you know? My client is a newspaper editor who is starting a new business.

@deathshadowOct 04.2014 — #The moment you said pixel obsession and fixed heights -- two things that have NO MALFING BUSINESS ON A WEBSITE IN THE FIRST PLACE...

Meaning the client knows **** about **** -- which is why I'd probably just walk away from a project like that. (and have many times).

Usually such sites are such utter and complete usability train-wrecks they are doomed to failure, because concepts like accessibility, fluid layout, responsive layout, and just plain "what it looks like on your screen has dick to do with what it looks like on anyone else's screen" are so inconceivable to them. They can't get their head out of the print and perfect layout mentality that really has no place on the Internet.

Admittedly, I have a history of telling clients and potential clients exactly that to their face, using far less polite language in the process.

@lkeeneyauthorOct 04.2014 — #The moment you said pixel obsession and fixed heights -- two things that have NO MALFING BUSINESS ON A WEBSITE IN THE FIRST PLACE...

Meaning the client knows **** about **** -- which is why I'd probably just walk away from a project like that. (and have many times).

Usually such sites are such utter and complete usability train-wrecks they are doomed to failure, because concepts like accessibility, fluid layout, responsive layout, and just plain "what it looks like on your screen has dick to do with what it looks like on anyone else's screen" are so inconceivable to them. They can't get their head out of the print and perfect layout mentality that really has no place on the Internet.

Admittedly, I have a history of telling clients and potential clients exactly that to their face, using far less polite language in the process.[/QUOTE]

I have explained exactly what you said to this client a number of times, but in a nice way. Unfortunately, this client is related to a friend of mine. In the initial contact with the client this was going to be a very simple website. It has now turned into a disaster, design wise.

Also in #CSS _↴

Display inconsistencies between browsers PopUp Window Not Tab?adding images to links challenge

Success!

Help @lkeeney spread the word by sharing this article on Twitter...

Tweet This

Styling drop-down menu

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Styling drop-down menu

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴