CSS Left hand row of links.

Question

Pim 0 Junior Poster

17 Years Ago

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.

html-css web-design

2 Contributors
7 Replies
125 Views
6 Days Discussion Span
Latest Post 17 Years Ago Latest Post by GreenDay2001

GreenDay2001

17 Years Ago

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

</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>

I hope you understand the code. If you have doubts you may post here anytime.

Pim commented: Very helpful. Not everything answered, but I can continue my work with this. +2

GreenDay2001

17 Years Ago

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

a
{
    color: #FF0000;
    background-color: #CCCCCC;
}

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

<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:

a#homeLink
   {
     color: #FF0000;
     background-color: #CCCCCC;
   }

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

<div id="links">
     <a href="#">Homepage</a>
     <a href="#">Products</a>
     <a href="#">Downloads</a>
     <a href="#">About</a>
</div>

And make CSS look like

#links a
   {
     color: #FF0000;
     background-color: #CCCCCC;
   }

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Very helpful. Not everything answered, but I can continue my work with this.

Pim 0 Junior Poster · Answer 1 · 2007-05-16T01:15:29+00:00

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.

Pim 0 Junior Poster · Answer 2 · 2007-05-17T01:45:23+00:00

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.

GreenDay2001 · Answer 3 · 2007-05-17T10:20:08+00:00

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:

<a class="links" href="#">Links</a>
<a class="links" href="#">About Me</a>

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

Case II:

<div class="links">
    <a href="#">Links</a>
    <a href="#">About Me</a>
</div>

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

Similarly you could do this for ID by just replacing . by # and giving tags an ID.

Pim 0 Junior Poster · Answer 4 · 2007-05-18T01:37:25+00:00

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?

GreenDay2001 · Answer 5 · 2007-05-19T14:42:32+00:00

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:

Use tables (that's what i recommend)
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.