2 replies [Last post]
hia02cot
hia02cot's picture
Offline
newbie
on computer (not server)
Last seen: 4 years 29 weeks ago
on computer (not server)
Timezone: GMT+1
Joined: 2015-05-17
Posts: 1
Points: 2

I have started designing a website. I have created a side list, but the links of the list are displaying to the right of the element box, despite my having set all margins and padding on the left hand side to zero. Can anyone help me with this?

Thanks Chris Smile

html for list:

<ol class=sideList>
<li> <a href= "legalSystem/index.html"> The Legal System </a> </li>
<li> <a href= "employment/index.html"> Employment & Pensions </a> </li>
<li> <a href= "consumer/consumer_index.html"> Consumer Rights </a> </li>
<li> <a href= "publicServices/index.html"> Public Services </a> </li>
<li> <a href= "property/home_index.html"> Home and Property </a> </li>
<li> <a href= "family/family_index.html"> Family Law </a> </li>
<li> <a href= "debt/debt_index.html"> Debt Advice </a> </li>
<li> <a href= "information/index.html"> Privacy and Reputation </a> </li>
<li> <a href= "neighbourhood/neighbourhood_index.html"> Community </a> </li>
<li> <a href= "tax/index.html"> Paying Taxes </a> </li>
<li> <a href= "personalInjury/personalInjury_index.html"> Personal Injuries </a> </li>
<li> <a href= "policing/policing_index.html"> Policing and Crime </a> </li>
<li> <a href= "motor/motor_index.html"> Motor Law </a> </li>
<li> <a href= "care/index.html"> Care and Capacity </a> </li>
<li> <a href= "wills/willsAndTrusts_index.html"> Wills and Probate </a> </li>
</ol>

CSS

.sideList {
 
clear: both;
color: blue;
list-style-type: none;
width: 15%;
margin: 5px;
float: left;
background-color: pink; 
 
}
 
.sideList li a {
 
display: block;
clear: both; 
float: left; 
width: 160px; 
height: 7px; 
line-height: 0.5em; 
text-align: center;
text-decoration: none;
padding: 7px;
padding-left: 0px;
margin: 2px;
margin-left: 0px; 
color: white;
background-color: purple;
border: inset; 
 
}
 
 
links li {
color: blue;
}
 
a {
text-decoration: underline;
}
 
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:focus {
color: purple;
}
a:hover {
background-color: pink;
}
a:active {
background-color: purple;
}

//mod edit: Code must be wrapped in [code] [/code] tags. Fixed. ~gt

AttachmentSize
Screen Shot 2015-05-17 at 11.27.23.png501.83 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 54 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Padding

The ul and ol (and dd) elements have 40px padding at the start of the element to make room for the list markers. Set your padding on ol to 0.

Why are you using the ol element instead of ul? The list does not appear to be ordered.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

softsathish
softsathish's picture
Offline
newbie
bangalore
Last seen: 4 years 28 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2015-05-26
Posts: 1
Points: 1

Links in the sidebar is center aligned

Links in the sidebar is center aligned. You had mentioned text-align:center in the .sideList li a. Hence it is centerly aligned. Removing this will align your links to the left of the box. Then you can play with your padding and margin stuffs.

-Sathish