Reputation: 101
I have a jQuery animation for my banner area on my webpage which is run on the body load. The banner display is set to none initially, which is then changed when the function runs.
function displayExpand()
{
$('#displayArea').slideDown('slow', function(){});
}
For some strange reason the container for the navigation menu overflows and each link stacks on top of itself on the far right side of the page. What is even stranger is that this ONLY happens when I refresh the page. If I access the page from another link the navigation menu will look fine. It also only seems to happen when I run it in chrome
CSS
#linkContainer {
margin-top:20px;
float:right;
text-align:right;
height:55px;
}
HTML
<div id="linkContainer">
<div class="mybuttons" style="color:#C00; font-weight:bold;">Home</div>
<a href="about.html" style="text-decoration:none"><div class="mybuttons">About</div></a>
<a href="portfolio.html" style="text-decoration:none"><div class="mybuttons">Portfolio</div></a>
<a href="resume.html" style="text-decoration:none"><div class="mybuttons">Resume</div></a>
<a href="contact.html" style="text-decoration:none"><div class="mybuttons">Contact</div></a>
</div>
Any suggestions why?
Upvotes: 0
Views: 145
Reputation: 395
.mybuttons {
margin-top:20px;
float:left;
text-align:left;
height:55px;
padding: 1px;
margin: 1px
}
#linkContainer {
margin-top:20px;
float:right;
text-align:right;
height:55px;
padding: 1px;
margin: 1px
}
try to apply it on div with the class .mybutton
http://jsfiddle.net/j6UhE/3/
Upvotes: 1
Reputation: 160
Change your HTMl to
<ul id="linkContainer">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="resume.html" >Resume</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
and CSS as
ul#linkContainer{ float:right}
ul#linkContainer li{ float:left:margin-right:5px;}
ul#linkContainer li a.active{color:#C00; font-weight:bold;}
ul#linkContainer li a{ display:block;text-decoration:none}
Upvotes: 1
Reputation: 379
If you want to display them in a horizontal nav bar. Then instead of div's
use <li>
Here is the code:
HTML
<div id="linkContainer">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Resume</a></li>
<li><a href="">Contact</a></li>
<ul>
</div>
CSS
#linkContainer {
margin-top:20px;
float:right;
height:55px;
width:auto;
}
ul li
{
list-style:none;
display:inline-table;
padding-left:30px;
}
Hope this will help you..
Upvotes: 2