SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Can this navigation image be duplicated using CSS?

    Basically trying to make a navigation that looks similar to the image:

    Trying to do the following:

    1. Have the dotted lines on the left and the bottom of all the text (I tried using the CSS dotted lines, but in IE the dotted lines were to big height wise...maybe i did it wrong though)

    2. I want the orange arrow to only appear on hover over

    3. I want the white text to turn red. A shade of red that looks readable over black.

    I've been trying variations of CSS navs to see if i can find something else to compensate but it doesn't seem to look any better lol.

    If anyone can provide any input, it would be greatly appreciated and thank you in advance.
    Attached Images Attached Images

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    1: What value did you use for the border? 1px?
    2: if this is an list, you may have ul a defined. You will need to define the hover such as:

    Code CSS:
    .nav ul a:hover {
      background-image: url(path/to/img.jpg) no-repeat;
    }
    3.
    Code css:
    .nav ul:hover, .nav ul a:hover {
       color: red;
    }
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your response.

    I believe that was the border size i used. I mean in firefox it looked perfect, but in internet explorer the dotted border looked more like a series of vertical lines instead of dots.

    I was looking into doing this with CSS and lists, but im not really sure how i would go about creating the dotted lines for the left and bottom. I could use a background image, but in some parts of my navigation i plan to have a section further down but I need the left lines to be able to run down as needed.

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 4SeeN View Post
    I believe that was the border size i used. I mean in firefox it looked perfect, but in internet explorer the dotted border looked more like a series of vertical lines instead of dots.
    This is the difference between the engines.

    Quote Originally Posted by 4SeeN View Post
    I was looking into doing this with CSS and lists, but im not really sure how i would go about creating the dotted lines for the left and bottom. I could use a background image, but in some parts of my navigation i plan to have a section further down but I need the left lines to be able to run down as needed.
    The lines are just simple dotted borders applied to the appropriate sides. So:
    Code css:
    ul li {
       border-left: 1px dotted #ccc;
       border-bottom: 1px dotted #ccc;
    }
    Ryan B | My Blog | Twitter

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    but in internet explorer the dotted border looked more like a series of vertical lines instead of dots.
    Ie6- doesn't do 1px dotted borders properly as it renders them as dashes. Its a well known and very old bug with no real fix.

    You could simply use background images instead for more consistent results.

    That nav is pretty simple and you would just use a background image repeated along the bottom of each anchor and dotted vertical border on each list parent.

    There are plenty of list examples here to get your teeth into which should point you in the right direction.


Bookmarks

Posting Permissions

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