Member Avatar for ryy705

Hello,

I am trying to sharpen my css skills by practicing with the following
design:http://rayhanm.com/images/JeanBrunoneHome.png

You will find the html page at :http://rayhanm.com/brunone.html

I am having some trouble with the nav bar. I wondering if someone would be kind enough to help me out.
The "contact me" portion of the navigation slides out of the nav bar when I make the page larger/smaller.

I also had to make everything in the nav bar left-align because centering things breaks the nav bar into two lines. Does anyone know why this is happening? What can I do to make the nav bar more flexible so it does not break when I make the page larger/smaller? Thank you in advance.

  • 3 Contributors
  • 6 Replies
  • 100 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Slade007
Member Avatar for Xlphos

Can you post your CSS?

Member Avatar for Xlphos

Have you tried using a DIV for your navigation aswell. I use this for my site and the links don't exceed their borders.

Member Avatar for ryy705

I used the following css along with eric myer's reset.css. I don't understand what you mean by using div for the navigation.
Could you kindly elaborate?

body {
	background: #C0C0C0;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 12px;
	color: #7D8B9B;
}
h1,h2,h3,h4 {
	text-transform: uppercase;
}

label {
	color: white;
}

#container {
	margin: auto;
	width: 768px;
	background: white;
	padding: 14px;
	border: 2px solid #A3ADB8;
}

#nav,#mid{
	margin-bottom:2px;
}

#nav,#address {
	background: #7d8b9b;
	height: 30px;
	line-height: 30px;
	background: #7d8b9b;
	color: white;
}
#nav li,#address li{ 
	display: inline;
	list-style: none;
}

#nav li a {
	padding-left: 30px;
	padding-right: 30px;
	text-decoration: none;
	color: white;
	font-size: .9em;
}

#quick_search {
	text-align: center;
  background: #948E99;
	height: 343px;
}
#quick_search h4 {
	margin-top: 20px;
	margin-right:15%; margin-left:15%;
	color: white;
	font-size: 14px;
	border-bottom: 1px dotted white;
	font-family: Arial;
	letter-spacing:.2em;
	
}
#quick_search h4 #quick{
	font-family: "Times New Roman";
	font-weight:bold;
	font-style: italic;
	font-size: 1.2em;
}

#quick_search table{
	margin-right:15%; margin-left:15%;	
}

#quick_search table td{
padding: 4px;
}

#quick_search table select{
	color: #948E99;
}

#top,#mid, #bottom, #quick_search {
	overflow: auto;
}
#bottom {
	border: 1px solid #A3ADB8;
}

#bottom h3 {
	font-family: "Times New Roman", serif;
	letter-spacing: 1em;
	font-size:16px;
	margin-top:5px;
	margin-bottom: 15px;
}
#bottom p {
	padding-right:40px;	
	line-height:1.5;
}
#agent_pic {
	float: left;
	margin-right:20px;
}

#footer {
	margin-top:4px;
}

#address{
	text-align: center;
	
}

#address li{
	border-right: 1px solid white;
	padding-left: 10px;
	padding-right: 10px;
}
#address .last_li {
	border: none;
}
Member Avatar for Xlphos

Here is you site source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Conforming XHTML 1.1 Template</title>

</head>

<body>
	<div id="container">
		<div id="top">

			<img src="./images/JeanBrunoneHome_03.gif" alt="Jean Brunone" style="float:left;"/>			
			<img src="./images/JeanBrunoneHome_05.gif" alt="Gloria Nilson" style="float:right;"/>
		</div><!-- end div top -->		
		<ol id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">Buying</a></li>
			<li><a href="#">Selling</a></li>
			<li><a href="#">My Listings</a></li>

			<li><a href="#">Elegant Homes</a></li>
			<li><a href="#">About Me</a></li>
			<li><a href="#">Contact Me</a></li>
		</ol>
	
		<div id="mid">
			<img src="./images/JeanBrunoneHome_09.gif" alt="left graphics" style="float:left;margin:-1px;"/>
			<img src="./images/JeanBrunoneHome_10.gif" alt="mid graphics" style="float:left;margin-right:2px;"/>	
			<div id="quick_search">

				<h4><span id="quick">Quick</span> Search</h4>
				<form id="q_search" action="#" method="post" style="float:left">
				<table cellspacing="0">
					<tr>
						<td align="right">
							<label>County:</label>
						</td>

						<td align="left">
							<select name="county">
								<option>Monmouth</option>						
							</select>
						</td>
					</tr>
					<tr>
						<td align="right">
							<label>Min. Price:</label>

						</td>
						<td align="left">
							<select name="min_price">
								<option>Any</option>		
							</select>
						</td>
					</tr>
					<tr>
						<td align="right">

							<label>Max. Price:</label>
						</td>
						<td align="left">
							<select name="max_price">
								<option>No Maximum</option>						
							</select>
						</td>
					</tr>

					<tr>
						<td align="right">
							<label>Minimum:</label>
						</td>
						<td align="left">
							<select name="min_price">
								<option>No Minimum</option>		
							</select>

						</td>
					</tr>
					<tr>
						<td align="right">
							<label>Bedrooms:</label>
						</td>
						<td align="left">
							<select name="bedrooms">

								<option>Any</option>						
							</select>
						</td>
					</tr>			
					<tr>
						<td colspan="2" align="center">
							<input type="image" src="./images/JeanBrunoneHome_17.gif" value="submit" name="submit" />
						</td>
					</tr>

					</table>					
				</form>			
				<img src="./images/JeanBrunoneHome_21.gif" alt="news letter"/>
			</div> <!--end div quick search -->
		</div> <!-- end div mid -->
		<div id="bottom">
			<img src="./images/JeanBrunoneHome_26.gif" alt="jean brunone" id="agent_pic"/>
			<h3>Welcome to my site!</h3> 			
			<p>

				Interested in purchasing a new home in the Princeton and surrounding area? 
				Why wait? Begin your home search now!  Check my <a href="#" style="color:#7D8B9B;">featured homes</a> to see some of
				the top new properties in the area.  For more information, <a href="#" style="color:#7D8B9B;">contact me</a> today!
				I have the tools and resources to help you find the home that will best fit your
				needs				
			</p>		
			<img src="./images/JeanBrunoneHome_29.gif" alt="top 5"/>
		</div> <!-- end div bottom -->
		<div id="footer">
			<ul id="address">

			<li>826 Alexander Road</li>
			<li>Princeton, New Jersey 08540</li>
			<li>Office: 609.750.2025</li>
			<li>Cell: 609.306.5549</li>
			<li class="last_li">Fax: 609.799.7729</li>
			</ul>

		</div> <!-- end div footer -->
	</div><!-- end div container -->
</body>

</html>

Here you have div's for the top and mid. Create one for your navigation. Something like:

HTML

<div id="nav">
		<ol >
			<li><a href="#">Home</a></li>
			<li><a href="#">Buying</a></li>
			<li><a href="#">Selling</a></li>
			<li><a href="#">My Listings</a></li>

			<li><a href="#">Elegant Homes</a></li>
			<li><a href="#">About Me</a></li>
			<li><a href="#">Contact Me</a></li>
		</ol>
</div>

In the CSS define the dimensions for the nav container, the contents of that container should be limited to its dimensions.

Member Avatar for ryy705

thank you.

Member Avatar for Slade007

Which web brower did you all view this in...
Cause i normally use firefox...
But when i viewed the page in IE6 (which probably many still use)...
Well you gotto see it for yourself...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.