Skip navigation
alexisonsmith3
Currently Being Moderated

aligning all boxes together on page on the same line

May 5, 2012 1:42 PM

Tags: #cs5 #dreamweaver #css

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

 
Replies
  • Currently Being Moderated
    May 5, 2012 2:15 PM   in reply to alexisonsmith3

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2012 7:53 PM   in reply to alexisonsmith3

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 1:14 PM   in reply to alexisonsmith3

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 1:38 PM   in reply to alexisonsmith3

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 12, 2012 1:07 PM   in reply to alexisonsmith3

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 12, 2012 7:45 PM   in reply to alexisonsmith3

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points