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
    Account closed at user request
    Join Date
    Aug 2005
    Location
    Edinburgh
    Posts
    2,427
    Thanks
    846
    Thanked
    379 times in 294 posts
    • blueball's system
      • Motherboard:
      • Gigabyte Z270 - HD3P
      • CPU:
      • i7-7700K (4 x 4.2GHz plus HT)
      • Memory:
      • Team Group Vulcan T-Force 32GB (2x16GB) DDR4 PC4-19200C14 2400MHz
      • Storage:
      • 1TB Samsung 960 EVO NVMe PCIE M.2 plus Samsung 860 EVO 4TB SSD
      • Graphics card(s):
      • ASUS RTX 2080 Ti ROG Strix OC
      • PSU:
      • Corsair HX850 850 W Full Modular 80 Plus Platinum
      • Case:
      • Corsair Carbide 330R Ultra Silent Midi Tower
      • Operating System:
      • Win 7 Ultimate x64 (using wufuc to allow Win7 to run on this CPU)
      • Monitor(s):
      • BenQ GW2765HT LED IPS 27 inch 2560x1440
      • Internet:
      • Virgin Media 380Mb
    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;}

  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
  •