Overlays using CSS
Topics
Hey All, I'm running a wordpress site, and I need to have a section of text set to overlay some other text in the post areas. I have created a section of CSS : Code: div.products { border: 1px solid green; left: 485px; position: relative; top: -433px; width: 250px; } However on a long page, it shows in the wrong place and in a short place it shows in the wrong place... How do I get it to go from the very top of the visable browser area, and from the right of the browser area rather than a div area? Hello everyone. I'm going to try this as a general question first. In the event you guys do need to see the page, then I'll put up the info as needed. My issue is this: The site I am making uses a javascript slideshow. I need to have CSS div boxes overlay over it (the header and menu bar). In IE, I am not having any issues. Doesn't matter what I try - no issues at all. Putting the divs after the java (which is also in a css div) in the code, using "z-index" to put it on top, float, etc, doesn't matter - WORKS. What is NOT working is FireFox and all the rest. What's truly interesting is if I use z-index, the header does show up on top....for a few minutes, and then the javascript takes over the top position. What the? Some examples: .header { float: left; width: 716px; height: 150px; background-color: transparent; background-image: url("images/header.jpg"); position: absolute; z-index:100; } #mainimage { position: absolute; } Or: .header { float: left; width: 716px; height: 150px; background-color: transparent; background-image: url("images/header.jpg"); position: absolute; } #mainimage { position: absolute; } With HTML: <div id="mainimage"> <script type="text/javascript"> new fadeshow(fadeimages, 650, 825, 0, 2000, 0) </script> </div> <div class="header"></div> Again, IE - no issues. But I can't seem to find ANY method to get the dang header on the TOP of the java for any other browser. I am very much pulling out my hair. If you can assist: I am developing a help manual and I'd love to include screenshots in the CSS section that shows the page with an opaque type overlay with a description of each CSS rule. Something like the Developer tools in IE or FF when you use the "select element by click" function, except that I'm after all elements selected by default (together with the CSS ID). Is there such a thing? Not sure about this one- maybe someone can help shed some light on it? I have a <div> that contains a form. This div is dynamically-sized and floated left. What I want to do is place a nested <div> inside it so that it will cover the form below it. What's happening is that if I add the nested <div>, it pushes the form in it's container <div> down, which is obviously not what I want. I have tried using z-index on this nested <div> but with no success. Here is the code I'm using: Code: <div id="formdiv" style="display:block; padding-right:15px; padding-top:10px; border-right:#A0A0A0 1px dotted; float:left; width:auto; height:100%;"> <div id="overlaydiv" style="top:0px; left:0px; width:100%; height:100%; background-color:#FF0000; z-index:500;"></div> <form> ... </form> </div> There is other <div> tags before and after the 'formdiv', which are part of the page layout, but do not need to be covered by the 'overlaydiv'. I should note that 'formdiv' is itself inside a container <div>. I have tried various combination of CSS settings, but they don't give the same result. position:absolute; covers EVERYTHING within the uppermost container <div>, obviously not what I want. I've tried putting the form into it's own <div>, but I get the same result- the form just gets pushed below the 'overlaydiv'. Anyone have any ideas? Thanks, - skubik I have a web page shell that loads various content into different cells. The entire page is essentially a table. I have 4 graphic overlays that I want to impose on each cell to round the corners. I've tried doing it this way: CSS: Code: .LeftPanelTable { WIDTH: 182px; border-style: none } .LeftPanelCell { WIDTH: 160px; vertical-align: Top; border-style: none } .ActionOptionsPanel { background-color: #DDDDDD; color: #000000; font-family: verdana; font-size: 12px; border-style: none} #soft_corner_ul { background:url("http://www.fourfreedomsblog.com/images/corner_ul.gif") no-repeat top left} #soft_corner_ur { background:url("http://www.fourfreedomsblog.com/images/corner_ur.gif") no-repeat top right} #soft_corner_ll { background:url("http://www.fourfreedomsblog.com/images/corner_ll.gif") no-repeat bottom left} #soft_corner_lr { background:url("http://www.fourfreedomsblog.com/images/corner_lr.gif") no-repeat bottom right} HTML: Code: <table class="LeftPanelTable"> <tr> <td class="ActionOptionsPanel"> <div id="soft_corner_ul"><div id="soft_corner_ur"><div id="soft_corner_ll"><div id="soft_corner_lr"> This is the table cell content </div></div></div></div> </td> </tr> </table> However, I still see a faint border around the cell, which spoils the effect of the rounded corners. If I change it like this: Code: .ActionOptionsPanel { background-color: #DDDDDD; background-image:url("http://www.fourfreedomsblog.com/images/corner_ul.gif"); background-repeat: no-repeat; background-position: bottom right; color: #000000; font-family: verdana; font-size: 12px; border-style: none} Code: <table class="LeftPanelTable"> <tr> <td class="ActionOptionsPanel"> This is the table cell content </td> </tr> </table> then the border doesn't appear, but I don't know any way to do this with more than one image. Suggestions? Thanks... I'm making a fairly simple one-page website, but i need to display a box with some text over anything else at some points using javascript. I'm first trying to actually get a box working that will display over the rest of the page, somehow what I read on the internet doesn't work. I have the following code. Ive made a css class 'box' which should describe the position of where I want the box, now I need to figure out how to get it working and preferably how to display/hide it using javascript (at places indicated in the script): Code: <html> <head> <script language="javascript" type="text/javascript"> // This event is fired after all images on the page have loaded... therefore // we know that image 1 is being displayed window.onload = function() { var innertext = "<p>Loading Colors...<\/p>"; //start displaying here loadImg("ge64bw.jpg", image2Done); //stop displaying here } //This function loads an image from a url then calls a method function loadImg(url, handler) { //Declare a new image var img = new Image(); //Call the passed in method but change the signature as we are not interested // in onload event args img.onload = function() { handler(this); } ; //Initiate the download of the image img.src = url; } //Called when the second image has finished downloading function image2Done(img) { //Swap the images document.getElementById("myImageTag").src = img.src; //Go get the third loadImg("ge64c.jpg", image3Done); } //Called when image 3 has finished downloding function image3Done(img) { //Swap the images document.getElementById("myImageTag").src = img.src; //FINISHED } </script> <title>Ge64 Tech Repairs</title> <style type="text/css"> .image { display: block; margin-left: auto; margin-right: auto; width: 924px height: 668px; margin-top: 45px; z-index:2 } .box { text-align: center; height:20px; margin-top: 15px } </style> </head> <body> <img src="load.gif" id="myImageTag" name="myImageTag" class="image"> </body> </html> Hi All, Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal! Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic. Now I have designed an overlay for my site: http://www.wellandpower.net/website2/index.php The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div. The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF. Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange. CSS Code: Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; } #overlay { Any help greatly appreciated. Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... Hi I have a image gallery and I would like delete buttons or red little x's ontop of each image. I dont want to make the image background DIV I want to keep it <img src="image.jpg"> Is it possible to do this? Louis Thank you for stopping by! I'd like some guidance about a problem that has to do with CSS (and a bit of JavaScript I guess) and trying to position an overlaying DIV. The problem description is quite simple; When I click an image on the "main" area, a div gets, with a little help from javascripting, its display property set to "block". This surely and safely makes the div's content appear as it should and all is fine. I now have a headache from trying to figure out how I could position this div. I know what I'd like to do but I can't quite figure out how to get it right. I'd like to have the popup-div center itself on the page, regardless of the size of contents inside it. The content mostly consists of text of varied amounts and next to no images or other media content. If you got any ideas about this or got a link to a website that's similar to what I'm trying to accomplish or any input at all, feel free to make a comment! It's much appreciated! Here's what the popup CSS looks like atm: Code: div.PopUp { width: 550px; border: dashed silver 1px; display: none; position: absolute; left: 150px; top: 50px; background-color: black; text-align: justify; font-size: 10pt; color: black; } Regards DrLaban Hopefully I'm just not stumbling on the right CSS to fix the bugs. I understand that these same bugs might be attributed to the myspade code or myspace rules limiting html/css. Here's the mock-up: www.myspace.com/brovizion 2 bugs (1 in firefox, 1 in ie (6.0)): 1. (firefox only) There are 2 nav bars in the "innerwrapper" div (both black), one at the top, and one at the bottom. On the lower nav bar, my background image that is supposed to tile vertically throughout the whole "innerwrapper" div disapppears. 2. (ie only) The upper and lower nav bars (whose links are set to display: block) are on each of their own lines, yet still floated horizontally. This one is hard to explain except to say the nav bars should work like they do in firefox, but in ie they are on their own program. Viewing the site in both browsers will clearly demonstrate the problem. (ie 6.0, haven't tested in 7.0 yet.) I understand that the nature of this project (a design that must reside in a div overlay on a myspace page) makes for a million different possibilities for why it's messed up, but maybe if someone can help me brainstorm some potential fixes, I'll stumble onto something that works. I'll post my code as well. CSS: Code: <style type="text/css"> .btext {display:none;} .contacttable {display:none;} .lightbluetext8 {display:none;} .nametext {display:none;} .orangetext15 {display:none;} .redlink {display:none;} .whitetext12 {display:none;} .hidethem {visibility:hidden; display:none;} .comments {visibility:hidden; display:none;} body { background-color: 003366; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } table { background-color: 003366; } p { font-size: 12px; } h1 { font-size: 24px; font-weight: bold; } h2 { font-size: 18px; } h3 { font-size: 16px; font-weight: bold; } ul { list-style-type: none; } ul li { } a { color: 003366; text-decoration: none; font-size: 12px; font-weight: bold; } a:hover { color: 003366; text-decoration: underline; } a:visited { color: 003366; text-decoration: none; } a:visited:hover { color: 003366; text-decoration: underline; } h1 a { color: 003366; text-decoration: none; font-size: 24px; font-weight: bold; } h1 a:hover { color: 003366; text-decoration: underline; } h1 a:visited { color: 003366; text-decoration: none; } h1 a:visited:hover { color: 003366; text-decoration: underline; } .wrapper { position: absolute; top: 132px; left:50%; margin-left:-460px; width: 870px; height: 800px; z-index: 1; text-align: center; } .masthead { width: 870px; background-image: url(http://www.ourcampusbookstore.com/myspace/images/mastheadbg.jpg); background-repeat: no-repeat; height: 195px; } .innerwrapper { width:870px; padding-left: 92px; padding-right: 22px; background-image: url(http://www.ourcampusbookstore.com/myspace/images/bodybg.jpg); background-repeat: repeat-y; text-align: left; } .uppernav { width: 756px; margin: 0; padding: 0; background-color: 000000; font-weight: bold; display: inline; } .leftcol { clear: both; width: 500px; float: left; vertical-align: top; padding: 10px; } .rightcol { width: 220px; float: left; vertical-align: top; padding: 10px; text-align: center; } .rightcol h3 { text-align: center; } .lowernav { width: 756px; margin: 0; padding: 0; background-color: 000000; font-weight: bold; clear: both; } .footer { width: 870px; background-image: url(http://www.ourcampusbookstore.com/myspace/images/footerbg.jpg); background-position: bottom; background-repeat:no-repeat; height: 30px; clear: both; } .uppernav ul { width: 756px; list-style: none; background-color: 000000; margin: 0; padding: 0; float: left; border-bottom: 2px solid black; } .uppernav ul a { width: 151px; display: block; float: left; margin: 0; text-decoration: none; line-height: 20px; text-align: center; color: ffffff; font-weight: bold; } .lowernav ul { width: 756px; list-style: none; background-color: 000000; margin: 0; padding: 0; float: left; border-bottom: 2px solid black; border-top: 2px solid black; } .lowernav ul a { width: 151px; display: block; float: left; margin: 0; text-decoration: none; line-height: 20px; text-align: center; color: ffffff; font-weight: bold; } .schoollist { text-align: center; } .schoollist li { line-height: 16px; padding: 1px 1px; width: 150px; margin: 0 auto; } .uppernav ul a:hover, .uppernav ul a:visited:hover { background-color: ffcc66; color: 003366; } .lowernav ul a:hover, .lowernav ul a:visited:hover { background-color: ffcc66; color: 003366; } .schoollist a, .schoollist a:visited { color: 000000; background-color: EEEEEE; width: 150px; line-height: 18px; font-size: 14px; font-weight: bold; display: block; padding: 1px; } .schoollist a:hover, .schoollist a:visited:hover { color: FFFFFF; width: 150px; text-decoration: none; background-color: 00FF33; } .c0000FF a, .c0000FF a:visited { width: 150px; text-decoration: none; font-weight: bold; } .c0000FF a:hover, .c0000FF a:visited:hover { color: FF6600; width: 150px; text-decoration: none; background-color: 0000FF; } .c990000 a, .c990000 a:visited { width: 150px; text-decoration: none; font-weight: bold; } .c990000 a:hover, .c990000 a:visited:hover { color: FFCC00; width: 150px; text-decoration: none; background-color: 990000; } .cCC6600 a, .cCC6600 a:visited { width: 150px; text-decoration: none; font-weight: bold; } .cCC6600 a:hover, .cCC6600 a:visited:hover { color: FFFFFF; width: 150px; text-decoration: none; background-color: CC6600; } .c3366CC a, .c3366CC a:visited { width: 150px; text-decoration: none; font-weight: bold; } .c3366CC a:hover, .c3366CC a:visited:hover { color: FFCC33; width: 150px; text-decoration: none; background-color: 3366CC; } .c993333 a, .c993333 a:visited { width: 150px; text-decoration: none; font-weight: bold; } .c993333 a:hover, .c993333 a:visited:hover { color: 999999; width: 150px; text-decoration: none; background-color: 993333; } </style> XHTML: Code: <div class="wrapper"> <div class="masthead"></div> <div class="innerwrapper"> <div class="uppernav"> <ul> <li><a href="#">View our Pics</a></li> <li><a href="#">Watch our Video</a></li> <li><a href="#">View Blog</a></li> <li><a href="#">Send Message</a></li> <li><a href="#">Add 2 Friends</a></li> </ul> </div> <div class="leftcol"> <h1><a href="http://www.ourcampusbookstore.com">OurCampusBookstore.com</a></h1> <h2>About us:</h2> <p><strong>OurCampusBookstore.com</strong> is an online classifieds website customized just for university students. It is formatted to allow students to post anything from textbooks and furniture, to electronics, event announcements and roommates.</p> <h3>What can it be used for?</h3> <ul> <li><strong>1. Post events</strong> - Is your band having a concert? Throwing a huge party? Have a club event to announce? Use the site!</li> <li><strong>2. Furniture</strong> - Are you moving out and need to get rid of furniture? Are you moving into an apartment and need to find furniture? Post what you have or need now and make arrangements to buy/sell your furniture in the future.</li> <li><strong>3. Textbooks</strong>- Buy and sell your used textbooks. Avoid the middleman and the high cost of books. Trade amongst yourselves.</li> <li><strong>4. Jobs</strong> - We have several companies signed up to post available jobs in Pullman, as well as summer internships and post-graduate opportunities all over Washington.</li> <li><strong>5. Apartments</strong> - Need to sublease? Moving to a new apartment? Find information on what's available at ourcampusbookstore.com.</li> <li><strong>6. Electronics, Clothes, etc.</strong> - Sell your used video games, consoles, computers, monitors, TVs, movies, software, and so on.</li> </ul> <h2>Who we'd like to meet:</h2> <p>As many students as possible who have books, furniture and electronics to sell, or students looking for books, furniture, apartments, jobs and events to attend!</p> </div> <div class="rightcol"> <h3>Current Schools</h3> <ul class="schoollist"> <li class="c0000FF"><a href="http://florida.ourcampusbookstore.com">Florida</a></li> <li class="c990000"><a href="http://minnesota.ourcampusbookstore.com">Minnesota</a></li> <li class="cCC6600"><a href="http://texas.ourcampusbookstore.com">Texas</a></li> <li class="c3366CC"><a href="http://ucla.ourcampusbookstore.com">UCLA</a></li> <li class="c993333"><a href="http://washingtonstate.ourcampusbookstore.com">Washington State</a></li> </ul> </div> <div class="lowernav"> <ul> <li><a href="#">Add 2 Group</a></li> <li><a href="#">Forward 2 Friend</a></li> <li><a href="#">Add 2 Favorites</a></li> <li><a href="#">Block Me</a></li> <li><a href="#">Rank Me</a></li> </ul> </div> </div> <div class="footer"></div> </div> |