CSS Layout Issues (Footer & UL Styling)

So I'm trying to code out my design for my new portfolio website, but I'm having a few issues there that research and hours of smashing my face against the computer screen have not yet solved. There are two big issues right now that I'm stuck on, though there is yet another that I'm currently considering if I even want to deal with at all.

The first issue is the m开发者_JAVA技巧enu. I want the typeface to go from regular to bold when you hover over it, or when you're on that page. Which works. Problem is when you hover over it, the other two items in the menu adjust slightly because the change in type weight pushes them out. My attempts thus far have all ended with failure.

The second issue is the footer. I want it to stay on the bottom of the page. My research has gotten me this far, but instead of what I wanted, now it actually stays at the bottom of the browser, not at the bottom of the content. Thank you for any help you can give!

The page in question can be found at: http://personal.justgooddesign.net/draft/

Your footer is getting jumbled up because you float left and clear right. My personal preference for footers always starts with this very clean method and builds from there. If you're getting confused, separate your inner content from the rest of the page and test away.

With fonts, you have to think more like a UI developer than a graphic designer. Unlike Indesign, Illustrator, etc, fonts and spacing aren't 100% pixel perfect. What will render one way in one browser will render a very different way in another. Bolding a font on the web will make it larger, and it will push spacing. To compensate for that, setup your menu elements to be a bit wider to compensate, then test like crazy. If you solely rely on margins and padding, then a bolded hover element is going to push the menu around every time.

Just a suggestion, setup your css in a separate file and load it in. The code will be cached, which will result in a performance improvement on subsequent loads. Further, you could save yourself a lot of code by doing one class to attach styling to your elements and being mindful positioning relative to other elements. There's no need to individually style every element in your portfolio for positioning.

You can fix the jump in the menu by setting a fixed width on the #menu li, so

#menu li {
display: block;
float: right;
width: 40px;   //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}

EDIT:

To fix the footer issue

1. remove height: 600px; from the #right rule

2. add a clearing br in between the #container div and the #footer div

   </div>
   <br style="clear:both;">
   <div id="footer">
   

You have floating problems as you are not clearing your floats.

• Your div#wrapper is always going to be equal to the height of the viewport.
• Your div#container is collapsed beacuse you have floated div#left to "left", div#right to "right" and also have absolutely positioned div#footer. What this does is that, it takes these divs from the normal flow of the document and subsequently the div#contaiver is not "wrapped" around these three divs (div#left, div#right and div#fotter")
• The same is the case with div#right. The div#intro and div#portfolio have been floated inside the div#right and it is not wrapping it's child divs.

Ther are many ways around these problems. I suggest this. Include the following code after the last floated element.

<div class="float_clear"></div>

div.float_clear
{
clear: both;
}

For the menu, there is not enough space, Just add.

div#menu>ul>li
{
width: 50px;
}

Try this to fix your footer issue?

<p style = "clear:both">
<div id="footer">

Also

#right {
    clear: right;
    float: right;
    height: 600px; //Remove this line
    width: 490px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 0px;
}

add overflow:hidden to the container...

Whenever you have stuff that is floating, put a div around the floating content and give it

overflow:hidden; display:block; width: (some width);

That will fix most floating issues