The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> I need help with css 3 And HTML 5, My Sidebar is not moving to the side
SwiFtGaMiNg
post Oct 29 2014, 03:44 PM
Post #1





Group: Members
Posts: 1
Joined: 29-October 14
Member No.: 21,734
So i am trying to make a responsive website and i am trying to include a side bar and it is going fine but the side bar is at the bottom all ready and all i need to do is move it to the side but it wont let me CAN SOME ONE PLEASE HELP

Heres the code for both css3 and html:

body {
background-image: url('img/bg.png');
color: #000305;
font-size: 90.0%;
font-family: Arial, 'Lucinda Sans Unicode';
line-height: 1.5;
text-align: left;
}


a {
text-decoration: none;
}

a:link, a:visited {
color: #CF5C3F;

}

a:hover, a:active {

}


.body {
margin: 0 auto;
width: 70%;
clear: both;
}

.mainHeader img {
width: 30%;
height: auto;
margin: 2% 0;
}

.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.mainHeader nav ul {
list-style: none;
margin: 0 auto;

}

.mainHeader nav ul li {
float: left;
display: inline;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.maineader nav .active a:link, mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow; none;
}

.mainHeader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.maincontent {
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.content {
width: 70px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}



.topcontent {
background-color: #FEE;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}

.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}

.Top-sidebar {
width: 21%;
float: left;
background-color: #FFW;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 2%;
padding: 2% 3%;
}

.Middle-sidebar {
width: 21%;
float: left;
background-color: #FFW;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 2%;
padding: 2% 3%;
}

.Bottom-sidebar {
width: 21%;
float: left;
background-color: #FFW;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 2%;
padding: 2% 3%;
}

.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #666;
margin-top: 2%;
margin-bottom: 2%;
}

.mainFooter p {
width: 96%;
margin: 2% auto;
color: #FFF;
}

Thats the css

and now the html

<!DOCTYPE html>
<html lang="eng">

<head>
<title>HTML5/CSS3 Responsive Website</title>
<meta charset="utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width-device-width, initial-scale-1.0">
</head>

<body class="body">
<header class="mainHeader">
<img src="My website/gta-5-official-logo.png" height="240" width="260">

<nav><ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</nav></ul>
</header>

<div class="mainContent>
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" title="First Post">First Post</a></h2>
</header>

<footer>
<p class="post-info">This post is written by Max Loyd</p>

</footer>

<content>
<p>A few weeks ago we released two different
introductory articles about HTML5 and CSS3, and I promised you we'd do some cool stuff together in the
upcoming months. Well, I have been working hard on
this video tutorial and I really hope you enjoy it.</p>
<p>A few weeks ago we released two different
introductory articles about HTML5 and CSS3, and I promised you we'd do some cool stuff together in the
upcoming months. Well, I have been working hard on
this video tutorial and I really hope you enjoy it.</p>
</content>
</article>


<article class="topcontent">
<header>
<h2><a href="#" title="First Post">Second Post</a></h2>
</header>

<footer>
<p class="post-info">This post is written by Max Loyd</p>

</footer>

<content>
<p>A few weeks ago we released two different
introductory articles about HTML5 and CSS3, and I promised you we'd do some cool stuff together in the
upcoming months. Well, I have been working hard on
this video tutorial and I really hope you enjoy it.</p>
<p>A few weeks ago we released two different
introductory articles about HTML5 and CSS3, and I promised you we'd do some cool stuff together in the
upcoming months. Well, I have been working hard on
this video tutorial and I really hope you enjoy it.</p>
</content>
</article>
</div>
</div>


<aside class="Top-sidebar">
<article>
<h2>Top Sidebar</h2>
<p>Discover how to use new techniques to achieve an outstanding, cross-browser HTML5.</p>
</article>
</aside>

<aside class="Middle-sidebar">
<article>
<h2>Middle Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</aside>

<aside class="Bottom-sidebar">
<article>
<h2>Bottom Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod expedita distinctio.</p>
</article>
</aside>



<footer class="mainFooter">
<p>Copyright © 2013 <a href="#" title="1stwebdesigner.com">1stwebdesigner.com</a></p>
</footer>

</body>

</html>

some one please help The pic is what it should look like mad.gif mad.gif mad.gif



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 30 2014, 09:10 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Start by validating the HTML and CSS and fix the errors:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

There is no image attached to see how you want it to look.

In the meantime, you might search for "css 2 column layout" or "css responsive 2 column layout".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 02:37 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC