PDA

View Full Version : UL and LI - rid of bullet points?!



jarv
Dec 15th, 2008, 05:42 PM
in my page I have redone my left menu in a UL so i can add sub links, i thought it'd be best but it messed up my design and put bullet points in front of my menu?!



<div id="leftcollumn">
<ul>
<li class="icon1"><a href="#">Clusters</a></li>
<li class="icon2"><a href="#">Calendar</a></li>
<li class="icon3"><a href="#">Management Committee</a></li>
<li class="icon4">&nbsp;<a href="#">Downloads</a></li>
</ul>
</div>


css:



.icon1 { background-position: 0% 50%; height:33px; border-top:#999999 1px dotted; width:170px; padding:12px 0px 0px 30px; background-image:url(../images/icon-orange-1.png); background-repeat:no-repeat; }
.icon2 { background-position: 0% 50%; height:33px; border-top:#999999 1px dotted; width:170px; padding:12px 0px 0px 30px; background-image:url(../images/icon-orange-2.png); background-repeat:no-repeat; }
.icon3 { background-position: 0% 50%; height:33px; border-top:#999999 1px dotted; width:170px; padding:12px 0px 0px 30px; background-image:url(../images/icon-orange-3.png); background-repeat:no-repeat; }
.icon4 { background-position: 0% 50%; height:33px; border-top:#999999 1px dotted; width:170px; padding:12px 0px 0px 30px; background-image:url(../images/icon-orange-4.png); background-repeat:no-repeat; }

.icon1 a:link, .icon2 a:link, .icon3 a:link, .icon4 a:link{ height:30px; width:170px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#00467F;}
.icon1 a:active, .icon2 a:active, .icon3 a:active, .icon4 a:active{ height:30px; width:170px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#00467F;}
.icon1 a:visited, .icon2 a:visited, .icon3 a:visited, .icon4 a:visited{ height:30px; width:170px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#00467F;}
.icon1 a:hover, .icon2 a:hover, .icon3 a:hover, .icon4 a:hover{ background-color:#CCCCCC; width:170px; height:30px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#00467F;}



can someone please help?!

Excavator
Dec 15th, 2008, 05:52 PM
Hello again jarv,
add this bit in red to your CSS:


#leftcollumn { float:left; width:190px;}
#leftcollumn ul {list-style-type: none;}
#centercollumn { float:left; clear:right; margin-left:7px; margin-right:7px; width:516px;}

BoldUlysses
Dec 15th, 2008, 05:55 PM
Also consider simplifying your CSS. Check this out:


#leftcollumn ul{
list-style-type:none;
padding:0;
margin:0;
}

.icons {
background-position: 0% 50%;
height:33px;
border-top:#999 1px dotted;
width:170px;
padding:12px 0px 0px 30px;
background-repeat:no-repeat;
}

#icon1 {
background-image:url(../images/icon-orange-1.png);
}

#icon2 {
background-image:url(../images/icon-orange-2.png);
}

#icon3 {
background-image:url(../images/icon-orange-3.png);
}

#icon4 {
background-image:url(../images/icon-orange-4.png);
}

.icons a{
height:30px;
width:170px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#00467F;
}

.icons a:hover{
background-color:#CCCCCC;
}

Use a class for common attributes and ids for specific attributes (like backgrounds):


<div id="leftcollumn">
<ul>
<li id="icon1" class="icons"><a href="#">Clusters</a></li>
<li id="icon2" class="icons"><a href="#">Calendar</a></li>
<li id="icon3" class="icons"><a href="#">Management Committee</a></li>
<li id="icon4" class="icons">&nbsp;<a href="#">Downloads</a></li>
</ul>
</div>

Apostropartheid
Dec 15th, 2008, 06:06 PM
And...please spell column right.

jarv
Dec 15th, 2008, 06:14 PM
thanks so much!

I now need to add sub menus... so a <ul> and <li> within a <ul>?!

Rowsdower!
Dec 15th, 2008, 06:18 PM
Correct, just remember to close the previous <li> AFTER closing the subordinate <ul>:


<li> blah
<ul>
<li> sub blah</li>
</ul>
</li>

jarv
Dec 15th, 2008, 06:18 PM
oh, and one more thing... I have a background color on the hover but it's only changing the background color behind the text and not the actual box?!

abduraooft
Dec 16th, 2008, 08:40 AM
Apply display:block; to your anchors.

jarv
Dec 16th, 2008, 11:34 AM
ok thanks, now I have a grey background when i hover over which is what i wanted yay.......

now there is another matter, I want the link to sit on the bottom of the grey box?!

abduraooft
Dec 16th, 2008, 12:28 PM
now there is another matter, I want the link to sit on the bottom of the grey box?! grey box? Post your current code please.

jarv
Dec 16th, 2008, 02:38 PM
wait, should it be something like v-align:bottom; or something?!

Excavator
Dec 16th, 2008, 05:21 PM
Hello jarv,
you could adjust that with line-height or padding... like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html {
background: #6CF;
text-align: center;
}
* {
padding: 0;
margin: 0;
border: none;
}
#leftcollumn ul{
list-style-type:none;
}
.icons {
height:33px;
border-top:#999 1px dotted;
width:170px;
background-repeat:no-repeat;
}
#icon1 {
background:url(../images/icon-orange-1.png);
}
#icon2 {
background:url(../images/icon-orange-2.png);
}
#icon3 {
background:#ff00ff url(../images/icon-orange-3.png);
}
#icon4 {
background:#000 url(../images/icon-orange-4.png);
}
.icons a{
height:30px;
width:170px;
line-height: 30px;
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#00467F;
}
.icons a:hover{
background:#CCCCCC;
}
</style>
</head>
<body>
<div id="leftcollumn">
<ul>
<li id="icon1" class="icons"><a href="#">Clusters</a></li>
<li id="icon2" class="icons"><a href="#">Calendar</a></li>
<li id="icon3" class="icons"><a href="#">Management Committee</a></li>
<li id="icon4" class="icons"><a href="#">Downloads</a></li>
</ul>
</div>
</body>
</html>