17 replies [Last post]
Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 7 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

I'd like to align the menus that read "+ Playlist, Artist Profile, Download, Buy Song" to the right of the screen:

http://wisetopic.com/profile/musicTray/library.aspx?userId=57

Here is my CSS for the menu:

.mp3Menu div { float: left; } .mp3Menu td { float: right; } .mp3Menu a { padding: 7px; margin-right: 4px; font-family: Arial, Verdana, Tahoma; font-size: 9px; font-weight: lighter; text-decoration: none; color: #838383; border: solid 1px #181c21; background:#336868 url(http://wisetopic.com/_img/_core/mp3Menu_bg.gif); display: block; } .mp3Menu a:hover { color: white; border: solid 1px white; }

And the XHTML

/shared/WiseImage.ashx?image=<%#Eval("userId")%>.jpg&height=50" class="artImg" alt="Artist Photo" /> /profile/?userid=<%#Eval("ArtistId")%>"> <%#Eval("ArtistName")%>

<%#Eval("mp3Name")%> (<%#Eval("length")%>) ')" alt="Play Song" src="images/playBtn.gif" style="border: 0" />

Sorry for the ASP.NET code in there! This page validates in strict mode.

http://validator.w3.org/check?uri=http%3A%2F%2Fwisetopic.com%2Fprofile%2FmusicTray%2Flibrary.aspx%3FuserId%3D57

Thanks Smile

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

You could do something along

You could do something along the lines of:

.mp3Menu{float:right;width:260px}
.mp3Menu div{float:right;}

But this is rather obvious and I would have thought you'd have explored that approach.

To be honest I'm not sure why you're using all these divs in this fashion, if you're going to use a table it be may be best to construct the table fully and along accessible lines with the use of thead/caption elements 'scope' attributes etc rather than a half hearted table layout?

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You have an extra div in

You have an extra div in each of the tds on the right. You can lose it.

.mp3Menu {
  text-align: right; /*I'm pretty sure you can put this 
                       class on the td, and lose the div.*/
  }

.mp3Menu div {
  display: -moz-inline-stack; /*work around for testing;
                                lose this div and all 
                                should be copacetic*/
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Which is as I asked "why the

Which is as I asked "why the divs?" loose them but also if were using tables lets form them properly or at least to the fullest extent of the attributes available.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hugo wrote:Which is as I

Hugo wrote:
Which is as I asked "why the divs?"

Aw, we crossed. I didn't recheck the thread after posting, or I would have said something. You're right, there is no need for anything but the table structure.

It's kind of a pain to have to set a class for the td on each row, when the td+td+td selector would do it in one go.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Someday it'll be explained

Someday it'll be explained why it was so difficult to code one of the most important aspects of CSS, namely the selectors, why have our lives been made so difficult?

CSS3 extends selectors to a degree hitherto unimagined and take application of properties to a new exciting level, but I doubt we'll get to actually use them, just marvel at what could be possible Sad much like the attribute selectors *sigh*

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

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

kk5st wrote:It's kind of a

kk5st wrote:
It's kind of a pain to have to set a class for the td on each row, when the td+td+td selector would do it in one go.

You don't have to. Use the adjacent sibling selector for modern browsers and style the column (after adding the necessary html) for IE. For short tables the additional column markup might negate the classless tds, but it's a treat for lengthy ones.

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

Do you refer to colgroup?

Do you refer to colgroup?

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

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

colgroup could be used, but

colgroup could be used, but I was referring to simple col (with a class of course).

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

Of course, had me 'deep

Of course, had me 'deep thought' hat on.

This is partly why my reference to building the table fully earlier, given full reign the table has a lot of useful and necessary bit's and bobs

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

wolfcry911 wrote:colgroup

wolfcry911 wrote:
colgroup could be used, but I was referring to simple col (with a class of course).

I haven't used tables for anything complex in ages, and I seem to recall poor support for col, colgroup, etc. Can you show a coding example?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

IE6+ handles colgroup, I'd

IE6+ handles colgroup, I'd show an example but I think I just cocked it up, tables are a confusing pain to write , especially when one starts to use all the arcane bit's and bobs, never can read the flow of the markup

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

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

gary, here's an old

gary, here's an old example. It would need to be updated for IE7


col style demo

body {
margin: 0;
padding: 50px 0 0 0;
text-align: center;
}

.stripe {
background-color: #eee;
}

table {
margin: 0 auto;
border: 1px solid #666;
border-spacing: 0; /* moz only, still need cellspacing attribute */
text-align: left;
}

caption {
margin: 0 auto;
}

th {
text-align: center;
padding: 4px 0;
background: #eef;
border-bottom: 1px solid #666;
}

/* for IE */
col {
padding: 4px;
}
col.rank {
text-align: right;
padding-left: 12px;
}

/* for mozilla */
tr>td {
padding: 4px;
}
table td:first-child,
table td:first-child+td+td+td,
table td:first-child+td+td+td+td+td+td,
table td:first-child+td+td+td+td+td+td+td+td+td {
text-align: right;
padding-left: 12px;
}

Line Personnel - listed by seniority in group














Group 1
Group 2
Group 3
Group 4





Captain
David
C5
Captain
John
C3
Captain
Richard
C6
Captain
Peter
C2


Lieut.
Kevin
L3
Lieut.
Steven
L4
Lieut.
Joseph
L2
Lieut.
Paul
L1


FF
Richard
1
FF
Bruce
3
FF
Albert
2
FF
Robert
33


FF
Russel
35
FF
Gene
40
FF
Kenneth
6
FF
Jerome
39


gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Thanks, Wolfie; brought back

Thanks, Wolfie; brought back memories that shouldn't be forgot. Odd thing that Firefox and Opera don't support the text-align. Otherwise, that would be the way to go.

I reworked it to more closely resemble the OP's issue.


/**/





coltest







Column 1


Column 2


Column 3




item 1


item 2


items 3 and 3a




cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 7 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Thank you guys - I got it

Thank you guys - I got it working Smile

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

And what approach did you

And what approach did you take Jenni?

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

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 7 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Sorry, I apologize. I

Sorry, I apologize. I actually kept the div'ed-out menu within in the table, removed the extraneous TD and CSS for .mp3Menu div, and added the float:right property to the two .mp3Menu elements. I did actually try that before, but because I didn't specify the width, the browser didn't want to position it correctly.

The reason why I have divs mixed up with tables is because originally, when I built this page, I tried using only DIVS. This turned out to be harder than I originally thought, and because of time constraints (and pressure from the man) I threw a table together. I know thats the last thing you want to hear Hugo, being the CSS perfectionist that you are, but if this were my personal site I would take the extra time to do it right. I hope my boss doesn't read this! LoL.

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

Perfectionism is a disease,

Perfectionism is a disease, it becomes obsessive and is never attainable, I try and temper my perfectionism with a modicum of devil may care coding Smile

I think the point really of the last few posts was that we were happy enough with the table construct but were confused by the div-ing,I'd say go with the table but flesh it out a little with a few colgroups, scopes, caption, etc.

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