Paul the page went all wonky 
I honestly can’t understand why but probably has to do with the order of the HTML, unless I’m wrong ?
There was a typo in my post #40 (I missed out the url part when I cut and pasted) but you seem to have the wrong images inserted in some places anyway.
You also have the old content box image being repeated over the other images plus you introduced some extra typos n the css.
I notice that you have wrapped all the text with the one repeating image and capped the whole lot off top and bottom.
I though that you wanted multiple sections (as in your image) so you would need to wrap each paragraph or section in the structure I have given to get that effect.
You will also need to make better images that the ones you have made for those boxes. You will either have to match the page background or you you will have to make them transparent. At present you seem to have made them on a white background which will not match the page and spoil the effect.
Note that once again the outer element is smaller than the inner element and you need to remove the padding from the main content and extend the width by the same amount and then apply the padding to the inner elements otherwise there isn’t enough room for the background images on those content boxes.
e.g.
#content {
[B] width:440px;
padding:70px 0 1px 0;[/B]
text-align:left;
float:left;
}
.content-top, .content-base {
width:389px;
height:25px;
background:red url(http://www.thecreativesheep.ca/pagehome/images/Top-Content-Box.jpg) no-repeat 0 0;
overflow:hidden;
[B] clear:both;
margin:.5em 0 0 60px;[/B]
}
.content-base {
background:url(http://www.thecreativesheep.ca/pagehome/images/Bottom-Content-Box.png) no-repeat 0 0;
[B] margin:0 0 .5em 60px;[/B]
}
.content_boxes {
width:369px;
background:url(http://www.thecreativesheep.ca/pagehome/images/Middle-Content-Box.jpg) repeat-y 0 0;
[B] margin:0 0 0 60px;
padding:1px 10px;[/B]
}
Here is a complete revision again although the changes are too many to mention so you will need to copy this and save it locally and then run it while online to see what it looks like. If it looks like what you want then replace your code with mine in whole.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="http://www.thecreativesheep.ca/pagehome/reset.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<style type="text/css">
body {
line-height:1.2;
background:#afabac url(http://www.thecreativesheep.ca/pagehome/images/bg.gif) repeat-x 0 0;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
text-align:center;
padding:25px 0 20px;
}
#wrap {
width:800px;
margin:auto;
text-align:left;
}
#maincol {
width:800px;
background: url(http://www.thecreativesheep.ca/pagehome/images/middle.gif) repeat-y 4px -200px;
}
#content {
width:440px;
padding:70px 0 1px 0;
text-align:left;
float:left;
}
.content-top, .content-base {
width:389px;
height:25px;
background:red url(http://www.thecreativesheep.ca/pagehome/images/Top-Content-Box.jpg) no-repeat 0 0;
overflow:hidden;
clear:both;
margin:.5em 0 0 60px;
}
.content-base {
background:url(http://www.thecreativesheep.ca/pagehome/images/Bottom-Content-Box.png) no-repeat 0 0;
margin:0 0 .5em 60px;
}
.content_boxes {
width:369px;
background:url(http://www.thecreativesheep.ca/pagehome/images/Middle-Content-Box.jpg) repeat-y 0 0;
margin:0 0 0 60px;
padding:1px 10px;
}
#content p {
margin:0 0 1em;
line-height:1.5;
}
.top, .base {
background:url(http://www.thecreativesheep.ca/pagehome/images/top.gif) no-repeat 0 0;
clear:both;
width:520px;
height:23px;
}
.base {
background:url(http://www.thecreativesheep.ca/pagehome/images/base.gif) no-repeat 0 0;
clear:both;
width:525px;
height:28px;
margin: 0 0 0 20px;
}
.bg_sidebar {
background-color: #3300FF;
height: 250px;
margin: 200px 0 0;
width: 200px;
}
#sidebar {
float: right;
background:#f2f2f2;
width:345px;
height: 438px;
margin-top:27px 0 0;
background-image: url(http://www.thecreativesheep.ca/pagehome/images/Bio_Boxes_03.png);
}
#header {
width:528px;
height:236px;
background: url(http://www.thecreativesheep.ca/pagehome/images/header2.jpg) no-repeat 0 0;
position:relative;
}
#masterhome {
position: relative;
top: 60px;
left: 85px;
width: 125px;
height: 125px;
}
#masterhome a {
display: block;
width: 125px;
height: 125px;
}
ul#nav {
position:absolute;
top:180px;
left:225px;
margin:0;
z-index:75;
}
#searchbox {
background-image: url(http://www.thecreativesheep.ca/pagehome/images/searchbox.gif);
height: 17px;
width: 187px;
z-index: 99;
float: right;
margin: 85px 47px 0 0;
display: inline;
clear: both;
}
#nav li, #nav li a {
width:60px;
height:25px;
float:left;
position:relative;
}
#nav li.about {
width:70px;
margin-top:-7px;
}
#nav li.about a {
width:70px;
}
#nav li.back {
width:130px;
margin:-18px 0 0;
}
#nav li.basepage {
width:130px;
height:90px;
}
#nav li.basepage a {
width: 100px;
height:100px;
}
#nav li.back a {
width:142px;
}
#nav li.back a:hover {
background: green url(http://www.thecreativesheep.ca/pagehome/headerhover.jpg) -352px -162px;
}
#nav li a span {
position:absolute;
left:-99em;
top:-999em
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix: {
display:inline-block;
}
/* mac hide \\*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide */
</style>
<!--[if lte IE 7]>
<link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" media="screen,projection" type="text/css">
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.thecreativesheep.ca/pagehome/js/iehover.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="wrap">
<div id="header">
<h1><span class="hide">WIP Creative Biology of animation</span></h1>
<div id="masterhome"><a href="#"></a></div>
<ul id="nav">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About Me</span></a></li>
<li class="back"><a href="#"><span>Back(News news)</span></a></li>
<li class="basepage"><a href="#"><span>BasePage</span></a></li>
</ul>
<div id="searchbox"></div>
</div>
<div id="maincol" class="clearfix">
<div id="content">
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="content-base"></div>
<div class="content-top"></div>
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
<div class="content-base"></div>
</div>
<div id="sidebar">
<div class="bg_sidebar">
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
</div>
</div>
</div>
<div class="base"></div>
</div>
</body>
</html>
The page link has been updated here, I see that I’m going to have to remove the drop shadow from the boxes as the blur from the shadow looked nice on the photoshop mock-up but doesn’t exchange well when put in code.
There is a space between each box, and a white border edge, do you know what is causing this, Is it my slice ? I had cut the image as close to precision as possible and the top mock up text is not within the box and for some reason the width of the content boxes gets cut off yet the width is 389 px the exact image of the content box. And the text must fit within the content boxes based on how much or how little the content boxes will shrink or expand to whatever size is necessary, but from my information this can’t be done alone with CSS.
I think I answered all your questions in my previous post
I’d only be repeating myself nearly word for word here.
I’ll repeat this though:
Not only that you are modifying the size to 300px and therefore it is too small.
.content_boxes {
[B]background-image:url(images/content_box_03.png);[/B]
overflow:hidden;
[B]width:300px;[/B]
}
That whole rule is a duplicate and should be removed.
Other issues were addressed in my previous post so refer to that.
Paul, I did and checked each style and almost each line of HTML. If you take a look at this image you’ll see I have circled the problem areas or what is not going right. And I can’t honestly pin point what could be causing this, the code the image ?
Look at my previous post as to why the image isn’t fitting in the boxes.
here’s another clue:
#content {
width:440px;
padding:70px 0px 1px 0px;
text-align:left;
float:left;
}
.content-top, .content-base {
width:389px;
height:25px;
background:[B]url(h[/B]ttp://www.thecreativesheep.ca/page_adjust/images/Top-Content-Box.jpg) no-repeat 0 0;
overflow:hidden;
clear:both;
margin:.5em 0 0 60px;
}
.content-base {
background:[B]url([/B]http://www.thecreativesheep.ca/page_adjust/images/Bottom-Content-Box.png) no-repeat 0 0;
margin:0 0 .5em 60px;
}
.content_boxes {
width:369px;
background:[B]url(ht[/B]tp://www.thecreativesheep.ca/page_adjust/images/Middle-Content-Box.jpg) repeat-y 0 0;
margin:0 0 0 60px;
padding:1px 10px;
}
[B]/*
* html #content {
height:400px
}
*/[/B]
/*....remove this block ...
.content_boxes {
background-image:url(images/content_box_03.png);
overflow:hidden;
width:300px;
}
*/
#content p {
margin:0 0 1em;
line-height:1.5;
}
I don’t understand why the background images for the content are not loading up ? They are 24-bit PNG images and why there still persists that white space ? And why the top paragraph content is not aligned.
The content is misplaced because you have a missing quote here after “content-top” that I have put back in about 5 times now.
</div>
<div id="maincol" class="clearfix">
<div id="content">
[B] <div class="content-top"></div>[/B]
<div class="content_boxes">
There is no image called this:
http://www.thecreativesheep.ca/page_adjust/images/content-mid.jpg
I believe it should be this:
http://www.thecreativesheep.ca/page_adjust/images/Middle-Content-Box.jpg
You have the wrong path and still a missing url.
.content-top, .content-base {
width:389px;
height:25px;
background: url(http://www.thecreativesheep.ca/page_adjust/images/Top-Content-Box.jpg) no-repeat 0 0;
overflow:hidden;
clear:both;
margin:.5em 0 0 60px;
}
.content-base {
background: url(http://www.thecreativesheep.ca/page_adjust/images/Bottom-Content-Box.png) no-repeat 0 0;
margin: 0 0 .5em 60px;
}
.content_boxes {
width:369px;
overflow: hidden;
background:url(http://www.thecreativesheep.ca/page_adjust/images/Middle-Content-Box.jpg) repeat-y 0 0;
margin: 0 0 0 60px;
padding: 1px 10px;
}
Type carefully and check your code.
You still need better images for those shadows. Either match the background paper or use transparent shadows.
Ohhh, now I have it fixed (I hope)
I now see what you mean, after the coding was fixed the content box problem dawned on me There is white showing in the background I’m going to take a look at the image it could be because it was saved in JPEG/GIF that is causing it.
Alright, how do I get Style-ID:SideBar to have it placed behind the Style-ID:MainCol the entire image will be see but parts will fall behind it, and how come since it is a PNG-24 FireFox is not showing the transparency for that image ?
If you want it transparent then you will need to create a transparent png which means that there should be no background behind the image itself. It looks like you have a background behind the image. The shadows should be transparent with no colour behind until they are placed on the background of the page.
The base element is showing more or less ok so just do the same as you did there. I can’t help you with slicing as that is your job.
It also looks like you still have the wrong path to the image e.g. url(/images… Is that the correct path?
Alright, how do I get Style-ID:SideBar to have it placed behind the Style-ID:MainCol the entire image will be see but parts will fall behind it, and how come since it is a PNG-24 FireFox is not showing the transparency for that image ?
Well the transparency would be an option in your paint package. Which image are you talking about exactly?
I think I’d need to see the psd mock up again as I’m not sure what you want to accomplish here. If you want overlapping images then show behind other images then you either cut them out exactly as they should look and fix them exactly in place.
Or you make opaque images for everything and set the stacking contexts accordingly. Without a look at the end result it’s hard to imagine what you want it to look like.
Not everything is possible and if it’s possible it may not be feasible so you have to make sure what you want is workable and usable (I may copyright that sentence :)) .
If you want it transparent then you will need to create a transparent png which means that there should be no background behind the image itself. It looks like you have a background behind the image. The shadows should be transparent with no colour behind until they are placed on the background of the page.
The base element is showing more or less ok so just do the same as you did there. I can’t help you with slicing as that is your job.
It also looks like you still have the wrong path to the image e.g. url(/images… Is that the correct path?
I’m going to check the images and the paths again and do the changes that probably are needed.
Well the transparency would be an option in your paint package. Which image are you talking about exactly?
I think I’d need to see the psd mock up again as I’m not sure what you want to accomplish here. If you want overlapping images then show behind other images then you either cut them out exactly as they should look and fix them exactly in place.
Or you make opaque images for everything and set the stacking contexts accordingly. Without a look at the end result it’s hard to imagine what you want it to look like.
Not everything is possible and if it’s possible it may not be feasible so you have to make sure what you want is workable and usable (I may copyright that sentence ) .
The image I was talking about was the side image that has the blue squares as it’s not transparent. The mock up image you will see, and I think instead of placing the image that has blue squares in the background as I mentioned I think that just cutting it as a specific point may do the job as well take a look at the original design and decide if I may be right
I had forgotten as well the “title” box before getting to the side part, you will see on the updated page the black box for each content_box at the top.
Hi,
I’m not sure what you want done with that subject_title box. You seemed to have placed it ok except that it needs a margin left to line it up.
If you want that bluish round image that is at the side to go under the main content then you will nee to apply it as a background image to #wrap instead. You will of course need to redo it as a transparent png because you have cut it with a white background.
You seem to have the correct images for your content box at last
If you take a look at the way the page is when I try to add a font to the style:Subject_Title and some things shift or don’t align no longer ?
Edit: Problem fixed code error. How do you make the text larger what is the best setting ?
Are you sure to apply the bluish round image to that style sheet works ? I’ve tried it locally and it’s all over the place that is with no-repeat in place as well ?
Edit:
He fixed it.
Place the bluish round image in the page and we will tell you what went wrong :).
You can either say percentage font sizes or em font sizes (which are the same thing, just different decimals :)).
The font-size property can increase/decrease text size, e.g. font-size:1em;
I have uploaded the image, how come it’s not loading ?
Hi, you use background-image but then you mix in the background-repeat and background-position in there as well. background-image can’t accept all those values and as a result it isn’t used
#wrap {
width:800px;
margin:auto;
text-align:left;
background-image: url(images/bio_image.png) no-repeat 0 0;
}
Change it from “background-image” to “background” and see if that helps
Worked, take a look where the image is.
The problem right now is that children backgrounds will always appear on top of the parents. That’s just the way it is, which is logical if you think about it :).
Since most of your children have background images set, making it nearly impossible to get the image in the right spot (I don’t know where it is even supposed to go), I’d recommend removing the background image on #wrap and placing it on an empty absolutely positioned elmenet (placed to perfection)