18 Replies Latest reply: May 9, 2012 1:12 PM by BcSurvivor08 RSS

    Container border??

    BcSurvivor08 Community Member

      Ugh!  This is sooooo frustrating!  I want a border around the container of my webpage.  I code it in the css and it looks right in DV but in LV the border is only around the header.

       

      Here is the css code I used:

       

      .container {

      width: 800px;

      margin: 0 auto;

      padding: 0;

      color: #000;

      border-color: #fe4110;

      border-width: 2px;

      border-style: ridge;

       

      }

       

      .header {

      margin: 0 auto;

      background: url("images/header1.gif");

      width: 800px;

      height: 119px;

       

      }

       

      Here is screen shot of design view:

       

      dvborder.png

       

      and here is screen shot of live view:

       

      lvborder.png

       

      Live view is how it displays in the browser too.

       

      I want it to look like it does in design view.  Please help..... (why cant anything be simple )

        • 1. Re: Container border??
          Ben M MVP

          Can we see the code?  I'm thinking something is awry.  You may want to run your page through the validator as well: http://validator.w3.org/

          • 2. Re: Container border??
            BcSurvivor08 Community Member

            I've changed the page and decided not to put the border anymore.  HOWEVER, I've tried it with another site earlier and it did the same thing, sooo when I work on the other site in a day or two, I'll post both the css and the page html.

             

            But now I have another problem......  Please view this page: http://www.healthquestpt.com/holbrook/services.html and help me fix the content window background color doesnt stretch far enough down.

             

            the css file is here: http://www.healthquestpt.com/holbrook/styles.css

             

            Thanks for your help!!!

            • 3. Re: Container border??
              martcol Community Member

              Does it help if you put

               

              overflow: hidden:

               

              On the container?

               

              I can't test it myself at the moment butvthatbmight be worth a go.  It looks like a float containment thing.

               

              Martin

              • 4. Re: Container border??
                sudarshan.t Community Member

                Line 35 and Line 45 of your services.html file, you have 2 usages of <div class="content"> Is there a reason you've done this? Can you just remove the Div open tag on Line 45 and see if it works?

                • 5. Re: Container border??
                  BcSurvivor08 Community Member

                  Martcol, I didnt try the "overflow:hidden" but that is because I did Sudarshan's suggestion first and it worked.  But I will remember your suggestion incase something changes as I continue to build the page.

                   

                  Thanks Sudarshan, removing the Div on line 45 seemed to do the trick.

                  • 6. Re: Container border??
                    sudarshan.t Community Member

                    You're welcome!

                    • 7. Re: Container border??
                      BcSurvivor08 Community Member

                      Ok, I'm now working on the site I want the border.  I've finally got it to show except for the bottom right corner.....

                       

                      Here is the link to the page:

                      http://www.healthquestpt.com/garegion2/

                       

                      and here is the corresponding css:

                       

                      .content {

                      background: #fff;
                      border-left: 5px #0104cb solid;
                      border-right: 5px #0104cb solid;
                      overflow: hidden;
                      }

                       

                      #footer

                      {

                      float: left;

                      width: 100%;

                      background-color: #ff0000;

                      text-align: center;

                      border-left: 5px #0104cb solid;

                      border-right: 5px #0104cb solid;

                      border-bottom: 5px #0104cb solid;

                      overflow: hidden;

                      }

                       

                      Thanks for your help!!

                      • 8. Re: Container border??
                        John Waller MVP

                        The border is working in all corners but the bottom RHS is not visible because of a mismatch between the width of the container div and the footer div.

                         

                        .container {

                        width: 949px;

                         

                        and

                         

                        #footer

                        {

                        float: left;

                        width: 100%;

                         

                        Change the footer width to the container width less a 5px border on both sides (=949-5-5=939px)

                         

                        #footer

                        {

                        float: left;

                        width: 939px;

                        • 9. Re: Container border??
                          BcSurvivor08 Community Member

                          THANK YOU!!!!  That worked beautifully!! 

                           

                          Would you mind taking another look and and help me get the red on the side navigation bar to extend the full length of the page?  It is from the template and each page will vary in height.  I hope theres a way to do this so that it auto-adjusts to each page.

                              

                           

                          http://www.healthquestpt.com/garegion2/

                           

                          Here is the corresponding css:

                           

                          .col1

                          {

                          float: left;

                          background-color: #ff0000;

                          width: 130px;

                          padding-top: 50px;

                          }

                           

                          .sidenav li
                          {
                          list-style: none;
                          margin-top: 15px;
                          }

                          .sidenav li a
                          {
                          text-decoration: underline;
                          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                          font-size: 15px;
                          color: #000;
                          padding-left: 20px;
                          }

                          .sidenav li a:hover
                          {
                          color: #f8db03;

                          }

                           

                           

                          Thanks again for your help!!!

                          • 10. Re: Container border??
                            martcol Community Member

                            Take a look here:

                             

                            martcol.co.uk/test/soldiers.html

                             

                            It's not perfect by any means but I think it will get you closer to what you want than what you have.

                             

                            Achieving height in an element is best done with content.  The way your page was laid out before, wouldn't get it there.  An option to consider, and it wouldn't involve such a radical change to your page structure is to Google "Faux Columns."  This technique adds a background image with the colours of the columns, to a container element and it the repeats down the page.  That will give the impression of same height columns.

                             

                            The way i have done it is to put the content in the col1 container and float the content div right and the navigation ul is floated left.

                             

                            It's a bit quick and dirty because I am doing this between breakfast and going to work (I'm late already)!

                             

                            You can ignore it completely of course, but I hope it helps a bit.

                             

                            Martin

                            • 11. Re: Container border??
                              BcSurvivor08 Community Member

                              Thank you Martin.  I will play around with what you did and see what happens. 

                              • 12. Re: Container border??
                                BcSurvivor08 Community Member

                                Im having no luck.  Why does css have a "background-repeat y" if it isnt going to repeat on the y-axis?  I mean if its useless then why is it in all the css books and in the code?????  Is it so x-axis doesnt feel lonely?  I dont understand why one can have width 100% but not height 100%  I suppose I will create a seperate gif for each page to match the length.  Whoever codes for browsers needs to think outside the width box.....

                                • 13. Re: Container border??
                                  John Waller MVP

                                  Got a link showing us where you're stuck?

                                   

                                  How did you go with the working example provided by Martin?

                                  • 14. Re: Container border??
                                    martcol Community Member

                                    http://www.w3schools.com/cssref/pr_background-repeat.asp

                                     

                                    background-repeat:repeat-y;

                                     

                                    As John says, it would be easier to see a link but are you trying for the  faux column thing?  If so, the background image goes on the containing element not the element itself.

                                     

                                    Martin

                                    • 15. Re: Container border??
                                      BcSurvivor08 Community Member

                                      I tried understanding Martins suggetions but I couldnt get grasp the float rights float lefts..... Im self-taught and just now learning css......

                                       

                                      I spent hours on google and trying diff "ways" (every website said something diff) to do faux columns, liquid faux, etc. and I had no success.

                                       

                                      What I did do is use "min-height" and am assigning a new css for each page according to its height.  This seems to work in all browsers except this one "http://www.healthquestpt.com/garegion2/info.html  IE displays it right but the others show a small gap.....

                                       

                                      Here is link to my css file: http://www.healthquestpt.com/garegion2/scripts/styles.css

                                       

                                      Thanks for your help!!  I truly appreciate it!

                                      • 16. Re: Container border??
                                        martcol Community Member

                                        Faux columns are not too difficult.

                                         

                                        Here's a useful, short explanation: http://www.alistapart.com/articles/fauxcolumns/

                                         

                                        I think it is a technique that evolved partly, because of the difficulty achieving height in some elements in a web page.  The best way is to not set a height with CSS but to let the content achieve it for you.  I think that you are already starting to see a problem with setting the height in an element because every page is different and then you need to factor in browser variables.  What happens if the user increases or decreases the text size?

                                         

                                        The option I suggested was very rushed but I think that it was a bit like this:

                                         

                                        CSSHeight.jpg

                                        If the sidebar div has a background of red, and the content div had a different color background and the <ul> was transparent it would appear to have two equal height columns.  The reality is that teh content is giving one of the child elements height which is by default, giving its container height which has a different color background.  In addition to that the two child elements are floated and given a width which makes them sit side by side.  It was just an example put together quickly to make a point.

                                         

                                        Martin

                                        • 17. Re: Container border??
                                          Nancy O. MVP
                                          What I did do is use "min-height" and am assigning a new css for each page according to its height.

                                          That's not a solution.  Page height can vary quite a bit depending on browser settings.

                                           

                                          All you need to do is make your #outer div red and your #middle div white. 

                                          The #left-column & #footer will naturally assume #outer div's background-color.

                                          EXAMPLE: http://alt-web.com/TEMPLATES/C-Page.html

                                           

                                          Equal Height CSS Columns ~ See Option #2 and Option #5

                                          http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml

                                           

                                           

                                          Nancy O.

                                          Alt-Web Design & Publishing

                                          Web | Graphics | Print | Media  Specialists 

                                          http://alt-web.com/

                                          • 18. Re: Container border??
                                            BcSurvivor08 Community Member

                                            Here is how far I've gotten:  http://www.healthquestpt.com/garegion2/index.html  I used the source code from the page Martin uploaded on his server for me. 

                                             

                                            Nancy, Is this what your talking about or is your way different?

                                             

                                            My css file is here: http://www.healthquestpt.com/garegion2/scripts/styles.css