Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Alignment issue with a grid layout

    Hello!

    I need help with some code that I'm working on for a layout. I'm trying to put it onto Wordpress after, but for some reason, my alignment is off.

    My main problems I noticed are:
    • The logo messes up with the alignment (possibly because of z-index)
    • #recent-news div alignment is off (from display:inline?)
    • First <hr /> line disappears on Firefox
    • I had to force the alignment from OUR SPONSORS and down with a blank ul; it shows up caught behind the logo
    • Copyright doesn't span 100%; when setting a width to the div, the Copyright info disappears


    Here's the code!

    index.html
    http://socalnpo.danaoira.net
    Code:
    <!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" />
        <title>SoCal NPO - Southern California Non-Profit Organizations Magazine</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        
        <div id="container">
            <div id="logo">
                    <a href="#"><img src="images/southern-california-non-profit-organizations-magazine-socal-logo.png" /></a>
            </div>
                
            <div id="top-menu">
                <a href="#">Home</a> |
                <a href="#">Articles</a> |
                <a href="#">Blog</a> |
                <a href="#">About</a> |
                <a href="#">Calendar</a> |
                <a href="#">Subscribe</a> |
                <a href="#">Contact</a>
            </div>
            
            <div id="header">
                <div id="menus">
                    
                    <div id="main-menu">
                        <ul class="main-menu">
                            <li><a href="#">Community</a></li>
                            <li><a href="#">Non-Profit Organizations</a></li>
                            <li><a href="#">Donors</a></li>
                        </ul>
                    </div>
                    
                    <div id="category-float">
                        <ul id="category">
                            <li><a href="#">Environmental</a></li>
                            <li><a href="#">Arts &amp; Culture</a></li>
                            <li><a href="#">Quality of Life</a></li>
                            <li><a href="#">Education</a></li>
                            <li>
                                <form method="get" id="search" action="#">
                                    <fieldset>
                                        <input type="text" class="searchbar" />
                                    </fieldset>
                                </form>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
                
            <div id="main">
                <div id="featured">
                                       
                    <div id="featured-1">
                        <a href="#" class="post-thumbnail"><img src="images/100-mile-club-300.png" alt="100 Mile Club" /></a>
                        <h1><a href="#">100 Mile Club</a></h1>
                        <p>The 100 Mile Club is an organization that provides opportunities for school age children to run or walk 100 miles at school during a single year.</p>
                    </div>
                    
                    <div id="featured-2">
                        <a href="#" class="post-thumbnail"><img src="images/non-profits-share-the-vision-300.png" alt="Non-Profits Share the Vision" /></a>
                        <h1><a href="#">Non-Profits Share the Vision</a></h1>
                        <p>The 100 Mile Club is an organization that provides opportunities for school age children to run or walk 100 miles at school during a single year.</p>
                    </div>
                    
                    <div id="featured-3">
                        <a href="#" class="post-thumbnail"><img src="images/corenet-global-junior-achievement-300.png" alt="CoreNet Global Junior Achievement" /></a>
                        <h1><a href="#">CoreNet Global Supporting Junior Achievement</a></h1>
                        <p>The 100 Mile Club is an organization that provides opportunities for school age children to run or walk 100 miles at school during a single year.</p>
                    </div>
                    
                    <br />
                </div>
                    
                    <!-- Six (6) Recent News -->
                    
                <div id="recent">
                    <hr />
    <ul>
                        <li class="recent-news"><a href="#">Recent News</a></li>
                        <li class="view-more-news"><a href="#">View more news ...</a></li>
                    </ul>
                    
                    <div id="columns">
                    
                        <div id="recent-1">
                            <a href="#" class="post-news"><img src="images/csusb-recognition-150.png" alt="CSUSB Recognition" /></a><h2><a href="#">CSUSB Recognition</a></h2>
                            <p>Short article summary no longer than three lines goes here yep yep!</p>
                        </div>
                        
                        <div id="recent-2">
                            <a href="#" class="post-news"><img src="images/ieep-quality-of-life-summit-150.png" alt="IEEP Quality of Life Summit" /></a><h2><a href="#">IEEP Quality of Life Summit</a></h2>
                            <p>Short article summary no longer than three lines goes here yep yep!</p>
                        </div>
                        
                        <div id="recent-3">
                            <a href="#" class="post-news"><img src="images/perris-historical-exhibit-150.png" alt="City of Perris Historical Exhibit" /></a><h2><a href="#">City of Perris Historical Exhibit</a></h2>
                            <p>Short article summary no longer than three lines goes here yep yep!</p>
                        </div>
                        
                        <div id="recent-4">
                            <a href="#" class="post-news"><img src="images/historical-society-fashion-150.png" alt="Historical Society Celebrates 100 years of fashion" /></a><h2><a href="#">Historical Society Celebrates 100 years of fashion</a></h2>
                            <p>Short article summary no longer than three lines goes here yep yep!</p>
                        </div>
                        
                        <div id="recent-5">
                            <a href="#" class="post-news"><img src="images/woodcrest-christian-school-150.png" alt="Woodcrest Christian School" /></a><h2><a href="#">Woodcrest Christian School</a></h2>
                            <p>Short article summary no longer than three lines goes here yep yep!</p>
                        </div>
                        
                        <div id="recent-6">
                            <a href="#" class="post-news"><img src="images/tour-de-perris-150.png" alt="Tour De Perris 100 Mile Race" /></a><h2><a href="#">Tour De Perris 100 Mile Race</a></h2>
                            <p>Short article summary no longer than three lines goes here yep yep!</p>
                        </div>
                        
                    </div>
                    
                    <br /><br />
                    <hr />
                </div>
            </div>
                
                <div id="footer">
                    
                    <div id="sponsors-head">
                    
                    <ul>
                        <li class="blank"><h2>Our Sponsors</h2></li>
                        <li class="sponsors">Our Sponsors</li>
                        <li class="advertise"><a href="#">Advertise with us!</a></li>
                    </ul>
                    
                    <div id="sponsors">
                    
                    <ul id="sponsors">
                        <li><a href="#"><img src="images/bank-of-america-logo.png" alt="Bank of America proudly sponsors SoCal NPO Magazine" title="Bank of America proudly sponsors SoCal NPO Magazine" /></a></li>
                        <li><a href="#"><img src="images/gresham-savage-attorneys-logo.png" alt="Gersham Savage Attorneys at Law proudly sponsors SoCal NPO Magazine" title="Gersham Savage Attorneys at Law proudly sponsors SoCal NPO Magazine" /></a></li>
                        <li><a href="#"><img src="images/workforce-investment-board-logo.png" alt="Riverside County Workforce Investment Board proudly sponsors SoCal NPO Magazine" title="Riverside County Workforce Investment Board proudly sponsors SoCal NPO Magazine" /></a></li>
                        <li><a href="#"><img src="images/premier-service-bank-logo.png" width="135" alt="Premiere Service Bank proudly sponsors SoCal NPO Magazine" title="Premiere Service Bank proudly sponsors SoCal NPO Magazine" /></a></li>
                        <li><a href="#"><img src="images/eda-logo.png" alt="Riverside County Office of Foreign Trade proudly sponsors SoCal NPO Magazine" title="Riverside County Office of Foreign Trade proudly sponsors SoCal NPO Magazine" /></a></li>
                        <li><a href="#"><img src="images/altek-media-group-logo.png" alt="Altek Media Group proudly sponsors SoCal NPO Magazine" title="Altek Media Group proudly sponsors SoCal NPO Magazine" /></a></li>
                    </ul>
                    </div>
                    </div>
                    
                </div>
                
                <div id="footer-links">
                    
                    <ul id="submissions">
                        <li>Submissions</li>
                        <li><a href="#">Become a Contributor</a></li>
                        <li><a href="#">Submit Articles</a></li>
                    </ul>
                    
                    <ul id="about">
                        <li>About</li>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Staff</a></li>
                        <li><a href="#">Privacy Statement</a></li>
                        <li><a href="#">Terms of Use</a></li>
                    </ul>
                    
                    <ul id="support">
                        <li>Support</li>
                        <li><a href="#">Search Tips &amp; Tricks</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Chat</a></li>
                        <li><a href="#">Need Help?</a></li>
                    </ul>
                    
                    <ul id="follow-icons">
                        <li>Follow</li>
                        <li class="twitter"><a href="#"><img src="images/twitter-icon.png" alt="Follow SoCal NPO Magazein on Twitter!" /></a></li>
                        <li class="facebook"><a href="#"><img src="images/facebook-icon.png" alt="Like SoCal NPO Magazine on Facebook!" /></a></li>
                        <li class="youtube"><a href="#"><img src="images/youtube-icon.png" alt="Subscribe to SoCal NPO Magazine on YouTube!" /></a></li>
                    </ul>
                    
                    <ul id="follow">
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">YouTube</a></li>
                    </ul>
                    
                    <div class="copyright">
                    	&copy; 2011 Altek Media Group. All Rights Reserved.
                    </div>   
    			</div>
            </div>
    </body>
    </html>
    style.css
    Code:
        
    /* CSS Document */
    
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
        margin: 0; 
        padding: 0; 
        border: 0;
        list-style-type: none;
    }
    
    body {
        font: 12px/14px Arial, Tahoma; 
        color: #505050;
        background: #8b5a02 url(images/bg.png);
        background-repeat: repeat-x;
    }
    
    a {
        color: #c00015; 
        text-decoration: none;
    }
    
    a:hover {
        color: #000000;
        text-decoration: underline;
    }
    
    #container {
        width: 960px; 
        margin: 130px auto 65px auto;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        box-shadow: 0 0 5px #000000;
        -moz-box-shadow: 0 0 5px #000000;
    }
    
    #logo {
        position: relative;
        z-index: 0;
        left: 50px; top: -70px;
        float: left;
    }
    
    #top-menu {
        float: right;
        margin: -35px 25px 0 0;
        color: #ffffff;
    }
    
    #top-menu a {
        color: #ffd161;
    }
    
    #header 
    
    #menus 
    
    #main-menu
    
    ul.main-menu {
        margin: 35px 0 0 75px;
        font: 20px/36px Arial, Tahoma;
        text-transform: uppercase;
        float: left;
    }
        
    #category-float {
        width: 962px;
        margin: -30px 0 0 -1px;
        float: left;
        background: url(http://socalnpo.danaoira.net/images/categories-search.png);
    }
    
    #category {
        position: relative;
        margin: 13px 0 13px 50px;
        height: auto;
        font: 14px Arial, Tahoma; 
        color: #ffd161;
    }
    
    #category-float ul li {
        display: inline;
    }
    
    
    #category a {
        color: #ffd161;
        padding: 0 25px;
    }
    
    #category a:hover {
        color: #ffd161;
        padding: 0 25px;
        background: #c00015;
    }
    
    #search {
        float: right;
    }
    
    input.searchbar {
        width: 240px;
        height: 15px;
        border: 0;
        margin-right: 48px;
        background: #ffd161;
    }
    
    #main {
        width: 960px;
        float: left;
        overflow: hidden;
    }
    
    #featured, #recent {
        width: 884px;
        margin: 35px 35px 0 35px;
    }
    
    /* FEATURED NEWS SECTION */
    
    #featured-news {
        width:275px; 
        display:block; 
        padding:10px 0;
    }
    
    #featured-1 {
        float: left;
        width: 275px;
        margin: 0;
        display: inline;
    }
    
    #featured-2 {
        float: left;
        width: 275px;
        margin: 0 29px;
        display: inline;
    }
    
    #featured-3 {
        float: right;
        width: 275px;
        margin: 0;
        display: inline;
    }
    
    #featured-1 h1, #featured-2 h1, #featured-3 h1 {
        font: 18px/16px Arial, Tahoma;
        margin: 22px 0 0 0;
        height: 38px;
    }
    
    #featured-1 p, #featured-2 p, #featured-3 p {
        font: 12px/18px Arial, Tahoma;
        margin: 0 0 24px 0;
    }
    
    a.post-thumbnail img {
        width: 275px;
    }
    
    hr {
        position: relative;
        margin: 24px 0;
        background-color: #e9e9e9;
        color: #e9e9e9;
        width: 884px;
        height: 1px;
        border: 0;
    }
    
    /* RECENT NEWS SECTION */
    
    #recent ul {
        margin: 0 0 20px 0;
    }
    
    li.recent-news {
        font: 18px/14px Arial, Tahoma;
        text-transform: uppercase;
        display: inline;
    }
    
    li.view-more-news {
        font: 14px/14px Arial, Tahoma;
        float: right;
        display: inline;
    }
    
    a.post-news, h2 {
        font: 14px/12px Arial, Tahoma;
        width: 135px;
        margin: 10px 0 0 0;
    }
    
    #columns {
        width: 884px;
        display: block;
        height: 260px;
        margin: 20px 0 0 0;
    }
    
    #recent-1 p, #recent-2 p, #recent-3 p, #recent-4 p, #recent-5 p, #recent-6 p {
        font: 12px/14px Arial, Tahoma;
        width: 135px;
        margin: 10px 0 0 0;
    }
    
    #recent-1 {
        float: left;
        width: 135px;
        margin: 0 8px 0 0;
        display: inline;
    }
    
    #recent-2 {
        float: left;
        width: 135px;
        margin: 0 7.5px;
        display: inline;
    }
    
    #recent-3 {
        float: left;
        width: 135px;
        margin: 0 7.5px;
        display: inline;
    }
    
    #recent-4 {
        float: left;
        width: 135px;
        margin: 0 7.5px;
        display: inline;
    }
    
    #recent-5 {
        float: left;
        width: 135px;
        margin: 0 7.5px;
        display: inline;
    }
    
    #recent-6 {
        float: right;
        width: 135px;
        margin: 0;
        display: inline;
    }
    
    #footer, #sponsors {
        width: 960px;
        margins: 20px 36px;
        display: block;
    }
    
    /* SPONSORS SECTION */
    
    li.blank h2 {visibility: hidden;}
    
    #footer-columns {
        width: 884px;
        height: 260px;
        margin: 20px 36px 0 36px;
    }
    
    #sponsors-head {
        width: 884px;
        margin: 30px 36px;
    }
    
    li.sponsors {
        color: #c00015;
        font: 18px/14px Arial, Tahoma;
        text-transform: uppercase;
        display: inline;
    }
    
    li.advertise {
        font: 14px/14px Arial, Tahoma;
        float: right;
        display: inline;
    }
    
    
    ul#sponsors li {
        display: inline;
        align: center;
        margin: 20px 5px 0 5px;
        position: relative;
        top: 15px;
    }
    
    #sponsors img {
        width: 135px;
    }
    
    /* FOOTER LINKS */
    
    #footer-links {
        width: 962px; 
        height: 220px;
        margin: 50px 0 50px -1px;
        background: #86000a;
        }
    
    #footer-links ul li {
        color: #ffd161;
        font: 11px/18px Arial, Tahoma;
    }
    
    #footer-links a, a:hover {
        color: #ffffff;
    }
    
    #submissions {
        float: left;
        width: 165px;
        margin: 60px 0 0 50px;
        display: inline;
    }
    
    #about {
        float: left;
        width: 165px;
        margin: 60px 0 0 0;
        display: inline;
    }
    
    #support {
        float: left;
        width: 165px;
        margin: 60px 0 0 0;
        display: inline;
    }
    
    #follow-icons {
        float: left;
        width: 40px;
        margin: 60px 0 0 0;
        display: inline;
    }
    
    #follow {
        float: left;
        width: 165px;
        margin: 80px 0 0 0;
        display: inline;
    }
    
    #follow li {
        height: 28px;
    }
    
    span#full {width:960px;}
        
    div.copyright {
        font: 11px/18px Arial, Tahoma;
        color: #a0a0a0;
        position: relative;
        top: 235px;
        left: -730px;
    }
    
    /* CONTENT PAGE STYLING */
    
    #video-container {
        height: 340px;
        width: 884px;
    }
    
    #video {
        float: left;
    }
    
    #bio {
        float: right;
        width: 280px;
    }
    
    #bio h1 {
        font: 18px/16px Arial, Tahoma;
        color: #c00015;
        text-align: center;
        float: right;
        width: 280px;
    }
    
    #bio h2 {
        font: 14px/16px Arial, Tahoma;
        color: #c00015;
        text-align: center;
        float: right;
        width: 280px;
    }
    
    #ep-sponsor {
        text-align: center;
        align: center;
    }
    
    #content {
        width: 884px;
        align: justify;
        font: 12px/14px Arial, Tahoma;
    }
    
    #content p, #bio p {
        margin-top: 10px;
    }
    
    #content h1 {
        font: 18px/16px Arial, Tahoma;
        color: #c00015;
    }
    Thanks for all your help! It will be great to be able to finish this project, but even better to get some help with this code because my CSS just isn't doing it for me. :P

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Ahiko,
    The logo messes up with the alignment (possibly because of z-index)
    Not sure what the issue is here. It looks good to me in IE and FF both.

    #recent-news div alignment is off (from display:inline?)
    Not sure I understand the issue here either...

    Code:
    First <hr /> line disappears on Firefox
    No it's there, just not where you're looking for it. Without clearing the floats in #featured, that hr ends up near the top of #featured-3.

    Make your CSS look like this -
    Code:
    #featured, #recent {
        margin: 35px 35px 0;
        overflow: auto;
        width: 884px;
    }
    See this explanation of how overflow: auto; clears your floats.

    I had to force the alignment from OUR SPONSORS and down with a blank ul; it shows up caught behind the logo
    I think this may help -
    Code:
    #footer, #sponsors {
        clear: both;
        display: block;
        width: 960px;
    overflow: auto; /*floats need cleared here too*/
    }
    Copyright doesn't span 100%; when setting a width to the div, the Copyright info disappears
    If you use clear: both; again, you don't need the positioning. You do need to move .copyright out of #footer-links if you don't want it to have the #86000a background

    Try this -
    Code:
      
    div.copyright {
        font: 11px/18px Arial, Tahoma;
        color: #a0a0a0;
    clear: both;
    /*
    position: relative;
    top: 235px;
    left: -730px;
    */
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Ahiko (12-06-2011)

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Awesome!! Thank you so much, Excavator! I will definitely try these fixes when I get some free time in between all of my projects.

    I never understood the concept of clearing floats, so I will have to look into that.

    I'll let you know how it goes!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •