CSS - Css Overlay Tables

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.

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

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:

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

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

I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too.

I want a layout with two tables next to each at the top and then another below.

The two at the top are working fine, but the one below keeps jumping back up to the top.

I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution.

The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why.

Here is my code for my page and CSS.

If anyone can help I'd be most grateful.

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" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
	document.getElementById("nav" + num).style.paddingTop = '0px'
	document.getElementById("nav" + num).style.paddingBottom = '0px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '10px';
	document.getElementById("nav" + num).style.borderBottomWidth = '10px';
	
}

function navoff(num) {
	document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
	document.getElementById("nav" + num).style.paddingTop = '8px'
	document.getElementById("nav" + num).style.paddingBottom = '8px'; 
	document.getElementById("nav" + num).style.borderTopWidth = '2px';
	document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>

</head>

<body>
<div class="main">

<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>

<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

body {
	padding-right: 4%;
	padding-left: 4%;
	padding-top: 30px;
	padding-bottom: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #000000;
	background-color: #EEEEEE;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
.main {
	background:#FFFFFF;
	border: 10px solid #36393D;
	width: 89%;
	padding: 5%;
}
.nav {
	padding: 8px;
	background-color: #C3D9FF;
	vertical-align: middle;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #36393D;
	cursor:pointer;
	border: 2px solid #36393D;
}

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,
how can I draw these borders to a table using css?

Thank you!

Hi,

I always used tables for my layout but want to change that to CSS.
Problem is, I don't know how to get started thinking of the layout in css.
I mostly make my pages centered with tables, can I do this with CSS?
Does CSS use absolute position ?
I was making a site with tables, but want to change that to CSS
Know of any good tutorials (for people who used tables before)

greets

I grew up doing web programming knowing that tables were bad. It didn't take long before I read all the documents on why not to use tables for design.

And I know firsthand...

What still mystifies me to this day is why whenever I check another newer "professional" site, it's all in tables... sometimes with no CSS at all... sometimes with a little.

I rarely see a site that has no tables.

Why is this? Is it to minimize problem with IE?

After discovering Css and finally understand it...(still need to get better) I have to ask, when is it good to use a table? what are their main function ? is there things you can do with a table that cannot be done with css? thanks.

Hello.

I'm currently tweaking the layout of one of the websites I run. Every page on the site consists of a series of side boxes on the left and main content on the right and currently this divide is created though tables. I'm trying to replace the old tablular layout with a series of divs which are positioned with CSS.

Below the header of my page is a content div, which contains two other divs, left and right. The rest of the site content resides in seperate divs in either the left or right div.

I've managed to position the left div on the left hand side of the page and the right div on the right. However, the text in the right div is longer than the content in the left div and I'm finding that once the content on the left has finished, the content on the right is filling the whole of the page beneath it, when I actually want it to stay on the right and just leave the remainder of the left hand side blank.

I've been trying to fix this for a while now and haven't managed to do so yet so I'm hoping someone here might be able to offer some suggestions. I've put up a sample page of the layout at http://www.mybb-emods.com/new/index.htm. Similarly, the CSS code I'm using is located at http://www.mybb-emods.com/new/stylesheet.css.

If anyone could help me, I would really appreciate some advice. I've a feeling there's a really simple solution here, but I certainly haven't managed to find it yet.