...

View Full Version : Beginner having trouble with responsive web design.



gourdoyo
01-12-2013, 03:14 AM
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.

http://i56.photobucket.com/albums/g165/mr_brightside9109/Myfunkywebsite_zpse8f658c1.jpg

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;
}

adolek17
01-12-2013, 10:20 AM
Could you provide a link to this tutorial? ;)

sunfighter
01-12-2013, 04:19 PM
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.

gourdoyo
01-14-2013, 03:00 AM
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-MNkBh7F2A&list=PLC96962957601A1CF

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum