PDA

View Full Version : Navi Not Lining Up



Reta
Jan 22nd, 2009, 03:34 PM
Hello,

I've been trying to solve this problem for two days now but my nav doesn't seem to center or float to the desired position.

Do i have to create another side bar with the same width as the main content div under it?

Help

Reta

Reta
Jan 22nd, 2009, 04:30 PM
LINK (http://tinyurl.com/8h8599)
Trying to positition it perfectly under the footer and take the same width as the main div

abduraooft
Jan 22nd, 2009, 05:01 PM
Fix the errors in your markup first, to make sure that it has nothing to do with your current issue, see http://validator.w3.org/check?uri=http%3A%2F%2Ftinyurl.com%2F8h8599&charset=%28detect+automatically%29&doctype=Inline&group=0

Reta
Jan 22nd, 2009, 05:59 PM
Hello abduraooft,

Fixed the errors but did not solve the problem. Not sure what the problem is. May have something to do with the stylesheet

Excavator
Jan 22nd, 2009, 06:23 PM
Hello Reta,
I think I understand what you want... if you want the menu after the footer, you'll need to re-arrange your markup a little:


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-6027375-1");
pageTracker._trackPageview();
</script>



<div id="footer">
REGGAETON BEATS DOT COM <p>Themed by WPDesigner</p>
</div>



<div id="menu">
<ul>
<!-- <li><a href="http://www.reggaetonbeats.com/">Home</a></li> -->
<li><a href="http://www.reggaetonbeats.com" title="Buy Beats">Buy Beats</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=12" title="Contact Us">Contact Us</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=4" title="Verify your Order">Verify your Order</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=6" title="Your Account">Your Account</a></li>
</ul>
</div>


</div>
</div>
<div id="ui-datepicker-div"></div>


And to center it, you'll need to give it a width...
Try this:



#menu {
width: 508px;
margin:0 auto;
background: #fff;
overflow: auto;
list-style-type:none;
}
#menu ul{
width: 430px;
}
#menu li {
display:inline;
}

#menu a {
padding:4px 16px;
color:#015597;
background:#000000;
border:1px solid #fff;
text-decoration:none;
}

#menu a:hover {
color:#ffffff;
background:#015597;
}

jerry62704
Jan 22nd, 2009, 06:31 PM
Are you sure you fixed the 8 errors that are still there?

I don't use tables, do you need cells as well?

Reta
Jan 22nd, 2009, 07:29 PM
Hello Reta,

And to center it, you'll need to give it a width...
Try this:



#menu {
width: 508px;
margin:0 auto;
background: #fff;
overflow: auto;
list-style-type:none;
}
#menu ul{
width: 430px;
}
#menu li {
display:inline;
}

#menu a {
padding:4px 16px;
color:#015597;
background:#000000;
border:1px solid #fff;
text-decoration:none;
}

#menu a:hover {
color:#ffffff;
background:#015597;
}


That can work. Almost centered but not quite.

I was actually leaning towards something more like this



Is it possible to have it this wat? photoshopped image

What would need to be added to the following code?

Thank you.

#menu {
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
}
#menu li {
display:inline;
}

#menu a {
width:auto;
display:block;
padding:4px 16px;
color:#015597;
background:#000000;
border:1px solid #fff;
text-decoration:none;
}

#menu a:hover {
color:#ffffff;
background:#015597;
}

Reta
Jan 22nd, 2009, 07:31 PM
Are you sure you fixed the 8 errors that are still there?

I don't use tables, do you need cells as well?

These errors are from the soundclick player. it is the only one line I couldn't fix. but everything else is good.

Excavator
Jan 22nd, 2009, 08:56 PM
Stripped it down to the bare basics:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
padding: 50px 0;
background: #999;
overflow: auto;
}
#menu {
width: 508px;
margin:0 auto;
background: #000000;
}
#menu ul{
list-style: none;
border-top: 1px solid #fff;
}
#menu li a:link, #menu li a:visited, #menu li a:active {
width: 508px;
display: block;
padding: 4px 0;
color: #015597;
background: #000000;
border-bottom: 1px solid #fff;
text-decoration: none;
}

#menu li a:hover {
color: #ffffff;
background: #015597;
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<!-- <li><a href="http://www.reggaetonbeats.com/">Home</a></li> -->
<li><a href="http://www.reggaetonbeats.com" title="Buy Beats">Buy Beats</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=12" title="Contact Us">Contact Us</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=4" title="Verify your Order">Verify your Order</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=6" title="Your Account">Your Account</a></li>
</ul>
<!--end menu--></div>
<!--end wrap--></div>
</body>
</html>

Reta
Jan 23rd, 2009, 01:24 AM
Stripped it down to the bare basics:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
padding: 50px 0;
background: #999;
overflow: auto;
}
#menu {
width: 508px;
margin:0 auto;
background: #000000;
}
#menu ul{
list-style: none;
border-top: 1px solid #fff;
}
#menu li a:link, #menu li a:visited, #menu li a:active {
width: 508px;
display: block;
padding: 4px 0;
color: #015597;
background: #000000;
border-bottom: 1px solid #fff;
text-decoration: none;
}

#menu li a:hover {
color: #ffffff;
background: #015597;
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<!-- <li><a href="http://www.reggaetonbeats.com/">Home</a></li> -->
<li><a href="http://www.reggaetonbeats.com" title="Buy Beats">Buy Beats</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=12" title="Contact Us">Contact Us</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=4" title="Verify your Order">Verify your Order</a></li>
<li><a href="http://www.reggaetonbeats.com/?page_id=6" title="Your Account">Your Account</a></li>
</ul>
<!--end menu--></div>
<!--end wrap--></div>
</body>
</html>

Whoa, thanks.

It worked without the wrapping (caused something weird with the different browsers). Didn't use the whole code played with it and got what it has now.

I think I may be working one 100% now.

I'll have test it in a few browsers when I get home to see.

Reta

Reta
Jan 23rd, 2009, 07:03 AM
Looks perfect on the latest IE (non-beta).

Slight dilemma on Google Chrome, Firefox and Safari. Very small. Am I missing a hack?

I attached a snapshot. It is the same for all the above browsers except netscape (more serious) but I'm not to worried about that browser.

Problem: The main div slightly overlaps the navi div sometimes causing the hover to appear above the main div.

Excavator
Jan 23rd, 2009, 07:29 AM
#menu {
width: 508px;
margin:0 auto;
clear: both;
background: #000;
}Try adding that bit in red.

Reta
Jan 23rd, 2009, 08:02 AM
#menu {
width: 508px;
margin:0 auto;
clear: both;
background: #000;
}Try adding that bit in red.

Your the man of all mans, man!

Thanks. Looks good so far I'll test it further (Mac, Linux) another time.

Thank you all for the great help.

Reta
Jan 23rd, 2009, 08:14 PM
One last thing,

I went ahead & put the nav below the header as well but it looks funny when viewing a page with minimum content

Rowsdower! had some good suggestion(s).

I tried to duplicate the code in css and called the div/code menu2 but it messed up the main menu.

Your thoughts?

Reta


................I'd say having the large navigation block at the top makes the most sense in general. I'm picturing how a page would look with very little content. You'd almost have the duplicate menu blocks stacked one atop the other which would be a bit unsightly I think. You could maybe repeat the menu at the bottom in a single horizontal line (keep the same exact styling just make the white borders a vertical line between menu items and display your menu inline). I think that could look pretty sharp and would still give all of the same functionality no matter how much content is on the page....