RSS Forums RSS
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 2001 | Replies: 7 | Thread Tools  Display Modes
Reply
•
•
Join Date: Jun 2005
Posts: 88
Reputation: Pim is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
Pim Pim is offline Offline
Junior Poster in Training

CSS Left hand row of links.

  #1  
May 12th, 2007
I have this piece of CSS code:
body 
{
background-color: #000000
}
ul
{
float:none;
width:20%;
heigth:0%;
padding:1;
margin:0;
list-style-type;none;
vertical-align:text-top;
align: left
}
a.links /*Links is the class here*/
{
float:none;
width: 10%
text-decoration:none;
color:white;
background-color:purple;
padding:0em 0.6em;
border-right:0px solid white;
}
a:hover {background-color:#ff3300}

And this piece of HTML code:
<html>
<head><link rel="stylesheet" type="text/css"
href="style0.css"></head>
<ul>
<a class="links" href="">Links</a>
<a class="links" href="">About me </a>
<a class="links" href="">Gallery</a>
<a class="links" href="">Others</a> 
</ul>
<body>
</body>
</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.
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation: vishesh is on a distinguished road 
Rep Power: 5
Solved Threads: 32
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

Re: CSS Left hand row of links.

  #2  
May 13th, 2007
Do it something like this:
Here's modified CSS code
body
  {
    background-color: #000000
  }
  ul
  {
    float:none;
    padding: 1;
    margin: 0;
    list-style-type;none;
    vertical-align:text-top;
    align: left
  }

  a:hover {background-color:#ff3300}

  #leftMenu
  {
    width: 250px;
  }

  a.links, #leftMenu a.visited /*Links is the class here*/
  {
    float:none;
    text-decoration:none;
    color:white;
    width: 100%;
    display: block;
    background-color:purple;
    padding: 0em 0.6em;
    border-right:0px solid white;
  }

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.
Reply With Quote  
•
•
Join Date: Jun 2005
Posts: 88
Reputation: Pim is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
Pim Pim is offline Offline
Junior Poster in Training

Re: CSS Left hand row of links.

  #3  
May 15th, 2007
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: 
  #leftMenu
  {
    width: 250px;
  }

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.
Reply With Quote  
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation: vishesh is on a distinguished road 
Rep Power: 5
Solved Threads: 32
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

Re: CSS Left hand row of links.

  #4  
May 16th, 2007
•
•
•
•
Originally Posted by Pim View Post
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.
•
•
•
•
A second question is: 
  #leftMenu
  {
    width: 250px;
  }

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.
Reply With Quote  
•
•
Join Date: Jun 2005
Posts: 88
Reputation: Pim is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
Pim Pim is offline Offline
Junior Poster in Training

Re: CSS Left hand row of links.

  #5  
May 16th, 2007
Well it is all quite clear, but now I have another problem: 
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.
Reply With Quote  
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation: vishesh is on a distinguished road 
Rep Power: 5
Solved Threads: 32
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

Re: CSS Left hand row of links.

  #6  
May 17th, 2007
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.
Reply With Quote  
•
•
Join Date: Jun 2005
Posts: 88
Reputation: Pim is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
Pim Pim is offline Offline
Junior Poster in Training

Re: CSS Left hand row of links.

  #7  
May 17th, 2007
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>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css"
href="stijl.css">

</head>

<body>
  <div style="margin-left: 0em; margin-top: 1em" id="links">
  <ul>
    <li><a href="">Links</a></li>
    <li><a href="">About me</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Others</a></li>
   </ul>
  </div>

<div class="left">
<div class="img">
<a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
<img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
</a>
</div>

<div class="img">
<a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
<img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
</a>
</div>

<div class="img">
<a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
<img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
</a>
</div>

<div class="img">
<a href="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
<img src="http://i93.photobucket.com/albums/l59/Staphyl/QuakeII.png">
</div>
</a>
</div>
</div>


</body>
</html>

And this the CSS:
body
{
background-color: #000000
}
ul
{
padding: 0;
margin: 0;
list-style-type:none;
vertical-align:text-top;
align: left;
}
#links a 
{
text-decoration:none;
color:white;
width: 150px;
display: block;
background-color:purple;
padding: 0em 0em;
border-right:none;
}


#links a:hover
{
background-color:#ff3300;
} 

div.img img
{
width: auto;
heigth: auto;
display:inline;
float:left;
margin: 0px;
padding: 0em 0em;

}

div.img
{
width: auto;
heigth: auto;
padding: 0em 0em;
float:left;
margin: 4px;
}
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?
Reply With Quote  
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation: vishesh is on a distinguished road 
Rep Power: 5
Solved Threads: 32
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

Re: CSS Left hand row of links.

  #8  
May 19th, 2007
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.
Reply With Quote  
Reply

Quick Reply to Thread
•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register


Similar Threads
Other Threads in the HTML and CSS Forum
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 10:35 pm.
Newsletter Archive - Sitemap - Privacy Statement - Acceptable Use Policy - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC