Forums
This topic is locked
Matching up divs
Posted 20 Jun 2007 15:58:04
1
has voted
20 Jun 2007 15:58:04 Chris Gallagher posted:
Excuse the ignorance - but is there any way of matching up multiple divs in dreamweaver or any other program when you have a web page full of them. it can be difficult trying to work out which div is matched to the closing div.im having a problem with a page if i remove a div the rest of it goes skew whiff and i'm having a hard time trying to match everything up.
Also the sidebar seems to be in both firefox and ie7 - but on ie 6 the margin seems to go from the body content and is offset by 30px (which was specified in the css) if i remove this it is still offset - now in all three!
The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>D2S.biz - Innvovative Solutions</title>
<link href="d2s.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center"><!-- HEADER -->
<div class="headerWrapper">
<div class="headerBlock">
<div id="leftHeaderColumn">
<img src="img/top-strapline.jpg"/>
</div>
<div id="rightHeaderColumn">
<!-- TOP SHORTCUTS -->
<a href="www.d2s.biz" style="padding-right:9px" >HOME</a>
<a href="www.d2s.biz/pages/about.html">ABOUT D2S</a>
<a href="www.d2s.biz/pages/contact.html">CONTACT D2S</a>
<a href="www.d2s.biz/pages/sitemap.html">SITE MAP</a>
</div>
</div>
</div>
<div class="wideSpotlightWrapper">
<div class="wideSpotlightBlock">
<div class="wideSpotlightPadding">
<div id="wideSpotlightLeftImage">
<!-- LEFT SPOTLIGHT -->
</div>
<div id="wideSpotlightRightImage">
<!-- RIGHT SPOTLIGHT -->
<img src="img/ics-top.jpg" alt="ics-topimagwe" width="670" height="204" /></div>
</div>
</div>
</div>
<div class="bodyDiv" align="center">
<!--SIDEBAR1-->
<div id="sidebar">
<div id="menuback">
<div id="menu">
<ul>
<li class="menuhead">NAVIGATION</li>
<li><a onfocus='this.blur()' href="#">Sourcing</a></li>
<li><a onfocus='this.blur()' href="#">Procurement</a></li>
<li><a onfocus='this.blur()' href="#">Innovation</a></li>
<li class="sep"></li>
<li><a onfocus='this.blur()' href="#">Interior Solutions</a></li>
<li class="sep"></li>
<li><a onfocus='this.blur()' href="#">Design Solutions</a></li>
<li><a onfocus='this.blur()' href="#">Shop Fitting</a></li>
<li><a onfocus='this.blur()' href="#">Point of Sale</a></li>
<li><a onfocus='this.blur()' href="#">Brand Identity</a></li>
<li><a onfocus='this.blur()' href="#">Promotion</a></li>
<li class="sep"></li>
<li><a onfocus='this.blur()' href="#">Audit</a></li>
<li><a onfocus='this.blur()' href="#">Consultancy</a></li>
<li class="sep"></li>
<li><a onfocus='this.blur()' href="#">APC Group</a></li>
<li><a onfocus='this.blur()' href="#">Manufacture</a></li>
<li><a onfocus='this.blur()' href="#">Tooling</a></li>
<li class="sep"></li>
<li><a onfocus='this.blur()' href="#">Gallery</a></li>
<li><a onfocus='this.blur()' href="#">Partners</a></li>
<li><a onfocus='this.blur()' href="#">Query Form</a></li>
<li class="sep"></li>
</ul>
</div>
</div>
</div><!-- END SIDEBAR1 -->
</div>
<!--body div-->
<!-- FOOTER -->
<div class="footerBlock">
<!-- THIS IS WHERE LOGO SHOULD GO -->
<!-- BOTTOM NAVIGATION LINKS -->
<ul>
<li><a onfocus='this.blur()' href="www.d2s.biz/home.html">Home</a> | </li>
<li><a onfocus='this.blur()' href="pages/sourcing.html">Sourcing</a> | </li>
<li><a onfocus='this.blur()' href="pages/procurement.html">Procurement</a> | </li>
<li><a onfocus='this.blur()' href="pages/innovation.html">Innovation</a> | </li>
<li><a onfocus='this.blur()' href="pages/interior.html">Interior Solutions </a> | </li>
<li><a onfocus='this.blur()' href="pages/design.html">Design Solutions</a> | </li>
<li><a onfocus='this.blur()' href="pages/shopfit.html">Shop Fitting </a> | </li>
<li><a onfocus='this.blur()' href="pages/pos.html">Point of Sale </a></li>
<li><a onfocus='this.blur()' href="pages/brand.html">Brand Identity </a> | </li>
<li><a onfocus='this.blur()' href="pages/promotion.html">Promotion</a> | </li>
<li><a onfocus='this.blur()' href="pages/audit.html">Audit </a> | </li>
<li><a onfocus='this.blur()' href="pages/consult.html">Consultancy</a> | </li>
<li><a onfocus='this.blur()' href="pages/apc.html">APC Group </a> | </li>
<li><a onfocus='this.blur()' href="pages/manufacture.html">Manufacture</a> | </li>
<li><a onfocus='this.blur()' href="pages/tooling.html">Tooling</a> | </li>
<li> <a onfocus='this.blur()' href="pages/gallery.html">Gallery</a> | </li>
<li><a onfocus='this.blur()' href="pages/partners.html">Partners</a> | </li>
<li><a onfocus='this.blur()' href="pages/query.html">Query Form</a> </li>
</ul>
<div class="copyrightMessage">Copyright (c) 2007 D2S. All rights reserved.</div>
<br />
</div>
</body>
</html>
*********** CSS *******************
body {color:#000000; margin:0px;background-color:#c0c0c0;background-image:url(/shared/img/bkgrnd_grad.gif);
scrollbar-face-color: #F0F0F0; scrollbar-highlight-color: #F0F0F0;
scrollbar-3dlight-color: #B0B0B0; scrollbar-darkshadow-color: #B0B0B0;
scrollbar-shadow-color: #F0F0F0; scrollbar-arrow-color: #909090; scrollbar-track-color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: trebuchet ms, myriad, tahoma, verdana;
font-size: 12px;
color: #000000;
background: #ffffff url(img/site-bg.gif);
}
.bodyDiv {width:900px;background-color:#fff;border-style: none;
background: #ffffff url(img/sitewrapper-bg.gif) repeat-y;
margin:auto;
padding-top: 0px;
padding-bottom:0px;
height: 100%;
}
.bodyDiv p {margin:0px;}
.pageTitle_obs
{
overflow: hidden;
margin-bottom: 5px;
}
.pageTitle
{
font-family: trebuchet ms;
font-size: 19px;
font-weight: bold;
color:black;
}
.roundBigBullet
{
background: url(/shared/img/layoutimages/round-hollow-bullet.jpg) no-repeat;
padding-left: 18px;
color: black;
}
form
{
margin:15px;
}
img
{
border: 0px;
}
/*******HEADER STUFF*************************/
.headerWrapper
{
width: 100%;
text-align: center;
background: #323f49 url(img/header-bg.gif) repeat-x;
}
.headerBlock
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 900px;
height: 52px;
overflow: hidden;
}
.headerBlock #leftHeaderColumn
{
float: left;
padding-left: 50px;
color: #dddddd;
font-size: 14px;
cursor: default;
}
.headerBlock #rightHeaderColumn
{
float: right;
padding-right: 80px;
}
.headerBlock #rightHeaderColumn a, .headerBlock #rightHeaderColumn a:active, .headerBlock #rightHeaderColumn a:visited
{
display: block;
float: left;
margin: 20px 0px 15px 50px;
font-size: 10px;
color: #e8eaee;
}
.headerBlock #rightHeaderColumn a:hover
{
text-decoration: underline;
color: #5FA3CE;
}
.headerBlock #rightHeaderColumn span
{
display: block;
float: left;
margin: 15px;
margin-top: 20px;
font-size: 11px;
color: #5FA3CE;
cursor: default;
}
/*********headbar stuff****/
.headbar {background: url(img/MenuBarBackground.gif) repeat-x;
margin: auto;
width: 852px;
height: 20px;
}
/***********END HEADBAR STUFF***************/
.wideSpotlightWrapper
{
width: 100%;
text-align: center;
background: #323f49 url(img/site-bg-dark.gif) 1px 0px;
}
.wideSpotlightBlock
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 900px;
background: #ffffff url(img/sitewrapper-bg-dark.gif) 0px 1px;
overflow: hidden;
}
.wideSpotlightPadding
{
padding-left: 24px;
padding-right: 23px;
height: 202px;
overflow: hidden;
}
.wideSpotlightPadding #wideSpotlightLeftImage
{
float: left;
width: 183px;
height: 202px;
background:url(img/home-spotlight-left.jpg);
overflow: #000;
}
.wideSpotlightLeftText
{
color: #ffffff;
font-size: 11px;
padding: 15px 0px 10px 5px;
line-height: 20px;
}
.wideSpotlightLeftText div
{
font-weight: bold;
margin-bottom: 10px;
}
.wideSpotlightPadding #wideSpotlightRightImage
{
float: right;
width: 670px;
}
/*************SIDEBAR 1 STYLES**************/
#sidebar{
float: left;
margin-left: 30px;
padding-right: 5px;
width: 170px;
border-right: 1px dotted #9B9B9B;
background: #ffffff;}
#sidebar .bottomlogo {background-image:url(img/d2sbottomsm.jpg);
background-repeat:no-repeat;
height: 175px;
margin-left: 0px;
margin-bottom:0px}
#sidebar-right{
float: right;
margin-right: 30px;
padding-right: 5px;
width: 150px;
border-left: 1px dotted #9B9B9B;
text-decoration: none;
background: #ffffff;
}
/***********MENU MAIN ********************/
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menuback {background-color: #3668a4;
width: 165px;
margin: 5px 10px 40px 5px;
}
#menu {
width: 150px;
margin: 8px;
font-size: 90%;
text-align: left;}
#menu .menuhead {font-size: 120%;
text-align: center;
font-weight: bold;
color: #fff;
letter-spacing: 6px;
border-bottom: 1px dotted #FFFFFF;
padding: 5px;
margin-bottom: 5px;
}
#menu li a {
height: 22px;
voice-family: "\"}\"";
voice-family: inherit;
text-decoration: none;
border-bottom:1px dotted #688EBB;
}
#menu li a:link, #menu li a:visited {
color: #FFF;
display: block;
background: url(img/menu/menufinal.gif);
padding: 2px 0 0 30px;
}
#menu li a:hover {
color: #FFF;
background: url(img/menu/menufinal.gif) 0 -24px;
padding: 2px 0 0 30px;
}
#menu .sep { margin: 5px 0 -10px 0;
border-top: 1px dotted #FFFFFF;
padding: 2px 0 0 30px;
color: #FFFFFF;
height: 10px;}
/*************NAVIGATION STYLES **************/
#mainnav{
padding-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
list-style:none;
text-align:left;
margin-top: 10px;
background-color: #3668a4;}
#mainnav li { padding: 3px;
text-align:left;
text-decoration: none;
list-style: none;
display: block;
border-bottom:1px dotted #688EBB;}
#mainnav ul {text-decoration: none;
list-style: none;}
#mainnav a:link, a:visited {color: #fff;
text-decoration: none;
}
#mainnav a:hover, a:active {color:#66CC33;
background-color: #2e3b4a;
display: block;
text-decoration: none;
}
/**********FOOTER STYLES*************/
.footerBlock
{
border-top: solid 1px #edeef0;
width:900px;background-color:#fff;
background: #ffffff url(img/sitewrapper-bg.gif) repeat-y;
text-align: center;
font-size: 11px;
color: #9b9b9b;
padding-top: 13px;
clear:both;
}
.footerBlock li {display: inline;}
.footerBlock a, .footerBlock a:visited, .footerBlock a:active
{
color: #9b9b9b;
}
.footerBlock a:hover
{
color: #014897;
text-decoration: underline;
}
.copyrightMessage
{
clear: both;
font-size: 10px;
color: #9b9b9b;
margin-top: 10px;
}
/*************** OTHER STUFF ***********************/
.contentWrapper
{
width: 100%;
text-align: center;
}
.contentBlock
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 900px;
background: #ffffff url(img/sitewrapper-bg.gif) repeat-y;
padding-bottom: 10px;
}
.contentBlockPaddingNoMargin
{
margin-left: 25px;
margin-right: 24px;
}
.contentBlockPadding
{
margin-left: 39px;
margin-right: 38px;
padding-top: 13px;
padding-bottom: 13px;
}
.sidebarColumn
{
float: left;
width: 185px;
overflow: hidden;
}
.contentColumn
{
float: right;
width: 615px;
overflow: hidden;
color: #5b5b5b;
font-size: 11px;
}
.clearColumn
{
font-size: 1px;
height: 1px;
clear: both;
overflow: hidden;
}
.aboutText
{
margin-left: 0px;
margin-right: 20px;
font-size: 11px;
color: #5b5b5b;
margin-bottom: 15px;
line-height: 18px;
text-align: justify;
}
.aboutText_about
{
margin-left: 38px;
margin-right: 20px;
font-size: 11px;
color: #5b5b5b;
margin-bottom: 15px;
line-height: 18px;
text-align: justify;
}
Replies
Replied 20 Jun 2007 21:42:21
20 Jun 2007 21:42:21 Alan C replied:
if you're developing on a pc try notepad++ - not wysiwyg but it matches up lots of different types of opening and closing brackets etc in code, produces great looking listings and you can customise the colours etc, it's opensource so there could be other versions