1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Page spacer in Html5

Discussion in 'Web Design & Development' started by peonowns, Feb 12, 2013.

Thread Status:
Not open for further replies.
Advertisement
  1. peonowns

    peonowns Thread Starter

    Joined:
    Apr 16, 2012
    Messages:
    165
    Hey guys i am currently building a intranet in HTML 5.
    I want to add a spacer to my <header> so i can add some information or another picture into it but i want a gap between the company logo and next item of say 150px.

    When i add the spacer div to the site it doesnt work like i want it to.
    I have tried floating it left and right neither way works.

    i have uplaoded a text doc with the code in as i was not 100% sure if i should just copy it into this text.


    p.s in the .doc file i have removed the spacer from the code and shown what i have in my source file for it.
     

    Attached Files:

  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    We need to see your css as well - just copy it between HTML tags (which are generated using the <> button in the post editor):)
     
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    If we can't see the problem we can't fix it...
     
  4. peonowns

    peonowns Thread Starter

    Joined:
    Apr 16, 2012
    Messages:
    165
    Sorry left my laptop at a friends so could not get access to the files.
    Thanks for showing an interest in helping though :).
    Here is the index page (with spacer in code)
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
          <!--  Title use the title tag to change the title of the sitepage -->
    <title>Altus - Intranet</title>
          <!-- Title end. -->
          <!-- Place any extra style sheets you may need in the <head> before the closing tag not after -->
    <link href="mainstyle.css" rel="stylesheet" type="text/css">
    </head>
          <!-- End <head> -->
     <body>
     <div class="container">
        <header><img src="images/logo.jpg" width="180" height="143" alt=""><div class="Spacer"> </div></header>
       <div class="sidebar1">
     
     <ul class="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="events.html">Events</a></li>
          <li><a href="customer.html">Customer</a></li>
          <li><a href="hr.html">Hr</a></li>
          <li><a href="pictures.html">Pictures</a></li>
           <li><a href="#">Tbc</a></li>
          
        </ul>
        <aside>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </aside>
      <!-- end .sidebar1 --></div>
      <article class="content">
        <h1>Welcome to the Altus Intranet</h1>
        <section>
         <h2>&nbsp;</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </section>
        <section>
          <h2>TITLE 1</h2>
          <!-- clearing method by craig.g Because i have the columns floated, the layout uses a clear:both declaration in the footer rule.  This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. 
          
          <!-- Lorem ipsum is a standard way of adding text to a website to see how it looks. -->
          
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        <section>
          <h2>TITLE 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        <section>
          <h2>TITLE 3</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        <!-- end .content --></article>
      <footer>
    All content and images © <a href="http://www.altus-services.co.uk/terms.html" class="copyrightlink">Altus Services Limited</a> 2013   <img src="images/facebook.png" alt="" width="16" height="16" /> <a href="http://www.facebook.com/altusservices" target="_blank" class="copyrightlink">Follow us on Facebook</a>  <img src="images/twitter.png" alt="" width="16" height="16" /> <a href="http://twitter.com/#!/AltusServices" target="_blank" class="copyrightlink">Follow us on Twitter</a>  
    <address>
        Adress here : TBC
    </address>
      </footer>
      <!-- end .container --></div>
    </body>
    </html>
    
    here is the css
    HTML:
    @charset "utf-8";
     
    body {
     font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
     background-color: #42413C;
     margin: 0;
     padding: 0;
     color: #000;
    }
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { 
     padding: 0;
     margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
     margin-top: 0;  
     padding-right: 15px;
     padding-left: 15px; 
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
     border: none;
    }
    a:link {
     color: #42413C;
     text-decoration: underline;
    }
    a:visited {
     color: #6E6C64;
     text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
     text-decoration: none;
    }
    .container {
     width: 960px;
     background-color: #FFFFFF;
     margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    }
    header {
     background-color: #ADB96E;
    }
    /* ~~  
    1) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source.
    ~~  */
    .sidebar1 {
     float: left;
     width: 180px;
     background-color: #EADCAE;
     padding-bottom: 10px;
    }
    .content {
     padding: 10px 0;
     width: 780px;
     float: left;
    }
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
     padding: 0 15px 15px 40px;
    }
    
    ul.nav {
     list-style: none; /* 
     border-top: 1px solid #666; border on the LI */
     margin-bottom: 15px; 
    }
    ul.nav li {
     border-bottom: 1px solid #666; /*  button separation */
    }
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
     padding: 5px 5px 5px 15px;
     display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
     width: 160px; 
     text-decoration: none;
     background-color: #C6D580;
    }
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
     background-color: #ADB96E;
     color: #FFF;
    }
    /* ~~ The spacer for top-nav ~~ */
    .Spacer {
     width: 200px;
     height: 100px;
     background-color: #000;
     float: left;
    }
     
    /* ~~ The footer ~~ */
    footer {
     padding: 10px 0;
     background-color: #CCC49F;
     position: relative;
     clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    }
    /*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
    header, section, footer, aside, article, figure {
     display: block;
    }
     
  5. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    Great:)
    Could you now tell me how you would like your spacer div to appear? At the moment it's floating to the left of your logo, which I assume is not where you want it:rolleyes:
    So, in anticipation, if you would like it after and under the logo simply take out the float:left and the width parameters from the css and it will so appear...
    Further, if you want it alongside your logo add align="left" to your img src for your logo viz:
    Code:
    <img src="http://forums.techguy.org/images/logo.jpg" width="180" align="left" height="143" alt="">
    and increase your Spacer height to 143px in css...
     
  6. peonowns

    peonowns Thread Starter

    Joined:
    Apr 16, 2012
    Messages:
    165
    Hey thanks for the reply,
    I would like it to after the logo that is currently there.
    after adding align left like you suggested, It puts the spacer in the correct place but the side nav moves next to it in the middle of the page and the content shifts left.

    The updated line of code was :
    HTML:
    <header><img src="http://forums.techguy.org/images/logo.jpg" width="180" height="143" align="left" alt=""><div class="Spacer"></div>
    p.s i also changed the height value as suggested
     
  7. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    Did you take out the float:left and the width parameters from the css ?
     
  8. peonowns

    peonowns Thread Starter

    Joined:
    Apr 16, 2012
    Messages:
    165
    yes.

    atleast i thought i had lol, just checked and it was still set to left ><.

    Thankyou.
     
  9. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    You're welcome - glad to have helped...
     
  10. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1089187

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice