Need advice on layout

**cgacfox** · Oct 12, 2012 20:29

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

**kohoutek** · Oct 12, 2012 20:39

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.

**ralph.m** · Oct 12, 2012 21:51

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.

**cgacfox** · Oct 12, 2012 22:05

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.

**cgacfox** · Oct 12, 2012 22:08

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.

**cgacfox** · Oct 12, 2012 22:18

Never mind got it....had to add an overflow: hidden; on the content_mdl section.

**ralph.m** · Oct 12, 2012 22:19

Originally Posted by cgacfox

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.

**cgacfox** · Oct 12, 2012 22:28

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.

**ralph.m** · Oct 12, 2012 22:34

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

**cgacfox** · Oct 12, 2012 22:37

Googled it and added it.....looks good.

**cgacfox** · Oct 13, 2012 12:55

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.

**cgacfox** · Oct 13, 2012 13:04

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.

**cgacfox** · Oct 13, 2012 16:31

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.

**ralph.m** · Oct 13, 2012 17:10

Originally Posted by cgacfox

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.

Originally Posted by cgacfox

I am having trouble getting the footer content to look right.

Start by florating those <ul>s at the top of the footer.

**ronpat** · Oct 14, 2012 06:32

A couple of revised images for you in case you are interested.
Note that the heights are slightly different.

nav2.png footer2.png

**ronpat** · Oct 14, 2012 11:23

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>

**cgacfox** · Oct 14, 2012 13:31

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.

**ronpat** · Oct 14, 2012 14:06

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.

**cgacfox** · Oct 14, 2012 14:11

Yes I was wondering if I had way too many classes going. That was what was confusing me. You simplified it.

**ronpat** · Oct 14, 2012 14:56

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 */
}

**ronpat** · Oct 14, 2012 18:44

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.

**ralph.m** · Oct 14, 2012 18:54

Or even eliminate the inner div and just use

Code:

.row p { ... }

**ronpat** · Oct 14, 2012 19:00

Except that the sections are styled differently. :-)

**ralph.m** · Oct 14, 2012 19:11

Originally Posted by ronpat

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.

**cgacfox** · Oct 15, 2012 17:24

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.

User Tag List

Thread: Need advice on layout

Thread Tools

Display

Need advice on layout

Bookmarks

Bookmarks

Posting Permissions