944,018 Members | Top Members by Rank

Ad:
May 12th, 2007
0

CSS Left hand row of links.

Expand Post »
I have this piece of CSS code:
HTML and CSS Syntax (Toggle Plain Text)
  1. body
  2. {
  3. background-color: #000000
  4. }
  5. ul
  6. {
  7. float:none;
  8. width:20%;
  9. heigth:0%;
  10. padding:1;
  11. margin:0;
  12. list-style-type;none;
  13. vertical-align:text-top;
  14. align: left
  15. }
  16. a.links /*Links is the class here*/
  17. {
  18. float:none;
  19. width: 10%
  20. text-decoration:none;
  21. color:white;
  22. background-color:purple;
  23. padding:0em 0.6em;
  24. border-right:0px solid white;
  25. }
  26. a:hover {background-color:#ff3300}

And this piece of HTML code:
HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head><link rel="stylesheet" type="text/css"
  3. href="style0.css"></head>
  4. <ul>
  5. <a class="links" href="">Links</a>
  6. <a class="links" href="">About me </a>
  7. <a class="links" href="">Gallery</a>
  8. <a class="links" href="">Others</a>
  9. </ul>
  10. <body>
  11. </body>
  12. </html>

The problem is that I'd like to have the links displayed, above each other, on the left hand side of the page. I'd also like the "boxes" around the links to be the same length. Could someone explain to me how to do this? I have been changing this for a while, and I can't get it right. I must admit, that I stole this from the w3c site to experiment with (it is not original the original file can be found here.

Could you please also tell me why the a:hover {background-color:#ff3300} is at the bottom, and not in the a.links part (what is the name for this?).

Thank You.
Pim
Reputation Points: 10
Solved Threads: 0
Junior Poster
Pim is offline Offline
106 posts
since Jun 2005
May 13th, 2007
1

Re: CSS Left hand row of links.

Do it something like this:
Here's modified CSS code
HTML and CSS Syntax (Toggle Plain Text)
  1. body
  2. {
  3. background-color: #000000
  4. }
  5. ul
  6. {
  7. float:none;
  8. padding: 1;
  9. margin: 0;
  10. list-style-type;none;
  11. vertical-align:text-top;
  12. align: left
  13. }
  14.  
  15. a:hover {background-color:#ff3300}
  16.  
  17. #leftMenu
  18. {
  19. width: 250px;
  20. }
  21.  
  22. a.links, #leftMenu a.visited /*Links is the class here*/
  23. {
  24. float:none;
  25. text-decoration:none;
  26. color:white;
  27. width: 100%;
  28. display: block;
  29. background-color:purple;
  30. padding: 0em 0.6em;
  31. border-right:0px solid white;
  32. }
and here's html code
[html]
</head>

<body>
<div style="margin-left: 2em" id="leftMenu">
<ul>
<li><a class="links" href="">Links</a></li>
<li><a class="links" href="">About me</a></li>
<li><a class="links" href="">Gallery</a></li>
<li><a class="links" href="">Others</a></li>
</ul>
</div>
</body>
</html>
[/html]
I hope you understand the code. If you have doubts you may post here anytime.
Last edited by vishesh; May 13th, 2007 at 7:38 am.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
May 15th, 2007
0

Re: CSS Left hand row of links.

Maybe you could explain to me what width actually does? I'm a bit in the dark on the working of this, since, apparantly, it does not really control the width of elements really hard (at least in my work).

A second question is:
HTML and CSS Syntax (Toggle Plain Text)
  1. #leftMenu
  2. {
  3. width: 250px;
  4. }

I wonder what kind of thing #leftMenu actually is. I found some info on this on the w3schools site, but I don't really understand what it is about.
Last edited by Pim; May 15th, 2007 at 4:21 pm.
Pim
Reputation Points: 10
Solved Threads: 0
Junior Poster
Pim is offline Offline
106 posts
since Jun 2005
May 16th, 2007
0

Re: CSS Left hand row of links.

Click to Expand / Collapse  Quote originally posted by Pim ...
Maybe you could explain to me what width actually does? I'm a bit in the dark on the working of this, since, apparantly, it does not really control the width of elements really hard (at least in my work).
width as name suggest its self explaining. Width works perfectly in all browsers and in my code too.
Quote ...
A second question is:
HTML and CSS Syntax (Toggle Plain Text)
  1. #leftMenu
  2. {
  3. width: 250px;
  4. }
I wonder what kind of thing #leftMenu actually is. I found some info on this on the w3schools site, but I don't really understand what it is about.
#leftMenu is an ID Name. Ok, what's an ID name? Here's explanation:

Lets look at solution to a problem where you have to apply some style on hyperlinks, yes <a> tags.

First method is to make all of them look same
css Syntax (Toggle Plain Text)
  1. a
  2. {
  3. color: #FF0000;
  4. background-color: #CCCCCC;
  5. }

Second method is to make a class or id. The difference is that you could use same class name several times but a particular ID only once, as per standards. ID is unique name for every tag there. I hop you know what classes are as I could see a.links in the code posted by you. Using ID's are very similer.

Here's HTML code
html Syntax (Toggle Plain Text)
  1. <a href="#" id="homeLink">Homepage</a>

Adding style to this will use #homeLink. This would search for any tag with ID homeLink. To be more specific we use a#homeLink. This would make browser search for ID homeLink in all <a> tags.

Here's how CSS will look like:
css Syntax (Toggle Plain Text)
  1.  
  2. a#homeLink
  3. {
  4. color: #FF0000;
  5. background-color: #CCCCCC;
  6. }

Now if you have several links, it would be non-standard to use ID homeLink with every link and ridiculous to write a class name with every link. So what we do
html Syntax (Toggle Plain Text)
  1. <div id="links">
  2. <a href="#">Homepage</a>
  3. <a href="#">Products</a>
  4. <a href="#">Downloads</a>
  5. <a href="#">About</a>
  6. </div>

And make CSS look like
css Syntax (Toggle Plain Text)
  1. #links a
  2. {
  3. color: #FF0000;
  4. background-color: #CCCCCC;
  5. }

Note the difference between the CSS codes in both cases i.e. a#homeLink and #links a. The reason is we embed all the links under single div with ID links in second case but in first case every tag will have its own ID/class.

I hope I am clear and explained well.
Last edited by vishesh; May 16th, 2007 at 11:49 am.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
May 16th, 2007
0

Re: CSS Left hand row of links.

Well it is all quite clear, but now I have another problem:
HTML and CSS Syntax (Toggle Plain Text)
  1. a:hover {background-color:#ff3300}
This part is applied to alll of the page. I don't want this, I just want it to be applied to my menu. So I thought: let's put it in a class or in an id, but then it doesn't work anymore. What is causing this? It would be really weird if it'd be only possible to apply it to the whole site, or not at all.
Pim
Reputation Points: 10
Solved Threads: 0
Junior Poster
Pim is offline Offline
106 posts
since Jun 2005
May 17th, 2007
0

Re: CSS Left hand row of links.

Its happening because a.hover makes all links to the properties embedded in it on mouse over. To make it's effect limited to particular links we use ID and Classes. Ok...lets again look at two cases for both ID and class:

Case I:
html Syntax (Toggle Plain Text)
  1. <a class="links" href="#">Links</a>
  2. <a class="links" href="#">About Me</a>

css Syntax (Toggle Plain Text)
  1. a:hover.links
  2. {
  3. background-color:#ff3300;
  4. }

Case II:
html Syntax (Toggle Plain Text)
  1. <div class="links">
  2. <a href="#">Links</a>
  3. <a href="#">About Me</a>
  4. </div>

css Syntax (Toggle Plain Text)
  1. .links a:hover
  2. {
  3. background-color:#ff3300;
  4. }

Similarly you could do this for ID by just replacing . by # and giving tags an ID.
Last edited by vishesh; May 17th, 2007 at 1:24 am.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
May 17th, 2007
0

Re: CSS Left hand row of links.

Well thank you for your explanation. It is working now, but maybe you could explain something weird to me:
This is the HTML I now have:
HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Gallery</title>
  4. <link rel="stylesheet" type="text/css"
  5. href="stijl.css">
  6.  
  7. </head>
  8.  
  9. <body>
  10. <div style="margin-left: 0em; margin-top: 1em" id="links">
  11. <ul>
  12. <li><a href="">Links</a></li>
  13. <li><a href="">About me</a></li>
  14. <li><a href="">Gallery</a></li>
  15. <li><a href="">Others</a></li>
  16. </ul>
  17. </div>
  18.  
  19. <div class="left">
  20. <div class="img">
  21. <a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  22. <img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  23. </a>
  24. </div>
  25.  
  26. <div class="img">
  27. <a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  28. <img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  29. </a>
  30. </div>
  31.  
  32. <div class="img">
  33. <a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  34. <img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  35. </a>
  36. </div>
  37.  
  38. <div class="img">
  39. <a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  40. <img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
  41. </div>
  42. </a>
  43. </div>
  44. </div>
  45.  
  46.  
  47. </body>
  48. </html>

And this the CSS:
HTML and CSS Syntax (Toggle Plain Text)
  1. body
  2. {
  3. background-color: #000000
  4. }
  5. ul
  6. {
  7. padding: 0;
  8. margin: 0;
  9. list-style-type:none;
  10. vertical-align:text-top;
  11. align: left;
  12. }
  13. #links a
  14. {
  15. text-decoration:none;
  16. color:white;
  17. width: 150px;
  18. display: block;
  19. background-color:purple;
  20. padding: 0em 0em;
  21. border-right:none;
  22. }
  23.  
  24.  
  25. #links a:hover
  26. {
  27. background-color:#ff3300;
  28. }
  29.  
  30. div.img img
  31. {
  32. width: auto;
  33. heigth: auto;
  34. display:inline;
  35. float:left;
  36. margin: 0px;
  37. padding: 0em 0em;
  38.  
  39. }
  40.  
  41. div.img
  42. {
  43. width: auto;
  44. heigth: auto;
  45. padding: 0em 0em;
  46. float:left;
  47. margin: 4px;
  48. }
The problem is, that I'd like to resize all images on my webpage, but when I change the width: auto; into width: 60%, my images will be displayed above each other rather than next to each other in a neat order. Is it possible to do this? If not then why not? Should I then manually set every image it's size? That would be very un-css wouldn't it?
Pim
Reputation Points: 10
Solved Threads: 0
Junior Poster
Pim is offline Offline
106 posts
since Jun 2005
May 19th, 2007
0

Re: CSS Left hand row of links.

This is because with 60% width the page can't show everything on one links so it breaks. But it is possible to make them in one line, everything is possible. Two methods, that's striking right into mind now are:

1. Use tables (that's what i recommend)
2. Use float property and width(I recommend this too because you are learning).

Give it a try and post here in case of any problem.
Last edited by vishesh; May 19th, 2007 at 5:42 am.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: onclick parent goto previous page
Next Thread in HTML and CSS Forum Timeline: New at it.





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC