PDA

View Full Version : Background images slices


Hunter86
12-05-2008, 02:05 PM
Hello im a new member, have to say great site and forum !!
I have brought 3 images slices together using css in divs to create my overall background image and used the middle div(<div id="MainContainer">) as the content holder with a repeat so it can grow with content and when a user increases font size .The content is in a div inside the MainContainer (<div class="contentContainer">) it is all okay apart from when the browser is resized so the view port is a smaller area, then the central content div (<div id="MainContainer">) moves left out of its container but the content has stayed in place. I have tried lots of different css to try and fix this but im just not getting it, the top and bottom containers are fine and the only difference is they don’t have a repeat and the width is set? I have tried setting the width on the content div but get no joy
Can any one help me fix this or know what’s going on? I am a novice and am studying at the moment there is no live site as it is a project to demonstrate layout and colour usage so this wouldn’t effect it really but i just would like things to work properly
thanks
[HR]

<!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>Untitled Document</title>
<link href="styleema.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Geneva, sans-serif;
}
-->
</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/canine-capersbuttons-over_08.gif','images/canine-capersbuttons-over_10.gif','images/canine-capersbuttons-over_11.gif','images/canine-capersbuttons-over_12.gif','images/canine-capersbuttons-over_13.gif')">
<div id="main">

<div id="container">

<div id="TopContainer">
<div id="header"> <ul id="menu">

<li><a href="ema-1.html">Home</a></li>
<li>Walks</li>
<li>Special Events</li>
<li>News</li>
<li>Contacts</li></ul></div>
</div></div>

<div id="MainContainer">

<div class="contentContainer">
<div id="nav"><img src="images/canine-capers-buttons_08.gif" alt="Home Link" width="153" height="26" id="Image1" onmouseover="MM_swapImage('Image1','','images/canine-capersbuttons-over_08.gif',1)" onmouseout="MM_swapImgRestore()" /><img src="images/canine-capers-buttons_10.gif" alt="Walks Link" width="153" height="24" id="Image2" onmouseover="MM_swapImage('Image2','','images/canine-capersbuttons-over_10.gif',1)" onmouseout="MM_swapImgRestore()" /><img src="images/canine-capers-buttons_11.gif" alt="Special Events Link" width="153" height="28" id="Image3" onmouseover="MM_swapImage('Image3','','images/canine-capersbuttons-over_11.gif',1)" onmouseout="MM_swapImgRestore()" /><img src="images/canine-capers-buttons_12.gif" alt="New Link" width="153" height="26" id="Image4" onmouseover="MM_swapImage('Image4','','images/canine-capersbuttons-over_12.gif',1)" onmouseout="MM_swapImgRestore()" /><img src="images/canine-capers-buttons_13.gif" alt="Contacts Link" width="153" height="29" id="Image5" onmouseover="MM_swapImage('Image5','','images/canine-capersbuttons-over_13.gif',1)" onmouseout="MM_swapImgRestore()" /></div><div id="content">

<h2>Canine Capers, Surrey's Dog Walker Website </h2>
<p align="justify">Welcome to canine Capers the home of the surreys dog walkers. This site is here as your local resource about our walks and special events that are held on a regular basis from pet fairs to dog beauty contests. <img src="images/canine-capers_picture.jpg" alt="Dog walker photo at horsell common" width="170" height="155" align="right" />We are a group of people who love to walk our beloved pets in the commons and landmarks within the surrey area and sometimes we even have a picnic if the weathers good enough ! The best thing about canine capers is anyone with a dog is a welcomed member and its FREE all we ask is that your dog is reasonably behaved and you bring your own poop bags. Members do have the opportunity to purchase a Canine capers badge if they wish to show the pride of being one of our members these can purchased any time from your walk leader or when you fill out a registration form </p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>

<div id="BottomContainer">&nbsp;
<p> <ul id="menu2"><li><a href="ema-1.html">Home</a></li>
<li>Walks</li>
<li>Special Events</li>
<li>News</li>
<li>Contacts</li></ul>&nbsp;</p>
</div>


</div>

</div>

</body>
</html>


body {

margin:0px; padding:0px;
background-color:#464646;
background-repeat:repeat;
}
.container {

width:956px;
height:614px;
margin:0 auto;
position:relative;
}
#header {
background-image:url(images/canine-capers_04.gif);
background-repeat:no-repeat;
width:927px;
height:106px;
margin:0 auto;

}
#TopContainer {
text-align:center;
height:;
width:956px;
background: url(../ema/slice/images/canine-capers_04.png) no-repeat top;
margin:0 auto;
padding:20px
}


#MainContainer {
text-align:center;
background: url(../ema/slice/images/canine-capers_06.png) repeat-y center;

}

.contentContainer {
padding:1em;
margin:0 auto;
width:956px;
text-align:center;
}

.left {text-align:left}

#BottomContainer {
min-height:10px;
background: url(../ema/slice/images/canine-capers_07.png) no-repeat bottom;
margin:0 auto;
width:956px;
}


ul#menu {
margin:0;
padding:0;
rightright:0px;
position:absolute;
left: 640px;
top: 94px;
}
ul#menu li {
display:inline;
margin-left:6px;
}

ul#menu li a {
font-weight:bold;
font-size:10px;

}
#nav {
width:180px;
padding-left:25px;
float:left;
margin-top:125px;
}

#content {
float:right;
width:700px;
margin-right:20px;
margin-top:25px;
padding: 15px;
}

#main #MainContainer .contentContainer #content p img {
padding: 15px;
}
ul#menu2 {
margin:0;
padding:0;
rightright:0px;
text-align:center;
}

ul#menu2 li {
display:inline;
margin-left:6px;
}

ul#menu2 li a {
font-weight:bold;
font-size:10px;}

coloeagle
12-05-2008, 02:42 PM
Looking over your code it appears you have closed a div prematurely. Remove the closing div tag just before the empty paragraph tags you have and check your page.

Hunter86
12-05-2008, 03:08 PM
Hi thanks for your reply!
your right i have, now when i remove the premature closing div tag and close it properly after the content where it should be i loose the background image for the Maincontent div?? arr what have i done wrong ive made a right mess havnt i

Hunter86
12-05-2008, 03:38 PM
i have got the page to display properly by removing the Float property on the content div as the float removes it out the normal doc flow right? which is why the background dissaperd as it didnt see the content to make it expand yea?
but i still have the problem of the content div moving when the browser is resized to small viewport
i have attched the file as this mayhelp
cheers again

coloeagle
12-05-2008, 05:00 PM
Well you have an issue with the size of your header image when it comes to resizing to a smaller browser. This may be another issue though.

For now where are you wanting the nav div to be positioned? I'm getting different nav positions when viewed in FF and IE6.

Are you wanting the content text to wrap the nav div or be placed beside it?

Hunter86
12-05-2008, 05:18 PM
Thank you for taking a look, right well its only going to be viewed in FF i applied a left margin to the conent on the home page so the text didnt wrap.
if you know just for the recored how would i keep the nav in the same in both browsers.

yea the header image is my major prob how do i sort that.
cheers

coloeagle
12-05-2008, 05:52 PM
Your welcome.

Thank you for taking a look, right well its only going to be viewed in FF i applied a left margin to the conent on the home page so the text didnt wrap.
if you know just for the recored how would i keep the nav in the same in both browsers.
The proper amount of left margin for the content div should take care of this.

yea the header image is my major prob how do i sort that.
cheers
In simple terms;
Slice the image into three pieces.
1. The left side with the logo.
2. The right side end with the rounded corners, guessing about 20pxwide.
3. Slice a center image 1 or 2 pxs wide.
Then use divs to place it back together placing the two end images and have the center image repeat horizontally expanding or contracting to fit the browser size.