Hi
li is not rendering properly in div using css, getting truncated.
<!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" lang="en-US">
<head>
<link rel="stylesheet" href="style2.css" type="text/css" media="screen">
<title>Services
</title>
</head>
<body class="">
<div id="container">
<div id="masthead">
</div>
<div id="right-upper-navigation">
<ul class="nav">
<li><a href="" title="Premium Services">Premium Services</a></li>
<li><a href="" title="Log In">Log In</a></li>
</ul>
</div>
<div id="right-navigation">
<div id="callout">
<h3><a href="">Quick Search<span>Looking For </span></a></h3>
</div>
</div>
<div id="menu">
<ul>
<li><a href="navigation.html">Home</a></li>
<li id=""><a href="">About Us</a></li>
<li><a href="navigation.html">Search</a></li>
<li><a href="navigation.html">Register</a></li>
<li><a href="navigation.html">Other Services</a></li>
<li><a href="navigation.html">Feedback</a></li>
<li><a href="navigation.html">Advertise</a></li>
<li><a href="navigation.html">Contact Us</a></li>
<li><a href="navigation.html">Contact Us</a></li>
</ul>
</div>
<div id="carousel">
</div>
</div>
<div id="footer">
</div>
</body>
</html>css file is
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
margin:0 auto;
border: 1px solid black;
background: white;
}
a {
color: #fd6512;
text-decoration: none;
cursor: pointer;
}
a:hover, a:focus {
text-decoration: underline;
}
a.button, a.button:visited, .button input {
font-size: 11px;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
background-color: #fd6512;
display: block;
padding: 5px 10px 5px 17px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background 0.15s linear;
-moz-transition: background 0.15s linear;
-o-transition: background 0.15s linear;
transition: background 0.15s linear;
}
a.button:hover, a.button:focus,
.button input:hover, .button input:focus {
text-decoration: none;
background-color: #d0520e;
cursor: pointer;
}
a.button:active {
background-color: #8d3708;
}
#container{
width: 984px;
height:748px;
margin-left:10px;
margin-right:10px;
margin-top:20px;
/*margin-bottom:20px;*/
background:orange;
border: 1px solid black;
}
#right-navigation{
width:29.47%; /*290px;*/
height:87.433%;/*654px;*/
/*margin-top:90px;/*this space is for right upper navigation*/
background:#E9E9E9;/*light blue colour*/
border: 1px solid black;
float:right;
}
#right-upper-navigation{
width:29.47%;/*290px;*/
height:12.032%;/*90px;*/
background:#C3BDB3;
border: 1px solid black;
float:right;
}
.nav li {
list-style-type: none;/*to remove dots when List is used*/
float: left;
margin-right: 15px;
padding: 65px 10px 30px 10px;
}
.nav a, .nav a:visited{
font-size: 12px;
/*font-weight:bold;*/
text-transform: uppercase;
text-decoration: none;
margin-top:150px;
color: #635e57;
padding-bottom: 2px;
}
.nav a, .nav a:visited {
-webkit-transition: border-color 0.25s linear;
-moz-transition: border-color 0.25s linear;
-o-transition: border-color 0.25s linear;
border-bottom: solid 1px #fff;
}
.nav a:hover, .nav a:focus {
text-decoration: none;
border-color: #938b7d;
}
#masthead{
margin-top:40px;
width:70.12%;/*690px;*/
height:12.032%; /*90px;*/
/*margin-right:90px;*/
background:green;
border: 1px solid blue;
float:left;
}
#menu{
margin-top:160px;
margin-left:50px;
width:87.3983%;/*860px;*/
height:4.01%; /*30px;*/
background:white;
border: 1px solid blue;
margin-right: 25px;
overflow:visible;
position:relative;
white-space:nowrap;
float:both;
}
/*menu styling*/
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
display: inline;
margin: 0px;
}
#menu ul li a {
/*height:17px;*/
display: block;
float: left;
padding: 10px 15px 0 15px;
font: bold 12px Arial;
color: black;
background: url() no-repeat right center;
}
#menu ul li a:hover {
color:#EDEBEA;
background: url() repeat-x left top;
}
#menu ul li#active a {
color:#EDEBEA;
background: url() repeat-x left top;
}
#carousel{
margin-top:30px;
margin-left:50px;
height:26.73%; /*200px;*/
width: 53.86%;/*530px;*/
border: 1px solid #edebea;
padding: 10px 20px;
margin-bottom: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
#callout{
margin-top:41.37%;/*120px;*/
margin-left:4.89%;/*20px;*/
width:68.96%; /*200px;*/
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
#footer{
width:1007px;
height:200px;
background:#C3BDB3;/*footer with dark grey colour*/
}I have attached screenshot of the website.
Contact Us link should come next to the Advertise but it is coming down.
Is it possible to have a search button in li.
Looking forward to your reply.
thanks.