|
CSS - Translucent Background + Solid Background On Cells Inside
I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?
The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about Similar Tutorialsok i tried using this script to make a background on my site translucent, the problem is that it only works in firefox, not also in IE like its stated, any ideas? Hi everyone, I am using nivo slider for a website that I'm building. I have created a gradient png for the background of the captions that will go over the slider images. Everything is working perfectly in ie9 and FF, however in ie8 and 7 all I get is a big black block where the gradient should be. The strange thing is that if I set a background color, then the gradient shows through. I have tried to make the background transparent with no luck at all. I have tried to set the background-color to transparent, and made it !important. I've also tried to use filters, nothing seems to work. The URL of the site is http://www.backupstorage.co.za/new/ . If anyone out there can help, I really would be incredibly grateful! The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh is there a problem with placing div tags inside table cells. I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice. is there a problem and/or workaround to using div tags inside a table cell I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. Once again my developement is stalled with the interactions of my website with the multitude of browsers... Firebird... displays perfectly everytime without a doubt... I'm beginning to wonder why I even bother looking testing it in that browser becuase nothing is ever wrong. Internet Explorer, on the other hand, is a different beast entirely. Basically I'm trying to set up a div element that uses a semi opaque background... something between 75-85%, such that the background of my website shows through. So what I decided to do was make a graphic ( in Interlaced PNG format ) that would match my needs. As mentioned above there are some display issues in IE. I was wondering if there is a way to control the alpha level of element backgrounds without setting up/or using graphics, ( the less bandwidth the better ). Regards, I am attempting to build an online community, using phpBB 2.0.10 as its core. Two of the problems I have been running into seems as if I should be able to handle them easily, but they have been driving me up the wall. [Part I]Fixed Background Images (non-CSS) I was looking for a way to include a large background image and not have it be repeated; I finally found (just a few days ago) a script that would cause the text, tables, images, and other page elements to scroll over a fixed background image. So it seems that problem has been solved, although I submit it for your critique because I have met mixed responses to the first code Code: <body bgproperties="fixed"> which I was told only works on IE. I then stumbled across a second: Code: <style>
body {background-attachment:fixed}
</style>
The above code is supposed to support Netscape/Mozilla browsers as well. [Part Two]Table Transparency (possible CSS???) This is simple; I am looking for a means to adjust the alpha of my tables to give them a translucent appearance. This cannot be faked due to the fixed background and scrolling page elements! I can't seem to find any documentation on the subject. But I need a partial transparency on my tables so that the background image is somewhat visible through them as they scroll. Hi there, I am looking for a way to display a 'translucent' layer on top of an image when hovered on. Is this possible? I guess I can do it with a PNG, but this onl;y works in IE right? Any ideas? In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Probably there already was such question, but my Internet connection is very slow and I don't have time to search thru topics. So, when I put an image into centercolumn that has big width my right column stays where it was, but center column with the picture goes to the right widely, and right column stays over the picture. But I want right column always follow center column (stays on the right of centercolumn whatever size it is). How to fix it in css? here is my code: BODY { PADDING-RIGHT:0; PADDING-LEFT:0; BACKGROUND:url(img_86.gif) #ddd; PADDING-BOTTOM:0; MARGIN:0; PADDING-TOP:0; FONT-SIZE:12px; LINE-HEIGHT:18px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } .registered { BACKGROUND-COLOR:#ff9; } #centercolumn { BORDER-RIGHT:#666 0 solid; PADDING-RIGHT:4px; BORDER-TOP:#666 0 solid; PADDING-LEFT:4px; PADDING-BOTTOM:10px; MARGIN-LEFT:179px; BORDER-LEFT:#666 0 solid; MARGIN-RIGHT:179px; PADDING-TOP:10px; BORDER-BOTTOM:#666 0 solid; } #header { PADDING-RIGHT:8px; BORDER-TOP:#182746 2px solid; PADDING-LEFT:8px; BACKGROUND:url(img_87.gif) #314e8c; PADDING-BOTTOM:8px; PADDING-TOP:8px; BORDER-BOTTOM:#182746 2px solid; } #leftcolumn { MARGIN-TOP:4px; LEFT:0; WIDTH:180px; POSITION:absolute; FONT-SIZE:11px; LINE-HEIGHT:16px; } #rightcolumn { MARGIN-TOP:4px; RIGHT:0; WIDTH:180px; POSITION:absolute; FONT-SIZE:11px; LINE-HEIGHT:16px; } #footer { CLEAR:both; MARGIN-BOTTOM:12px; } .block { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:4px; BORDER-TOP:#999 1px solid; PADDING-LEFT:4px; BACKGROUND:#fff; PADDING-BOTTOM:4px; MARGIN:6px 6px 12px; BORDER-LEFT:#999 1px solid; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .block H3 { PADDING-RIGHT:4px; PADDING-LEFT:4px; FONT-SIZE:11px; BACKGROUND:#a7b6c9; PADDING-BOTTOM:4px; MARGIN:-4px -4px 4px; COLOR:#26344c; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .block P { MARGIN:0; } .content { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:4px; BORDER-TOP:#999 1px solid; PADDING-LEFT:4px; BACKGROUND:#fff; PADDING-BOTTOM:4px; BORDER-LEFT:#999 1px solid; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .entrycontent { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:12px; BORDER-TOP:#999 1px solid; PADDING-LEFT:12px; BACKGROUND:#fff; PADDING-BOTTOM:12px; BORDER-LEFT:#999 1px solid; PADDING-TOP:12px; BORDER-BOTTOM:#999 1px solid; } .content P { MARGIN:4px 2px; } H1 { DISPLAY:inline; FONT-SIZE:16px; MARGIN:4px; COLOR:#fff; } H2 { PADDING-RIGHT:2px; PADDING-LEFT:2px; FONT-SIZE:13px; PADDING-BOTTOM:2px; MARGIN:0; COLOR:#26344c; PADDING-TOP:2px; BORDER-BOTTOM:#999 1px dashed; } H3 { FONT-SIZE:13px; } .entryfooter { CLEAR:both; PADDING-RIGHT:0; PADDING-LEFT:0; FONT-WEIGHT:normal; FONT-SIZE:11px; PADDING-BOTTOM:6px; MARGIN:0; COLOR:#666; LINE-HEIGHT:16px; PADDING-TOP:6px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; TEXT-ALIGN:right; } .entryfooter_linkdump { PADDING-RIGHT:0; PADDING-LEFT:0; FONT-WEIGHT:normal; FONT-SIZE:10px; PADDING-BOTTOM:6px; MARGIN:0; COLOR:#666; LINE-HEIGHT:16px; PADDING-TOP:6px; BORDER-BOTTOM:#666 1px dashed; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; TEXT-ALIGN:right; } A { COLOR:#253a69; } .prevnext_links { FLOAT:right; COLOR:#fff; } .searchbox { FONT-SIZE:10px; WIDTH:10em; } .searchbutton { BORDER-RIGHT:#000 1px solid; BORDER-TOP:#000 1px solid; FONT-SIZE:10px; BORDER-LEFT:#000 1px solid; BORDER-BOTTOM:#000 1px solid; } IMG.badge { BORDER-TOP-WIDTH:0; BORDER-LEFT-WIDTH:0; BORDER-BOTTOM-WIDTH:0; MARGIN-BOTTOM:2px; BORDER-RIGHT-WIDTH:0; } A IMG.badge:hover { MARGIN-BOTTOM:1px; BORDER-BOTTOM:#314e8c 1px solid; } P,HTML,TABLE,TD { FONT-SIZE:12px; LINE-HEIGHT:18px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } #leftcolumn P,#rightcolumn P { FONT-SIZE:11px; LINE-HEIGHT:16px; } H4,.subtitle { DISPLAY:inline; FONT-SIZE:14px; MARGIN:4px; COLOR:#fff; FONT-STYLE:italic; } .date_linkdump,.date { FONT-WEIGHT:normal; FONT-SIZE:10px; FLOAT:right; COLOR:#666; LINE-HEIGHT:16px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } .entryfooter A,.date A,.entryfooter_linkdump A,.date_linkdump A { FONT-WEIGHT:bold; COLOR:#5c6b8e; TEXT-DECORATION:none; } .date A:hover,.entryfooter A:hover { FONT-WEIGHT:bold; COLOR:#5c6b8e; TEXT-DECORATION:underline; } H1 A,.prevnext_links A { FONT-WEIGHT:bold; COLOR:#fff; TEXT-DECORATION:none; } and here's screenshot I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) Am design a site just now this is the image of the site here The problem is the blue background what is the best way to do this just now i have it like this by use a repeat of part of the image but want the cloud part at the top left too. someone know how to make a web with background like this... http://netcodigo.webinfo.es/ I tried, but I can't do it. pd: Sorry for my bad english. Hello, How can add a background color to each table cell in a table header and also add a small image on the bottom right corner of each of those cells? Thanks, Miguel I have background image for bullet. However, in Firefox it tries to display several of them for one line, and in IE it is like it should - one background image per line. Ive set background to no-repeat, and it still doesn't work in FF. Help plz. See the problem here http://www.armedassault.org/wp/ Hi all. I'm having a small but very annoying problem with my new design. I'm using backgrounds for my divs but somehow Internet Explorer manages to push them one pixel upwards and to the left. I can't find out why and after trying things for three hours I don't know what to try anymore. In both Firefox and Opera it works fine! Here is a screenshot where you can clearly see what goes wrong. The one on the top is Internet Explorer, the one on the bottom is made in Firefox and is how it is supposed to be. URL Site: URL CSS: URL I also found out that the footer of my page doesn't go to the bottom correctly in Opera. If anybody knows how what the problem is there and how to fix it I will be the happiest person on earth Thx in advance. Greetings, Sjoerd whats wrong with this? body { font-family:arial; font-color:#000000; background:url(background/bg.jpg); } its the background bit that isnt working it works when the css is included on the page but when i put it on a seperate stylesheet it hasnt worked I want to make a webpage with ah gradient border on the left and right side of the page. The gradients will be "fading out" towards the middle. How should I do this? I know how to get one side to show up, but not both. Can I use two different backgrounds in one CSS element? (probably not) Or should I use two different <div> tags with backgrounds set with what I want and are as big as the page? Thanks. |
|||||||