0 members and 1,285 guests
No Members online
» Site Navigation
» Stats
Members: 35,442
Threads: 103,075
Posts: 826,688
Top Poster: cc.RadillacVIII (7,429)
|
-
 Image dimming when in browser...
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:
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>
CSS:
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;
}
What it looks like:
-
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.
Commissions and stickers available via linktree here.
-
 Originally Posted by Pet
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.
Thanks man, ill try it 
btw, Your name is very similar to mine :P mines Nathan Dennis
Similar Threads
-
By Sobek in forum The Void
Replies: 21
Last Post: 07-29-2005, 05:50 AM
-
By robgasm in forum Digital Art
Replies: 7
Last Post: 03-17-2005, 01:49 PM
-
By tacoX in forum The Void
Replies: 3
Last Post: 12-20-2004, 10:48 PM
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Reply With Quote
