Geek asks and answers

CSS layout issues (Footer & UL Styling)

So, I'm trying to code my design for my new portfolio website, but I have several problems that research and hours of breaking my face on a computer screen have not yet been resolved. Now there are two big problems when I'm stuck, although there is another problem that I am considering now, even if I want to deal at all.

The first problem is the menu. I want the font to go from normal to bold when you hover over it, or when you are on this page. What works. The problem is that when you hover over it, the other two items in the menu change slightly, because changing the type's weight pushes them. My attempts so far have ended in failure.

The second problem is the footer. I want it to stay at the bottom of the page. My research gave me this far, but instead of what I wanted, now it actually remains at the bottom of the browser, and not at the bottom of the content. Thanks for any help you can give!

The page in question is located at: http://personal.justgooddesign.net/draft/

+3
source share
5 answers

Your footer is mixed because you are floating to the left and clearing to the right. My personal preferences for footers always start with this very clean method and build from there. If you're confused, separate your internal content from the rest of the page and check.

, . Indesign, Illustrator .., 100%. , , . , . , , , , . , .

, css . , . , , , . .

+1

?

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


#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;
}
+1

, #menu li,

#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:

  • height: 600px; #right

  • br #container div #footer div

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

, .

  • div # .
  • div # , div # "left", div # "right", div # footer. , , , divs , div # contaiver "" div (div # left, div # right div # fotter))
  • div # right. div # intro div # div # , div.

. . .

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

div.float_clear
{
clear: both;
}

, .

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

: ...

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

overflow: hidden; Display: unit; width: (some width);

This will fix most floating point issues.

0
source

More articles:


All Articles