SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Thin Black Line using CSS

  1. #1
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thin Black Line using CSS

    Hi All,

    I have just started working with CSS. Is it possible to create a thin black line that should run straight along the bottom of the links and then should curve up along the left.

    I would appreciate if someone please give me pointers to the above problem. Thanks in advance.

    Best Regards,
    Inderpal Singh

  2. #2
    SitePoint Zealot buzza_gts's Avatar
    Join Date
    Oct 2005
    Location
    Melbourne
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give a link to an example of somthing similar to want you want to achieve?

  3. #3
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't try'd it, but it should be possible if you specify the border-left and border-bottom for the link in the css file.

    You would get something like this

    Code:
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  4. #4
    SP itinerant bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,064
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It won't curve up though - you'll need to use an image for that.

  5. #5
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everybody for replying. But is there any way to do that without using image or if somebody know from where I can get the image because I dont know how to create images.

    Regards,
    Inderpal Singh

  6. #6
    SP itinerant bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,064
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't know how to create images I imagine you'll struggle with the complex CSS and/or javascript that's required to create rounded corners without images.

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    7,334
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    If you really want to do it without images, then you need a browser that understands CSS3, like Firefox.

    You have to be aware that CSS3 is still a draft, and that not all properties are applied. IE doesn't apply this one, so you will be restricted to get the exact look in those browsers only.

    Other way would be to go for SVG (which is a W3C standard). Mozilla web browsers understands SVG natively, and IE can use Adobe SVG's plug-in. Again, you'd be restricted to the capabilities of the browser.

    That's why we all use images to create rounded corners.

    Creating it is easy, but you do need the appropiate software (although most of the people use photoshop, any will do (you may even try to use paint, or photopaint, which normally come with Windows).

    There are also a few free image creation programs around (furthermore, I remember that there was a thread in this section that spoke about them) but I can't give you names as I use photoshop.
    Before asking, do a search... if you don't find the answer, then ask
    The purpose of this forum is to help others in the community, that's why it's called Sitepoint and not Linkpoint.
    SP Guidelines - No fluff.

    Thinking Web: Voices of the Community - The Community Book

  8. #8
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks moolna for your effort and time. Could you give me some pointers to make it work in CSS3 or SVG...

    Regards,
    Inderpal Singh

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Is it possible to create a thin black line that should run straight along the bottom of the links and then should curve up along the left.

    Edit:


    Something like this? IE doesn't play too well when a link is spread over multiple lines. That can be worked around with:

    Code:
            white-space: nowrap;
    Last edited by Egor; Jul 27, 2006 at 06:02.

  10. #10
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Eqor. Yeah I want like that only.......

    Regards,
    Inderpal Singh

  11. #11
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    7,334
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by inderpal.singh
    Thanks moolna for your effort and time. Could you give me some pointers to make it work in CSS3 or SVG...

    Regards,
    Inderpal Singh
    I think that Egor provided a better answer. I misunderstood what you wanted. Sorry. I thought that you wanted a thin line under you links... but I thought that those links were part of a menu...

    Still, if you want to check SVG, just go to www.w3.org for the official specification.
    Before asking, do a search... if you don't find the answer, then ask
    The purpose of this forum is to help others in the community, that's why it's called Sitepoint and not Linkpoint.
    SP Guidelines - No fluff.

    Thinking Web: Voices of the Community - The Community Book

  12. #12
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I was happy to see that site and the thin curve line beneath the links but when I see the code, it was an image they are using. I tried to edit that image to make it black but failed, somehow. Could somebody please tell me how to change that to black?

    Thanks a ton in advance.

    Regards,
    Inderpal Singh

  13. #13
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    7,334
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    They would be using two images. One for the link, and another one of a different color for the :hover effect.
    Before asking, do a search... if you don't find the answer, then ask
    The purpose of this forum is to help others in the community, that's why it's called Sitepoint and not Linkpoint.
    SP Guidelines - No fluff.

    Thinking Web: Voices of the Community - The Community Book

  14. #14
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by inderpal.singh
    Hi,

    I was happy to see that site and the thin curve line beneath the links but when I see the code, it was an image they are using. I tried to edit that image to make it black but failed, somehow. Could somebody please tell me how to change that to black?

    Thanks a ton in advance.

    Regards,
    Inderpal Singh
    You're going to have to learn to use an image editor if you want to get anywhere my friend.


  15. #15
    SitePoint Enthusiast inderpal.singh's Avatar
    Join Date
    Jul 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eqor for your effort and time. Surely, I'll learn to use an image editor.......

    Regards,
    Inderpal Singh

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
  •