Grow your CSS skills. Land your dream job.

Paragraph not aligning

  • # May 25, 2008 at 3:01 pm

    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 http://www.barksandbones.com/dev2/bark.php. 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 li.contact 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <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>
    </head>
    <body>
    <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>
    </ul>

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

    </div>

    <div id="footer">
    </div>

    </body>
    </html>

    # May 25, 2008 at 3:13 pm

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

    # May 25, 2008 at 3:33 pm

    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
    Tim

    # May 25, 2008 at 6:40 pm

    I think the first line of your CSS file is causing the problem:

    @charser "utf-8"

    Should be charset? I dunno I never use those things in CSS files. What it’s doing though is screwing up your * selector and not resetting the margin and padding on the ul. If you set the margin and padding to 0 on the ul#nav, it fixes it.

    # May 25, 2008 at 7:20 pm

    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!

    Tim

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".