3 Replies Latest reply on Mar 13, 2012 12:35 PM by imacken

    Defining content with different size boxes?

    imacken Level 1

      Sorry about the very ignorant basic question, but can someone point me in the direction of what area I should look at to design the content of a web page with different size boxes for graphics, text, etc.

      I have the header, sidebar and footer OK as a template, and did have main content with text and floating images.  However, I would like to redo the site with a more boxy approach. I have attached a jpg to show roughly what I mean.

      Be gentle!

      Thanks a lot.wd.jpg

        • 1. Re: Defining content with different size boxes?
          martcol Level 4



          You question has made me think a bit so I'll Kick off.


          First off, your image does not look as complex as it might seem.  You could just have a container div to wrap everything in then your header.  The central section, content and sidebar can be achieved using float and then your footer at the bottom.


          Someone recently asked a similar question and I did a mock-up page on my own test site here: martcol.co.uk/test/complexLayout.html


          It isn't so different to yours so, you could copy the code and adapt it a little to suit your own needs.  Here's the link to that thread: http://forums.adobe.com/message/4246315#4246315.  You could also look for a three column CSS layout template to adapt and Google will help you find one.  I think Nancy O, who responded in that thread I linked to, has some on her web site or may have linked to one.


          However, I would like to redo the site with a more boxy approach. I have attached a jpg to show roughly what I mean.

          Be gentle!


          I'm interested in your "boxy approach" idea which on one level, is fine because CSS introduces us to the Box Model.  It would be worth you checking that out with Google.  There's plenty written about it and it is an important consideration when you are doing this kind of positioning.  My only word of caution would be to exercise a little caution about how rigid your design might be.  The internet is a strange creature.  It mimics print in some ways so for instance with have expressions like header and footer and we also have ideas like designing beneath the fold.  But it's not like print in that it is very flexible.  Consider that users have control over CSS and maybe text size; they have the cheek to use different screen sizes and can also resize their browsers and now they even use hand-held devices to view our  creations!  Keeping a degree of flexibility in your design is a good thing.


          Having said that, your design looks good; well organised but it will depend on the content.  What will happen if your content changes between pages?  Well of course, I know it will change, that's why you want more than one page!  But what if there is more text in one page than another? So the next thing to suggest when it comes to a "boxy" approach is that the another way to maintain a level of flexibility of a site is to allow height to be determined by content.  That way, if you add more content or if a user changes the text size in their browser, the element can adapt vertically to accommodate it.


          Hope that helps.  Best thing might be to start somewhere and as you have more questions, come back and post them.



          • 2. Re: Defining content with different size boxes?
            Nancy OShea Adobe Community Professional & MVP

            I really like Not Just a Grid CSS framework for rapidly prototyping layouts like this.  

            It's free and it's very logical to work with.




            Nancy O.

            Alt-Web Design & Publishing

            Web | Graphics | Print | Media  Specialists 




            • 3. Re: Defining content with different size boxes?
              imacken Level 1

              Firstly, let me thank you both for replying. I will look at your suggestions and see where they take me.

              The problem is that I am fairly limited in my coding ability.  For example, I was even going to use Tables because I wasn't confident about CSS to do what I wanted!

              Essentially, the boxes in the 'content' above are mainly hyperlinked images or a mix of text and image.  I have various pages, but essentially only the main (biggest box in Content in the graphic above) box needs to change each time, although I will be updating the template boxes regularly.  It is only the Content bit that will change at all, the rest is all in a template of header, footer and sidebar.

              I had a quick look at 'Not Just a Grid' and although sites there like The Guardian are the sort of thing I want to mimic (in a smaller more basic way) I'm not confident of getting the code into my page.

              Still, I'll have a look later and see how I go.