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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Angry Problem with top div, images being forced down?

    HI, this is the third thread i am making for this question but no one has managed to help me so far, the only reply i have got back says "i am suspicious"
    ¬_¬
    I have been stuck with this problem for over a month now and i cannot find a solution, help please!!!!

    I am new to HTML coding as i am learning about it in school but i am stuck, i do not know how to place the 'story box' in the centre and place the 'navigation' + 'deals' bars on either side. As you can see in the image both have moved down for some reason. Please give me a dummies answer since i m new, i am using dreamweaver CS3. I have tried resizing the boxes but that did not work.

    I am not asking you to do my coursework for me, I just want to know how to fix this problem so i can learn from it and never come accross this problem in the future. I originally typed up the HTML in notepad and then i converted it to CSS via dreamweaver CS3.

    Thank you for your time!

    view of website
    http://s819.photobucket.com/albums/z...Untitled-1.jpg

    CSS:
    #container {
    background-color: white;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    }

    #top {
    background-color: green;
    width: 800px;
    height:90px;
    float:left;

    }

    #nav {
    background-color: orange;
    width: 800px;
    height:33px;
    }

    #story {
    background-color: #ccffcc;
    width: 292px;
    height:442px;
    float:right;
    float:left;
    border: thin none #66cc00;
    }

    #sidebar {
    background-color: #ccffcc;
    width: 148px;
    height:442px;
    float:left;
    border: thin none #66cc00;
    }

    #deals {
    background-color: #ccffcc;
    width: 148px;
    height:442px;
    float:right;
    border: thin none #66cc00;
    }

    #footer {
    background-color: green;
    width: 800px;
    height: 30px;
    float:left;
    }

    Homepage HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>

    <title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>

    <link href="Pelton.css" rel="stylesheet" type="text/css" />
    </head>



    <body onload="MM_preloadImages('../buttons/HOme%206.jpg')">
    <div id="container">
    <div id="top"><img src="images/logo9090.jpg" width="90" height="90" /></div>
    <div id="buttons">
    <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebutton','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="homebutton" width="140" height="40" border="0" id="homebutton" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image9" width="140" height="40" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image6" width="140" height="40" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image7" width="140" height="40" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image8" width="140" height="40" border="0" id="Image8" /></a></div>
    </div>
    <div id="nav"><img src="buttons/top-bar.gif" width="800" height="36" /></div>
    <div id="spacer"><img src="images/spacer.gif" /></div>
    <div id="sidebartop"><img src="buttons/newtab145.gif" width="145" height="41" /></div>
    <div id="story">
    <div align="center">Story</div>
    </div>
    <div id="deals">Deals</div>
    <div id="sidebar"></div>
    <div id="footer">Footer</div>

    </div>
    </body>

    </html>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    #story {
    background-color: #ccffcc;
    width: 292px;
    height:442px;
    float:right;
    float:left;
    border: thin none #66cc00;
    }
    As I said in your other post a month ago. You have told this div to float left AND float right. Remove the float right if you want this floating to the left. Thats a start. We can go from there once you do the first thing someone suggests.

  • Users who have thanked teedoff for this post:

    SsjRavi (11-07-2010)

  • #3
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    You obviously didn't listen to the advice given you here, either:

    http://codingforums.com/showpost.php...85&postcount=6

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    As I said in your other post a month ago. You have told this div to float left AND float right. Remove the float right if you want this floating to the left. Thats a start. We can go from there once you do the first thing someone suggests.
    I apologize, after creating the second thread i only reffered to that one instead of the first so i did not see some replies.
    The strange thing is when i remove the float right or left the story div is no longer centred. When i applied both left and right it was centered just like the image on the link i provided shows. Also i did follow your advice however i just copied and pasted the old codes from my original post rather than updating.

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I have now removed the margin right tag and applied a 148px to margin left, the story div is now centred. Now i just need to move the 'sidebar' and 'deals' div up, i have inserted a image which i want to attach to the sidebar on the left hand side.

    What website currently looks like.
    http://i819.photobucket.com/albums/z...159/newcss.jpg

    The CSS now reads:

    #container {
    background-color: transparent;
    width: 800px;
    height: 600px;
    margin-left:auto;
    margin-right:auto;
    }

    #top {
    background-color: green;
    width: 800px;
    height:90px;
    float:left;
    }

    #buttons {
    background-color:white;
    width:800px;
    height:30px;
    float: left;
    }

    #nav {
    background-color:white;
    width: 800px;
    height:36px;
    }

    #spacer {
    height:35;
    width:800;
    }

    #sidebartop {
    background-color:white;
    width:145px;
    height:41px;
    float:left;
    }

    #story {
    background-color:#ccffcc;
    width:492px;
    height:440px;
    border: thin solid #66cc00;
    margin-left: 148px;
    }

    #deals {
    background-color: #ccffcc;
    width:148px;
    height:340px;
    float:right;
    border: thin solid #66cc00;
    }
    #sidebar {
    background-color: #ccffcc;
    width:142px;
    height:301px;
    float:left;
    border:thin solid #66cc00;
    }

    #footer {
    background-color: green;
    width:800px;
    height:30px;
    float:left;
    }
    Last edited by SsjRavi; 11-07-2010 at 04:02 PM.

  • #6
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    @SSJRavi: You're getting responses. It doesn't warrant reposting. Please don't.


    Also, try post up a link to the HTML page, it's easier to debug than the css code and an image.

  • Users who have thanked evo for this post:

    SsjRavi (11-07-2010)

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by evo View Post
    @SSJRavi: You're getting responses. It doesn't warrant reposting. Please don't.


    Also, try post up a link to the HTML page, it's easier to debug than the css code and an image.
    I cannot upload the HTML file so i have only attached the CSS.
    Whenever i try i get a message saying:
    Homepage - Copy.html:
    Invalid File
    Attached Files Attached Files

  • #8
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Smile

    I have been playing around with the order of div tags for a couple of hours and have managed to sort out the sidebar and image.
    Does anyone know how to move the 'story' div up so that it is level with the dark green top of the sidebar?
    Also i need to move the 'deals' div up so that it is level with the 'story' div.

    Homepage:
    http://s819.photobucket.com/albums/z...currentCSS.gif

  • #9
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Ravi, just put your html between code tags. [] [/] put code between the brackets. That way I can see your html. This is a very easy task.
    Last edited by Chris Hick; 11-07-2010 at 11:03 PM.

  • Users who have thanked Chris Hick for this post:

    SsjRavi (11-07-2010)

  • #10
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Here's the HTML
    Attached Files Attached Files

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by SsjRavi View Post
    Here's the HTML
    No when you post code, or want to show someone your code, click the icon in your message composer window that looks like "#" (hash mark) That will bring up the code tags where you can copy and paste all your code between. makes it easier for us to read.

  • Users who have thanked teedoff for this post:

    SsjRavi (11-13-2010)

  • #12
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    
    <title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    
    <link href="Pelton.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    
    <BODY onload="MM_preloadImages('../buttons/HOme%206.jpg')">
    <div id="container">
    	<div id="top"><img src="images/logo9090.jpg" width="90" height="90" /></div>
    	<div id="buttons">
    	  <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebutton','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="homebutton" width="140" height="40" border="0" id="homebutton" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../buttons/HOme%206.jpg',1)"><img src="buttons/About us.gif" name="Image9" width="140" height="40" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image6" width="140" height="40" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image7" width="140" height="40" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image8" width="140" height="40" border="0" id="Image8" /></a></div>
      </div>	
    	<div id="nav"><img src="buttons/top-bar.gif" width="800" height="36" /></div>
    	<div id="spacer"><img src="images/spacer.gif" width="800" height="20" /></div>
    	<div id="sidebartop"><img src="buttons/newtab145.gif" width="145" height="41" /></div>
      	<div id="sidebar">Sidebar</div>
        	  	<div id="story">
      	  <div align="center">Story</div>
      	</div>
    	<div id="deals">Deals</div>
    	<div id="footer">Footer</div>
    	
    </div>
    </BODY>
    
    </html>

  • #13
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Ravi, the best thing for you to ever do is complete your css and html before you ever put javascript into it. It builds a solid foundation. It is much like building a house. You gotta pour the concrete before you build the house.

    I'm not entirely sure what look you are trying to go for but.. here is what I tinkered with.. Perhaps this is what you were trying to achieve.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    
    <title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    
    <link href="Pelton.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    
    <body onload="MM_preloadImages('../buttons/HOme%206.jpg')">
    
    <div id="container">
    	<div id="top">Top<img src="images/logo9090.jpg" width="90" height="90" /></div>
    	<div id="buttons"> buttons
    	  <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebutton','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="homebutton" width="140" height="40" border="0" id="homebutton" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../buttons/HOme%206.jpg',1)"><img src="buttons/About us.gif" name="Image9" width="140" height="40" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image6" width="140" height="40" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image7" width="140" height="40" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../buttons/HOme%206.jpg',1)"><img src="../buttons/Home%205test.jpg" name="Image8" width="140" height="40" border="0" id="Image8" /></a></div>
      </div>	
    	<div id="sidebar"> nav<img src="buttons/top-bar.gif" width="800" height="36" />
    	               <br />
                        spacer<img src="images/spacer.gif" width="800" height="20" />
                        <br />
    	                   sbt<img src="buttons/newtab145.gif" width="145" height="41" />
                        <br />
                           Sidebar</div>
        <div id="deals">Deals</div>
        	  	<div id="story">
      	  <div align="center">Story</div>
      	</div>
    	
    	<div id="footer">Footer</div>
    	
    </div>
    </body>
    
    </html>
    Last edited by Chris Hick; 11-08-2010 at 01:51 AM.

  • Users who have thanked Chris Hick for this post:

    SsjRavi (11-13-2010)

  • #14
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thank you, i have managed to fix the problem myself through creating new divs and trial and error.
    I have now come across a new problem, coding is so much fun =)
    Now for some reason everything within my top div where the banner is is being pushed down.
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    
    <title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    
    <link href="Pelton.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style2 {font-weight: bold; color: #FFFFFF;}
    -->
    </style>
    </head>
    
    
    
    <BODY onload="MM_preloadImages('../buttons/HOme 6.jpg','buttons/aboutus2.gif','buttons/News2.gif','buttons/Shop2.gif','buttons/Forums2.gif')">
    <div id="container">
    	<div id="top">	  
    	  <div align="left"><p><img src="images/logo9090.jpg" width="90" height="90" /><img src="buttons/Banner.png" width="710" height="90" /></p>
    	  </div>
    	</div>
    	<div id="buttons">
    	  <div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homebutton','','../buttons/HOme 6.jpg',1)"><img src="../buttons/Home%205test.jpg" name="homebutton" width="140" height="40" border="0" id="homebutton" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','buttons/News2.gif',1)"><img src="buttons/News1.gif" name="News" width="140" height="40" border="0" id="News" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','buttons/aboutus2.gif',1)"><img src="buttons/AboutUs1.gif" name="Image10" width="140" height="40" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Shop','','buttons/Shop2.gif',1)"><img src="buttons/Shop1.gif" name="Shop" width="140" height="40" border="0" id="Shop" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forums','','buttons/Forums2.gif',1)"><img src="buttons/Forums1.gif" name="Forums" width="140" height="40" border="0" id="Forums" /></a></div>
      </div>	
    	<div id="nav"><img src="buttons/top-bar.gif" width="800" height="36" /></div>
    	<div id="spacer"><img src="images/spacer.gif" width="800" height="20" /></div>
    	<div id="sidebartop"><img src="buttons/MainNav.gif" width="145" height="41" /></div>
      <div id="sidebar"></div>
    	<div id="spaceleft"></div>
        <div id="story">Story</div>
    	<div id="spaceright"></div>
    	<div id="deals">Deals</div>
    	<div id="footer">Footer</div>
    </div>
    </BODY>
    
    </html>
    CSS
    Code:
    #container   {				
    	background-color: transparent;	
    	width: 800px;			
    	height: 600px;			
    	margin-left:auto;		
    	margin-right:auto;		
    }
    
    #top   {
    	background-color:green;
    	width: 800px;
    	height:90px;
    	float:left;
    }
    
    #buttons	{
    	background-color:white;
    	width:800px;
    	height:38px;
    	float: left;
    }
    
    #nav	{
    	background-color:white;
    	width:800px;
    	height:36px;
    	float:left;
    	}
    
    #spacer	{
    }
    
    #sidebartop	{
    	height:41px;
    	width:800px;
    }
    
    #story	{
    	background-color:#ccffcc;
    	width:464px;
    	height:343px;
    	border: thin solid #66cc00;
    	float:left;
    }
    
    #spaceright	{
    	background-color:#FFFFFF;
    	width:10px;
    	height:343px;
    	float:left;
    }	
    			
    #deals	{
    	background-color:#ccffcc;
    	width:148px;
    	height:343px;
    	border: thin solid #66cc00;
    	float:right;
    }
    #sidebar	{
    	background-color: #ccffcc;
    	width:143px;
    	height:343px;
    	border:thin solid #66cc00;
    	float:left;
    }
    
    #spaceleft	{
    	background-color:#FFFFFF;
    	width:20px;
    	height:343px;
    	float:left;
    }
    
    #footer	{				
    	background-color:green;	
    	width:800px;			
    	height:30px;
    	float:left;			
    }
    Note: I do realise that there is a div for spacer with no dimensions etc. but that is just to prevent certain divs from overlapping.

  • #15
    New Coder
    Join Date
    Oct 2010
    Posts
    20
    Thanks
    11
    Thanked 0 Times in 0 Posts
    This is an image indicating the problem.
    Attached Thumbnails Attached Thumbnails Problem with top div, images being forced down?-problem.jpg  


  •  
    Page 1 of 2 12 LastLast

    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
    •