The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Paragraph not aligning

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #22700

    After noon all. I have been working with the videos designing in photoshop and then writing the code to display it. I have my header image and buttons working however I can’t get my main content to drop below the menu. It’s aligning it to the top and when I insert my repeating image for the main content it goes on top of my menu. I’ll put my code below and you can have a look at Thanks in advance.

    @charser "utf-8"
    /* CSS Document */

    * { margin: 0; padding: 0;}
    html{ overflow-y: scroll;}
    body {
    font: 62.5% Arial, Times Roman;
    background-color: #bcab7b;

    ul { list-style: none inside; }
    p { font-size: 1.2em; line-height: 1.2em margin-bottom 1.2em;}
    a {outline: none;}
    a img { border: none;}

    .floatleft{ float: left;}
    .floatright{ float: right;}
    .clear { clear: both;}

    #page-wrap {
    width: 989px;
    margin: 0 auto;


    ul#nav {

    ul#nav li {
    display: inline;
    ul#nav li a{
    display: block;
    height: 41px;
    text-indent: -9999px;
    float: left;
    ul#nav li.home a {
    width: 190px;
    background: url(images/nav-home.jpg) bottom center no-repeat;
    ul#nav li.products a {
    width: 134px;
    background: url(images/nav-products.jpg) bottom center no-repeat;
    ul#nav li.about a {
    width: 133px;
    background: url(images/nav-about.jpg) bottom center no-repeat;
    ul#nav a {
    width: 134px;
    background: url(images/nav-contact.jpg) bottom center no-repeat;
    ul#nav li.links a {
    width: 225px;
    background: url(images/nav-link.jpg) bottom center no-repeat;
    ul#nav li a:hover {
    background-position: center center;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&gt;
    <html xmlns=""&gt;
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="bnb-styles.css" />
    <title>BNB – Test</title>
    <div id="page-wrap">

    <img src="images/bnb-header.gif" alt="Mockup Header" />

    <ul id="nav">
    <li class="home"><a href="#">Home</a></li>
    <li class="products"><a href="#">Products</a></li>
    <li class="about"><a href="#">About Us</a></li>
    <li class="contact"><a href="#">Contact Us</a></li>
    <li class="links"><a href="#">Links</a></li>

    <p>Aliquam lectus orci, adipiscing et, sodales ac, feugiat non, lacus. Ut dictum velit nec est. Quisque posuere, purus sit amet malesuada blandit, sapien sapien auctor arcu, sed pulvinar felis mi sollicitudin tortor. Maecenas volutpat, nisl et dignissim pharetra, urna lectus ultrices est, vel pretium pede turpis id velit. Aliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies leo dapibus ultricies. Sed rhoncus lobortis dolor. Suspendisse dolor. Mauris sapien velit, pulvinar non, rutrum non, consectetuer eget, metus. Morbi tincidunt lorem at urna. Etiam porta. Ut mauris. Phasellus tristique rhoncus magna. Nam tincidunt consequat urna. Sed tempor.</p>

    <div id="sidebar">


    <div id="footer">



    Nevermind, sorry guys, I had the page wrap width set to wide….


    I actually spoke too soon, the page wrap was not set to the correct width which was throwing off the text. However when I put in my repeating image its for the main content background its not aligning at all and is actually jumping on top of my menu…. any ideas?



    Thanks Chris! That fixed it. It looks great in Safari and Firefox, however IE puts my content repeating image on top of my sprite menu… Any ideas? By the way, great tutorials I have really learned a lot from them and your site. Great work and keep it up!


Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.