Looking for Advice

I’m generally the PHP/MySQL guy, I NEVER do actual designing of a web pages looks using CSS or HTML, so this is all new to me.

http://academ.hvcc.edu/~d-lamanna1/portfolio/
is the website at hand, I like the color scheme at the moment and don’t have any plans on changing it, however I’m trying to figure out:

  • How the links on the links bar can go horizontally across rather than vertically.

  • How to make the border on top of the footer go all the way across the main container.

  • How to have room between the gray inner content box and the border of the footer.

  • And finally, how to make a sidebar on the right work for a news feed or something of the sort, I made one however it moved all the content to the bottom, below the inner content box.

Thanks for any advice you can give with said issues.

Hi,
For your horizontal links you should float them in a structure like this:


#linksbar {
    background:#545454;
    border-top:3px solid white;
    border-bottom:3px solid white;
    width:100%;
    float:left;
    margin:0;
    padding:0;
    list-style:none;
}
#linksbar li {
    padding:8px;
    padding-bottom:0;
    text-align:left;
    text-transform:uppercase;
    color:#FFF;
    float:left;
    margin:0 10px;
    display:inline;
    text-align:center;
}
#linksbar li span {
    text-transform:lowercase;
    font-size:11px;
    color:#000;
    padding-bottom:8px;
    display:block;
    text-align:center;
}



<ul id="linksbar">
        <li><a href="#">Home<span>That home page</span></a></li>
        <li><a href="#">Resume</a><span>what have i done?</span></li>
        <li><a href="#">Contact</a><span>Get in Touch</span></li>
    </ul>

Move the footer down a level in the html and out of its current parent then it will stretch full width.

For the sidebar float the innercontent as well and then use a float clearing mechanism to clear both floats (see faq on floats).

Floats must come first in the html before the block level content that you want them to align against. For a two column layout its best to float both columns and avoid IE bugs but you have to remember to clear them before the closing div of the parent or the parents background will disappear as its height collapses to zero.

Also you floated the sidebar without a width which means that it will shrink-wrap its content. If the content is fluid then eventually it will stretch to 100% wide and not fit in the space you left for it.

If you have a fixed pixel width container then use pixel widths for the containers and not 70% and 30% because that will get rounded up and be too big.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Dan LaManna - Portfolio</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
    background:url(http://img692.imageshack.us/img692/8494/73164791.jpg) repeat;
    font-family:Verdana, Geneva, sans-serif;
}
#container {
    background:#3e3d3d;
    width:960px;
    border:1px solid #FFFFFF;
    margin:15px auto;
}
.title {
    color:#FFF;
    padding:15px;
    padding-bottom:0;
    font-size:24px;
    text-align:left;
}
.subtitle {
    padding-left:20px;
    padding-bottom:10px;
    text-align:left;
    text-transform:lowercase;
    font-size:14px;
    color:#999;
    font-weight:400;
}
#linksbar {
    background:#545454;
    border-top:3px solid white;
    border-bottom:3px solid white;
    width:100%;
    float:left;
    margin:0;
    padding:0;
    list-style:none;
}
#linksbar li {
    padding:8px;
    padding-bottom:0;
    text-align:left;
    text-transform:uppercase;
    color:#FFF;
    float:left;
    margin:0 10px;
    display:inline;
    text-align:center;
}
#linksbar li span {
    text-transform:lowercase;
    font-size:11px;
    color:#000;
    padding-bottom:8px;
    display:block;
    text-align:center;
}
#maincontent {
    background-color:#3e3d3d;
    padding:10px 10px 25px;
    padding-top:18px;
    overflow:hidden;
}
* html #maincontent {
    height:1%;
    overflow:visible
}
.pagetitle {
    color:#fff;
    font-size:18px;
    padding-bottom:10px;
    padding-top:10px;
}
#innercontent {
    padding:10px;
    font-size:12px;
    width:70%;
    background-color:#999;
    float:left;
}
#sidebar {
    float:right;
    width:25%;
    background:red;
}
#footer {
    padding:15px;
    border-top:1px solid white;
    text-align:center;
    font-size:9px;
}
</style>
</head>
<body>
<div id="container">
    <div class="title">Dan LaManna</div>
    <div class="subtitle">Your everyday web designing pancake flipping sort of guy</div>
    <ul id="linksbar">
        <li><a href="#">Home<span>That home page</span></a></li>
        <li><a href="#">Resume</a><span>what have i done?</span></li>
        <li><a href="#">Contact</a><span>Get in Touch</span></li>
    </ul>
    <div id="maincontent">
        <div class="pagetitle">Home Page</div>
        <div id="innercontent">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum vulputate nisi a lacinia. Sed ornare fringilla egestas. Mauris interdum, enim vitae imperdiet faucibus, nisi est convallis risus, eu mattis nisi nibh ut metus. Etiam pulvinar libero in quam tristique in vehicula ante tempus. Ut nec magna vitae felis rhoncus commodo a aliquam purus. Nulla facilisi. Fusce in eros at mauris tincidunt congue. Etiam purus felis, laoreet vel lobortis at, elementum quis libero. Vestibulum ultrices erat sit amet risus pharetra non laoreet sapien tempor. Morbi at tincidunt nulla. Mauris dictum nibh sed odio pharetra accumsan. Sed ac consectetur magna. Ut sed magna ut velit ultrices dignissim. Donec semper sapien sit amet nulla posuere laoreet ut quis quam.
                
                Etiam felis orci, condimentum a pharetra nec, ultricies sed risus. Nunc justo purus, accumsan a congue et, aliquam vitae turpis. Maecenas enim turpis, euismod quis auctor sed, ultricies sed sem. Ut rhoncus sodales ornare. Vivamus in mauris sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis lacinia ullamcorper facilisis. Donec posuere quam sit amet velit dignissim quis molestie lectus ultrices. Maecenas justo turpis, luctus vel posuere eu, aliquet eget libero. Donec feugiat, sapien sed aliquam tempus, eros sapien molestie leo, id condimentum tellus risus vitae dui. Duis congue, tortor pulvinar malesuada dignissim, mauris sem rhoncus est, id volutpat ipsum felis non augue. Vivamus ac tortor nec lectus egestas porta et id nulla. Morbi nec metus dolor, eu lacinia tellus. </p>
        </div>
        <div id="sidebar">
            <p>Floated sidebar</p>
            <p>Floated sidebar</p>
            <p>Floated sidebar</p>
            <p>Floated sidebar</p>
            <p>Floated sidebar</p>
            <p>Floated sidebar</p>
        </div>
    </div>
    <div id="footer"> Copyright &copy; 2010. DanLaManna.com<br />
        Some Rights Reserved. </div>
</div>
</body>
</html>