PDA

View Full Version : Background Images - swapping them in CSS


tommisauce
06-24-2007, 05:46 PM
Hi folks,

I am building a site in DW8 using CSS. I have made the 'usual' Header, Content, Sidebar and Footer Divs. There are seven main navigation buttons on the home page. Within the #Content Div I need to have different background images (i.e. seven - one for each page). However I am having difficulty in how to go about this. I have made a template as the only element on the pages that really change is going to be in the #Content div.

As there needs to be body copy within the #Content Div - I attempted to use a background image. However one way round this I thought was to use a layer within the #Content Div. But due to the use of a template - when I change the CSS on the layer ID - it changes it through out the site design.

This is driving me nuts and I'm sure there must be an easy way round this, obviously I just don't know it - I've referred to a couple of my CSS books but cannot find the definitive answer.

Many thanks in advance

I have posted my code and the style sheet - please feel free to pick it apart - slap me on the head and tell me - "No not like that, but like this."
Code:
<div id="Image_swap">
<h1>What we offer </h1>
<ul>
<li><a href="Advertisement.html">Advertising </a></li>
<li><a href="Audio_Visual.html">Audio/Video application </a></li>
<li><a href="Consultancy.html">Consultancy</a></li>
<li><a href="Content.html">Content</a></li>
<li><a href="Graphic_Design.html">Graphic design</a></li>
<li><a href="Marketing.html">Marketing</a></li>
<li><a href="Mobile_solutions.html">Mobile solutions</a> </li>
<li><a href="Plugging.html">Plugging </a></li>
<li><a href="Press.html">Press releases </a></li>
<li><a href="Printing.html">Printing</a></li>
<li><a href="WebHost.html">Web Hosting </a></li>
<li><a href="Webdesign.html">Website design</a></li>
</ul>
<span class="ServicesText">Click the links for more information</span></div>
<!-- InstanceEndEditable --></div>
<div id="Sidebar">
<p><img src="../images/Body/LatestNews.gif" alt="Intuition UK latest news graphic" name="LatestNews" width="330" height="30" class="LatestNewsGraphic" id="LatestNews" /><br />
<span class="Right"><a href="#">&gt; But perspiciatis unde omnis iste natus<br />
<br />
</a></span><span class="Right"><a href="#">&gt; Voluptatem accusantium silva fabregas&nbsp; vulcola </a></span></p>
<p><span class="Right"><!-- InstanceBeginEditable name="SideBar_ImageSwap" --><a href="#"><img src="../images/Body/ComputerImage.jpg" alt="Intuition UL image" name="Image" width="330" height="125" hspace="0" vspace="0" border="0" id="Image" style="background-color: #99FF00" /></a><!-- InstanceEndEditable --><br />
<br />
</span><span class="Right"><img src="../images/Body/ContactUst.gif" alt="Intuition UK: Business Consultants - graphic for Contact us: email@intuition-uk.info" name="Contact" width="330" height="30" hspace="0" vspace="0" class="RightContact" id="Contact" /></span></p>
<p><span class="Right">Please contact one of Intuitons experienced consultants who will only be too happy to help on: <br />
</span><span class="PhoneNumberR">0845 652 1099</span></p>
<p><span class="style4">Or simply send an e-mail querie to:<br />
<a href="mailto:info@intuition-uk.info">info@intuition-uk.info </a></span></p>
</div>
<div id="Footer">Intuition UK &copy;Copyright 2007 | All rights reserved </div>
<p></p>
</body>
<!-- InstanceEnd --></html>


Style sheet:
/* CSS Document */

/* Body style */

body {
background-image: url(images/Body/strip.jpg);
background-repeat: repeat;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}

/* Header style */
#Header {
color: #333333;
margin-left: 180px;
padding-bottom: 5px;
margin-top: 40px;
width: 880px;
}

/* Main content styling */
#Container #Image_swap {
position: absolute;
height: 450px;
width: 485px;
left: 190px;
top: 110px;
visibility: visible;
z-index: 1;
background-image: url(images/Services/YellowLightbulb.jpg);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-weight: normal;
color: #666666;
margin-top: 30px;
margin-bottom: 0px;
font-variant: normal;
margin-left: 25px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
font-size: 16px;
font-weight: normal;
color: #999999;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 25px;
}

/* List Style */

ul {list-styke:none;
}

/* Footer styling */
#Footer {
}

/* List styling */
li {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
color: #666666;
margin-top: 6px;
margin-left: 0px;
}
/* Body copy styling */
#Container #Image_swap p {
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
font-size: 12px;
color: #333333;
margin-left: 25px;
line-height: 18px;
margin-top: 0px;
margin-right: 30px;
}

/* Navigation header links */
#Header a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
text-decoration: none;
font-weight: normal;
}
#Header a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #999999;
text-decoration: none;
}
#Header a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
#Header a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000000;
}

/* Content styling */
#Container {
width: 485px;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0px;
height: 450px;
margin-bottom: 5px;
margin-left: 180px;
}

/* Footer styling */
#Footer {
height: 20px;
width: 860px;
margin-left: 180px;
margin-top: 0px;
padding: 0px;
clear: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10.5px;
color: #333333;
}

/* Side column styling */
#Sidebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 330px;
float: left;
background-color: #FFFFFF;
margin-top: 5px;
height: 445px;
margin-right: 0px;
margin-left: 0px;
line-height: normal;
margin-bottom: 5px;
border-top-width: 0px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding: 0px;
}

/* Sidebar banner style */
.RightContact {
margin-top: -10px;
}

/* Sidebar contact number style */
.PhoneNumberR {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 32px;
color: #F9D42D;
font-weight: bold;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

/* Sidebar links style */

#Sidebar a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #666666;
margin-top: -5px;
margin-bottom: -15px;
}
#Sidebar a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-decoration: none;
}
#Sidebar a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFCC00;
text-decoration: underline;
}
#Sidebar a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
/* Banner graphic style */
.LatestNewsGraphic {
margin-top: -5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 5px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-top-color: #FFFFFF;
}


/*Links for Services*/
#Container #Image_swap a:link {
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
color: #999999;
text-decoration: none;
font-size: 14px;
margin-left: 0px;
}
#Container #Image_swap a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
color: #FADF4B;
text-decoration: none;
font-size: 14px;
margin-left: 0px;
}
#Container #Image_swap a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
color: #000000;
font-size: 14px;
font-weight: normal;
margin-left: 0px;
}
#Container #Image_swap a:active {
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
color: #000000;
font-size: 14px;
margin-left: 0px;
}

/*Body copy for small text */
.ServicesText {
font-family: Verdana, Arial, Helvetica, sans-serif, GillSans;
font-size: 11px;
font-weight: normal;
color: #333333;
line-height: 16px;
margin-bottom: 0px;
text-indent: 25px;
margin-left: 25px;
}

domedia
06-24-2007, 10:19 PM
Let's see if I got this right:
So you have different pages, and for each page you want a different background image on a certain element, right?

tommisauce
06-25-2007, 01:12 PM
That's right - there's different sections on the site: About us, News, Contact us etc.. each one requires a different image.

I've made a #Div tag editable in the .dwt thinking if I change the image in then newly created file - that would be the only file updated - however it doesn't and makes the change to the .dwt file which subsequenltly makes sitewide changes - which is not what I want?

Any ideas? Or am I going about this in a completely stupid way, i.e. is there a better way to achieve what I'm doing?

Many thanks

domedia
06-25-2007, 01:37 PM
It's pretty easy to do with CSS but not sure how to implement through DW's template system.

Set a separate id on the body of each page, and use that to call a different background image for each of them.

Example:
<body id="aboutus">
...
<div id="Image_swap">your stuff here </div>

CSS:
body#aboutus #Image_swap {}
body#contactus #Image_swap {}
body#services #Image_swap {}
..etc