Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

View Poll Results: Was this tutorial helpfull?

Voters
2. You may not vote on this poll
  • Yes

    2 100.00%
  • No

    0 0%
Results 1 to 3 of 3
  1. #1
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I really enjoy'd making this tutorial. I want to do more in the future on different topics but I need feedback in order to know how to improve them. If you have anything to say at all please do so!

    Before I start I would like to say that this is my first tutorial. Ever. I apologize beforehand for any mistakes or confusion this may cause. I'm just trying to contribute a little more to the WDF community.

    Objective
    The objective of this tutorial is to learn how to create a basic fluid 3 box layout using CSS media queries. This includes a Header, Sidebar, and content div.

    Who is this for?
    This tutorial is for anyone that wants to learn how to use CSS Media Queries to create
    fluid web sites. You will need to have a basic understanding and coding skills in CSS and HTML(5).

    You will learn...
    You will learn how to use CSS Media Queries to make the website adjust for computers, tablets, phones, and any other browser sizes.

    When you finish the tutorial I would recommend that you mess around with the media queries and see what you can come up with yourself. Maybe add a div or two of your own. Maybe even try to implement this to your own website. The tutorial is meant to teach you how to do this, not to just copy past some code and be done with it. Most importantly have fun with this! Feel free to like and most importantly comment and ask questions!

    ~Tutorial Start~

    First, lets set up our files before we get into the coding. This tutorial will require you to have 3 main files. For simplicity's sake lets store them all in the root directory. We will be using a folder named Tutorial as the directory. Create the following files in your Tutorial folder...

    index.html
    style.css
    query.css

    The query.css files is the one that will be controlling the fluid aspect of the website we will be creating.

    Ok, lets get started with the layout of the html(index.html). We will need to create a header, sidebar, and content div's which will all be nested inside the wrapper div.

    Code:
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="query.css" rel="stylesheet" type="text/css">
    <title>CSS Media Queries Demo Site</title>
    </head>
    <body>
     
    <div id="wrapper">
     
    <div id="header">
    <h2 class="header">Header</h2>
    </div>
     
    <div id="sidebar">
    <section class="widget">
    <h4 class="widgettitle">Sidebar</h4>
    <p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
    stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
    stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
    stuff stuff stuff stuff stuff stuff stuff stuff stuff</p>
    </section>
    </div>
     
    <div id="content">
    <article class="post clearfix">
    <header>
    <h1 class="post-title">Content</h1>
    </header>
    <p>Content content content content Content content content content
    Content content content content Content content content content
    Content content content content Content content content content
    Content content content content Content content content content
    Content content content content content content content</p>
    </article>
    </div>
     
    </div>
    </body>
    </html>
    Now lets code in some CSS to actually see what we are doing(style.css)

    Code:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, tt, var, legend, fieldset {
    margin: 0;
    padding: 0;
    }
     
    img, fieldset {
    border: 0;
    }
     
    /* set image max width to 100% */
    img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    }
     
    /* set html5 elements to block */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }
     
    body {
    background: #232323;
    font: .81em/150% Arial, Helvetica, sans-serif;
    color: #666;
    }
     
    /* ------ */
    /* LAYOUT */
    /* ------ */
    #wrapper{
    width: 980px;
    margin: 0 auto;
    }
     
    /* ------ */
    /* HEADER */
    /* ------ */
    #header{
    position: relative;
    height: 160px;
    margin-top: 30px;
    border: 1px solid white;
    }
     
    h2.header{
    margin: 30px;
    padding: 0;
    font: bold 25px/120% Arial, Helvetica, sans-serif;
    color: white;
    }
     
    /* ------- */
    /* SIDEBAR */
    /* ------- */
    #sidebar {
    width: 230px;
    float: right;
    margin: 30px 0 30px;
    }
     
    .widget {
    border: 1px solid white;
    margin: 0 0 30px;
    padding: 10px 20px;
    color: white;
    }
     
    .widgettitle {
    margin: 0 0 5px;
    padding: 0;
    color: white;
    font-size: 18px;
    }
     
    /* ------- */
    /* CONTENT */
    /* ------- */
    #content {
    border: 1px solid white;
    margin: 30px 0 30px;
    padding: 20px 35px;
    width: 650px;
    float: left;
    }
     
    .post {
    margin-bottom: 40px;
    color: white;
    }
    .post-title {
    margin: 0 0 5px;
    padding: 0;
    font: bold 26px/120% Arial, Helvetica, sans-serif;
    }
    When you have created the html and CSS, open the index.html file in a browser of your choice. (if done right) You will see 3 div's(header, sidebar, content). They will have a white border around them. When you shrink your browser down you will notice that the website is not fluid. It does not "reform" to the browsers size.

    Ok, now open your query.css file so we can start coding the key parts of this tutorial and make this website fluid.

    Here we will be using the following syntax...
    Code:
    @media screen and (...) {
    The ... inside of the brackets is where you will place your argument. For this tutorial I will be using the max-width argument.

    At the top of your query.css put the following...
    Code:
    @media screen and (max-width: 980px) {
    The above code basically says that if the browser is less then 980px do the following... Everything that you want the website to do if its less width then the argument (980px) you will code directly under the argument.

    MOVE ON TO PART 2 OF THIS TUTORIAL
    http://www.webdesignforums.net/threa...art-2-2.39537/
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  2.  

  3. #2
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    Hey Andrew, this is an old post but while I was working on this and other tutorials online I found that once I previewed the site on my iphone it didn't respond properly but after following other tutorials I added <meta name="viewport" content="width=device-width"> and it worked properly. Thank you for the tutorial, it has helped me to start understanding the over concept of media queries and responsiveness.

  4. #3
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Oh shoot I forgot the meta... The demo site has it though so it works. Thanks for noticing! Yea it is an old post but the concept and code are still the same.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:02 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com