Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    I am trying to get "Music" to be written vertically i.e "u" below" m", "s" below "u" etc.
    The text is in a div and the css I have tried is here:
    Code:
    #music    {
        writing-mode:tb-rl;
        width:10px;
        height:100px;
        font-family: Arial;
        color: #000000;
        font-size: 18px;
        position: absolute; top: 30%; left: 20%;
            }
    I have tried to force the text on to the line below by setting width narrow but as I am new to this I must admit to struggling.
    Any suggestions please?

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Do what Stu did (except that I would have used spans instead of em tags).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks, Google didn't point me to that one!

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Weird. Stu's got some good stuff. It usually needs to be cleaned up a bit, but he at least has the concepts down.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Well I adapted Stu's code to suit my own requirements. I have the keys in a div that I have positioned and what I would like to do is be able to alter the spacing between the lists so that it overlays the piano key image in a div behind it.

    Here's a link to the page: http://www.17minutes.f2s.com/Tich4.html

    Here's the code from Stus' page adapted to suit myself in terms of colours etc:
    Code:
    #vertical {
      width:15em;
      padding:0;
      margin:0 auto;
      list-style-type:none;
      font-size:1.4em;
      font-family:georgia, "times new roman", serif;
      }
    #vertical li {
      float:left;
      border:0;
      margin:0;
      }
    #vertical li a {
      text-decoration:none;
      color:#000;
      display:block;
      width:1.5em;
      height:1.5em;
      border-top:0;
      height:auto;
      }
    #vertical li a em {
      font-style:normal;
      display:block;
      text-align:center;
      background:transparent;
      border-left:0;
      border-right:0;
      }
    #vertical li a em.nd {
      border-bottom:0;
      }
    #vertical li a:hover {
      background:transparent;
      }
    #vertical li a:hover em {
      background:transparent;
      color:#800;
      }
    Any idea how I do this please? Tried a number of things but can't nail it on the head.
    Cheers, Lol

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Add some padding to your #vertical li .

    Something like this (values extimated, adjust as needed):
    Code:
    padding:  0 30px; /* the first value represents top/bottom padding; the second left/right padding.  The second one is your key one. */
    Lol999 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Okay, I added padding: 0 17px; to the #vertical li and this is as good as it gets: http://www.17minutes.f2s.com/Tich4.html

    Increasing the padding sends the "Links" text underneath for some reason. I've taken out the "text-align: center;" from the #links div css which contains the lists and this has had no effrect. I don't know if any sort of padding will give an acceptable sort of alignment over the keys which leads me to wonder how to achieve this?

    cheers, Lol

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    You may have to set padding on the individual list items themselves. Your keys have black keys between them at varying positions, which would necessitate custom padding on each list item.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Yeah I had thought of that but am unsure as to whereabouts to put the padding in the css? Any hint would be great!
    Cheers, Lol

    p.s. is it time to consider sprites? if there's a straightforward fix to Stu's code that's great but if not are sprites the way to go?

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    The best hint I could give you is to do something like this:
    Code:
    li#music {padding-left:  28px;  padding-right:  40px} /* again, adjust as needed.  I'm just picking numbers arbitrarily. */
    li#links {padding-right:  40px;  padding-left:  28px;}
    ...
    Code:
    <li id="music">Music link</li>
    <li id="links">Links</li>
    Lol999 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com