1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to do something...

Discussion in 'CSS' started by meamrussian, Jul 23, 2006.

  1. #1
    Hi,

    I'm making a box around a link. I'm using this simple css code for the box:

    .links {
    border: 2px dotted #5b5b5b;
    background: #e5e5e5;
    }

    Now, I will use it like this: <div class="links"><a href="linkhere">Link</a></div>

    Now, how do I make the box width the same as the link text?
    SEMrush
    Thanks a lot.
     
    meamrussian, Jul 23, 2006 IP
    SEMrush
  2. brunozugay

    brunozugay Peon

    Messages:
    150
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    As long as there no width specified the box should stretch to fit the text.
     
    brunozugay, Jul 23, 2006 IP
  3. meamrussian

    meamrussian Active Member

    Messages:
    784
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #3
    No sir, I already tried that. It made the box width 100% of my table. I added two lines, but that shouldn't made a difference. Here's what I have now:

    .links {
    border: 2px dotted #5b5b5b;
    background: #e5e5e5;
    margin-top: -7px;
    margin-bottom: -7px;
    }

    Thanks.
     
    meamrussian, Jul 23, 2006 IP
  4. meamrussian

    meamrussian Active Member

    Messages:
    784
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #4
    I've now spent the last 2 hours trying to do this, and this is really starting to annoy me. Can someone PLEASE help?

    Thanks a lot!
     
    meamrussian, Jul 23, 2006 IP
  5. brunozugay

    brunozugay Peon

    Messages:
    150
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Without looking at your code I can only now assume that the div tag is stretching out to 100% width and you only want it to be as wide as the text, correct? If so, try this:

    .links
    {
    border:2px dotted #5b5b5b;
    background: #e5e5e5;
    display:inline;
    }
     
    brunozugay, Jul 23, 2006 IP
  6. meamrussian

    meamrussian Active Member

    Messages:
    784
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #6
    Heh... I JUST tried that. This actually solves half my problem. You see, I'm doing this for multiple links, one line after another. Now the links are squished together, with no space in between. I tried using top and bottom margins, but that didn't do anything.

    How do I increase the space between the links? Here is the code I have now:

    .links {
    border: 2px dotted #5b5b5b;
    background: #e5e5e5;
    display: inline;
    margin-top: -7px;
    margin-bottom: -7px;
    }

    Thanks a lot.
     
    meamrussian, Jul 23, 2006 IP
  7. brunozugay

    brunozugay Peon

    Messages:
    150
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    brunozugay, Jul 23, 2006 IP
  8. meamrussian

    meamrussian Active Member

    Messages:
    784
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #8
    Hey, you're right! It's easier to work with, and I have more control over the list. But this brings me back to the first question: How do I make the <li> property's width the same as the text?

    Thanks a lot.
     
    meamrussian, Jul 23, 2006 IP
  9. brunozugay

    brunozugay Peon

    Messages:
    150
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    If each text link is of different width you would want your <li>s to be different widths as well?

    I'm not sure what that would look like, but if that's what you want, you will have to style, within the <li> tag, a <span> containing your text.
     
    brunozugay, Jul 23, 2006 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #10
    If you float an element without specifying a width, that element will shrinkwrap its content. You will have to be sure the parent encloses the floats. For example;
    
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        }
    
    li {
        float: left;
        clear: left;
        }
    =========
    <ul>
      <li><a href="some.html">somewhere</a></li>
      <li><a href="another.html">somewhere else</a></li>
    </ul>
    Code (markup):
    cheers,

    gary
     
    kk5st, Jul 23, 2006 IP
  11. brunozugay

    brunozugay Peon

    Messages:
    150
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I think he's looking for a vertical layout, not horizontal.
     
    brunozugay, Jul 24, 2006 IP
  12. meamrussian

    meamrussian Active Member

    Messages:
    784
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #12
    brunozugay: That's precisely what I'm saying. For every different length of the link, I want a different size <li>. How would I go about doing what you said, using the span?

    kk5st: What you said does make the box the size of each text link, but now everything not centered; it's all the left now. How would I go about centering it?

    brunozugay, it would have been horizontal, but he added clear: left; which put each one on the next line. But now how do I center everything?

    Thanks. I didn't know this would be so hard to figure out!
     
    meamrussian, Jul 24, 2006 IP
  13. brunozugay

    brunozugay Peon

    Messages:
    150
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Floated <li> are very hard to center unless you specify the width of <ul> and center that in stead.

    Here's an example of what I was talking about earlier:

    
    <style>
    ul.menu li
    {
    	list-style-type:none;
    	margin:10px;
    }
    
    ul.menu li span
    {
    	background:#e5e5e5;
    	border:#5b5b5b dotted 2px;
    }
    </style>
    
    <ul class="menu">
    <li><span><a href="#">link</a></span></li>
    <li><span><a href="#">another link</a></span></li>
    <li><span><a href="#">third link</a></span></li>
    <li><span><a href="#">one more link</a></span></li>
    <li><span><a href="#">last link</a></span></li>
    </ul>
    
    Code (markup):
     
    brunozugay, Jul 24, 2006 IP
    meamrussian likes this.
  14. meamrussian

    meamrussian Active Member

    Messages:
    784
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #14
    brunozugay, that worked like a charm. Thank you very much! Rep added!
     
    meamrussian, Jul 24, 2006 IP
  15. brunozugay

    brunozugay Peon

    Messages:
    150
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Oh, great! I wasn't 100% sure if that's what you were looking for.

    I'm glad I was able to be of help.
     
    brunozugay, Jul 24, 2006 IP
  16. Colleen

    Colleen Illustrious Member

    Messages:
    6,778
    Likes Received:
    725
    Best Answers:
    1
    Trophy Points:
    430
    #16
    When you're doing something else? Look the other way.
     
    Colleen, Jul 25, 2006 IP