Design issues with this template

Discussion in 'HTML & Website Design' started by Skynt, Aug 4, 2006.

0
  1. #1
    I've always kinda avoided css, untill now. I kinda wanted to create a template without using one table. I wanted to create a look like this ->
    gamingdl.com/./includes/uploads/Skynt/template.gif

    So heres the trouble, the template turns out fine in IE (Which is what I used during the development to preview), but FF makes it looked all screwed up.
    I know theres something technically wrong with how I did it, so please help.

    css file:
    
body {
background-color: #ddd;
}

div#topbar {
	width: 767px;
	height: 12px;
	background-image:url(images/template_01.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

div#container {
	margin: 0;
	width: 766px;
	background-color:#fff;
	padding: 0px 19px 10px 15px;
	background-image: url(images/borders.gif);
	background-repeat: repeat-y;
	height: auto;
}

div#leftcontainer {
	float: left;
	width: 490px;
	background-color: #fff;
	margin: 0; border: 0; padding: 0;
}

div#logo {
	float: left;
	width: 490px;
	background-color:#fff;
	height: 80px;
	padding-top: 20px;
	padding-bottom: 5px;
	margin: 0; border: 0;
}


div#news {
   float: left;
   width: 200px;
   background-color:#fff;
   height: 200px;
   margin:0; border: 0; padding: 0;
   background-image: url(images/bricks.gif);
   background-position: right;
   background-color: #fff;
   background-repeat: no-repeat;
}
   

div#footer {
	width: 730px;
	height: 10px;
	background-color:#FFFFFF;
	margin: 0;
	padding: 0;
	
}
div#bottom{
	width: 767px;
	height: 10px;
	background-image: url(images/template_02.gif);
	background-position: top;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

div#box1{
    height: 100px;
	width: 15px;
	float: left;
	background-color: #666;
	margin: 0; border: 0; padding: 0;
}

div#box2{
    height: 100px;
	width: 15px;
	float: right;
	background-color: #666;
	margin: 0; border: 0; padding: 0;
}


div#content { 
font: 1em "Times New Roman", Times, serif; 
}
    Code (markup):
    html file:
    
<html>
<head>
<title>template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<div id="topbar"></div>
  <div id="container">
  <div id="box1"></div>
  <div id="leftcontainer">
	<div id="logo"><center><a href="#"><img src="images/logo.gif" border="0"></a></center></div>
  </div>
  <div id="news"></div>
  <div id="box2"></div>
  <div id="footer">&nbsp;</div>
</div>
<div id="bottom"></div>
</body>
</html>
    Code (markup):
     
    Skynt, Aug 4, 2006 IP
  2. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #2
    kind of hard to tell since I don't really know what you want (I also don't have any of the images you use) but try changing the style of the footer div to this:
    

div#footer {
	width: 730px;
	height: 10px;
	background-color:#FFFFFF;
	margin: 0;
	padding: 0;
	clear: both;
}
    Code (markup):
     
    danielbruzual, Aug 4, 2006 IP
  3. Skynt

    Skynt Peon

    Messages:
    182
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I posted a link to the look I want ( I hope I dont get introuble considering it wanted to block live links), but that almost fixed it, except box 2 exceeds the boundries and sticking out.
     
    Skynt, Aug 4, 2006 IP
  4. Skynt

    Skynt Peon

    Messages:
    182
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Could someone delete the code I posted? Thanks.
     
    Skynt, Aug 6, 2006 IP