|
CSS - Transparent Images Problem
Hello,
I have a transparency applied to my main wrapper so the body area is semi-transparent to allow the background to show through: http://www.tombraiders.net/katie/index2.html The images, however inherit this property and I would like them to be normal. I tried making a class within the inner_wrap div with an opacity of 100% but it doesn't work. I read somewhere that when you use this command it always inherits from the parent (which in this case has the transparency). Anyone know a way around this? My style sheet is located here Thanks Similar TutorialsI have a titlebar for an article for my site and i'm trying to achieve rounded corners with transparency. The problem is that my transparent images (toprightcorner and blobs) are showing the background of the div i've used to tile the background image across the bar (it's variable width). How can I prevent this? i know there is background-position but i need a fixed size that the background won't tile across at either end while the width is variable. Is the only solution to make 3 divs and use 2 as columns to hold the corner images and have the background tile across it or is there an easier way? Here is the relevant code Thanks --James Code: <div class="articlebox"> <div class="articletitle"><img class="left" src="blobs.jpg" border="0" /></div> </div> css Code: Original - css Code div.articlebox{ width:100%; /*attach it to the top of the box so we can layer the corner on top of it*/ background:rgb(249,249,249) url('topbg2.png') repeat-x fixed; padding:0px; margin:0px; } div.articletitle{ text-align:left; width:100%; height:21px; background:url('toprightcorner2.png') no-repeat right top; border-bottom:1px solid #888; padding:0px; margin:0px; } div.articletitle img{ float:left; } * html div.articletitle img{ margin-left:-3px; }
Hi, The page in question can be found he http://serve5.net/xcage/. Basically, if you view it in Firefox/Mozilla, the background png for the element that contains the date is transparent with a tint to it. However, if you view the page in Internet Explorer, it is gray rather than transparent. Could someone take a look and tell me what's wrong? The CSS can be found he http://serve5.net/xcage/css/standard.css. Thanks, Rob. Hi there, I have two questions which I cant figure out. I am trying to make a page with a background image and a semi transparent div over the top. I got it working using opacity:.5. However, when you do this is results in all the items inside the div inheriting the opacity and not being able to exceed it. I need some tables inside the div to be completely opaque. To get round this problem i tried using a transparent background image. This is just a 1x1 50% opacity gif file in the colour I want. When I use this, the background image dissappears making it all a bit pointless! Hope someone can give me some advice, heren is some of my code: Code: body{
position:absolute;
width:100%;
height:800px;
background:url(background.gif) no-repeat top left;
}
div.main{
color:ffffcc;
font-weight:bold;
background:transparent url(body.gif);
position:relative;
left:10%;
top:100px;
width:80%;
height:600px;
}
div.box tr.head{
background:black;
color:red;
opacity:1;
}
div.box tr.bod{
color:white;
}
hello mates, for the "footer" of my webpage, i need to have the left part holding a transparent gif image (can be background image or html object, don't care as long as it shows correctly the background image of the page), and the right part to extend to the rest of the containing "footer" div, with a background-color. But i can't make the two cohabitate peacefully. :'( i've tried with divs, span and p, no matter what it does not work. here is the way i first thought it would work: Code: <div id="footer" style="clear:both;width:100%">
<div id="transparentImg" style="width:460px;height:22px;background:url(image.gif) no-repeat"></div>
<div id="colorstripe" style="width:inherit;height:22px;background-color:red;text-align:right">disclaimer</div>
</div>
any idea how to make this happen ? hi, i have a container div, set at 50% opacity. i want my content to apear in here, but be 100% opacity. i thought this would work, but it doesn't... any help? #transContainer { background-color: #FFF; margin-left: auto; margin-right: auto; width: 982px; padding: 7px; height: 100%; padding-top: 0; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } #mainContainer { background-color: #ccc; padding-top: 10px; margin-left: auto; margin-right: auto; width: 968px; height: 94%; filter:alpha(opacity=100); -moz-opacity:1.0; opacity: 1.0; } http://www.senti.ca/~kgf/programs/pickleball/ So here's the question... how do I make this picture, not transparent? Right now it's at 75% transparency on top of that background which makes it look very faded. Any ideas? I have tried: Code: filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; And placing it inside of a div... sadly this doesn't work. Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating. I am using the following command to set a DIV element with transparent background; Code: filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot. (the light red line is the extra 1px I am referring to) If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem; 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>
<style>
body {
margin: 0px;
padding: 0px;
/*
* IE hack to center .content div (part1).
*/
*text-align: center;
}
div.content {
width:600px;
margin: 0px auto;
/*
* IE hack to center .content div (part2).
*/
*text-align: left;
}
div#a {
border-bottom: 1px solid grey;
border-top: 1px solid grey;
padding-bottom: 5px;
padding-top: 5px;
}
div#a div#b {
overflow: hidden;
height: 280px;
position:relative;
}
div#a div#b div#c {
position: absolute;
}
div#a div#b div#c img {
border: none;
display: block;
}
div#a div#b div#e {
background-color: red;
color: #fff;
position:absolute;
padding: 20px 10px;
width:260px;
height: 240px;
margin-left: 500px;
/* IE8 hack for background colour with alpha value */
filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
</style>
</head>
<body>
<h1>Test 5</h1>
<div id="a" class="content">
<div id="b">
<div id="c">
<img src="pic.png" />
</div>
<div id="e">
hello
</div>
</div>
</div>
</body>
</html>
Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great. I redid a webpage and I am not using table, everything displays properly except the last two images, one has different height... I need to align the last one on top. Since I'm new to css, I don't know how I could do float:top;.. view what I'm talking about. hopitel.com/temp/test.html Thanks. I am just learning CSS and I found this site and they have a step through example, but I am having problem where they use body.about dt#about, body.about dt#about a, body.services dt#services, body.services dt#services a, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.contact dt#contact, body.contact dt#contact a { background-position: 0 -100px; } to select different parts of an image to display. Also, supposedly, you put in the body tag of the index.html file <body class="about"> and it is supposed to use the about image, but I am unsure how to enable the others. Anyone have an idea. The code is too much to post here, but I could possibly email it if anyone needs it. Hello I have this: Code: <div id="menu"> <img src="images/front-menu_01.gif" width="85" height="54" alt="" /> <img src="images/front-menu_02.gif" width="126" height="54" alt="" /> <img src="images/front-menu_03.gif" width="134" height="54" alt="" /> <img src="images/front-menu_04.gif" width="144" height="54" alt="" /> <img src="images/front-menu_05.gif" width="116" height="54" alt="" /> <img src="images/front-menu_06.gif" width="66" height="54" alt="" /> <img src="images/front-menu_07.gif" width="23" height="54" alt="" /> <img src="images/front-menu_08.gif" width="154" height="54" alt="" /> <img src="images/front-menu_09.gif" width="102" height="54" alt="" /> </div> Now, how can I set my css that it will not add space between my images. For firefox I added display: table;, but it is not working in IE. How can I fix this? Code and page displayed Ive been working on it for a few days...making it look like a page. But now im so close i just cant get the top and the top right and top left corners to appear correctly as you can see from the link above. Any ideas why? I realise using just div's isn't the best way w3 style but there are reasons why im not making use of other elements. Hi All, I am new to devshed and new to css stuff. I have a problem with a site i am currently building. http://www.foodaffairs.co.za Basically there is a yellow link box underneath the flash image which in FF(Firefox) is out a little to the right and in IE out to the left. The yellow block is actually an image which is the same width as the flash image but just doesn't wanna line up. Anyone had this problem or could help me fix it? Thanks LoTi I'm struggling to find the correct CSS to center a middle column between a left and right column. I need this functionality for a dynamic photo gallery (powered by JS). To put it simply, I need the shaded area to the left and right of an image to expand/contract dynamically based on whether or not the image in the middle is in landscape or portrait format. I've figured out how to hard code it based on orientation, but I need it to be dynamic instead since the JS I'm using isn't aware of the orientation of the image. Examples of what it looks like live are seen below: Portrait Orientation www. notcrappy .com/html/portrait/studio-portraits/index.shtml Landscape Orientation www. notcrappy .com/html/wedding/favorites/index.shtml Here's is some simplified HTML that I'm currently using to present the images and with the left/right blue borders: <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-left-side"> </div> <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-middle-position"><img src="images/01.jpg"/></div> <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-right-side"> </div> And here is the CSS I'm using to give them the correct spacing when the dimension is known. .left-blank-middle-landscape-right-blank-left-side { width: 179px; background-color: #003366; float: left; height: 400px; margin-right: 3px; margin-bottom: 10px; } .left-blank-middle-landscape-right-blank-middle-position { float: left; height: 400px; margin-bottom: 10px; width: 600px; } .left-blank-middle-landscape-right-blank-right-side { width: 179px; background-color: #003366; float: right; height: 400px; margin-left: 3px; margin-bottom: 10px; } .left-blank-middle-portrait-right-blank-left-side { width: 346px; background-color: #003366; float: left; height: 400px; margin-right: 3px; margin-bottom: 10px; } .left-blank-middle-portrait-right-blank-middle-position { float: left; height: 400px; margin-bottom: 10px; width: 266px; } .left-blank-middle-portrait-right-blank-right-side { width: 346px; background-color: #003366; float: right; height: 400px; margin-left: 3px; margin-bottom: 10px; } Can anyone give me any pointers on what I need to do to make the CSS dynamic based on the orientation of the photos? Thanks so much for your help! Hello. Test Page CSS Page I'm trying to get my banner working properly. I have a div for the banner itself #banner and then I have an #innerbanner for the contents (images). I use a BG image in the #banner that allows it to be stretchable. I want one of my images in #innerbanner to be tight to the left and the 2nd of tight to the right side of the screen. I tried using a spcaer in the middle to allow for space between the images when it gets stretched but nothing is lineing up properly in firefox or IE 6. Any suggestions? Well I am having serious problems with CSS floats. I created a design in Photoshop, sliced it and imported everything in Dreamweaver. So far, so good. However when you slice with Photoshop, you get a CSS with "position: absolute", which I am trying to avoid. However I managed to get the header partially correctly floated, but for some reason, it doesn't display correctly in Firefox. Not to mention Internet Explorer 8, which shows (empty) spaces everywhere (tried padding/margin 0px, but didn't do anything). Can someone take a quick peek and see what I am doing wrong here? And if possible correct the errors or tell me what I am doing wrong? Cause I am really hitting a brick wall at the moment. Here is the page: link Thanks in advance. //edit Okay I fixed the empty space problem in IE, I seem to have forgotten to set the doctype up correctly; my bad. But I am still having a problem with the floats. The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables? The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7. Code: #title {
margin-left: 170px;
background: url(./imgs/title_mdl.gif) repeat-x;
width: auto;
height: 40px;
}
#title span {
font-size: large;
text-align: center;
}
#title img {
width: 82px;
height: 40px;
}
Code: <div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div> Hi ! Me again :P So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself: (view-source for xhtml and css) http://fotoz.hit.bg/test/menu.html The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ? And most importantly why does it occur? Thanks! p.s I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below. It works but I get the flickering with visibility:hidden and even if i just move the img out of the way Ok so I have a vertical menu, with menus that pop to the side... it looks fine in every browser except IE. For some reason, the pop up menus become transparent in IE. Relavent CSS: #nav, #nav ul {/* 1st level ul */ padding: 0; margin: 0; list-style: none; float: left; background-color: #000000; width: 130px; } #nav li {/* 1st level li */ position: relative; color: #ffffff; font: bold 12px arial; padding: .3em 0em .1em .3em; border-top: solid 1px #ffffff; } #nav li ul {/* 2nd level ul */ margin: 0px; padding: 0px; list-style: none; position : absolute; left: -999em; background-color: #CCCCCC; } #nav li ul ul {/* 3rd levl ul */ margin: 0px; padding: 0px; list-style: none; position : absolute; left: -999em; background-color: #CCCCCC; } #nav li li {/* 2nd & 3rd level li */ position: relative; color: #000000; border: solid 1px #000000; padding:3px; font-family:arial; font-size:10px; text-decoration:none; } /* and some link styles */ #nav li li a { display: block; color: #000000; text-decoration: none; } #nav li:hover, #nav li a:hover, #nav li.sfhover { color: #000000; background-color: #E5F5E9; } #nav li li:hover, #nav li li a:hover, #nav li li.sfhover { background-color: #F58219; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {/* lists nested under hovered list items */ top: 0px; left: 9.1em; voice-family: "\"}\""; voice-family:inherit; left: 10.4em; z-index: 1; } referring to: <ul id="nav"> <li><img src="contents/images/navarrow.gif" border="0" />Content For ... <ul> <li><a href="/community/864/Builders/23414.html">Builders</a></li> <li><a href="/community/864/Remodelers/23415.html">Remodelers</a></li> <li><a href="/community/864/Architects/23416.html">Architects</a></li> <li><a href="/community/864/Suppliers/23417.html">Suppliers</a></li> <li><a href="/community/864/Consumers/23418.html">Consumers</a></li> <li><a href="/community/864/Manufacturers/23419.html">Manufacturers</a></li> </ul> </li> example: http://www.housingzone.com/index.asp?layout=news&industryid=23414 |
|||||||