Okay so im making a site and in my conent area i have an image. The problem is that it seems to get darker when added to dream weaver.
I assume it is going behind the content box bg (with is slightly transparent).
Any ideaS?
HTML:
CSS:HTML Code:<!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="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
<div><img src="../Images/Banner.png" width="710" height="210" alt="Banner" /></div>
<div class="nav"><ul class="cssmenu">
<li class="home"><a href="#" class="normal" title="Home"><span class="displace">Home</span></a></li>
<li class="gallery"><a href="#" title="Gallery"><span class="displace">Gallery</span></a></li>
<li class="studio"><a href="#" title="Studio"><span class="displace">Studio</span></a></li>
<li class="links"><a href="#" title="Links"><span class="displace">Links</span></a></li>
</ul>
</div>
<img src="images/template.png" width="710" height="435" alt="Background" />
<div class="Maincontent" widt>
<img src="../Images/shop.jpg" width="350" height="237" alt="Studio" class="floatRight"/>
<p>Welcome to Triple T’s tattoo studio, whether you are looking for a timeless traditional tattoo, new school artwork, classic black and grey design,</p>
portrait work or a completely custom piece, Triple T’s can accommodate your every need. You can also choose a design from the latest flash available.Triple T’s offers a clean and professional environment that welcomes and is accustom to all customers. All instruments are autoclaved and sterilized for our customer’s safety. Triple T’s is a health authority registered business therefore meeting all health regulations and standards.
<p>Finally we hope that you enjoy browsing the material present on the website that will be updated with the latest work regularly, and we hope to see you in the near future.</p>
</div>
</div>
</div>
</body>
</html>
What it looks like:HTML Code:@charset "UTF-8";
/* CSS Document */
/* Content Controller */
body {
background-color: #000;
background-image: url(http://images.gfxvoid.com/forums/images/bg.png);
background-repeat: repeat;
font-family: Arial, sans-serif;
font-size: 16px;
color: #999;
}
/* Content Wrapper */
.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
padding: 0;
}
/* Nav positioning */
.nav {
width: 610px;
height: 24px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
margin: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
background-image:url(http://images.gfxvoid.com/forums/images/navbg.jpg)
}
/* CSS Hover Naivation Setup */
ul.cssmenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.displace {
position: absolute;
left: -5000px;
}
/* floats links left */
ul.cssmenu li {
float: left;
}
/* Controls the main image postions and the navigation image */
ul.cssmenu li a {
display: block;
width: 120px;
height: 24px;
background: url('images/navbar2.jpg');
}
/* Normal State Images //
position: 0 0; the first value controls the start position
the second value controls height */
ul.cssmenu li.home a {
background-position: 0 0;
}
/* -120px is the strat of the next image */
ul.cssmenu li.gallery a {
background-position: -120px 0;
}
ul.cssmenu li.studio a {
background-position: -240px 0;
}
ul.cssmenu li.links a {
background-position: -360px 0;
}
/* Hover Links // Same as the above, but this time you will see your hover state */
ul.cssmenu li.home a:hover {
background-position: 0 -552px;
}
ul.cssmenu li.gallery a:hover {
background-position: -120px -552px;
}
ul.cssmenu li.studio a:hover {
background-position: -240px -552px;
}
ul.cssmenu li.links a:hover {
background-position: -360px -552px;
}
img.floatRight {
float: right;
margin: 4px;
}
.Maincontent {
width: 710px;
height: 435px;
margin: 0px;
margin-top: -430px;
text-align: center;
background:url(../Images/content%20box.png);
background-repeat:repeat;
}
.Mainconent {
position: absolute;
top:252px;
left: 249px;
width:680px;
height:400px;
text-align: center
center; margin: 0px auto;
}
http://i55.tinypic.com/2mnn58j.png
Image dimming when in browser...
Printable View
-
10-02-2010, 07:11 PMDennis.Image dimming when in browser...
-
10-02-2010, 07:44 PMPet
Set your .Maincontent {} to have a z-index of 1 or 2, or something low, then set .floatRight {} to have a z-index of 3 or 4. That will give it layers, the lower the number, the further to the back it is.
-
10-03-2010, 09:01 AMDennis.Thanks man, ill try it :)Quote:
Originally Posted by Pet
btw, Your name is very similar to mine :P mines Nathan Dennis
