How make navigation more robust

Question

ryy705 0 Junior Poster

14 Years Ago

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.

web-design

3 Contributors
6 Replies
100 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Slade007

All 6 Replies

Xlphos 16 Veteran Poster

14 Years Ago

Can you post your CSS?

Xlphos 16 Veteran Poster

14 Years Ago

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

Reply to this topic

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.

ryy705 0 Junior Poster · Answer 1 · 2009-05-25T07:19:02+00:00

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;
}

Xlphos 16 Veteran Poster · Answer 2 · 2009-05-25T19:41:41+00:00

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.

ryy705 0 Junior Poster · Answer 3 · 2009-05-26T01:23:21+00:00

ryy705 0 Junior Poster

14 Years Ago

thank you.

Slade007 0 Newbie Poster · Answer 4 · 2009-05-28T19:24:13+00:00

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...

How make navigation more robust

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers