How to do something...

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?

Thanks a lot.

 

As long as there no width specified the box should stretch to fit the text.

 

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.

 

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!

 

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;
}

 

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.

 

If that's the case you should consider using <li>s in stead of <div>s.

Something like this for example: http://css.maxdesign.com.au/listamatic/

 

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.

 

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.

 

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

 

I think he's looking for a vertical layout, not horizontal.

 

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!

 

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, that worked like a charm. Thank you very much! Rep added!

 

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.

 

When you're doing something else? Look the other way.