0

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.

2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by drjohn
0

Let's start with the most obvious errors and clear them away first, shall we?

You have float:both; for #menu

float takes the object out of the normal document flow and moves it over to the left or the right edge of whatever is containing it. There is no such thing as float:both, because you can't move to over to the left AND the right. So remove those lines completely.

Next, your ridiculous percentage widths all over the place, such as width:87.3983%;
Monitors work in pixels as the display unit. Suppose we have a viewport that is 1000px wide, for ease of calculation.

You are telling it to make a div which is 873.983 pixels wide. THIS WILL NOT HAPPEN! It will be rounded off to 874px. So get rid of these silly bits after the decimal point and use, for example 87%.

0

Now an answer.

Your menu is wider than the containing div, and sticks out over the edge of it on the right.

your <li><a> bits are respecting the edges of #container and wrapping when they met the edge. You want them to ignore the edge of #container and work with #menu.

You can change the height of #menu from it's silly height:4.01% to a min-height:4%; and add position;absolute;
Or set #menu to min-height:4%; and add position:absolute; to #menu ul

This all works better when you stop using percentage widths and use a fixed width instead.

PS As it's Xmas, why not visit one of my sites.

Edited by drjohn: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.