Solved

css float right

Posted on 2014-04-19
2
209 Views
Last Modified: 2014-04-19
I don't know why the content of my navigation bar is listed backward when I did "float:right" (see code below)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<link rel="stylesheet" type="text/css" href="index2style.css" />


</head>

<body>
<div id="container">
	<!--------------- HEADER -------------------------------->
	<div id="header">
    	<div id="logo">logo</div>
      <div id="search">search</div>
        <div id="nav">
        	<ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact Us</a></li>
              <li><a href="#">Customer Portal</a></li>

            </ul>
            
        </div>    
    </div>
    <!-------- END OF HEADER -------------------------------->
    <!----////////////////////////////////////////////////--->
    <!--------------- BANNER -------------------------------->
<div id="banner">
	  <div id="bannerPic">banner</div>
        <div id="bar">greybar</div>
	</div>
    <!-------- END OF BANNER -------------------------------->

Open in new window



@charset "utf-8";
/* CSS Document */

html,body,div,h1,h2,h3,p,ul,il {
	background-color: #FFF;
	margin:0;
	padding:0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
	background-color: #FFF;
	margin: 0px auto 0px auto;
	padding: 0px;
	width:960px;
}
a {
	text-decoration:none;
}
a img {
	border:0;
}

#logo {
	float:left;
	width: 280px;
	height: 100px;

}
#search {
	height:65px;

}
#nav {
	width:680px;

}
#nav li {
	list-style-type:none;
	float: right;	
}
#banner {
	clear:both;
}

Open in new window

0
Comment
Question by:leblanc
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40010403
Try this instead
http://jsbin.com/gutag/1/
#nav ul{float:right;}
#nav li {
	list-style-type:none;
    float:left;
	
}

Open in new window

0
 
LVL 1

Author Comment

by:leblanc
ID: 40010417
i forgot that ul and li are two different things. Thank you.
0

Featured Post

Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is about my first experience with programming Arduino.
If you’re thinking to yourself “That description sounds a lot like two people doing the work that one could accomplish,” you’re not alone.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question