1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Left Float(Left Column) Centering Problems HELP! PLEASE! I'm DROWNING!

Discussion in 'CSS' started by Web_Dev_Chris, Dec 19, 2016.

  1. #1
    Hi all,

    I am currently transitioning my website: "guitaruni.com" (WordPress) to HTML & CSS.

    I am limited in my knowledge of coding, but I have learned a lot since being interested in coding from scratch.

    These are the websites:
    guitaruni.com (WordPress)
    ditfort.com/guitaruni (Pure HTML & CSS)

    Obviously once I have finished this project I'll be transitioning the domain.

    Anyway, lets move onto my question. I have split the website into two columns to minic my wordpress design as I quite like the wordpress design but I am having trouble centering things in the content column, left float (1st column).

    Please see here: 'ditfort.com/guitaruni'

    EDIT: I forgot to mention that I have been trying to center the navigation bar with no success as well. Please help!

    EDIT 2: Centering is for <img /> and <iframe> tags.

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <link rel="stylesheet" href="screen.css" media="screen,projection,tv">
    <meta name="description" content="The best free concise, pictorial and broken-down guitar lessons online.">
    <meta name="keywords" content="guitar uni, online guitar lessons, learn guitar, free guitar lessons, play guitar">
    <link rel="shortcut icon" href="images\favicon.png">
    <title>Guitar Uni</title>
    </head><body>
    <!--################################################################################# 
          
                              HEADER - Includes Logo, and Navigation.
          
    #####################################################################################-->
                         <div id="header">
                         <div class="logo"><h1>Guitar Uni</h1></div>
    <ul class="navigation">
      <li><a href="#home">Home</a></li>
      <li><a href="#aboutus">About Us</a></li>
      <li><a href="#onlineguitarlessons">Online Guitar Lessons</a></li>
      <li><a href="#contact-us">Contact Us</a></li>
    </ul>
                         </div>
    <hr><!--################################################################################# 
          
                              Content - Left column.
          
    #####################################################################################-->
                         <div id="content">
                <h2>Online Guitar Lessons</h2>
    <p>
    To start learning how to play the guitar navigate to our online guitar lessons via the main navigation menu located at the top of the website or via lessons located on the right hand-side.
    </p>
    <p>
    Anyone that has an interest in the guitar will benefit from this website. We teach basic to advance lessons. Our online guitar lessons are broken down to step-by-step instruction. Each lesson is concise and pictorial to ensure easy learning.
    </p>
                 <h3 class="yellowhighlight"> Each Lesson Contains Picture Graphs</h3>
              
    <img src="images\stringnames.gif" alt="The names of the 6 open strings on the guitar."/>
    <p>
    Concise information is comprehensive, but to the point. This will ensure that lessons are not long winded, but short and easy to understand. Each lesson contains pictures and graphs that can be downloaded and printed which is essential for practice. Finally, each lesson will contain a video demonstration so you can see exactly how it’s done.
    </p>
                 <h3 class="yellowhighlight">Each Lesson Contains Video Demonstrations!</h3>
         <iframe src="https://drive.google.com/file/d/0Bw9gG4EOCeKTVGR6MUYzQ0lkZW8/preview"></iframe>
    <p>
    Guitar Uni was birthed out of pure passion to teach people who have an interest in learning the guitar but are unsure where to start. Our organized lessons will provide everything you need to learn, have fun and become an impressive guitarist as quickly, fast and easiest as possible.
    </p>
    <p>
    Navigate to our online guitar lessons via the main navigation menu located at the top of the website or via lessons located on the right hand-side.
    </p>
                         </div>
    <!--################################################################################# 
          
                              Sidebar - Right column.
          
    #####################################################################################-->
                         <div id="sidebar">
                 <span>Social Media</span>     <br><br>
             <a target="_blank" href="https://www.facebook.com/Guitar-Uni-540790026091194">
             <img alt="Facebook Fan Page Icon" src="images/facebook-icon.png"></a>
             <a target="_blank"  href="https://www.youtube.com/channel/UCSNYbjisIYWpPjKm2NJkpyw">
             <img alt="Youtube Channel Icon" src="images/youtube-icon.png"></a>
             </br><a target="_blank" href="https://twitter.com/Guitar_Uni">
             <img alt="Twitter Profile Icon" src="images/twitter-icon.gif"></a>
             <a target="_blank"  href="http://www.dailymotion.com/guitaruni">
             <img alt="Dailymotion Profile Icon" src="images/dailymotion-icon.gif"></a>
    
                         </div>
    <hr><!--################################################################################# 
          
                              Footer
          
    #####################################################################################-->
                         <div id="footer">
    &copyCopyright 2016
    &bull;
    <a href="http://guitaruni.com">Guitar Uni</a>
    &bull;
    <a href="http://www.guitaruni.com/privacy-policy/">Privacy Policy</a>
    &bull;
    <a href="http://www.guitaruni.com/contact-us/">Contact Us</a>
                         </div>
    </body></html>
    
    HTML:
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
       margin: 0;
       padding: 0;
    }
    * { //specific settings applied to all elements
       background-repeat: no-repeat;
    
    }
    @font-face{
        font-family: dizzyedge;
        src: url(font/dizzyedge.otf);
    }
    @font-face{
        font-family: sugarpunch;
        src: url(font/sugarpunch.otf);
    }
    html {
         background-color: #FCFCFC;
    }
    body{
         width:900px;
         border: 1px solid #F1F1F1;
         box-shadow: 0px 0px 5px #979797;
         margin: 2% auto;
         background-color: #FFF;
         clear: left;
    }
    hr {
         display: none;
    }
    /*#############################################################################################                                                               
    
                                            HEADER
    
    ###############################################################################################*/
    #header{
         padding: 0;
         margin: 1% auto;
         width: 100%;
         margin: 0 auto;
         text-align: center;
    }
    .navigation {
         list-style-type: none;
         width: 100%;
         padding: 0;
         overflow: hidden;
         background-color: #FFF;
         border: 1px solid #555555;
         border-left: none;
         border-right: none;
         text-align:center;
         position: abosolute;
    
    }
    .navigation li {
         float:left;
    }
    .navigation a{
         display: block;    
         color: #555555;
         padding: 14px 16px;
         text-decoration: none;
    }
    .navigation a:hover {
         background-color: #F4F4F4;
         color:#000;
    }
    .navigation a:active{
         background-color: #FCFCFC;
         color:#000;
    }
    .logo{
         width: 600px;
         height: 234px;
         background-image: url("images/header.png");
         margin:auto;
    }
    .logo h1{
        display:none;
    }
    /*#############################################################################################                                                               
    
                         CONTENT - LEFT COLUMN
    
    ###############################################################################################*/
    
    #content{
         width:650px;
         float: left;
         margin: 1% 0 5% 0;
         padding: 0 0 1em 2em;
    }
    #content h1{
         font-family: sugarpunch;
         font-size: 25px;
         letter-spacing: 5px;
         padding:.5em .5em .5em 0;
         text-align: center;
    }
    #content h2{
         font-family: charcoal;
         font-size: 20px;
         letter-spacing: 2px;
         padding:.5em .5em .5em 0;
         text-align: center;
    }
    #content h3,h4,h5,h6{
         font-family: charcoal;
         font-size: 16px;
         letter-spacing: 2px;
         padding:0;
         text-align: center;
    }
    #content p{
         padding:.5em .5em .5em 0;
    }
    #content img, iframe {
         border:none;
         margin-left: 15%;
         padding:.5em;
         width: 400px;
         height:300px;
    }
    .yellowhighlight{
         background-color:#F1F1F1;
         width:500px;
         padding: 0;
         text-align: center;
    }
    /*#############################################################################################                                                               
    
                         SIDEBAR - RIGHT COLUMN
    
    ###############################################################################################*/
    #sidebar {
         float:right;
         width: 170px;
         margin: 3% 0 0 0;
         border: none;
    }
    #sidebar span{
         font-family:dizzyedge;
         font-size: 18px;
         font-weight: normal;
         letter-spacing: 2px;
         padding-left:5px;
    }
    #sidebar a img{
         width: 60px;
         height: 60px;
    }
    /*#############################################################################################                                                               
    
                         FOOTER - BOTTOM OF WEBPAGE
    
    ###############################################################################################*/
    #footer{
         padding: 4px 0 0 0;
         border-top:1px solid #555555;
         margin: 1% auto 2%;
         width: 95%;
         height: 30px;
         clear:both;
    }
    #footer a{
         color: #555555;
         text-decoration:none;
    }
    #footer a:hover{
         color:#000;
    }
    Code (CSS):



    Help much appreciated!

    Many thanks,
    Chris
     
    Last edited: Dec 19, 2016
    Web_Dev_Chris, Dec 19, 2016 IP
  2. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #2
    I forgot to mention that I have been trying to center the navigation bar with no success as well. Please help!
     
    Web_Dev_Chris, Dec 19, 2016 IP
  3. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #3
    Hi Chris, actually you are centering the text inside the item. Try this:
    
    .navigation li {
            display:inline-block;
    }
    
    Code (markup):
    There are some typographic errors in your code, anyway you don't want .navigation to be absolute positioned. If you look at the source from Firefox you can see some errors marked in red.

    You don't need the <div> wrapping h1. It should be images/favicon.png instead of images\favicon.png.
     
    Last edited: Dec 19, 2016
    badger_, Dec 19, 2016 IP
  4. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #4
    Thanks for your input, I am fixed the links. I was able to centre the nav but I am not able to centre it as a block element, although I might be able to get a similar effect if I style the a:hover properly.

    Next is the img and iframe, I am trying to centre it in within the content column, not the whole page. It might be due it being a fixed width, not sure. hmmm

    Anyone Any Ideas Appreciated. Thanks!
     
    Web_Dev_Chris, Dec 19, 2016 IP
  5. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #5
    Look at the "magic columns" layout, it's explained here: http://cutcodedown.com/article/progressive_enhancement_part3 ... if you want to center the navigation inside the content column, I'd put it just after <div id="content">.
     
    badger_, Dec 19, 2016 IP
  6. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #6
    Actually, I'm not worried about the iframe now becuase google slows down the load time of my home page by 2 seconds or so. I might put it as a gif, lower quality smaller size.

    Not the nav, I'm happy with that now. I mean I am having trouble trying to centre Images in the content column on the home page, not nav.

    See how the h3 doesn't line up with the image and iframe on the website in my attempt to centre it. Also the div is the place holder for my logo which is embedded in the stylesheet.
     
    Web_Dev_Chris, Dec 19, 2016 IP
  7. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #7
    Maybe this works? your site is painful to debug here, it makes my browser slow.
    
    <img 
        class="plate"
        ...
    >
    
    Code (markup):
    
    .plate {
    	display:block;
    	margin:0 auto;
    	height:auto;
    }
    
    Code (markup):
     
    Last edited: Dec 19, 2016
    badger_, Dec 19, 2016 IP
  8. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #8
    Tha
    Thank you! I was able to properly centre within the column.
     
    Web_Dev_Chris, Dec 19, 2016 IP