11 Replies Latest reply: May 12, 2012 7:45 PM by Nancy O. RSS

    aligning all boxes together on page on the same line

    alexisonsmith3

      Hello All,

       

      I am trying to align my logo, navigation text and photo in the same axis direction, so it all starts at the same place abot 15% from the left hand side. My text is below:

       

      @charset "utf-8";

      /* CSS Document */

       

       

      article, aside, figure, footer, header, nav, section {

          display: block;

      }

      body {

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

                color: #000;

                background-color: #FFFFFF;

                padding-left: 13%;

                width: 1000px;

                float: left;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: 0px;

      }

      #container {

                width: 100%;

                margin-top: 0;

                margin-right: 0;

                margin-bottom: 0;

                margin-left: 0;

      }

      #Logo {

                background-image: url(pictures/Logo_2.png);

                background-repeat: no-repeat;

                height: 80px;

                width: 100%;

                margin-left: 16px;

      }

      #Logo hgroup {

                position: absolute;

                top: -500px;

      }

      nav {

                padding-top: 100px;

      }

      ul {

          padding:0;

          margin:0;

      }

      nav ul {

          list-style: none;

          margin-bottom: 15px;

          font-weight: bold;

          font-size:20px;

      }

      nav ul li {

                float: left;

                -webkit-transition-duration:.1s;

                -webkit-transition-property:margin-top;

                -webkit-transition-timing-function:ease-in-out;

                -o-transition-duration:.1s;

                -o-transition-property:margin-top;

                -o-transition-timing-function:ease-in-out;

                -moz-transition-duration:.1s;

                -moz-transition-property:margin-top;

                -moz-transition-timing-function:ease-in-out;

                transition-duration:.1s;

                transition-property:margin-top;

                transition-timing-function:ease-in-out;

                color: #3719F8;

                background-color: #FFF;

                padding-right: 4px;

                margin-left: 16px;

      }

       

       

      nav ul a {

          display: block;

          width:140px;

          padding: 10px;

          text-align:center;

          text-decoration: none;

          color: #3719F8;

          border: 2px solid #3719F8;

          margin: 5px 0px;

                -moz-border-radius:6px;

                -webkit-border-radius:6px;

                border-radius:6px;

                -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

          text-shadow: rgba(0,0,0,0.8) 1px 1px 1px;

      }

      nav ul a:link, nav ul a:visited {

                background: rgba(255,255,255,0.2);

      }

      nav ul a:hover, nav ul a:active, nav ul a:focus {

                background-color: #0000FF;

                color: #FFFFFF;

      }

      #maincontent {

                margin-top: 40px;

                padding-top: 10px;

                padding-bottom: 10px;

                margin-left: 16px;

      }

      #vision {

                font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

                font-size:14px;

                font-weight:bold;

                line-height:17px;

                background:url(../images/lrg_hero.jpg) no-repeat;

                width: 120%;

                margin-bottom:20px;

                text-align: center;

                float:left;

                padding-top: 0;

                padding-right: 0;

                padding-bottom: 0;

                padding-left: 16;

      }

      #vision h1 {

                color: #000;

                padding:5px;

                background-position:center center;

                font-size:30px;

                font-weight:bold;

                background-color: #FFF;

                font-style: normal;

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

                margin-top: 5;

                margin-right: 5;

                margin-bottom: 5px;

                margin-left: 5;

      }

      #vision figure {

                width: 244px;

                float:left;

                background-color: #F4FFFF;

                padding: 10px;

                margin-top: 15px;

                margin-right: 10px;

                margin-bottom: 15px;

      }

      #vision figcaption {

                text-align: center;

                background-color: #CCCCCC;

                float:left;

                width:100%;

       

       

                            color

      ;                                                                                                               font-weight: bold;

                font-family: Verdana, Geneva, sans-serif;

                font-size: 18px;

                text-decoration: none;

                margin: 0px;

                padding-top: 8px;

                padding-right: 0px;

                padding-bottom: 8px;

                padding-left: 0px;

      }

      a.block {

                display:block;

                text-align: center;

                text-decoration: none;

                padding: 0px;

                color: #FFF;

                background-color: #00F;

                font-weight: bold;

                font-style: normal;

      }

       

      Thanks,

       

      Alex

        • 1. Re: aligning all boxes together on page on the same line
          Nancy O. CommunityMVP

          Floats & Margins Demo

          http://alt-web.com/DEMOS/3-CSS-boxes.shtml

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          • 2. Re: aligning all boxes together on page on the same line
            alexisonsmith3 Community Member

            I have tried following the demo but my header, navigation bar and figure caoptions are all offset from each other....

            • 3. Re: aligning all boxes together on page on the same line
              mytaxsite.co.uk CommunityMVP

              alexisonsmith3 wrote:

               

              I have tried following the demo but my header, navigation bar and figure caoptions are all offset from each other....

               

               

              You need to upload your page on your server so that people can see it in action what the problem is.  All you have done is post some codes here and expect people to look at it and tell you what is wrong with it.  It doesn't work like that my friend.  People need to see the page and they can get the code from your page itself.

               

              Good luck.

              • 4. Re: aligning all boxes together on page on the same line
                alexisonsmith3 Community Member

                My website is uploaded. I seem to be having some other techincal difficulties as well

                 

                www.newcityexplorer.com

                • 5. Re: aligning all boxes together on page on the same line
                  Nancy O. CommunityMVP

                  404 error - this file not found on server

                  http://www.newcityexplorer.com/pictures/Logo_2.png

                   

                  Also, your other images all need to be re-scaled and optimized for the web before you insert them in to web pages.

                   

                  On Line 60 of your HTML code you have an extra </body> tag that doesn't belong. And on line 65 you have an extra </div> you don't need.

                   

                  </body>


                    <footer>

                      <div id="facebooktwitter"><img src="images/icon_facebook.png" width="24" height="25" alt="Facebook"><img src="images/icon_twitter.png" width="24" height="25" alt="Twitter"></div>

                    </footer>

                  </div>

                  </body>

                   

                   

                  In your CSS, you have everything set to display:block which I don't think is necessary.

                   

                  article, aside, figure, footer, header, nav, section {

                      display: block;

                  }

                   

                  Why do you need this?

                   

                  #Logo hgroup {

                      position: absolute;

                      top: -500px;

                  }

                   

                  Why are you floating the body and #container?

                   

                  body {

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

                      color: #000;

                      background-color: #FFFFFF;

                      padding-left: 13%;

                      width: 950px;

                      float: left;

                      margin-top: 0px;

                      margin-right: 0px;

                      margin-bottom: 0px;

                      margin-left: 0px;

                  }

                  #container {

                      width: 100%;

                      float: left;

                      margin-top: 0;

                      margin-right: 0;

                      margin-bottom: 0;

                      margin-left: 16px;

                  }

                   

                   

                  As to your main question, I don't see ample width to accommodate floated logo, nav bar and heading.  Your body width is only 950px.  Your nav bar takes up most of it.

                   

                   

                   

                  Nancy O.

                  Alt-Web Design & Publishing

                  Web | Graphics | Print | Media  Specialists 

                  http://alt-web.com/

                  http://twitter.com/altweb

                  http://alt-web.blogspot.com/

                  • 6. Re: aligning all boxes together on page on the same line
                    mytaxsite.co.uk CommunityMVP

                    Effectively what nancy is saying to you is to validate your HTML because it is wrong in many respects.  for example you have duplicaste body tag as pointed out by Nancy but also, your footer appears outside the body tag.

                     

                    Once you have correct html structure, you will find that most of your CSS codes will start working and then finding the errors would be very simple.

                     

                    Hope this helps.

                    • 7. Re: aligning all boxes together on page on the same line
                      alexisonsmith3 Community Member

                      I have made all of the suggested changes however I am not unable to see my logo and I feel my page is too large. I understand about the images however in regards to the basic format of the page is there something else missing which is stopping me from being able to see my logo and/or putting everything in a box and aligning them up?

                       

                      Thank you

                       

                      Alex

                      • 8. Re: aligning all boxes together on page on the same line
                        alexisonsmith3 Community Member

                        What I am looking for is to have everything in the same box and have a padding of equal spacing each side

                         

                        Thank you again

                        • 9. Re: aligning all boxes together on page on the same line
                          Nancy O. CommunityMVP

                          Upload your pictures folder to your server again.

                          http://www.newcityexplorer.com/pictures/Logo_2.png

                           

                          Copy & Paste this code into a new, blank HTML document.  This layout is fixed-width & centered on screen.  I added some borders for demo purposes.  You may delete them.

                          <!DOCTYPE HTML>

                          <html>

                          <head>

                          <meta charset="utf-8">

                          <title>New City Explorer</title>

                           

                          <!--[if lte IE 8]>

                          <script type="text/javascript" src="javascript/html5.js"></script>

                          <![endif]-->

                          <style type="text/css">

                           

                          /**add vertical scrollbar channel to short pages**/

                          html {overflow-y:scroll}

                           

                          body {

                          margin:0;

                          padding:0;

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

                          font-size: 90%;

                          color: #000;

                          background-color: silver;

                          }

                          #container {

                          width: 925px; /**adjust width as needed**/

                          margin:0 auto; /**with width, this is centered on screen**/

                          padding: 12px;

                          font-size: 16px;

                          background:#FFF;

                          overflow:hidden; /**to contain floats**/

                          border: 1px dotted red; /*for demo purposes, you may delete this**/

                          }

                           

                          #Logo {

                          background-image: url(pictures/Logo_2.png);

                          background-repeat: no-repeat;

                          height: 80px;

                          width: 300px; /**adjust width to match your image**/

                          float: left;

                          }

                          header hgroup {

                          margin: 0 0 0 65px;

                          padding: 12px;

                          line-height: 17px;

                          }

                           

                          ul {

                          padding:0;

                          margin:0;

                          }

                           

                          nav {margin:0 auto; padding:0; width: 100%}

                           

                          nav ul {

                          list-style: none;

                          margin-bottom: 15px;

                          font-weight: bold;

                          font-size:20px;

                          }

                          nav ul li {

                          float: left;

                          -webkit-transition-duration:.1s;

                          -webkit-transition-property:margin-top;

                          -webkit-transition-timing-function:ease-in-out;

                          -o-transition-duration:.1s;

                          -o-transition-property:margin-top;

                          -o-transition-timing-function:ease-in-out;

                          -moz-transition-duration:.1s;

                          -moz-transition-property:margin-top;

                          -moz-transition-timing-function:ease-in-out;

                          transition-duration:.1s;

                          transition-property:margin-top;

                          transition-timing-function:ease-in-out;

                          color: #3719F8;

                          background-color: #FFF;

                          padding-right: 4px;

                          margin-left: 16px;

                          }

                           

                          nav ul a {

                          display: block;

                          width:140px;

                          padding: 10px;

                          text-align:center;

                          text-decoration: none;

                          color: #3719F8;

                          border: 2px solid #3719F8;

                          margin: 5px 0px;

                          -moz-border-radius:6px;

                          -webkit-border-radius:6px;

                          border-radius:6px;

                          -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                          -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                          box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                          text-shadow: rgba(0,0,0,0.8) 1px 1px 1px;

                          }

                          nav ul a:link, nav ul a:visited {

                          background: rgba(255,255,255,0.2);

                          }

                          nav ul a:hover, nav ul a:active, nav ul a:focus {

                          background-color: #0000FF;

                          color: #FFFFFF;

                          }

                          /**clear nav floats**/

                          nav:after {

                          content: ".";

                          display: block;

                          height: 0;

                          clear: both;

                          visibility: hidden;

                          }

                           

                          section {margin-top: 25px;}

                           

                          section h1 {

                          margin:0;

                          color: #000;

                          font-size:30px;

                          text-align:center;

                          margin-top: 45px;

                          font-weight:bold;

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

                          }

                           

                          #vision {

                          font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

                          font-size:14px;

                          margin-top: 0;

                          font-weight:bold;

                          background:url(images/lrg_hero.jpg) no-repeat;

                          text-align: center;

                          overflow:hidden; /**to contain floats**/

                          }

                           

                          figure {

                          margin-top: 0;

                          width: 244px;

                          float: left;

                          background-color: #DADADA;

                          padding: 10px;

                          margin: 15px;

                          margin-left: 23px;

                          border: 1px solid #999;

                          }

                           

                          figcaption {

                          text-align: center;

                          color:#FFF;

                          width: 100%;

                          font-family: Verdana, Geneva, sans-serif;

                          font-size: 18px;

                          margin: 0;

                          padding: 8px 0 8px 0;

                          }

                           

                          figcaption a{

                          display:block;

                          text-decoration: none;

                          padding: 4px;

                          color: #FFF;

                          font-weight: bold;

                          }

                           

                          figcaption a:hover {background-color: #00F;}

                           

                          footer {

                          padding: 10px 0;

                          clear: both;

                          color: #fff;

                          border: 1px dotted green; /**for demo purposes, you may delete**/

                          }

                           

                          footer p {

                          color:#000;

                          margin:0 0 5px 0;

                          }

                           

                          #phone {

                          font-weight:bold;

                          color: #000;

                          }

                          #facebookTwitter {

                          float: left;

                          width: auto;

                          margin-right: 25px;

                          }

                           

                          </style>

                          </head>

                           

                          <body>

                          <div id="container">

                          <header>

                          <div id="Logo">Insert Your logo image here</div>

                          <hgroup>

                          <h1>New City Explorer</h1>

                          <h2>Top 10 things to do in a city</h2>

                          </hgroup>

                          </header>

                           

                          <nav>

                          <ul>

                          <li><a href="index.html">Home</a></li>

                          <li><a href="aboutus.html">About Us</a></li>

                          <li><a href="destinations.html">Destinations</a></li>

                          <li><a href="links.html">Links</a></li>

                          <li><a href="contact.html">Contact</a></li>

                          </ul>

                          </nav>

                           

                          <section>

                          <header><h1>Where will you fly to?</h1></header>

                          </section>

                           

                          <section id="vision">

                           

                          <figure> <a href="london.html">

                          <img src="Pictures/London_main.JPG" width="244" height="188" alt="London Main" /></a>

                          <figcaption><a href="london.html">London</a></figcaption>

                          </figure>

                           

                          <figure><a href="www.newcityexplorer.com/brussels">

                          <img src="Pictures/Brussels_main.jpg" width="244" height="188" alt="Brussels main"></a>

                          <figcaption><a href="#">Brussels</a></figcaption>

                          </figure>

                           

                          <figure><a href="www.newcityexplorer.com/chicago">

                          <img src="Pictures/Chicago_main.jpg" width="244" height="188" alt="Chicago Main"></a>

                          <figcaption><a href="#">Chicago</a></figcaption>

                          </figure>

                           

                          <figure><a href="www.newcityexplorer.com/edinburgh">

                          <img src="Pictures/Edinburgh_main.jpg" width="244" height="188" alt="Edinburgh"></a>

                          <figcaption><a href="#">Edinburgh</a></figcaption>

                          </figure>

                           

                          <figure><a href="www.newcityexplorer.com/sanfransisco">

                          <img src="Pictures/SF_main.jpg" width="244" height="188" alt="SF Main"></a>

                          <figcaption><a href="#">San Fransisco</a></figcaption>

                          </figure>

                           

                          <figure><a href="#">

                          <img src="Pictures/SF_main.jpg" width="244" height="188" alt="Other"></a>

                          <figcaption><a href="#">Other City</a></figcaption>

                          </figure>

                          </section>

                           

                          <footer>

                          <div id="facebookTwitter"><img src="images/icon_facebook.png" width="24" height="25" alt="Facebook"><img src="images/icon_twitter.png" width="24" height="25" alt="Twitter">

                          </div>

                          <p>&copy; 2012 footer text goes here....</p>

                           

                          </footer>

                           

                          <!--end #container--></div>

                          </body>

                          </html>

                           

                           

                          Nancy O.

                          • 10. Re: aligning all boxes together on page on the same line
                            alexisonsmith3 Community Member

                            Thank you so much, I now have a better idea of how everything goes together. Can I work on just one page with the HTML and CSS or does that get more complicated the more code I write?

                             

                            Thank you again

                            • 11. Re: aligning all boxes together on page on the same line
                              Nancy O. CommunityMVP

                              SaveAs TEST.html   Play with it and see how it goes....

                               

                              If you get stuck, upload TEST.html and post a new question.

                               

                               

                              Nancy O.