CODEWITHSUNDEEP
jquerycss
user2330621
user2330621

Reputation: 101

Links overflowing out of container div

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

Answers (4)

Ravi Pal
Ravi Pal

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

IlyaDoroshin
IlyaDoroshin

Reputation: 4699

All you need is to get rig of divs in anchors: JSFiddle

Upvotes: 0

Arun kumar
Arun kumar

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

Sree ram
Sree ram

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

Related Questions