471,599 Members | 931 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

Div id hyperlink help - div widths?

okay, im really not sure what to do here, as I've done the same thing before and it's worked perfectly but now ive tried to do the same thing again for another website and it's just not working...

okay, heres the problem:

i have:

[html]<!--site related navigation-->
<div id="mainnav">
<div id="title">
.site&nbsp;
</div>
<a href="">Home</a><br />
<a href="">Staff</a><br />
<a href="">Affiliates</a><br />
<a href="">Affiliation</a><br />
<a href="">Link to Us</a><br />
<a href="">Site History</a><br />
<a href="">Past Layouts</a><br />
<a href="">About</a><br />
</div>[/html]

And in my CSS file i have:

Expand|Select|Wrap|Line Numbers
  1. #mainnav a
  2. {
  3. width: 100%;
  4. background-color: #583D21;
  5. text-align:right;
  6. text-decoration:none;
  7. color: #CCCC99;
  8. }
  9. #mainnav a:link
  10. {
  11. width: 100%;
  12. text-align:right;
  13. }
  14. #mainnav a:hover
  15. {
  16. width: 100%;
  17. background-color: #000000;
  18. text-align:left;
  19. color: #FFFFFF;
  20. }
  21. #mainnav a:visited
  22. {
  23. width: 100%;
  24. background-color: #583D21;
  25. text-align:right;
  26. }
Now this is meant to control the links in the "mainnav" div, right? and to some extent it does, with the exception of width. All of the background properties are fine, except the background does not stretch to 100% of the div width and just stays as long as the word it is the background to.
Just so you know the "mainnav" div is 200px wide so the link background should be 200px wide.

sorry if thats a bit hard to understand, this is my first post and im not really sure how to explain it.
is there something im missing? can anybody help me?
Oct 1 '07 #1
3 2468
drhowarddrfine
7,435 Expert 4TB
<a> is an 'inline' element, meaning it is just like text in a paragraph and cannot be resized. If you want to control the width, in your css, add 'display:block' which makes it, obviously, block level, just like the div.
Oct 1 '07 #2
<a> is an 'inline' element, meaning it is just like text in a paragraph and cannot be resized. If you want to control the width, in your css, add 'display:block' which makes it, obviously, block level, just like the div.
hmm, thanks that has helped, but what i don't understand is how i managed to do it before without having to do anything like that. o well, thanks for your help though.

Now i just need to figure out how to getthe links directly underneath eachother becuase now ive put the 'display:block' each link it spaced out as if you've put an extra "<br />" in the code.
Oct 1 '07 #3
drhowarddrfine
7,435 Expert 4TB
Remove the current <br>
Oct 1 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Lars G. Svensson | last post: by
3 posts views Thread by Steve Sabljak | last post: by
reply views Thread by Ryan Harvey | last post: by
5 posts views Thread by Martin Dew | last post: by
20 posts views Thread by tshad | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.