Css Layout

Css Layout Help with code if you got a min... thanks

#1 styledwebdesign

Advanced Member

Group: Members
Posts: 456
Joined: 04-June 08
Reputation: 0
Location:Cambridge, UK
Experience:Intermediate
Area of Expertise:Web Designer

Posted 18 July 2008 - 07:10 PM

Hiya,

I have designed my new site in Photoshop and I'm just trying to adjust the layout in Dreamweaver...

I the main body content is divided into 4 sections to on the top two underneath... for the CSS I have used

}
.mainbodyleft {
float: left;
height: 625px;
width: 42px;
background-image: url(images/images/bodyfarleft.png);
background-repeat: no-repeat;
}

Only problem is... its just lining up next to the top right instead of underneath the top left where it is ment to be.

You know what i'm missing something??? little lost

#2 pat24

Guru of nothing important!!

Group: Members
Posts: 2,174
Joined: 29-April 08
Reputation: 129
Gender:Male
Experience:Intermediate
Area of Expertise:Web Developer

Posted 18 July 2008 - 07:24 PM

styledwebdesign, on Jul 18 2008, 20:10, said:

Could you post a link or the whole code, it would make it easier.

Cheers

Pat

#3 styledwebdesign

Advanced Member

Group: Members
Posts: 456
Joined: 04-June 08
Reputation: 0
Location:Cambridge, UK
Experience:Intermediate
Area of Expertise:Web Designer

Posted 18 July 2008 - 07:29 PM

pat24, on Jul 18 2008, 20:24, said:

Could you post a link or the whole code, it would make it easier.

Cheers

Pat

sure pat...

.Bannerspace {
	height: 250px;
	width: 1024px;
}
.menuspace {
	height: 100px;
	width: 1024px;
}
.Bannerspace imgmain {
	padding-left: 250px;
}
.bannerplace {
	vertical-align: top;
	height: 250px;
	background-color: #000000;
	text-align: left;
	background-position: center center;
	padding-left: 20px;
	padding-right: 20px;
	left: 255px;
}
.menuplace {
	height: 187px;
	width: 799px;
}
contactbutton {
	float: left;
	vertical-align: bottom;
}
.contact {


}
.mainbody {
	height: 624px;
	width: 42px;
	background-image: url(images/images/bodyfarleft.png);
}
.mainbodytopleft {
	height: 347px;
	width: 274px;
	vertical-align: top;
	background-image: url(images/images/bodytopleft.png);
	float: left;
	background-repeat: no-repeat;
	padding-top: 20px;
	padding-left: 150px;
}
.maincontainer {
	height: 500px;
	width: 800px;
}
.mainbodyleft {
	float: left;
	height: 625px;
	width: 42px;
	background-image: url(images/images/bodyfarleft.png);
	background-repeat: no-repeat;
}
.maintopright {
	width: 254px;
	background-image: url(images/images/bodytopright.png);
	height: 360px;
	float: left;
	background-repeat: no-repeat;
	padding-left: 50px;
	padding-top: 7px;
	padding-right: 30px;
}
.mainbottom {
	height: 256px;
	width: 250px;
	background-image: url(images/images/bodybottomleft.png);
	background-repeat: no-repeat;
}
.bodybottomright {
	float: left;
	height: 257px;
	width: 333px;
	background-image: url(images/images/bodybottomright.png);
}
.mainbodybottomleft {
	background-image: url(images/images/bodybottomleft.png);
	background-repeat: no-repeat;
	background-position: top;
	float: left;
	height: 257px;
	width: 424px;
}

#4 pat24

Guru of nothing important!!

Group: Members
Posts: 2,174
Joined: 29-April 08
Reputation: 129
Gender:Male
Experience:Intermediate
Area of Expertise:Web Developer

Posted 18 July 2008 - 07:33 PM

Sorry, and the html

Pat

#5 styledwebdesign

Advanced Member

Group: Members
Posts: 456
Joined: 04-June 08
Reputation: 0
Location:Cambridge, UK
Experience:Intermediate
Area of Expertise:Web Designer

Posted 18 July 2008 - 07:40 PM

pat24, on Jul 18 2008, 20:33, said:

Sorry, and the html

Pat

ha sorry...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>C. O'Dell</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
	position: absolute;
	margin: auto;
	vertical-align: 50%;
}
.style1 {color: #FFFFFF}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
-->
</style>
<script type="text/javascript">
<!--
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_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 onload="MM_preloadImages('images/images/homeover.png','images/images/aboutusover.png','images/images/servicesover.png','images/images/contactusover.png')">
<div class="bannerplace"><img src="images/banner.jpg" width="678" height="250" class="bannerplace" /></div>
<div class="menuplace"><img src="images/images/home.png" width="145" height="60" id="Image1" onmouseover="MM_swapImage('Image1','','images/images/homeover.png',1)" onmouseout="MM_swapImgRestore()" /><img src="images/images/aboutus.png" width="213" height="60" id="Image2" onmouseover="MM_swapImage('Image2','','images/images/aboutusover.png',1)" onmouseout="MM_swapImgRestore()" /><img src="images/images/services.png" width="195" height="59" id="Image3" onmouseover="MM_swapImage('Image3','','images/images/servicesover.png',1)" onmouseout="MM_swapImgRestore()" /><img src="images/images/contactus.png" width="245" height="60" id="Image4" onmouseover="MM_swapImage('Image4','','images/images/contactusover.png',1)" onmouseout="MM_swapImgRestore()" /><img src="images/images/bottomleft.png" width="145" height="127" /><img src="images/images/bottommiddle.png" width="408" height="127" /><img src="images/images/bottom-right.png" width="245" height="126" /></div>

<div class="mainbodyleft"></div>
  <div class="mainbodytopleft style1 style2">C. O'Dell are specialists in drylining, offering attractive and  affordable solutions for both residential and commercial interior building  design requirements<br />
    <br />
  We constantly strive to maintain the highest standards of quality, health  and safety. The proof of our ability to succeed in this goal is demonstrated  over and over by our satisfied clients.</div>
  <div class="maintopright">
    <p class="style1"><span class="style2"> We  have built a reputation as one of the fastest and reliable company in our  profession. <br />
    </span></p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1"><span class="style2">We also work on jobs of all scales, we are now considered amongst the best in  their profession completing a job to to  a highest quality finish. </span><br />
    </p>
</div>

  

<div class="mainbodybottomleft"></div>
  <div class="bodybottomright"></div>
</body>
</html>