Results 1 to 7 of 7

Thread: CSS issue once again

  1. #1
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts

    CSS issue once again

    I'm trying to use the same method as CNET download have done for making dotted borders on their links. Yes I know it can be done by doing border:1px dotted #00000; etc. But i'm trying to get custom borders to work so the dots are much nicer.

    Here's what they look like

    http://www.download.com/

    And here's the CSS file

    http://www.download.com/css/dl/dl_global.css

    Still can't figure out how to do it even with the CSS file. It's quite messy that's for sure!

  2. #2
    Senior Moment blueball's Avatar
    Join Date
    Aug 2005
    Location
    Edinburgh
    Posts
    2,426
    Thanks
    846
    Thanked
    379 times in 294 posts
    • blueball's system
      • Motherboard:
      • Asus Z390A
      • CPU:
      • i9-9900KS
      • Memory:
      • Kingston 64GB (2x32GB) DDR4 2400MHz
      • Storage:
      • 2TB Samsung 970 EVO Plus NVMe PCIE M.2 plus Samsung 860 EVO 4TB SSD
      • Graphics card(s):
      • ASUS TUF RTX 3080 Ti GAMING OC
      • PSU:
      • Corsair HX850 850 W Full Modular 80 Plus Platinum
      • Case:
      • Corsair Carbide 330R Ultra Silent Midi Tower
      • Operating System:
      • Win 10 Pro x64
      • Monitor(s):
      • IIYAMA 3461WQ IPS 34" 3440x1440 plus BenQ GW2765HT IPS 27" 2560x1440
      • Internet:
      • Plusnet 28Mb
    This seems to be the line:

    div.hr-dots {height: 1px; background: url(/i/dl/global/hr-dots.gif) repeat-x bottom left; clear: both; padding: 0 0 0 0; margin: 0 0 0 0;}
    Rgds,

    BB
    Hexus Trust here and here

  3. #3
    Registered+
    Join Date
    Aug 2005
    Posts
    33
    Thanks
    0
    Thanked
    0 times in 0 posts
    As blueball accurately pointed out, their dot graphic is at http://www.download.com/i/dl/global/hr-dots.gif

  4. #4
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    If that's the case then you'd have to create a div for every single one. It should be done automatically when you create a list element which is what i looked at but it still doesn't make sense.

  5. #5
    Bigger than Jesus Norky's Avatar
    Join Date
    Feb 2005
    Posts
    1,579
    Thanks
    1
    Thanked
    8 times in 8 posts
    Not necessarily, just use something like:

    li {
    display: block;
    height: 15px;
    background: url(dots.gif) repeat-x;
    }

    ...and so forth

  6. #6
    Senior Member Kezzer's Avatar
    Join Date
    Sep 2003
    Posts
    4,863
    Thanks
    12
    Thanked
    5 times in 5 posts
    ah yes! That can work but i'd have to have an extra list element on one of them. I'll try that though, cheers Norky

  7. #7
    Senior Member
    Join Date
    Aug 2005
    Location
    Leeds
    Posts
    267
    Thanks
    8
    Thanked
    16 times in 16 posts
    you can fix the height of the li like Norky said, but if you want the text to resize then it would be neater to use padding to get some space, then lock the background to an edge:

    li {
    display: block;
    padding: 3px
    background: url(dots.gif) repeat-x bottom;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Microsoft Support....
    By Devilbod in forum General Discussion
    Replies: 14
    Last Post: 09-04-2007, 02:42 AM
  2. CSS issue
    By Kezzer in forum Software
    Replies: 5
    Last Post: 31-07-2005, 12:45 PM
  3. divs and CSS
    By Kezzer in forum Software
    Replies: 11
    Last Post: 18-11-2003, 12:51 PM
  4. CSS + Other Language Questions
    By Jonny M in forum Software
    Replies: 7
    Last Post: 11-10-2003, 11:17 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •