CSS - Is There A Tool That Will Provide A Visual Map Overlay Of The Css For A Web Page?

Is there anyway I can do something like this using css. Follow the red arrow.


Basically, I would like to put a tiny red square on the upper right hand corner of an image. Is this possible?

Here is the website that i would like to implement it on.

http://upit.section31.us/index.php?browse

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

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.

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 was recently working on something in JQuery where on click I was fading out a div and then fading it back in.

To learn more about CSS transitions, I wondered whether I could do the same thing with transitions.

So I set up a simple bit of JQuery that toggles a class on and off to trigger the transition.

It seems that it's not possible to fade out to 0 in a transition and then fade back in. Unless I'm missing something, you can't set a midpoint of opacity 0.

You can use a CSS animation to do that, but it's not clear to me how you play the animation again when I remove the class.

Am I missing something? Am I just using the wrong tool for the job and should stick with JQuery's fadeOut() and fadeIn() functions?

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

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.

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:

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>

I don't want a browser plugin. I want a tool to open a CSS file and show me samples of the styles. I would like to edit the styles and see the effects of my edits. Any suggestions?

Hi

I want to make a tool where my users can select an area in an image, via resizing a select rectangle.

Do you guys know if this tool is available somewhere? Thought that it's stupid to re-invent the wheel....

Regards, Chrille

I want to display text when I hover over certain areas of an image, so I am using an image map, no href, and assigning the text using ALT=. As a result, the text shows up as a tooltip. It works great except that the background color in the tooltip box is a very dated yellow color that looks inconsistent with the rest of my page. Is there any way to change the background color?

(I am trying to avoid scripts because I've never used them and don't really have time to learn how, at this point)

Thanks, Beth

basically i want them to hover over the image and the tool tip pops up.. it works awesome in firefox(of course) but does nothing in IE.

also for testing i made a link tool tip and it works in IE but its cropped horribly.

you can check it out by looking he

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=9726504

heres the style classes:

Code:

a span 
{
   display: none;
}

a:hover span 
{
  position: absolute;
  display: block;
  background: grey;
  border: 1px solid black;
}

a:hover 
{
   color: 000000;
   background-color: grey;
   text-decoration: none;
   font-size:16;
}

heres the div placement:

Code:

<div class="aim">
<a>
<img border="0" class="" src="http://mattwild.com/media/graphic/aim.gif">
<span>allaimnamesRused</span></a>
</div>

by the way they are the two buttons "add my aim" and "add my msn" and the link underneath them

Hi all

I'm working with Firefox and Firebug plugin. I want to check if the CSS I use is valid *the way browsers interpret it*.

Example:

Code:

/* Valid: */
div.my {
  position: relative;
  z-index: 10;
}

/* Invalid: */
div.my {
  z-index: 10; /* The attribute is not applied to the div, because it's not positioned! These sort of errors I want to get to know somehow! */
}

/* Valid: */
div.my {
  z-index: 10; /* At this point the CSS isn't valid yet... */
}

div.my {
  position: relative; /* Now it is valid (I guess, because I guess the browser first parses all CSS available and only after this it assigns the attributes?) */
}

I hope you see what I mean. I came upon this because I had some problems with z-indexes and then remembered that every z-positioned element needs to be positioned. If I had a cool Firefox plugin that would have checked the CSS every time before it were applied to the document and warned me this wouldn't have been a big problem. ;-)

Thanks a lot for help
Josh