SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need advice on layout

    The layout that my client wants has 2 columns currently. Text on the left and images on the right on the main content area. The images are to be aligned with each paragraph of text. Is it best to have 2 columns or keep it as one column and use CSS to move the images over to the right of the text? I think 2 columns would be best but I am open to suggestions. Thanks.

    layout13.fw.jpg

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd use a single column for it since the image complements the text (if I understood you correctly) and isn't an aside or otherwise disattached from the paragraphs. I'd use a float instead of marking up the text and image separately in two different divisions.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I also would be inclined to have one column and just float the images to the right, although there are a few things to consider, such as:

    - are the images aligned as you want in the image? I'd suggest having them all sitting level with the top of the paras beside them, or the floating idea will be trickier
    - those horizontal lines will prove to be problematic (as demonstrated in another thread here today).

    Based on those points, it might be better to divide the content into horizontal sections with text and image floated in different directions.

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can I set a width on the horizontal rule such as div class hr for the html and css would be hr width 610px. Would that work? I can try it and see but just checking first.

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I also have noticed that when I designed the site, the content section has a white border around the outside so instead of a small image for the background I now have 3. content_top, content_mdl, and content_btm to keep the effect. The content-mdl is not repeating on the y axis. I am sure I have all opening and closing divs correct. I will upload the code again so everyone can see what is going on.

  6. #6
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Never mind got it....had to add an overflow: hidden; on the content_mdl section.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Can I set a width on the horizontal rule such as div class hr for the html and css would be hr width 610px. Would that work? I can try it and see but just checking first.
    Yes, it should work, although I don't like using the hr for that—as it's really a semantic element rather than intended for styling a page. Much nicer to use CSS borders etc.

    As for the other issue, indeed, we need to see the live version.

  8. #8
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So instead of using hr how would I use the border? I would want it to be 610px wide. I don't think I have ever used that before.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The border will be as wide at the element it's applied to, so that's a case for wrapping the paragraphs in their own div, giving it a width and floating it left. E.g.

    Code:
    .text-wrapper {
      width: 610px;
      border-bottom: 2px solid #0000ff;
      float: left;
    }

  10. #10
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Googled it and added it.....looks good.

  11. #11
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am having a problem now with the images floating on the right. I would like them to be in line with each section but the middle image and bottom images are not cooperating. Please take a look at the code and see what I can fix in order to get them aligned with the sections. Thanks. http://foxdenwebsolutions.com/wingsofhope/index.html.

  12. #12
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is probably not the best way to do it, but I created 3 different rtFs. This seems to work for now unless someone has a better idea.

  13. #13
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't know if it is because I am tired and need to step away from this site, or I am just really confused. I am having trouble getting the footer content to look right. On the image from the beginning of this thread, the footer will have 3 left nav links, 4 center nav links, and 3 right nav links. There will be image links to the FB and Twitter pages. Below that will be the copyright info and below that the designed by info. I don't know if I set up too many classes but I am getting confused as to what controls what. I have uploaded the new code to my site. http://foxdenwebsolutions.com/wingsofhope/index.html. Please let me know what I have done incorrectly. Thanks.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    I am having a problem now with the images floating on the right.
    The <p> around the middle image has a big top margin on it.

    Quote Originally Posted by cgacfox View Post
    I am having trouble getting the footer content to look right.
    Start by florating those <ul>s at the top of the footer.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    A couple of revised images for you in case you are interested.
    Note that the heights are slightly different.

    nav2.pngfooter2.png

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I opted for floats, too, until you sought vertically centered content within two columns of one row (as shown in the client's picture). That requirement prompted, this all-too-conventional layout suggestion.

    Followed the same pattern in part of the footer with the expectation that it won't fly, as the footer content is not yet finalized. Simplicity, symmetry and centering are strong suits of table-cells. The low/no math feature is a plus.

    Colorful outlines on this page are for layout testing and structural clarity. All are commented in css; some are "commented out" at the moment.

    There is a styled <hr> tag on this page just to demonstrate that it can be done easily and occupies all of 4 characters on a line of html. The <div class=""></div> methods looks better IMHO, though. "Semantics" seems like an inappropriate argument in this case.

    This is a "boxy" approach that I often use because it is stable and incredibly easy to add another line of content (cut-n-paste-n-change-the-text-n-pic); no math.

    The original images plus the two that I added are required. All css is on the demo page. (It's been whacked, too.)
    Code:
    <!DOCTYPE html>
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?894803-Need-advice-on-layout
    Oct 12, 2012 22:29
    cgacfox
    -->
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <link href="css/wings2a-.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
        <style type="text/css">
    body {
        background-color:#d7aeff;
        color:#000;
        font:100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        margin:0;
        padding:0;
    }
    h1, h2, h3, h4, h5, h6, p {
        margin:0;
    }
    .outer {
        width:1143px;
        margin:0 auto;
    }
    header {
        background-color:#d7aeff;
        background-image:url(images/header.png);
        background-repeat:no-repeat;
        height:218px;
    }
    h1 {
        font-size:20px;
        text-indent:-9999px;
    }
    h2 {
        padding:12px 0px 0px 60px;
    }
    
    .nav_container {
        background-image:url(images/nav2.png);
        background-repeat:no-repeat;
        height:91px;
        overflow:hidden;
    }
    .nav_container ul {
        padding:12px 0px 0px 30px;
        margin:0px;
    }
    .nav_container li {
        display:inline;
        font-size:24px;
        font-family:Calibri, arial, helvetica;
        text-align:center;
        padding:0px;
        margin:0px;
    }
    .nav_container a {
        color:#fff;
        text-decoration:none;
        float:left;
        padding:0px 25px 0px 25px;
    }
    .nav_container a:hover {
        color:#d7aeff;
    }
    
    .content_container {
        background-image:url(images/content_mdl.png);
        background-repeat:repeat-y;
    }
    .content_container .row {
        outline:1px solid magenta;        /* LAYOUT TESTING */
        display:table;
        margin-left:60px;
        margin-right:50px;
    }
    .content_container .row div {         /* div could be classed as "col1" */
        outline:1px solid magenta;        /* LAYOUT TESTING */
        display:table-cell;
        text-align:left;
        vertical-align:middle;
        padding-right:50px;
    }
    .content_container .row div + div {   /* div could be classed as "col2" */
        text-align:center;
        padding-right:0px;
    }
    img {
        display:block;
    }
    
    hr {               /* not used.  Included just to show that an hr tag can be styled */
        width:610px;
        margin:20px 0px 20px 50px;
    }
    .hline {
        border:1px solid #bbb;
        background-color:#000;
        width:610px;
        height:1px;
        margin-top:20px;
        margin-bottom:20px;
        margin-left:50px;
    }
    .donate_link {
        background-image:url(images/donate_button.png);
        background-repeat:no-repeat;
        text-indent:-9999px;
        width:263px;
        height:86px;
        margin-left:175px;
        margin-top:40px;
        padding-bottom:35px;
    }
    p {
        margin:.75em 0px;
    }
    .behope {
        width:610px;
        padding:20px 0px 0px 60px;
    }
    
    .footer_container {
        background-image:url(images/footer2.png);
        background-repeat:no-repeat;
        height:402px;
        overflow-:hidden;
    }
    .footer_container .row {
    /*    outline:1px solid cyan;        /* LAYOUT TESTING */
        display:table;
        padding-top:30px;
        margin:0px auto;
    }
    .footer_container .row div {
        display:table-cell;
        text-align:center;
        vertical-align:middle;
    }
    .left,
    .middle,
    .right {
        outline:1px solid magenta;     /* LAYOUT TESTING */
        width:340px;
        list-style-type:none;
        display:table-cell;
        padding:0px;
        margin:0;
    }
    .left li,
    .middle li,
    .right li {
        color:#fff;
        font-weight:bold;
        font-size:16px;
        font-family:Calibri, Arial, Helvetica;
        text-align:center;
        text-transform:uppercase;
        text-decoration:none;
        padding:0px;
        margin:0;
    }
    .left li {
        text-align:left;
    }
    .right li {
        text-align:right;
    }
    .fb_link,
    .twitter_link  {
        outline:1px solid magenta;      /* LAYOUT TESTING */
        padding:10px 30px;
    }
    .copyright,
    .designBy {
    /*    outline:1px solid magenta;      /* LAYOUT TESTING */
        color:#6e6c64;
        text-align:center;
        margin:1em;
    }
    .copyright {
        padding-top:30px;
    }
    
    a img {
        border:none;
    }
    a:link {
        color:#42413c;
        color:#fff;
    }
    a:visited {
        color:#6e6c64;
    }
    a:hover,
    a:active,
    a:focus {
        text-decoration:none;
    }
        </style>
    </head>
    <body>
    <div class="outer">
        <header>
            <h1>Wings of Hope for Pancreatic Cancer Research</h1>
        </header>
        <div class="nav_container">
            <ul>
                <li class="active"><a href="#" class="current">Home</a></li>
                <li><a href="about.html">Mission</a></li>
                <li><a href="contact.html">Ongoing<br>Research</a></li>
                <li><a href="contact.html">Board of<br>Directors</a></li>
                <li><a href="contact.html">Events</a></li>
                <li><a href="contact.html">News</a></li>
                <li><a href="contact.html">Patient/Caregiver<br>Comments</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <div class="content_container">
            <h2>Welcome</h2>
            <section class="row">
                <div><p><em>WINGS OF HOPE for PANCREATIC CANCER RESEARCH </em> was formed in February 2012 by Maureen A. Shul after losing her mother and brother within months of one another to pancreatic cancer. The non-profit foundation is dedicated to raising awareness and funding for the ongoing research, clinical trials and treatment of pancreatic cancer patients at the Pancreatic Cancer Research Program at the University of Colorado Cancer Center (UCCC).</p></div>
                <div><p><img src="images/home_content_1.png" alt="doctors"></p></div>
            </section>
            <div class="hline"></div>
            <section class="row">
                <div>
                    <p class="sec_two">Pancreatic cancer is currently the fourth leading cause of cancer death in the United States. Of the most commonly diagnosed cancers, pancreatic cancer is the only one with a five-year relative survival rate in the single digits, at just 6  percent. This survival rate has not  changed in the last 40 years.</p>
                    <p class="sec_two">By 2020 it is anticipated pancreatic cancer will rise from the fourth to the second leading cause of cancer death in the U.S. (based on projected changes in U.S. population demographics and incidence and death rates).</p>
                    <p class="sec_two">With no early detection tools, effective treatments or adequate funding for research, the rapidly rising threat of pancreatic cancer urgently demands  an increase in awareness and research funding.</p>
                </div>
                <div><p><img src="images/home_content_2.png" alt="walkway"></p></div>
            </section>
            <div class="hline"></div>
            <section class="row">
                <div>
                    <p class="sec_three">Founded out of grief, driven by purpose and in pursuit of making a difference, WINGS OF HOPE for PANCREATIC CANCER RESEARCH is dedicated to<br>
                       &nbsp; - Accelerating the research<br>
                       &nbsp; - Providing the most advanced treatments<br>
                       &nbsp; - Finding the cure
                    </p>
                </div>
                <div><p><img src="images/home_content_3.png" alt="Shul Family"></p></div>
            </section>
            <p class="behope"><strong>JOIN THE EFFORT…BE A PART OF THE POSSIBLE, BE THE HOPE.</strong></p>
            <div class="donate_link">Donate image goes here</div>
        </div> <!-- content_container -->
        <div class="footer_container">
            <div class="row">
                <ul class="left">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">Mission</a></li>
                    <li><a href="#">Ongoing Research</a></li>
                </ul>
                <ul class="middle">
                    <li><a href="#">Board of Directors</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Patient/Caregiver Comments</a></li>
                </ul>
                <ul class="right">
                    <li><a href="#">Sponsers</a></li>
                    <li><a href="#">Donate/Volunteer</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="row">
                <div class="fb_link"><img src="images/facebook_link.jpg"></div>
                <div class="twitter_link"><img src="images/twitter_link.jpg"></div>
            </div>
            <div class="copyright">Copyright &copy; 2012 Wings of Hope for Pancreatic Cancer Research</div>
            <div class="designBy"> Website Design By <a href="http://foxdenwebsolutions.com" target="_blank">Foxden Web Solutions</a> </div>
        </div> <!-- .footer_container -->
    </div> <!-- .outer -->
    </body>
    </html>

  17. #17
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks ronpat. I am checking your code against mine to see where I failed. I find it interesting that you used table elements in order to work the footer content. I will see if I can successfully integrate some of your code into mine. I do appreciate the help.

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Never say "failed". My suggestion is "different". Layout-wise, use the techniques that work best for you. There are a few "improvements" in this demo such as the assignment of the page background-images and the code in the lists; plus, the common features of the "rows" resulted in a single classname instead of three different classes in several places. A good bit of simplification. More was possible. Things to consider when writing a page.

  19. #19
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes I was wondering if I had way too many classes going. That was what was confusing me. You simplified it.

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    FYI: if you want to add space above the top row, you can add a little padding to the top of the content_container:
    Code:
    .content_container {
        padding-top:12px;    /* some value */
    }

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You mentioned a concern about an excessive number of classes in the html.

    Here's an easy way to reduce the number of tags with classes. Let's use the middle row for this example.

    Remove the class statement from the paragraphs and put it in their parent div.

    change from:
    Code:
    <section class="row">
        <div>
            <p class="sec_two">
            <p class="sec_two">
            <p class="sec_two">
    to:
    Code:
    <section class="row">
        <div class="sec_two">
            <p>
            <p>
            <p>
    Then make one small change in the css:

    from:
    Code:
    p.sec_two {
    to:
    Code:
    .sec_two  p {
    Now those styles are applied to all of the paragraphs in sec_two and your html is a little cleaner.

    You can apply this technique to the other rows, if desired.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Or even eliminate the inner div and just use

    Code:
    .row p { ... }

  23. #23
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Except that the sections are styled differently. :-)

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    Except that the sections are styled differently. :-)
    Sure, if the div is needed for extra styling, that's fine. I wasn't looking at the larger context, just the code you posted; but in the larger context I can see that the div has a purpose.

  25. #25
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you ronpat. That looks much better. Now so cluttered. I will go through the rest of the code to see what I can do to trim it down.


Bookmarks

Posting Permissions

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