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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Location
    Manchester, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question my boxes won't go in the correct place. Help Please !

    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:

    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,

    Code:
    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?
    Last edited by carlos4147; 02-09-2012 at 03:47 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    Hi

    There are a few errors in your code which show up if you validate 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
    Last edited by claire_t; 02-09-2012 at 04:21 PM.
    Hmmmm......scratchy head time......

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed


  •  

    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
    •