Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Unorder List

  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Posts
    149
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Unorder List

    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
    Tomorrow Could Be Your Day

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Posts
    149
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hi Mate,

    Thank you

    Code:
    #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;
    }
    Code:
    <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>
    Tomorrow Could Be Your Day

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Well, not having IE6 here right now... I can only guess that your left floated leftnav is invoking that browsers double margin bug. IE6 -
    Have a look at http://www.cssnewbie.com/double-margin-float-bug/ for the fix and here for a better explanation of how display:inline fixes that.

    I made a few other changes too...
    Code:
    <!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>
    Last edited by Excavator; 01-11-2009 at 12:37 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •