Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Beginner having trouble with responsive web design.

    I've been taking HTML tutorials on youtube. I just finished a video covering responsive design using "-web-kit". My problem is that my browser isn't showing the same thing as what's shown in the video. Here's a picture of what I have.



    As you can see, the right container titled "Artists" is awkwardly placed to the very right of the page when I want it to be positioned under the header with the left container. Also, when I adjust the size of the page, the right container disappears and the left container adjusts. I'm posting the HTML and CSS stylesheet I have and if any one could help me fix this I would be very happy.

    HTML

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>My Funky Website</title>
    <link rel="stylesheet" href="css/responsive_style.css" />
    </head>
    <body>
    <div id="wrapper">
    <header>
    <div class="logo">My Funky Website</div>

    </header>

    <nav>
    <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="About Us">About Us</a>
    <li><a href="#" title="Videos">Videos</a></li>
    <li><a href="#" title="Contact Us">Contact Us</a></li>
    <li>Not a link</li>
    </ul>
    </nav>

    <div class="container" >
    <section id="mainContainer">
    <article>
    <hgroup>
    <h1>The G-Funk Era</h1>
    <h2>Funked out with a gangsta twist.</h2>
    </hgroup>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <footer>
    <p> -written by John Doe</p>
    </footer>

    </article>

    <article>
    <hgroup>
    <h1>How To Get Funky</h1>
    <h2>It's harder to get funky these days.</h2>
    </hgroup>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <footer>
    <p> -written by John Doe</p>
    </footer>

    </article>
    </section>

    <aside id="rightContainer">
    <h1>Artists</h1>
    <dl>
    <dt>James Brown</dt>
    <dd>King of Funk</dd>

    <dt>Parliment</dt>
    <dd>Funkadelic p-funk mayhem</dd>

    <dt>Earth, Wind &amp; Fire</dt>
    <dd>Elements of funk</dd>

    </dl>
    </aside>

    </div>
    <footer id="theFooter">
    <p>&copy; 2012, Funky Productions</p>
    </footer>
    </div>
    </body>
    </html>


    CSS Stylesheet

    #CHARSET "utf-8";

    html, body {
    padding: 0;
    margin: 0;
    width: 100%
    }

    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
    display:block;
    }

    body {
    display: -webkit-box;
    -webkit-box-pack: center;
    }

    #wrapper {
    max-width: 960px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    }

    header {
    background: #999;
    padding: 20px;
    }

    nav {
    background: #878787;
    color: #ffff;
    }

    nav ul li {
    display: inline-block;
    font: bold 10px Arial;
    padding: 10px;
    }

    nav ul li a {
    color: white;
    text-decoration: none;
    }

    nav ul li a:hover {
    color: blue;
    text-decoration: underline;
    }

    .container {
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    }

    #mainContainer {
    background: #f2f3f5;
    webkit-box-flex: 1;
    padding: 20px;
    }

    #rightContainer {
    background: #f8f8f8;
    width: 300px;
    padding: 20px;
    }

    #theFooter {
    text-align: center;
    padding: 20px 0;
    background: black;
    color: white;
    }

  • #2
    New to the CF scene
    Join Date
    Dec 2011
    Location
    Bełchatów, Poland
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Could you provide a link to this tutorial?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Your page is in <div class="container" > and that contains two elements the <section id="mainContainer"> followed by <aside id="rightContainer">. In the normal flow of things mainContainer is rendered first and then rightContainer. You have nothing I can see to take rightContainer out of the flow so it appears the way you wanted it to. In fact the name says it should be to the right.

    If you cut and paste the <aside id="rightContainer"> to appear in <divclass="container" > before section id="mainContainer"> it becomes closer to what you what.

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I put <aside id="rightContainer"> before the <section id="mainContainer"> the "mainContainer" still stretches way off to the right, which isn't at all what I want.

    Here is a link to the two part tutorial on responsive design: http://www.youtube.com/watch?v=B-MNk...6962957601A1CF

    In this tutorial I'm pretty sure everything he has written I have written as well. If I have made a mistake, I can't seem to find it. The thing is, what is displayed for him is totally different than what is displayed for me.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •