...

View Full Version : Unorder List



Genie1
01-10-2009, 10:26 PM
Hello Team,

I want to know if any one would be kind to explain which kind of selectors i need to get a real use of Unorder list in CSS.

For example i have made Unorder List and have been able to remove bullets in CSS and currently the list is in middle, but i havnt been able to move the box to the left.

Or can some one please provide some good links with extra information

Genie1

Excavator
01-10-2009, 10:30 PM
Hello Genie1,
Without seeing your code I would guess you need to put float: left; on whatever box your talking about.
Post your code here and you'll get more help.

Genie1
01-10-2009, 10:57 PM
Hi Mate,

Thank you



#container{
background-color:#000066;
height:520px;
width:900px;
margin-left:auto;
margin-right:auto;
}

#logo{
height:100px;
width:893px;
background-color:#FF0000;
border: double 4px #FFFFFF;
color:FFFFFF;
font-family:Tahoma;
text-align:center;
}

#leftnav{
height:380px;
width:150px;
background-color:#FF0000;
border: solid 1px #FFFFFF;
color:FFFFFF;
font-family:Tahoma;
text-align:left;
float:left;
margin-left:1px;
margin-right:0px;
margin-top:1px;
margin-bottom:1px;
}

#content{
height:380px;
width:740px;
background-color:red;
float:left;
border:solid 1px #FFFFFF;
color:#FFFFFF;
margin-left:1px;
margin-right:0px;
margin-top:1px;
margin-bottom:1px;
padding-left:3px;
}

#footer{
height:30px;
width:898px;
background-color:red;
border:dotted 1px #FFFFFF;
float:left;
}

ul{

}

#nav li{
list-style-type: none;
}

#intro li{
list-style-type:circle;
}



<html>
<head>
<title>CSS Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="logo">
Logo
</div>
<div id="leftnav">
<ul id="nav">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
<div id="content">
CSS = <b>C</b>ascading <b>S</b>tyle <b>S</b>heet <br />
<ul id="intro">
<li>Add new looks</li>
<li>Completely restyle a web site with only a few changes to your CSS

code</li>
<li>Use the "style" you create on any webpage you wish.</li>
</ul>
<u>Selector</u><br />
In a typical CSS satement you have the following:<br />
<ul id="intro">
<li>SELECTOR {PROPERTY: VALUE }</li>
</ul>
Three type of inserting style
<ul id="intro">
<li>Internal</li>
<li>Inline</li>
<li>External</li>
</ul>
Cascading Style Sheet<b>s</b>
</div>
<div id="footer">

</div>
</div>
</body>
</html>

Excavator
01-10-2009, 11:32 PM
Well, not having IE6 here right now... I can only guess that your left floated leftnav is invoking that browsers double margin bug. IE6 - :rolleyes:
Have a look at http://www.cssnewbie.com/double-margin-float-bug/ for the fix and here for a better explanation (http://www.positioniseverything.net/explorer/floatIndent.html) of how display:inline fixes that.

I made a few other changes too...
<!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">
html, body {
background: #FC6;
font: 100% Tahoma;
color: #FFF;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container{
background:#000066;
height:520px;
width:900px;
margin: 20px auto;
}
#logo{
height:100px;
width:893px;
background:#FF0000;
border: double 4px #FFFFFF;
}
#leftnav{
height:380px;
width:150px;
background:#FF0000;
border: solid 1px #FFFFFF;
text-align:left;
float:left;
margin: 1px 0 1px 1px; /*left margin causing double-margin bug???*/}
#content{
height:380px;
width:740px;
background:#ff0000;
float:left;
border:solid 1px #FFFFFF;
margin: 1px 0 1px 1px;
padding-left:3px;
}
#footer{
height:30px;
width:898px;
background:#ff0000;
border:dotted 1px #FFFFFF;
clear: both;
}
ul#nav {
width: 150px;
margin: 20px 0 0 0;
list-style-type: none;
text-align: center;
background: #ccc;
}
#nav li{
width: 150px;
height: 30px;
}
#nav li a {
width: 150px;
height: 30px;
line-height: 30px; /*centers text vertically in 30px high button*/
text-decoration: none; /*gets rid of the underline on your link*/
display: block; /*makes the entire 150x30 button clickable*/
}
#nav li a:hover {
background: #f00;
}
.intro li{ /*changed this to a class since you're re-using it*/
list-style-type:circle;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
Logo
</div>
<div id="leftnav">
<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">
CSS = <b>C</b>ascading <b>S</b>tyle <b>S</b>heet <br />
<ul class="intro">
<li>Add new looks</li>
<li>Completely restyle a web site with only a few changes to your CSS code</li>
<li>Use the "style" you create on any webpage you wish.</li>
</ul>
<u>Selector</u><br />
In a typical CSS satement you have the following:<br />
<ul class="intro">
<li>SELECTOR {PROPERTY: VALUE }</li>
</ul>
Three type of inserting style
<ul class="intro">
<li>Internal</li>
<li>Inline</li>
<li>External</li>
</ul>
Cascading Style Sheet<b>s</b>
<!--end content--></div>
<div id="footer">
footer stuff here
</div>
<!--end container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum