...

View Full Version : my boxes won't go in the correct place. Help Please !



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?

claire_t
02-09-2012, 04:17 PM
Hi

There are a few errors in your code which show up if you validate (http://validator.w3.org/#validate_by_uri) your code.

Some of the errors are saying you have "Duplicate ID bottombox." This could be causing issue.

You could also try wrapping the 3 boxes in a container and then use position:relative; and float:left; on all 3. using the appropriate margins to get them equally lined up. Thats what I have done in the past to get the same effect.

C

teedoff
02-09-2012, 05:17 PM
I would also mention that some of those html5 elements are not fully supported yet. You can google html5 shiv, and use that bit of js to force those browsers to recognise the html5 elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum