11 Replies Latest reply on Dec 21, 2014 5:51 PM by davidhelp

    How to add vertical lines and position them

    davidhelp Level 1

      How to add vertical lines and position them like those seen near the bottom at this site.

      http://www.threebirdnest.com/pages/about-us

      This will divide 3 columns.

       

      David

        • 1. Re: How to add vertical lines and position them
          osgood_ Level 8

          You add a border to the container using css

           

          <div id="blah">Some text goes here</div>

           

          #blah {

          border-left: 1px solid #ccc;

          border-right: 1px solid #ccc

          }

          1 person found this helpful
          • 2. Re: How to add vertical lines and position them
            Nancy OShea Adobe Community Professional & MVP

            I would create a re-usable class instead of a unique ID.  IDs cannot be used more than one time per page.

             

            Float your "blah" classes and give them a width and right border.   Then add a pseudo-class to remove border from the last one.

             

            CSS:

             

            .blah {

              -moz-box-sizing: border-box;

               -webkit-box-sizing: border-box;

               box-sizing: border-box;

               width: 33.33%;  /**3 across**/

               float: left;

               border-right: 1px solid #CCC;

            }

             

            .blah:last-child {border:none}

             

            ===============

             

            HTML:

             

            <footer>

                 <div class="blah">Left column</div>

                 <div class="blah">Middle column</div>

                 <div class="blah">Right column</div>

            </footer>

             

             

             

            Nancy O.

            1 person found this helpful
            • 3. Re: How to add vertical lines and position them
              osgood_ Level 8

              Nancy O. wrote:

               

              I would create a re-usable class instead of a unique ID.  IDs cannot be used more than one time per page.

               

              Float your "blah" classes and give them a width and right border.   Then add a pseudo-class to remove border from the last one.

               

              CSS:

               

              .blah {

                -moz-box-sizing: border-box;

                 -webkit-box-sizing: border-box;

                 box-sizing: border-box;

                 width: 33.33%;  /**3 across**/

                 float: left;

                 border-right: 1px solid #CCC;

              }

               

              .blah:last-child {border:none}

               

              ===============

               

              HTML:

               

              <footer>

                   <div class="blah">Left column</div>

                   <div class="blah">Middle column</div>

                   <div class="blah">Right column</div>

              </footer>

               

               

               

              Nancy O.

               

              Good point BUT the example shows a border added to only the center column NOT the 1st or 3rd columns, in which case its more efficient to just add a left and right border to the center containers css.

               

              I guess its the way you set things up. The developer in this instance has used the 'five column' class duplicate times so they cannot add a left and right border to it as it would effect other containers.

               

              If you have a 'unique' id then you could simply do without adding an additional class to the html and css and just apply the left and right borders to the 'unique' id.

               

              You need to take into consideration your own html and css set up BUT adding vertical borders is executed with css as described in both Nancy's and my posts.

              • 4. Re: How to add vertical lines and position them
                Herbert2001 Level 4

                Both methods by Osgood and Nancy will work, although I think the better approach would be to separate the border into its own class, and then apply it to any column that requires a gutter divider.

                 

                .brdr-r {

                border-right: 1px solid #ccc;

                }

                 

                or even

                 

                .brdrs-sides {

                border-left: 1px solid #ccc;

                border-right: 1px solid #ccc;

                }

                 

                And Nancy is correct when she adds in the box-sizing (which is best applied to all elements in your base css) - Osgood's example will break column setups in percentages or precise pixel/em widths.

                 

                Adding a unique ID merely to accommodate borders on the left and right for a single column instance is just asking for code bloat. It is not efficient at all.

                 

                There will already be a class html attribute with a column class added anyway that will happily accept a common border class, so why would we clog up our html by inserting another unnecessary ID html attribute? Makes no sense when seen from the point of view of clean and efficient html/css coding. (In my opinion.)

                 

                ID selectors are best avoided,if possible, for many well-known and published reasons,

                • 5. Re: How to add vertical lines and position them
                  davidhelp Level 1

                  The link in my post to the website that had the border showed 3 floating boxes as near as I can tell so here is what I came up with and I added the borders as suggested here. 3 floating boxes contained in a wrapper div.

                   

                  2nd question I have is how to place an image in place of the borders?

                   

                  <!DOCTYPE html>

                  <html>

                  <head>

                  <meta charset="UTF-8">

                  <title>Border 1 test</title>

                  <style type="text/css">

                   

                  body {

                      background-color: #FFFFEA;

                      margin: 0px;

                      padding: 0px;

                  }

                   

                  #wrapper {

                      font-family: Verdana, Arial, Helvetica, sans-serif;

                      border: 1px dotted #CCC;

                      width: 540px; /*centered*/

                      overflow: hidden; /*float containment*/

                      margin-top: 100px;

                      margin-right: auto;

                      margin-bottom: 15px;

                      margin-left: auto;

                  }

                   

                  p {

                      font-size: 100%;

                      font-family: "Trebuchet MS", Helvetica, sans-serif, Verdana;

                      line-height: 1.2em;

                      padding: 0px;

                      margin-top: 5px;

                      margin-right: 0px;

                      margin-bottom: 0px;

                      margin-left: 0px;

                  }

                   

                  h2 {

                      display: block;

                      margin-top: 0px;

                      margin-right: 0px;

                      margin-bottom: 0px;

                      margin-left: 0px;

                      padding-top: 5px;

                      padding-right: 0px;

                      padding-bottom: 0px;

                      font-family: Georgia, "Times New Roman", Times, serif;

                      color: #F00;

                  }

                   

                  #Box1 {

                      float: left;

                      margin-left: 6%;

                      width: 150px;

                      min-height: 100px;

                      /*to reduce float drop issues in IE*/

                      word-wrap: break-word;

                      background-color: #FFFFEA;

                      padding-top: 0px;

                      padding-right: 0px;

                      padding-bottom: 5px;

                      padding-left: 5px;

                      margin-top: 20px;

                      margin-right: 5px;

                      margin-bottom: 20px;

                      margin-left: 15px;

                      }

                   

                  #Box2 {

                      float: left;

                      width: 150px;

                      min-height: 100px;

                      /*to reduce float drop issues in IE*/

                      word-wrap: break-word;

                      background-color: #FFFFEA;

                      padding-top: 0px;

                      padding-right: 5px;

                      padding-bottom: 5px;

                      padding-left: 15px;

                      margin-top: 20px;

                      margin-right: 5px;

                      margin-bottom: 20px;

                      margin-left: 5px;

                      border-right-width: 2px;

                      border-left-width: 2px;

                      border-right-style: solid;

                      border-left-style: solid;

                      border-right-color: #F00;

                      border-left-color: #F00;

                  }

                   

                  #Box3 {

                      float: left;

                      width: 150px;

                      min-height: 100px;

                      /*to reduce float drop issues in IE*/

                      word-wrap: break-word;

                      background-color: #FFFFEA;

                      padding-top: 0px;

                      padding-right: 5px;

                      padding-bottom: 5px;

                      padding-left: 5px;

                      margin-top: 20px;

                      margin-right: 5px;

                      margin-bottom: 20px;

                      margin-left: 5px;

                  }

                   

                  <body>

                  </style>

                  </head>

                   

                  <div id="wrapper">

                   

                  <div id="Box1">

                  <h2>Box #1 </h2>

                  <p>Your text and or image goes here</p>

                  </div>

                  <!--end Box1 -->

                   

                  <div id="Box2">

                  <h2>Box #2</h2>

                  <p>Your text and or image goes here</p>

                  </div>

                  <!--end Box2 -->

                   

                  <div id="Box3">

                  <h2>Box #3</h2>

                  <p>Your text and or image goes here </p>

                  </div>

                  <!--end Box3 -->

                   

                  </div> <!--end wrapper -->

                   

                  </body>

                  </html>

                  • 6. Re: How to add vertical lines and position them
                    davidhelp Level 1

                    I think I would add 2 more divs between Box 1 & 2 and 2 & 3 then add whatever vertical border I want.

                    • 7. Re: How to add vertical lines and position them
                      osgood_ Level 8

                      Herbert2001 wrote:

                       

                      There will already be a class html attribute with a column class added anyway that will happily accept a common border class, so why would we clog up our html by inserting another unnecessary ID html attribute?

                       

                      Maybe not. I don't always use classes, it really depends what you are doing.

                       

                      If you have a set of boxes all which have little content in common then I would use an id.

                       

                      #box_1, #box_2, #box_3

                       

                      In that case why would we clog up our html/css by adding an uneseccary class just to add a border?

                       

                      <did id="box_1"></div>

                      <did id="box_2" class="border" ></div>

                      <did id="box_3"></div>

                       

                      On the other hand if you had a set of boxes where all the content styling was similar then that's the case to use a class

                       

                      <div class="box"></div>

                      <div class="box"></div>

                      <div class="box"><div>

                       

                      Then add another class to the center box for the vertical lines

                      <div class="box verticalLines"><div>

                       

                      BOTH solutions will work as efficiently in html and css as one another. Its a matter of opinion as to if one uses ids or classes. I find using both useful for different situations. Ther are no reasons to avoid ID selectors in my opinion - again as you say you are just reading published dribble written by people who write dribble.

                       

                      Personally I avoid html 5 tags for the same reason - they offer little to no value in my opnion and clog up the code with extra code, which is not needed. Most develpers are driven by a few evangilist developers who later are proven to be not as true to their preachings when something else comes along which doesnt conform to their beliefs - they quickly revise their preaching and preach something different. Use less code NO its ok to use more code is one particular point in question.

                      • 8. Re: How to add vertical lines and position them
                        osgood_ Level 8

                        davidhelp wrote:

                         

                        I think I would add 2 more divs between Box 1 & 2 and 2 & 3 then add whatever vertical border I want.

                         

                        Why would you want to add an image in the gutter between the columns?

                         

                        I'm not suggesting you do this now BUT once you get a good grasp of css you can streamline your css as below to combine the css attributes that are common to all the boxes - #Box1, #Box2, #Box3 - using a comma to form a  'combined selector'

                         

                        The below css selector *, as touched upon in Nancy/Herberts posts will save you massive amounts of time as it avoids the 'box-model' problem whereby padding and margin gets added to the containers overall width. Using it that will not happen anymore so you don't have as many mathematical equations to deal with.

                        * {

                        -moz-box-sizing: border-box;

                        -webkit-box-sizing: border-box;

                        box-sizing: border-box;

                        }

                         

                         

                         

                         

                         

                        <!DOCTYPE html>

                        <html>

                        <head>

                        <meta charset="UTF-8">

                        <title>Border 1 test</title>

                        <style type="text/css">

                        * {

                        -moz-box-sizing: border-box;

                        -webkit-box-sizing: border-box;

                        box-sizing: border-box;

                        }

                         

                        body {

                        background-color: #FFFFEA;

                        margin: 0px;

                        padding: 0px;

                        }

                        #wrapper {

                        font-family: Verdana, Arial, Helvetica, sans-serif;

                        border: 1px dotted #CCC;

                        width: 540px; /*centered*/

                        overflow: hidden; /*float containment*/

                        margin: 100px auto 15px auto;

                        }

                        p {

                        font-size: 100%;

                        font-family: "Trebuchet MS", Helvetica, sans-serif, Verdana;

                        line-height: 1.2em;

                        padding: 0px;

                        margin: 5px 0 0 0;

                        }

                        h2 {

                        margin: 0;

                        padding: 5px 0 00;

                        font-family: Georgia, "Times New Roman", Times, serif;

                        color: #F00;

                        }

                        #Box1, #Box2, #Box3 {

                        float: left;

                        width: 166px;

                        min-height: 100px;

                        background-color: #FFFFEA;

                        padding: 0 0 5px 5px;

                        margin: 20px 5px 20px 5px;

                        }

                        #Box1 {

                            margin-left: 15px;

                        }

                        #Box2 {

                        border-right: 2px solid #F00;

                        border-left: 2px solid #F00;

                        }

                         

                        </style>

                        </head>

                        <div id="wrapper">

                        <div id="Box1">

                        <h2>Box #1 </h2>

                        <p>Your text and or image goes here</p>

                        </div>

                        <!--end Box1 -->

                         

                        <div id="Box2">

                        <h2>Box #2</h2>

                        <p>Your text and or image goes here</p>

                        </div>

                        <!--end Box2 -->

                         

                        <div id="Box3">

                        <h2>Box #3</h2>

                        <p>Your text and or image goes here </p>

                        </div>

                        <!--end Box3 -->

                        </div> <!--end wrapper -->

                        </body>

                        </html>

                        • 9. Re: How to add vertical lines and position them
                          Nancy OShea Adobe Community Professional & MVP

                          LOL.  When you ask 3 web designers how to do something, you often get six different answers.  That's fairly typical.  Just use whichever methods work best for you and your project.  

                           

                           

                          Nancy O.

                          • 10. Re: How to add vertical lines and position them
                            osgood_ Level 8

                            Herbert2001 wrote:

                             

                            Osgood's example will break column setups in percentages or precise pixel/em widths.

                             

                            I only just read this bit. Of course it won't break the layout. It may do in your case because it sounds like you can't do some simple mathematics to take adding borders into account.

                             

                            Granted using box-sizing is very useful and the way to go but it never used to be before newer browsers supported it - how do you think adding borders were achieved then without breaking the layout?

                             

                            Plus if you want to get picky adding borders to individual containers may not produce the desired result because normally they don't contain the same height of content so you may find you get a 'staggered' effect. You could of course set min-height but thats a bit hit and miss or you could used display: table;

                             

                            You need to look at the simplest way to achieve the effect that you require and in the instance shown its setting left and right borders on the center column.

                            1 person found this helpful
                            • 11. Re: How to add vertical lines and position them
                              davidhelp Level 1

                              I decided on adding extra divs because I can maneuver the image around, up/down, left/right without affecting the other div's / box's so much. I can widen the wrapper div if need be. I used the box size width: 150px; min-height: 100px; only to hold open the box to make it easier to see the div's for this example I am working on.

                               

                              Thanks for the tips. The .blah:last-child {border:none} when I looked it up at WC3 http://www.w3schools.com/ now makes some sense to me  : )