Hello,
I am trying to get my divs in the correct place without using relative or absolute positioning. - floats are better right?
anyway I cant get it to display the correct way.
I would like the main content to be top left(under the nav bar) then the dots png to be to the right of that and then the tclimg and the imgBall below (left and right)
here is my code:
the styles:
I am trying to get my divs in the correct place without using relative or absolute positioning. - floats are better right?
anyway I cant get it to display the correct way.
I would like the main content to be top left(under the nav bar) then the dots png to be to the right of that and then the tclimg and the imgBall below (left and right)
here is my code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Dash Inc - HOME</title>
<script 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>
</head>
<body bgcolor="#dddddd" onload="MM_preloadImages('Images/AnimationO.jpg','Images/AboutO.jpg','Images/ContactO.jpg','Images/ImagesO.jpg')">
<div id="wrapper">
<div id="MainBanner">
<img src="Images/Banner.jpg" width="800" height="132" />
</div>
<div id="NavBar">
<div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/HomeO.jpg',1)"><img src="Images/Home.jpg" alt="home" name="Home" width="95" height="32" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('HTML','','Images/HtmlO.jpg',1)"><img src="Images/Html.jpg" name="HTML" width="95" height="32" border="0" id="HTML" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Images','','Images/ImagesO.jpg',1)"><img src="Images/Images.jpg" name="Images" width="95" height="32" border="0" id="Images" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Animation','','Images/AnimationO.jpg',1)"><img src="Images/Animation.jpg" name="Animation" width="95" height="32" border="0" id="Animation" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutTCL','','Images/AboutO.jpg',1)"><img src="Images/About.jpg" name="AboutTCL" width="95" height="32" border="0" id="AboutTCL" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','Images/ContactO.jpg',1)"><img src="Images/Contact.jpg" name="Contact" width="95" height="32" border="0" id="Contact" /></a></div>
</div>
<div id="IndexMainContent">
This is where the main content will go.<br />
This is where the main content will go.<br />
This is where the main content will go.<br />
This is where the main content will go.<br />
This is where the main content will go.<br />
This is where the main content will go.<br />
This is where the main content will go.<br />
This is where the main content will go.<br />
This is where the main content will go.<br />
</div>
<div id="dots"><img src="Images/dots.png" /></div>
<br clear="left" />
<div id="imgBall">
<img src="Images/imgBall.png" />
</div>
<div id="tclImg">
<img src="Images/tcl.jpg" width="398" height="152" />
</div>
</body>
</html>the styles:
Code:
#wrapper {
background-color:#FFFFFF;
width:800px;
height:600px;
margin:0px auto;
}
#MainBanner{
float:left;
}
#maintext{
float:left;
padding-top:50px;
padding-left:20px;
width: 700px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#333333;
}
#NavBar{
width:800px;
padding-top:20px;
}
#IndexMainContent{
padding-top:50px;
padding-left:50px;
float:left;
}
#tclImg{
float:left;
padding-top:70px;
}
#dots{
top:20px;
}
#imgBall{
float:right;
padding-right:10px;
}