|
HTML - Transparency Problems
Cant figure out how to do this effect, the image is the layout in photoshop, what im trying to do is, I have a Background image, with wood texture and I have a div over it where content goes. In photoshop i cut the bg, set it as my bg with html, and now im trying to over lay the content area that in photoshop is Black with about 60% transparency so you can still see the wood grain but also still have the edges to mimmick the content header so i cant just use a 50% square transparency any ideas will greatly be appreciated. Similar TutorialsHi All, I'm trying to figure out the best way to achieve <div> transparency. Right now I've got the following working: CSS: Code: #content {filter: alpha(opacity=85); opacity:0.85;}
But that is causing the entire <div> to fade - I'd only like the BACKGROUND to do so, and not the CONTENT on top. I'm considering just using another <div> as the background, and then a content <div> on top of that with a 'none' background - but does anyone know if there is a better option for this? The homepage of my website has a PNG image with transparency. The reason that I'm using PNG is that I was having trouble matching the image background color to the page background color. On some browsers like Safari it matched perfectly but on IE it did not (not sure why). The PNG image is displaying fine with transparency on both Safari and Google Chrome in my OS X machine but when I test it on a Windows machine under IE the transparency does not work and I see a white box around the image area. I'm really new to all this and would really appreciate any help. This is my website homepage with the problem image: www.buccianti.net Thanks so much! Okay, I have table backgrounds. I want to use a transparency effect on them. However, if I use .gif, it only works in IE, and if I use a .png, it only works in FF. How can I make it so that it will display my .gif file for IE viewers, and my .png file for FF viewers? Here is the problem Ordus Inferi Guild Forums top left banner, there is a no image display on top of my transparency. Here is the code, I know it has to be wrong...so what do I change: <a href="index.php"> <img <DIV ID="oDiv" STYLE="position:absolute; left:; height:180; width:526; filter:progid:(nospace here, but it made happy face)DXImageTransform.Microsoft.AlphaImageLoader( src='/forums/styles/StarCraft/theme/images/id_logo.png")</div></img></a> Thank you much. On firefox, the banner is not viewable at all, while on IE it is viewable...BUT it has a no image [x] layered ontop of the image. Hi, I am working on a wordpress theme and I have made a horizontal drop down menu. For some reason the drop down part has transparency and the text is almost unreadable as it mixes with the text in the main container. Each of the submenus is a list nested in the list item above. Here is the full code for the menu: HTML Code: <ul class="menu">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<ul id="nav" class="menu">
<li><a href="<?php bloginfo('url'); ?>">Home<img src="<?php bloginfo('template_url'); ?>/images/icons/home.png" class="menu_icon" alt="Home" border="0" /></a> </li>
<li><a href="#">Facilitators<img src="<?php bloginfo('template_url'); ?>/images/icons/people.png" class="menu_icon" alt="Facilitators" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" alt="Contact Us" border="0" /></a>
<ul>
<li><a href="<?php bloginfo('url'); ?>/narelle-nelles">Narelle Nelles</a></li>
<li><a href="<?php bloginfo('url'); ?>/susan-gregory">Susan Gregory</a></li>
</ul>
</li>
<li><a href="#">Courses<img src="<?php bloginfo('template_url'); ?>/images/icons/courses.png" class="menu_icon" alt="Courses" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" alt="Contact Us" border="0" /></a>
<ul>
<li><a href="<?php bloginfo('url'); ?>/parenting-course">Parenting Course</a></li>
<li><a href="<?php bloginfo('url'); ?>/beyond-behaviour">Beyond Behaviour</a></li>
<li><a href="<?php bloginfo('url'); ?>/staff-training">Staff Training</a></li>
<li><a href="<?php bloginfo('url'); ?>/upcoming-courses">Upcoming Courses</a></li>
</ul>
</li>
<li><a href="#">Register<img src="<?php bloginfo('template_url'); ?>/images/icons/register.png" class="menu_icon" alt="Register" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" border="0" /></a>
<ul>
<li><a href="<?php bloginfo('template_url'); ?>/registration.html" title="Register Online" rel="gb_page_center[390, 490]">Register Online</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/AARCRegistrationForm.doc">Register By Post</a></li>
<li><a href="<?php bloginfo('url'); ?>/registration-terms">Registration Terms</a></li>
</ul>
</li>
<li><a href="<?php bloginfo('template_url'); ?>/photo_gallery.php" rel="gb_page_fs[500, 500]">Photo Gallery<img src="<?php bloginfo('template_url'); ?>/images/icons/photo.png" class="menu_icon" alt="Photo Gallery" border="0" /></a></li>
<li><a href="<?php bloginfo('template_url'); ?>/contact.html" rel="gb_page[280, 380]">Contact Us<img src="<?php bloginfo('template_url'); ?>/images/icons/email.png" class="menu_icon" alt="Contact Us" border="0" /></a></li>
</ul>
CSS Code: ul {
margin-right: 10px;
padding: 0;
list-style: none;
font-size: 12px;
width: 160px;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 159px;
top: 0;
display: none;
}
.sidebar a{
color: #8b645a;}
ul li a {
display: block;
text-decoration: none;
background: #f1f9e6;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
ul li a:hover{
background: url(images/menu_bg.png) bottom repeat-x;
color: #43951e;}
ul li li a:hover{
background: url(images/menu_bg.png) bottom repeat-x;
color: #43951e;}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block; }
I tried defining opacity to full but that does nothing. The problem happens in firefox, ie7, opera, and safari beta 3 for windows. If you could help it would be great!, Ricky So I sliced a template that I made in photoshop and where my content box is I have an image in the template. I want to have a content box overtop of this image using iframes, but whenever I do that my image dissappears. Is it possible to set the background of an iframe to be an image, or to make it transparent and have an image beneath it? Greetings to you all, Today's question I have is this: Does anyone know how to achieve transparency with svg files in Safari? I have an orange colored circle graphic in svg format. I want to display it on a colored background, maybe even an image background but in Safari it shows a white square around the circle. I have tried using the embed tag and the object tag and both show the white square. Both embed and object seem to be fine for Firefox and Opera. I have used img src and this displays the graphic as it should be in Safari but doesn't show at all in Firefox. I have spent the last three hours searching the net for an answer but there doesn't seem to be a solution out there. I would really appreciate some help. I'm sure there must be other people with the same problem. Thanks very much. I have been trying to research hacks to for internet explorer 5.5 and 6 to allow .png images to show transparent backgrounds (rather than showing with a blue/gray background color behind them.) As I understand it internet explorer allows for binary transparency (which is default in .gif files) but you have to do a work around in order to display alpha transparency. I am using a 24bit png file with a transparent background and it displays properly in firefox. I cannot use a .gif or 8bit png because the image has too much detail loss if I do so. For what I am trying to do I really only need binary transparency because I want the background to be completely transparent. So my question is whether there is a way to use a 24bit .png file in binary transparency and just disable the alpha transparency channels? Is there a way to save the .png with only binary transparency to begin with for that matter? I created the file using photoshop. okay, im kinda new to the forum and in a way kinda new to html because i haven't written in weeks. anyway, i know the code
HTML Code: <img src="./file.GIF"></img> , but how do i make the image by the bottom-left pixel transparent please help. ty I am not much of a web developer, so I am using Go Daddy Website Tonight tool to create a quick page. I have a PNG with a transparent background on my website, and it works fine except for users with IE6 or below (IE6 and below don't support transparency on PNG). I tried doing a GIF, but it looked crappy. So, I have researched and found out that you can use the AlphaImageLoader filter in your code to make PNG work for IE6. With the Website Tonight tool, you can only edit HTML for certain sections (blocks) of the site. So, for the section (block) that has the PNG, the following HTML is available to edit: HTML Code: <img alt="" wstxclass="Image" src="http://app4.websitetonight.com/projects/1/2/3/8/1238972/image/title1_4hon.png" mainsrc="http://app4.websitetonight.com/projects/1/2/3/8/1238972/images/title1_4hon.png" uid="419bfda3-0aa3-46c4-84be-7b459f64c09d" /> <br /> So, what I need help with is if I can put the AlphaImageLoader filter on this code and hopefully have it work. The MS Knowledge Base provides the following code example for the AlphaImageLoader, but I can't quite figure out the syntax with the HTML code above. http://support.microsoft.com/kb/294714 HTML Code: <html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image. -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>
I've used a code for a layout on my blog at blogger.com, and I've tweaked it to my likeness except for the fact that the photos on my blog all are semi transparent. Does anyone know what I should look for to change so the photos appear as solid? Thanks for any help. If anyone wants to see the code in it's entirety I can post it. http://www.mohler.cz/radim/segeta/al...lkodlaci6.html Hi all I have encountred problem while using transparent swf on site I am developing.. The problem is only with firefox...when I try to click the link it starts to blink and is unclicable...well I figured out that when I place a small picture just below that div containing my swf it works correct.... well, well, but the other problem emerges when I would like to use second swf with transparency at the bottom .....well I would like to scroll the content like the entire page not an iframe or whatever , but I cant place there this workaround because it 1, doesnt work when its in a div 2, without div it is just an element and the iframe where I load my content aligns beneath it so it is off the screen.... Is there a problem using the background the way I do ?? Does also anyone know how to get rid of that flickering in firefox when I scroll content with images for example in "fotogalerie " ???? this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon Hi, I am facing some problem. I am currently doing a html template. But I don't seem to be able to solve the gap problem I am facing (View my snapshot), can anyone help me? Thanks alot! Snapshot file: http://i49.tinypic.com/3t3eo.jpg 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" />
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Darren Ng - Future Pilot</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="index.html"><span>Darren's</span> Website</a></h1>
<table><tr> <ul id="menu">
<li><a class="current" href="#">Home</a></li>
<li><a href="#">Practice</a></li>
<li><a href="#">Attorneys</a></li>
<li><a href="#">Accidents</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About Us</a></li>
</tr></table></div>
<div class="clr"></div>
</div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<td align="center" valign="middle"><table width="1000" height="550" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="1000" height="360" align="center"><img src="images/header.gif" width="1000" height="360" hspace="0" vspace="0" border="0" align="top" usemap="#MapMap"></td>
</tr>
CSS File: Code: body {
font: .74em Tahoma, Verdana, Sans-Serif, Arial;
color: #7f7f7f;
background-image: url('images/bodypixel.gif');
background-repeat: repeat;
}
h1 { font: normal 5em "Trebuchet MS", Helvetica, Arial; }
p { margin: 0 0 15px; line-height: 1.6em; }
a { outline: 0; color: #304D6F; text-decoration: none; }
li { list-style: none; }
li a, img { display: block; }
img { outline: 0; border: 0; }
#wrapper { width: 984px; margin: auto; }
.clr { clear: both; }
#logo { float: left; padding: 30px 15px; }
#logo h1 a { color: #fff; }
#logo h1 a span { color: #808080; }
#menu { height: 44px; padding: 5px 0 0 4px; }
#menu li { float: left; font-size: 1.3em; text-transform: uppercase; }
#menu li a { color: #888; margin: 0 50px 0 0; }
#menu li a:hover { color: #fff; }
#menu li a.current { color: #fff; }
I recently bean using ssi instead of frames and i now have an issue... I do not know how to keep the menubar on the left hand side at the top... see as my page streaches it centers itself in the midle of the screen... i am using tables to create a framelike effect without the issues that frames create here is where my problem is. In ie the hover effect does not work, but in firefox it does! help. take a look at this and can anyone tell be why it does this in ie it look fine in firefox and safari http://nathanoconnor.co.uk/kartingchampionships/site/ thanks My OS is windows 7 64bit and have installed: - internet explorer 9 - Mozilla Firefox - Google Chrome My website is getting displayed correctly on Firefox and Chrome but is a bit of a mess on IE9 If you could have a look and let me know if there is anything I could do, would be much appreciated. Here is one page of my site that is bothering me: http://www.dashony.com/Solar%20panel...0projects.html Please check out the white menu, ( SpryMenuBarVertical ) using IE and one of the other 2. Thanks! Can anyone suggest how i fix the problem i have here with IE? HTML Code: <body> <div id="container"> <div id="header"> <img src="images/thePlacePromotion.jpg" alt="The Place Promotion Agency for Gloucestershire" width="960" height="80" /> </div> <div id="middle"> <a href="http://www.glosfirst.co.uk"><img src="images/Middle.jpg" alt="We're building a new website, meanwhile here's a link to the current Gloucestershire First website." width="960" height="578" border="0" /></a> </div> <div id="bottom"> <a href="http://www.glosfirst.co.uk"><img src="images/slogan.jpg" alt="We're building a new website, meanwhile here's a link to the current Gloucestershire First website." width="960" height="80" border="0" /></a> </div> </div> </body> CSS is: Code: body {
background-color: #96be3f;
}
#container {
width: 970px;
background-color: #96be3f;
height:auto;
margin: auto;
}
#header {
width: 960px;
padding: 20px auto;
margin: auto;
}
#middle {
width: 960px;
height: 567px;
margin: auto;
}
#bottom {
width: 960px;
height: 80px;
margin: auto;
}
the top header on IE is over to the right! Thanks Hurley Hi everyone, I recently landed myself a job as a web manager. It's been a long time since I done it however, as I've had children to bring up and so on - i'm a bit rusty but getting through it okay. I've hit a snag however and I'm wondering if anyone can help me... The website i'm charged with watching over works completely fine bar one problem, and its not even a big problem - just a bit annoying. One of the images, when opened in Chrome, floats to the left when it is supposed to be central. This is the only image to do this on the website in any browser. Has anyone got any tips for me? |
|||||||