4 Replies Latest reply on Mar 9, 2010 12:04 AM by osgood_

    Five and a half questions ?????  !

    MichaelCo Level 1

      The layout of my site is as below although the colours will be different

      Everything is in a wrapper div 960px wide and no height

      top div I called header div is 960px wide and 134px high (to suit logo image)

      below this a div for navigation - probably project seven - 960px wide and 30px high

      the green area is a class div called "bodyleft"

      the black area is a class div called "bodyright"

       

      Question 1    Should bodyleft and bodyright be in a div possibly called mainbody?

      Question 2     Do photographs have to go in a div or are they better outwith a  div? - I will be linking them to bigger image. (Is putting a table in a div looking for trouble or is it fairly logical?)  - that was the half question!!

      Question 3    I want a blue border to go down both sides but it is stopping at the navigation bar   -  as you can see from picture. How do I get border to go to bottom of page?

      Question 4    Would I be better giving "bodyleft" and "bodyright" a height to make them line up at bottom?

      Question 5    Should divs "bodyleft" and "bodyright" be Div ID as opposed to Div class?


          

       

      site_layout.jpg

       

      As usual,

      Any help will be greatly appreciated.

      Michael

        • 1. Re: Five and a half questions ?????  !
          osgood_ Level 8

          MichaelCo wrote:

           

          The layout of my site is as below although the colours will be different

          Everything is in a wrapper div 960px wide and no height

          top div I called header div is 960px wide and 134px high (to suit logo image)

          below this a div for navigation - probably project seven - 960px wide and 30px high

          the green area is a class div called "bodyleft"

          the black area is a class div called "bodyright"

           

          Question 1    Should bodyleft and bodyright be in a div possibly called mainbody?

          Not necessarily. You can always add another <div> around the two at a later stage if you need something like equal height columns where you would use a repeating background image in the parent <div> for instance.

          Question 2     Do photographs have to go in a div or are they better outwith a  div? - I will be linking them to bigger image. (Is putting a table in a div looking for trouble or is it fairly logical?)  - that was the half question!!

          Photographs don't need to go in a <div>. The objective is to produce the least amount of code possible to make a site work. Its common for new users to assume everything MUST go in a <div> or its own <div>. This is just as bad as using a comlpex table structure for the design.  

          You can put a table in a <div> if required, probably as a last resort though, or when its quicker to lay something out using a grid system.

          Question 3    I want a blue border to go down both sides but it is stopping at the navigation bar   -  as you can see from picture. How do I get border to go to bottom of page?


          Add overflow: hidden; to your wrapper css (I'm assuming all the other <divs> are inside the 'wrapper' <div>. The bodyleft and bodyright <divs> are floated to allow them to sit side-by-side and as a concequence you MUST clear the floats in order for other elements on the page to assume their correct positioning.

          Question 4    Would I be better giving "bodyleft" and "bodyright" a height to make them line up at bottom?

          Absolutely not! See my answer to question 1 which refers to using a background image to 'fake' equal column heights.
          Now whether you wrap the bodyleft and bodyright in their own <div> and apply the babckground image to that or apply the background image directly to the wrapper <div> is your decision. If the wrapper already has a background image applied to it then you need to create a new free <div> to apply the background image to. Google for 'faux columns'.

          You should never allocate a height to a <div> UNLESS you know what height it will be and the only two instances when that will occur is if you only have an image or images in the <div> or when you set the <div> at a specific height to evoke a scrolling text area.

          Question 5    Should divs "bodyleft" and "bodyright" be Div ID as opposed to Div class?

          ids are more powerful than classes but can only be used once in the pages code whereas classes can be used multiple times on each page.

          As bodyleft and bodyright will only be used once on your page it is much more effective and good practice to use ids rather than classes.


              

           

          site_layout.jpg

           

          As usual,

          Any help will be greatly appreciated.

          Michael

          • 2. Re: Five and a half questions ?????  !
            MichaelCo Level 1

            Osgood,

             

            Thank you very much for taking the time and trouble to reply. I have been busy with other things so I have not  yet tried out your ideas but at a glance, I think I should be able to work things out.

             

            In the meantime, thanks again for making life easier for me.

             

            kind regards

             

            Michael

            • 3. Re: Five and a half questions ?????  !
              MichaelCo Level 1

              IN relation to Question 3 your answer was as follows :-
              Add overflow: hidden; to your wrapper css (I'm assuming all the other  <divs> are inside the 'wrapper' <div>. The bodyleft and  bodyright <divs> are floated to allow them to sit side-by-side and  as a concequence you MUST clear the floats in order for other elements  on the page to assume their correct positioning

               

              .

              How do I clear the floats - I have searched for an answer but I am getting confused by differing opinions.

              • 4. Re: Five and a half questions ?????  !
                osgood_ Level 8

                MichaelCo wrote:

                 

                How do I clear the floats - I have searched for an answer but I am getting confused by differing opinions.

                 

                Well it depends really on how your code is wriiten.

                 

                My preffered way at the moment to clear floated elements which are inside a parent container is to add overflow: hidden; to the parent containers css attributes.

                 

                If you're experiencing difficulties it's best to upload your page and provide a link so someone can take a look at what it is you are trying to achieve. An image doesn't really provide enough information in cases where the suggested solution is not working.

                 

                Alternatively paste the html code and css in the forum.