|
CSS - Opacity Assistance Please
Please look at this page -
http://www.tmhdesign2.com See the nav bar with the green background and white font? I want that background to have an opacity of say 70% but when I do that the font also gets that opacity which is what I don't want. Similar TutorialsHi, I have a div which is somewhat transparent. There is no problem there. Then I have textin this div, which is also showing up with transparency, and this is the problem. I need the text to be 100% opaque. Here's the div css: Code: .rounded_STYLE
{
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
width: 224px;
background-color: #616161; /* if needed */
/* border: 1px solid BORDER_COLOR; */ /* if needed */
-webkit-border-radius: 4px; /* for Safari */
-moz-border-radius: 4px; /* for Firefox */
}
Here's the text css: Code: .bodywhite{
margin:0px, 4px, 4px, 4px;
opacity:1;
font-size:10px;
color:#FFFFFF;
font-weight:normal;
}
I've tried different numbers in the opacity value, but to no avail. Here's the site:site any ideas? thanks Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares? CSS Code:
DIV.outer
{
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 488px;
border:2px solid white;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
}
DIV.inner
{
position:absolute;
left: 50%;
top :50%;
width: 500px;
height: 488px;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
background-color:#CC6666;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
div.tn
{
position:absolute;
width:115px;
height:115px;
background-color: #660000;
layer-background-color: #660000;
border: 1px none #000000;
}
HTML Code:
<div class="outer">
<p> </p>
<div class="inner">
<!--row 1!-->
<div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<!--row 2!-->
<div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<!--row 3!-->
<div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
</div>
</div>
What i'm trying to get at here is how do I get non transparent items in a transparent div box? Hi, I am currently trying to postion an SWF menu on the top right corner of a DIV element, I am just starting with CSS and my brain has blanked out. I would greatly appreciate some HELP. Here is the link on the web= (ok I dont have permission to position a URL, please advise guys.) CSS body { background-color: #efefbe; } div#container { margin: 50px auto 0px auto; width: 1050px; height: 525px; } div#left { width: 525px; height: 525px; float: left; margin: 0px; } div#menu { width: 200px; height: 230px; position: absolute; top: 0; bottom: 0; left: 0; } div.content { width: 525px; height: 525px; background: white; float: left; margin: 0px; } p { font: 11px sans-serif; color: #666666; padding: 25px; } p#auto { overflow: auto; } Please look at this page - www.pacunionsonoma.com The issue I am trying to resolve is the positioning of the two links that read "Find a Realtor & FREE Property Evaluation". On IE7 I I have them where I want them. On FF they are too low. I outlined all relatively positioned elements and it seems in FF those links are sitting on teh very bottom of the container div while in IE they are slighly above the bottom of the containing div. ANy help? Thanks. Hello! I am currently fixing some issues with the BuufDesigns.com layout. But I am in need of assistance of some serious bugs I cannot fix in Internet Explorer and Firefox. Ironically, this website is compatible with Safari and Opera. This is a voluntary job, but you will be credited on the credit page. Not only that, but if anyone else knows how to intergrate ZenPhoto to my gallery, please PM me. Mind you, the Buufgallery and the ZenPhoto gallery default theme have very similar structure and attributes. Pretty much copying and pasting the php codes. But I can't seem to get that to function properly, hence needing a volunteer to help me on that. If you want this website released as soon as possible, someone please help me. I know there are some talented CSS designers here. But I can't seem to find a volunteer. Here are some teaser screenshots, if you want to help me with this little bug squashing project, you can see the whole development. URL Thanks! Hey everyone. Well I am making a forum. And I need to use a margin-right for the main content(because I know of no other way to do it). They problem is, FireFox doesnt respond to the margin-right. Here is my (troubled) CSS. css Code: Original - css Code #main-content{ margin-left: 10px; width: 100%; }
#main-content{
And my XHTML. Code: <div id="main-content">Blahblahblah</div><!--Fairly simple :D--> I am using XHTML 1.0 Transitional. Ive tried to make the text float next to the image but when i try the text just sits below the div line under the image to the right. here is the URL: http://www.nevertap.com/s_media.php here is the markup: Code: <div id="center_top_content_header"> <h3>Event DVDs</h3> <div id="center_top_content"> <a href="http://www.nevertap.com/s_media_01.php"><img src="/i/cover_thmb.jpg" alt="Nevertap: Season 1" /></a> <div id="imagetext"> <p><span class="plusone bold">Nevertap Season 1 DVD, 5 hours of premium submission grappling! 19.99 Plus S&H</span></p> </div> <!-- END imagetext --> </div> <!-- END center_top_content --> </div> <!-- END center_top_content_header --> And here is the relavent CSS: Code:
div#center_window {
/* margin-top: 0px;*/
margin-left: 215px;
margin-right: 250px;
padding: 5px;
height: 100%;
/* border-left: 1px solid black; */
/* border-right: 1px solid black; */
/*border: 1px solid black; */
}
div#center_top_content_header {
width: auto;
margin: auto;
border: 1px solid black;
}
div#center_top_content {
padding: 0 10px 10px 10px;
width: auto;
margin: auto;
/*border: 1px solid black; */
}
div#imagetext {
float: right;
width: auto;
margin: auto;
padding: 0;
display: inline;
border: 1px solid black;
}
i cant get IE to render opacity correctly. filter: alpha(opacity=50); opacity: .5; i know the filter is for Firefox and the opacity is for IE. but it doesnt seem to work. any ideas? I've set the main div content for opacity like this #content-main { margin-right:1%; margin-top:0; margin-bottom:2%; width:58%; background-color:#ffffff; filter:alpha(opacity=70); opacity:0.7; } but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div? Thanks hi, ive been messing with opacity and want to know if i can achieve this. I would like to have a background image on my page, then lay some divs over it. I want the image to be full opacity around the divs and be faded in the divs. so i thought i'd add a class to the divs: .opaq { filter: alpha(opacity=50); opacity: 50%; -moz-opacity:0.5; } but the div inside with my content inherits the opacity and therefore is faded too is there a way of having the opacity on the background of the div yet have the content 'full' wat about z-index? to bring the content to the front heres a pic: I was wondering if anyone knows a way to have use Opacity witin a div tab but then have another div tag in side of it not affected by Opactiy. Here is the code i have I want background to be transparent but not transbox. But setting the opacity to 100 in transbox wont over ride background.: Code:
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background-color: 000000;
border: 2px solid black;
opacity:0.6;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.100;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
I have opacity set for a column <td> but I only want the background image to be 50% opaque, not the text too. I tried the following... <td style="filter:alpha(opacity=50);"> <span style="filter:alpha(opacity=100);"> Text here...</span></td> Is there a reason why the 2nd style="filter:alpha()" has no effect on the text what so ever? The image is already transparent, I exported it as a PNG file with transparency allowed or what not. I have a weird problem. I've applied opacity in my stylesheet for a few elements. My opacity is working fine in FF, but not in IE. Here's the code I have: filter: alpha(opacity=75); -moz-opacity:0.75; opacity:.75; I've also applied it inline as well as in the stylesheet. Page is located at: ebonyevans.coastaldistribution.com/index.php The top center and top left music player should be opaque. Anyoen see what I'm doing wrong? I am trying to make the background transperency.. but the text on it should be bright and visible.. but i am not able to make the text brighter opacity:0.25; -moz-opacity:0.25; filter:alpha(opacity=25); u can look at the menu bar here http://www.harshamv.com/test/ Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity. The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ? And another question... how can i set an opacity for Opera Browsers ? Please look at this layout as provided by my graphic designer: http://hometown.tmhdesign.com/default.jpg Now look at my attempt to achieve the same http://hometown.tmhdesign.com I am a bit challenged at the right column and how to lay it out. She put a fixed height gradient background in the right div and then placed yet another div on top of that one. THe issue as you can see is if the content on the left exceeds the content on the right the design breaks up (so to speak). I'm really curious to get some feedback from the experts... Website: www.devthor.net/sara/index.php CSS: www.devthor.net/sara/css/fineart.css Ok, here is the problem. It is a pretty basic site so I wasn't expecting many problems (well, maybe I should have, they always seem to crop up), and everything lays out properly except my menu bar. The goal is to have the text sit on top of the image, and the white bar that appears on mouse-over to appear on top of the image (preferably within 1 px accuracy so that the brown border still remains untouched by the opacity, picky, yeah, but I like the look better). So I was going to start playing with CSS hacks to get the positioning exactly right on all the browsers when I noticed something. Firefox on OS X and Firefox on a PC displayed the menu in a different location. I believe that this has to do with the default font sizes on the respective platform. But as a side effect, it messes up my absolute positioning efforts on the menu since the different sized text takes up different amounts of space. So I then attempted to go back to relative spacing since the font size would become a mute point if the page auto adjusts, however for some reason with the <dl><dd><dt><li> menu style I use, the text I place inside the menu div does not cause the div bounding box to expand. Thus relative positioning ends up placing the menu div inside the top image div. (More accurately it places the text from the menu div inside the image box while the actual div bounding box seems to have a height of 0, and thus is invisible. Basically I am looking preferable for a fix to the relative positioning issue. If a fix cannot be found for this, maybe just a fix for the font size messing up my layout issue. I am at the end of my means for figuring it out having spent the last 2 days searching for a solution. So any help would be tremendously appreciated. Thanks in advance, Devthor P.S. Sorry for the novel length post. I just figured some background as to what I have tried might be helpful. Hi, I am having some major problems making all the <div> tags place the content in the correct places. The logo (yes its poort quality on purpose, its just for testing ) needs to be centered and above the left and right vertical menus. The block of "Text" needs to be below the logo but contained between the two vertical menus. and the footer needs to be in line with the text but move up and down the page depending how much text is present. The site is: http://www.explosiveracing.net/test/header.html Could anyone be of assistance? Thanks Please visit this page - http://www.brooksidetransmission.com Put your mouse over the "Services" link to reveal a sub menu. In FF it works fine in that you can access each of the links in the sub menu. In IE7 though when you move the mouse around the sub menu links the who sub menu disappears. Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners. Somewhere in my combining the two messed up the :hover for IE7 Any help would be appreciated. Tom hey all, i have a small problem with opacity. i have a table that is populated using php and the lines are coloured two different colours using a different div class. one is just white..no worries there, the other is a blue that i have added opacity to as i couldn't find the colour i wanted otherwise. However the writing that appears on in the cell that has the blue opacity div class is also opaque and so it looks grey rather than black!! i hope that makes sense !! here is the code for the div classes Code:
<style>
.whitebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #ffffff;}
.bluebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #99ccff; opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5;}
</style>
[/CODE
here is the code for the text (this is in a .css file rather than embeded in the html page.
[CODE]
.labels2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:14px;
font-weight: bold;
}
.normal {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:12px;
}
and here is the html/php PHP Code: <?php $i=0; while ($row = @ mysql_fetch_object($getdataR)) { ?> <tr> <td <?php if($i%2){ print 'class="whitebg"'; }else{ print 'class="bluebg"'; } ?> ><span class="labels2"><?php print $row->blog_subject;?></span> <?php if(!empty($row->r_link)) { print " - <a target=\"_blank\" href=\"".$row->r_link."\">Related Link</a>";} ?> <br> <span class="normal"><?php print $row->blog_msg; ?></span><br> <span class="small">(Posted By: <?php print $row->posted_by; ?> on <?php print $row->blog_submitted; ?>)</span><br> <br> </td> </tr> <?php $i++; } if anyone can advise that would be great, thanks RF |
|||||||