carlos4147
02-09-2012, 03:45 PM
I am working on a website at the moment and i cannot get one of the boxes to stay in the right place,
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
LOGO
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Contact</a></li>
<ul>
</nav>
<section>
<iframe src="images/slideshow" width="520px" height="270px" seamless="seamless"></iframe>
<aside id="box">
<h3> This is a box! </h3>
<p> Welcome ! </p>
</aside>
<article id="bottombox" class="left">
</article>
<article id="bottombox" class="center">
</article>
<article id="bottombox" class="right">
</article>
</section>
<footer>
<p> COPYRIGHT </p>
</footer>
</div>
</body>
</html>
and here is the CSS,
body {
background: #0099ff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099ff', endColorstr='#ffffff') no-repeat; /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#fff)) no-repeat; /* for webkit browsers */
background: -moz-linear-gradient(top, #0099ff, #fff) no-repeat; /* for firefox 3.6+ */
}
#container {
width: 800px;
height: 100%;
margin: auto;
background: #0099ff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099ff', endColorstr='#ffffff') no-repeat; /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#fff)) no-repeat; /* for webkit browsers */
background: -moz-linear-gradient(top, #0099ff, #fff) no-repeat; /* for firefox 3.6+ */
border: 1px solid black;
}
section {
margin-top: 25px;
}
header {
width:700px;
height: 200px;
margin: auto;
background: 0099cc;
border: 1px solid red;
border-radius: 15px;
}
nav {
font-family: myriad pro;
margin:auto;
margin-top: 10px;
font-size: 25px;
word-spacing: 40px;
text-align: center;
width: 650px;
height: 60px;
display: in-line;
text-decoration: none;
background: #006699;
border-radius:15px;
border: 1px solid black
}
nav ul, li, a {
display: inline;
text-decoration: none;
}
aside {
float: right;
margin: 0px 12px 0px 0px;
font-family: myriad pro;
color: #000;
}
#box {
height: 260px;
width: 250px;
background: #006699;
border-radius: 15px;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
border: 1px solid red;
}
#box:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
article.left{
float: left;
margin: 15px 0px 0px 0px;
font-family: myriad pro;
color: #000;
}
article.center{
float: center;
margin: 15px 275px 0px 275px;
font-family: myriad pro;
color: #000;
}
article.right{
float: right;
margin: 0 0 0 0;
font-family: myriad pro;
color: #000;
}
#bottombox {
height: 150px;
width: 250px;
background: #66ff33;
border-radius: 15px;
border: 1px solid black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
footer {
width: 630;
height: 100;
background: #0099cc;
border-radius: 15px;
clear:both;
margin: 10px;
border: 1px solid red;
}
as you can see the 3 article classes are the same accept they move each box to a different place.
i want all of the boxes to be level, one left, one centre and one right, surely its not too hard?
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
LOGO
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Contact</a></li>
<ul>
</nav>
<section>
<iframe src="images/slideshow" width="520px" height="270px" seamless="seamless"></iframe>
<aside id="box">
<h3> This is a box! </h3>
<p> Welcome ! </p>
</aside>
<article id="bottombox" class="left">
</article>
<article id="bottombox" class="center">
</article>
<article id="bottombox" class="right">
</article>
</section>
<footer>
<p> COPYRIGHT </p>
</footer>
</div>
</body>
</html>
and here is the CSS,
body {
background: #0099ff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099ff', endColorstr='#ffffff') no-repeat; /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#fff)) no-repeat; /* for webkit browsers */
background: -moz-linear-gradient(top, #0099ff, #fff) no-repeat; /* for firefox 3.6+ */
}
#container {
width: 800px;
height: 100%;
margin: auto;
background: #0099ff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099ff', endColorstr='#ffffff') no-repeat; /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#fff)) no-repeat; /* for webkit browsers */
background: -moz-linear-gradient(top, #0099ff, #fff) no-repeat; /* for firefox 3.6+ */
border: 1px solid black;
}
section {
margin-top: 25px;
}
header {
width:700px;
height: 200px;
margin: auto;
background: 0099cc;
border: 1px solid red;
border-radius: 15px;
}
nav {
font-family: myriad pro;
margin:auto;
margin-top: 10px;
font-size: 25px;
word-spacing: 40px;
text-align: center;
width: 650px;
height: 60px;
display: in-line;
text-decoration: none;
background: #006699;
border-radius:15px;
border: 1px solid black
}
nav ul, li, a {
display: inline;
text-decoration: none;
}
aside {
float: right;
margin: 0px 12px 0px 0px;
font-family: myriad pro;
color: #000;
}
#box {
height: 260px;
width: 250px;
background: #006699;
border-radius: 15px;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
border: 1px solid red;
}
#box:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
article.left{
float: left;
margin: 15px 0px 0px 0px;
font-family: myriad pro;
color: #000;
}
article.center{
float: center;
margin: 15px 275px 0px 275px;
font-family: myriad pro;
color: #000;
}
article.right{
float: right;
margin: 0 0 0 0;
font-family: myriad pro;
color: #000;
}
#bottombox {
height: 150px;
width: 250px;
background: #66ff33;
border-radius: 15px;
border: 1px solid black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
footer {
width: 630;
height: 100;
background: #0099cc;
border-radius: 15px;
clear:both;
margin: 10px;
border: 1px solid red;
}
as you can see the 3 article classes are the same accept they move each box to a different place.
i want all of the boxes to be level, one left, one centre and one right, surely its not too hard?