7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

CSS Question, how to place image in text link

by biznics
6 replies
  • WEB DESIGN
    • |
Hi all,

I am back with another newbie question on CSS.

I have a sidebar menu and now I want to add an arrow/pointer before the linked text; keeping the arrow a part of the link too.

I am attaching an image to give you the idea of what I require.


Thanks,
#css #image #link #place #question #text
  • Profile picture of the author angelie
    I recommend that you wrap the link/s within an unordered list. Example:

    HTML Code:
    <ul class="arrowList">
<li><a href="#">Website Navigation 1</a></li>
<li><a href="#">Website Navigation 2</a></li>
</ul>
    Then to add an arrow, you need to add this in your CSS file:

    Code:
    ul.arrowList{
list-style:disc inside url("images/arrow.gif");
}
    Just make sure to specify the correct path to your arrow.gif file.

    You may check CSS - Unordered List Styles (UL) for more information.
    {{ DiscussionBoard.errors[5116536].message }}
    • Profile picture of the author biznics
      Originally Posted by angelie View Post

      I recommend that you wrap the link/s within an unordered list. Example:

      HTML Code:
      <ul class="arrowList">
<li><a href="#">Website Navigation 1</a></li>
<li><a href="#">Website Navigation 2</a></li>
</ul>
      Then to add an arrow, you need to add this in your CSS file:

      Code:
      ul.arrowList{
list-style:disc inside url("http://www.warriorforum.com/images/arrow.gif");
}
      Just make sure to specify the correct path to your arrow.gif file.

      You may check CSS - Unordered List Styles (UL) for more information.
      Thanks to all who replied.

      @angeli, I already have the html & css for the links, just need to add the "arrow image" right before the linked text. But in my coding I am a bit confused how to add/edit the code as per the codes you've mentioned.

      Here is my html & css of the navigation link:

      HTML:

      <div id="rightColumnContent">
      <h3>Online Nursing Programs </h3>
      <ul>
      <li> <a href="#">Choosing Online Nursing Degree</a> </li>
      </ul>



      CSS:
      #rightColumn ul {
      margin: 0px;
      padding-top: 10px;
      padding-right: 0px;
      padding-bottom: 10px;
      padding-left: 0px;

      }
      #rightColumn ul li {
      list-style: none;
      display: inline;
      }
      #rightColumn ul li a {
      display: block;
      padding: 8px 4px 8px 6px;
      color: #0066cc;
      font-size:13px;
      font-weight: bold;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #f3f3f3;

      }

      As you can see there are three rightcolumncontent in the CSS, so which one should I edit to add the arrow image?

      Thanks,
      {{ DiscussionBoard.errors[5123353].message }}
      • Profile picture of the author angelie
        Try changing this CSS block:
        Code:
        #rightColumn ul li {
list-style: none;
display: inline;
}
        to

        Code:
        #rightColumn ul li {
list-style: disc inside url("images/arrow.gif");
display: inline;
}
        Again, you must specify the correct image path and filename. Let me know if this works for you or not
        {{ DiscussionBoard.errors[5126361].message }}
  • Profile picture of the author m4life
    I;d start here w3schools[dot]com/jsref/prop_style_cursor.asp if you just want browser-ready options.

    CSS:
    #sidebar a{cursor:pointer;}

    #sidebar{cursor:pointer;}

    or something along those lines

    Can't talk specifics until we know more about the project.

    Best of luck!

    ps: you don't need images for something simple like this.

    ps: get firebug for firefox
    {{ DiscussionBoard.errors[5117983].message }}
  • Profile picture of the author jumpa
    I suggest another style, just i little bit different

    <html><head><title>segitiga</title></head>
    <style>
    h3{font-size:24px;}
    #rightColumn{
    margin: 0px auto;
    padding: 10px 0px 10px 0px;
    font-family:calibri;
    font-size:18px
    }
    #rightColumn ul{padding: 0; margin: 0;}
    #rightColumn li{list-style: none; padding: 0 10px 0 5px; margin: 0 2px 0 2px; display: inline;}
    #rightColumn li a{color:#3113a6; text-decoration: none;}
    #rightColumn li a:hover{color:#990000;font-size:22px;}


    </style>
    </head>
    <body>



    <div id="rightColumn">
    <h3>Online Nursing Programs </h3>
    <ul>
    <li><a href="#"><img src="images/arrow.jpg"></a> </li>
    <li><a href="#">Choosing Online Nursing Degree</a> </li>
    </ul>
    </div>


    </body>
    </html>

    or you can see on this link

    segitiga

    what do you think of that?

    see you
    {{ DiscussionBoard.errors[5127666].message }}
    • Profile picture of the author biznics
      Originally Posted by jumpa View Post

      I suggest another style, just i little bit different

      <html><head><title>segitiga</title></head>
      <style>
      h3{font-size:24px;}
      #rightColumn{
      margin: 0px auto;
      padding: 10px 0px 10px 0px;
      font-family:calibri;
      font-size:18px
      }
      #rightColumn ul{padding: 0; margin: 0;}
      #rightColumn li{list-style: none; padding: 0 10px 0 5px; margin: 0 2px 0 2px; display: inline;}
      #rightColumn li a{color:#3113a6; text-decoration: none;}
      #rightColumn li a:hover{color:#990000;font-size:22px;}


      </style>
      </head>
      <body>



      <div id="rightColumn">
      <h3>Online Nursing Programs </h3>
      <ul>
      <li><a href="#"><img src="images/arrow.jpg"></a> </li>
      <li><a href="#">Choosing Online Nursing Degree</a> </li>
      </ul>
      </div>


      </body>
      </html>

      or you can see on this link

      segitiga

      what do you think of that?

      see you
      Thanks mate, it worked like a charm.

      And thank you all who replied, really appreciate it.
      {{ DiscussionBoard.errors[5132060].message }}

Trending Topics