Member Avatar for ryy705

Hello,

I am trying to sharpen my css skills by practicing with the following
design:

You will find the html page at :

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
  • 120 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Slade007

Dani AI

Generated

Short diagnosis: the nav is wrapping because the sum of each link's visible width (anchor padding + text + any list/container margins) is bigger than the fixed container. That makes the last item drop or “slide out” when the viewport changes. Centering can make this more obvious because the browser must split the inline flow to honor both centering and available width.

A robust, modern fix is to make the nav a block container and use Flexbox so the row stays on one line and items are aligned and distributed predictably (with a graceful option to wrap if you want). For example:

/* modern browsers */
#nav { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; padding: 0; margin: 0; }
#nav li { list-style: none; }
#nav a  { display: block; padding: 0 12px; box-sizing: border-box; white-space: nowrap; }

If you must support very old IE (as hinted), use an inline-block fallback or floats. A quick inline-block approach keeps centering but prevents wrapping; older IE6/7 need the hasLayout hack:

/* older-browser fallback */
#nav { text-align: center; white-space: nowrap; }
#nav li { display: inline-block; margin: 0 6px; }
#nav li { *display: inline; zoom: 1; }   /* IE6/7 inline-block fix */

Practical troubleshooting checklist: follow and wrap the ol in a nav/div container; remove default OL/UL margins (reset.css helps); measure computed widths in dev tools to find any large paddings or stray margins; consider reducing per-link horizontal padding or switching to percent/flex spacing. For Flexbox basics see the MDN guide (flexbox basics) and for whitespace behavior see (white-space).

Recommended Answers

All 6 Replies

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.