CSS - Centering An Overlay Popup Div

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

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

I suspect that the solution to this problem really involves a more thorough analysis of my code than is fair to inflict upon this audience, but just in case there's something obvious I've overlooked...

I've incorporated a lightbox into a site I'm building at www.charlescarey.co.uk/works.php

When clicking on thumbnails to activate the lightbox, a 'shadow overlay' is supposed to 'grey out' the rest of the page, but it doesn't work; it only greys out a small area to the left.

What am I doing wrong?

Any help appreciated.

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 {


      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;      


 } 

Any help greatly appreciated.

Hi,

I want to create a page where users can advertise using templates overlaid with their own text. Many of these templates are cascaded forming a montage effect (left to right, top to bottom). I figured this could be done using CSS or PHP. Here is the CSS version.....
User enters data in form (subsequently stored in database) User chooses background image (80px by 80px) CSS used to style the text with the chosen image as a background.....in a sized container.
I know this can be done and have achieved it with varying levels of success, but am unsure as to the best method.

Q1 - What would be the best tag or container to use? The text will be used as a link and must display text when 'hovered' over. Should the text be inside <a>, <li>, <div>, etc etc. I don't know which is best for this purpose.

I know the <acronym> tag can be used for 'hover' text, but besides misusing a tag, it's not supported in Opera (so far as I can see) and is displayed differently in firefox/IE.

Q2 - What is the best method of displaying additional text (in multiple browsers) on 'hovering' the link; could I use a 'hidden' div (which is set visible on hover) rather than a tag property, and if so, how could I make it work for links at the edge of the screen (will the layer appear offscreen)? Not sure how to do this?

Thanks for your time, all responses greatly appreciated.

Duncan

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>

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?

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...

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 everyone, I am wondering why IE sucks so bad...


Just kidding. Actually, my CSS popup appears in Mozilla Firefox (best browser on earth ) but not in IE. The guy that I learned it from (http://www.meyerweb.com/eric/css/edge/popups/demo.html) works in both IE and Mozilla, and I dont understand why mine doesn't any help would be appreciated

Mine:
Code:

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 160px; left: -10px; width: 125px;
   padding: 0px; margin: 0px; z-index: 100;
   color: #000; background: #fff;
   font: 10px Verdana, sans-serif; text-align: left; }
div#links {position: absolute; top: 96px; left: 27px; width: 58px; height: 20px; font: 10px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; font: 10px Verdana, sans-serif; 
   padding: 0px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #fff; }

His:
Code:

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 180px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

I'm using Eric Meyer's Pure CSS Popups template for a new site. I want to have a graphic pop up in the middle of the page for one particular link when clicked, rather than have the browser load a new page, but I don't know how to go about it. Can anybody shed some light on how to alter the stylesheet to have this one link act differently from the rest?

Thanks.

Hi guys, i really don't know if this can be accomplished with CSS but here it goes:
I want a user that's filling a form on my web application to be able to click on a certain field(or a link near that field) and pop out another form, fill it, submit it and then continue to fill the original form.
Maybe there's a bit of Javascript there or a combination of technologies, i really don't know so forgive me if i'm in the wrong forum, but i've seen similar stuff done with CSS, so if any of you has any idea on how i can accomplish this i'd appreciate it very much.
I've attached a graphic to illustrate it better.
Thanks!

I'll admit right off - I don't know much about CSS.

I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message.

I know my viewers are going to be using IE 6.1.

I've looked through here and on google for it, and I think I'm just looking in the wrong place.

Thanks.

I have the following page:

http://take2records.com/test/dbtest.php

Which you can test using

http://take2records.com/test/dbtest...4&id_num=404100

What I need is to be able to have a popup any time you hover over a particular row in the generated table.

I found this code to do the hover:

Code:

class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />

But I don't see how to apply this when the user hovers over a particular row.