SitePoint Sponsor

User Tag List

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

    Wrappers and containers

    I am ready for help on the next step of my site. Wrappers and containers are confusing to me. I need to have the site centered and when the browser is minimized all the background images still show properly when I use the bottom scroll bar. I know this is achieved by wrappers and containers but I am not sure what to put in these or if both are required. My current site is www.foxdenwebsolutions.com which is done in Flash so I need the content to look the same on all pages but the portfolio page...I am completely changing that one. Any help with these elements would be greatly appreciated.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    All you need to center a block level element horizontally is a width and left and right margins of auto.
    Code:
    #wrapper {
      width: 780px;
      margin: 0 auto;
    }
    
    <body>
    <div id="wrapper">
    </div>
    </body>
    Is that what you were after?

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, thanks mark. So I don't need to use containers as well? If someone could explain what a wrapper and a container are, maybe I will understand their use better.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Wrapper and container are interchangeable words. It just is a container/wrapper of something . Normally columns (that's where the word is used most but it c an be used anywhere)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As Ryan said wrapper, container , outer etc are just words and nothing to do with css/html It's just a common way of describing "an element" (usually a div) that will contain many elements.

    Most people use the above words to mean a page-wrapper that holds all the content on the page and therefore centring all the page content by centring that one element instead of centring every element on the page in some way.

    Divs are used to create divisions of content and to organise,structure and control your page more easily. Many times you may have multiple elements in the same context (such as floated column content) and then you wrap the content in a div to control all the children more easily.

    When someone says "add a wrapper" then that just mean contain those elements within a parent (usually a div) and it will make things easier to control and to address.

    For the future html5 does introduce some new elements for grouping content such as "section". There's a short article here about naming conventions that you might find useful.

  6. #6
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul for your explanation. It is much appreciated.

    I have added a page container so everything is centered now. I have changed the header to include all elements in it (i.e. logo, and text image as well as the background image). I got the footer text the way I want it. My husband (software and web QA guy) wanted the background of the page not to contain the textured background as he said it was distracting so I just have the background texture in the container and the background page colored to match but not be distracting.

    Now I am working on adding content. If you go to my current website www.foxdenwebsolutions.com (Flash site) I have text in the upper left content area, then next to it have an image. Below the upper left text is another image and next to that is more text. I want to keep this layout in CSS and HTML. I figured I would have to use containers for this as well. Am I correct or is there another way to get the layout I want?

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Something like this will work for aligning media to one side and content on the other:
    Code css:
    .media {
      clear: both;
      padding-right: 200px;
    }
    .media img {
      float: right;
      margin-right: -200px
    }
    .media-alt {
      clear: both;
      padding-left: 200px;
    }
    .media-alt img {
      float: left;
      margin-left: -200px
    }
    Code html4strict:
    <div class="media">
      <img src="#">
      <h2>Why?</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="media-alt">
      <img src="#">
      <h2>Mission</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    You give the wrapper padding to the side to prevent the text from going over and then drag the image out to the side with a negative margin. The clear property makes sure that each media block is below the floated images above.

    This is just one way to achieve it, there are many.
    Another more popular way to do it would be to use margin on the text because the float will sit on top of the margin:
    Code:
    .media, .media-alt {
      clear: both;
    }
    .media img {
      float: right;
    }
    .media h2,.media p { margin-right: 200px }
    .media-alt img {
      float: left;
    }
    .media-alt h2,.media-alt p { margin-left: 200px }
    Or if you want to be able to use other elements in your content it might be easiest just to add another div for the content:
    Code css:
    .media, .media-alt {
      clear: both;
    }
    .media img {
      float: right;
    }
    .media .side { margin-right: 200px }
    .media-alt img {
      float: left;
    }
    .media-alt .side { margin-left: 200px }
    Code html4strict:
    <div class="media">
      <img src="#">
      <div class="side">
        <h2>Why?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div class="media-alt">
      <img src="#">
      <div class="side">
        <h2>Mission</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    Hope that gives you a few ideas.

  8. #8
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tried to work with Mark's examples but could not get things to work the way I wanted. I had to add blank lines to get the bottom text and image to not interfere with the footer text. I have attached a mockup showing 4 equal boxes within the middle div. They need to expand or contract depending on the amount of text or size of image and not interfere with the footer. I tried setting up 4 separate containers but it didn't work right...I probably didn't do it right. Is there any way to do what I am trying to do? Also this format needs to change for every page since I have different amounts of text and images on them. Maybe setting up the content area as 2 column?
    Attached Images Attached Images

  9. #9
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think I did it. Go to www.foxdenwebsolutions.com/CSS_site/index.html. I set up 2 columns and have the upper left text and lower left image in left column and upper right image and lower right text in right column. Now I have to test if I can have more text or larger images and it will still work.

    Just tested in Firefox and it doesn't work. IE8 handles it fine but not Firefox...ok need advice.

  10. #10
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    IE 7 also renders it correctly but Safari does not. I don't have margins or padding set...not sure that will help.

  11. #11
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just checked my how my code is rendering in browsers through DW CS4 and it says I have an expanding box problem. I added overflow:hidden but that didn't work either. However, it did clear the error!

  12. #12
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I added overflow:hidden to the incorrect element. I originally put it in the left_content and right_content elements and it didn't work. I added it to the content_mdl and now it works. YAY!!!

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Sorry we weren't able to assist you (your thread was the last one on my tab lol) but I'm glad you found a solution for yourself .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan...sometimes just posting here helps me figure things out on my own. I hope it also helps others with similar problems.

  15. #15
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just wanted to let everyone know that my new site is finished and I wanted to thank all that helped me with all the little details that I was having problems with. You can view the site at www.foxdenwebsolutions.com. Again thanks to everyone that helped me out!

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you want you can go to the reviews section of htis forum to get it reviewed by professionals
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •