Problem with background in div

HTML & CSS
1

Hello!
On apdiv7 the div on the right does not fill me all the background has some thin on the right side left without background
(see picture) <broken link> If I add 2px then he lowers it down
(see picture) <broken link>
I want that the page to look good also dreamweaver software and browsers what to do?
Sends the code file http://jsfiddle.net/6VwNU/
Thank galia

2

Hi, welcome to Sitepoint :slight_smile:

The links to your images are not working I’m afraid however from looking at your ‘fiddle’ it looks as though apDiv7 needs to be 397px wide and not 395px. The reason for this is that your container is 960px wide and the three divs widths + borders need to add up to 960px.

e.g.
apDiv1 = 480px
apDiv6 = 77px + 3px border-left + 3px border-right
apDiv7 = 397px

480 + 77 + 3 + 3 + 397 = 960

Note that you are using 'keywords for the border-width (thin,medium and thick) and that is unreliable because browsers can make them any width they think fit as long as there is a relationship between the three (the specs allow this). Therefore for cross browser consistency use px instead (1px,2px,3px).

However it might be better to start this page again as you are using outdated techniques and bad practices and it looks like a very old dreamweaver version by the doctype and meta tag you are using. Remember that Dreamweaver is not a browsers so design view is useless for CSS. View the site in a real browsers and never use design view. :slight_smile:

The number one rule when coding a page is that you rarely want to set fixed heights for containers that will be holding text content and you will almost never make heights equal by setting fixed heights on floated columns. Content should dictate the height because you never know what the height will be as users may have a different text size to the one you set or may have zoomed the layout.

Don’t use classnames like apDiv1,apDiv2 etc as they have no real meaning and don’t help with the build process. Use class names like ‘nav’, ‘main’, ‘sidebar, ‘secondary-content’, ‘header’, ‘footer’ etc. The classnames should describe the content in a useful way and not by its colour or by other specifics (e.g. don’t use right-column’ because on some pages you may want to move it to the left so use ‘sidebar’ or something more meaningful instead.)

Use a current doctype and not an old transitional doctype as that is from last century.

Don’'t use all that DW inline JS to do simple rollovers on your menu as that can be done with simple css in a few lines of code.

If you have a design of what you are trying to achieve we can give you some current best practices?

BTW Don’t worry about all my comments above as they are the same mistakes that everyone makes so don’t feel bad about making them :slight_smile:

3

hello!
thanks for your replay
i used dreamwver cs6 in just tradisional 1.0 becuse that what i learned and i do’nt think that i can get to heigher doctype it’s one of my final site project that i have to give what to do?
i will send you again the pictures
http://www.upf.co.il/file/881675758.html
http://www.upf.co.il/file/560583137.html
thanks galia

4

Hi,

Please read my reply again as the pictures you have sent are of Dreamweaver’s Design view. Design view is not a browser and Dreamweaver simply cannot handle css in design view and you should never use it. Use a real browser to test your code and write your code in the DW code editor (which actually is very good unlike its design view).

It is pointless to use design view as any indication of what a site will look like in a real browser.

I don’t think I can say that any clearer :slight_smile:

397px is the correct width as shown in my example.

Don’t use the transitional doctype as by its name implies it is transitional and you should be using a strict doctype now or the new html5 doctype which will ensure that browsers render in full standards mode. There simply is no reason to use transitional unless you are writing old fashioned code or have legacy code to support which is clearly not the case as you are just creating this page now.

5

It’s a simple cut and paste of this at the top of your pages:

<!DOCTYPE html>
6

hello!
i stay with the tradisional 1.0
i cange the width of apfiv7 to 397px and it move apdiv6 down what to do?
sending files
the picture after i save on crome
http://www.upf.co.il/file/504624710.html
the code

thanks galia

7

The image hosting service requires a waiting period before the image can be downloaded,
it also sends a pop-up ad in a new window. I suggest you find a new image hosting service.

Your fiddle code does not show a problem in Firefox or Chrome or Opera on my PC.

This is your fiddle code with background-colors and placeholder images added.


<!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=windows-1255" />
<title>Untitled Document</title>
<style type="text/css">
#container {
    position: relative;
    width: 960px;
    height: 1200px;
    border: thick solid #000;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 4px;
    z-index: 1; 
}
#header {
    position: relative;
    width: 960px;
    height: 146px;
    z-index: 2;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    border-bottom-style: solid;
    border-bottom-width: medium;
    border-bottom-color: #ac1c33;
    margin-right: auto;
    margin-left: auto;
    left: 0px;
    top: 0px;
    background-image: url(imges/html%20images/canstockphoto178167560_comp.jpg);
}
#tab {
    position: relative;
    width: 960px;
    height: 54px;
    background-color: #57010c;
    border-bottom-width: thin;
    border-bottom-style: solid;
    text-align: left;
    ;
    z-index: 4;
}
#apDiv1 {
    background-color:#fdd;
    position: relative;
    width: 480px;
    height: 720px;
    background-image: url(imges/html%20images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
    direction: rtl;
    float: left;

}
#apDiv6 {
    background-color:#dfd;
    position: relative;
    width: 77px;
    height: 714px;
    border: double #640c1a;
    background-image: url(imges/html%20images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
    float: left;
    z-index: 9;
}
#apDiv7 {
    background-color:#ddf;
    position: relative;
    width: 397px;
    height: 721px;
    background-image: url(imges/html%20images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-2style.jpg);
    float: right;
    z-index: 10;
}
#apDiv8 {
    background-color:#dff;
    position: relative;
    width: 960px;
    height: 71px;
    float: left;
    background-image: url(imges/html%20images/canstockphoto1781675600_comp.jpg);
    z-index: 8;
}
#apDiv2 {
    background-color:#ffd;
    position: relative;
    width: 960px;
    height: 209px;
    float: left;
    background-image: url(imges/html%20images/canstockphoto178167567_comp.jpg);
    z-index: 6;
}
</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('imges/html images/home-4.jpg','imges/html images/about-4.jpg','imges/html images/galleries-3.jpg','imges/html images/contect-4.jpg')">

<div id="container">
  
  <div id="header">
    
  </div>
  <div id="tab">
    <table width="940" border="0" cellpadding="0" cellspacing="1">
      <tr>
        <td height="52" scope="col"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contect','','imges/html images/contect-4.jpg',1)"><img src="http://placehold.it/235x52" width="235" height="52" id="contect2" /></a></td>
        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('galleries','','imges/html images/galleries-3.jpg',1)"><img src="http://placehold.it/235x52" width="235" height="52" id="galleries2" /></a></td>
        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','imges/html images/about-4.jpg',1)"><img src="http://placehold.it/235x52" width="235" height="52" id="about2" /></a></td>
        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','imges/html images/home-4.jpg',1)"><img src="http://placehold.it/235x52" width="235" height="52" id="home2" /></a></td>
      </tr>
    </table>
  </div>
  
  <div id="apDiv1"></div>
  <div id="apDiv7"></div>
  
  <div id="apDiv6"></div>
  
  <div id="apDiv8"></div>
  <div id="apDiv2"></div>
</div>

</body>
</html>
8

Hi,

I get the same results as Ron above from your fiddle. You will need to put the site online and then send a screenshot of what you see. Looking at your image it looks as though your borders are too wide on that element as the element that has dropped down is 4px to big to fit in the space on your image. However, that doesn’t match up with the code in your fiddle.

I do notice that you again have not set the px width of the borders which you should do e.g. (border:3px double red). I also notice that you have some stray semi colons in the css so tidy them up also.


	text-align: left;
	;
	z-index: 4;

Until we see your exact page we will be going around in circles so put your demo online so that we can test on the real page in question. If you can’t put it online then use codepen to make a demonstration as it is better than a fiddle.

Also send us a screenshot of what your actual fiddle looks like in chrome.

9

hello!
i think it’s good now i do’nt no why mabe it’s the broder width but i have to askif i want a wider border in apdiv6 what can i do i am sending to you files to Check up
picture after saving in explorer

picture after saving in chrome

the code
http://codepen.io/anon/pen/xoFnr

thanks galia

10

If, you want a wider border then you must then reduce the width of that element by the corresponding amount.

e.g. If you increase the border from 3px to 5px then you need to reduce the width of the element by 4px (2px extra border width on each side):


#apDiv6 {

[B]	border: 5px double #640c1a;[/B]
[B]	width: 73px;[/B]

}
11

hello!
now i’ts good thank for your help
galia

12