Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Css Layout

Featured Replies

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

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

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

 

Cheers

 

Pat

  • Author
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;
}

  • Author
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"> </p>
   <p class="style1"> </p>
   <p class="style1"> </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>

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.