background-color: transparent…

@IxxIJun 04.2003

I have a problem with this as I want to use a mouseover on the div, but I would like the div to be a rectangle. However, as soon as I change background from white to transparent the div seems to change shape (I assume it maps to the objects in it), but this screws up my mouseover. Is there anyway to have it transparent but still rectangular???

IxxI

to post a comment

CSS

28 Comments(s) _↴

@khakiJun 04.2003 — #good morning xx...

i don't really understand how your <div> is [I]not[/I] a rectangle.

do you have (or try) this in your style:

display: block;

background-color: transparent;

or can you paste your code

(i'm still learning this stuff too... so it's helpful to practice on stuff that is troublesome to figure-out)

fed-up with the rain...

? k

@cmelnickJun 04.2003 — #I'm with khaki on this one, I'm not sure how you can have a div that isn't a rectangle, but see [URL]http://www.aardwulf.com/tutor/csstransparencytest.html[/URL] for my example that does what (I think) you are trying to do, or at least similar.

@khakiJun 04.2003 — #hi cmelnick....

is that valid:

[SIZE=1] <div style="

width: 300;

height: 300;

position: absolute;

top: 0px;

left: 0px;

z-index: 20;

background: lightblue;

border: 3px solid black;"

onMouseOver="this.style.background = 'transparent';"

onMouseOut="this.style.background = 'lightblue';"

>[/SIZE]

because I've never seen it done that way.

i always thought that you needed to use:

[SIZE=1] <style type="text/css">

style business in here

</style>[/SIZE]

and i've really never seen mouseovers in the css either.

it's really very cool (if it's allowed).

so...

is it?

seriously.... enough rain already ? ...

? k

@AdamGundryJun 04.2003 — #khaki, that is CSS in the div's [URL=http://www.w3.org/TR/html401/present/styles.html#adef-style]style[/URL] attribute, known as an inline style. It is legal but less often used because it negates the advantage of using external stylesheets. The mouseover attributes are not part of the CSS.

BTW, shouldn't width and height have units (px) specified?

Adam

@khakiJun 04.2003 — #oh crap....

i totally mis-read the code.

i didn't even see the word "div"...

i thought that it was all part of a style tag...

like...

[SIZE=1]

<style="

width: 300;

height: 300;

position: absolute;

top: 0px;

left: 0px;

z-index: 20;

background: lightblue;

border: 3px solid black;"

onMouseOver="this.style.background = 'transparent';"

onMouseOut="this.style.background = 'lightblue';"

> [/SIZE]

yikes....

total brain fart.

ignore me today...

it must be all the rain...

:rolleyes: k

@AdamGundryJun 04.2003 — #If it makes you feel better, it's been raining a lot here in Cornwall as well. ?

Adam

@IxxIauthorJun 05.2003 — #Thank you all, but I'm using

display: block;

background-color: transparent

an it still doesn't seem to work. What my problem is, is that I have an onmouseout event that should be fired when I leave a transparent div that has objects in it, however it fires a soom as I'm off the objects - if you wish I'll post a zip with my stuff in it...

IxxI

@IxxIauthorJun 05.2003 — #Ignore that last post -I've discovered the problem. If there is text underneath where the transparent div is as the mouse moves over it gives precendence to the layer with the text on, so the mouse cursor changes and the onmouseout event is fired. I don't suppose anyone knows a way round this??

Thanks,

IxxI

@khakiJun 05.2003 — #it gives precendence to the layer with the text [/QUOTE] to the layer UNDER the layer that is on top?

can you maybe give a stripped-down example of that?

it's raining (again ? ) today....

so i'll play around with it a little.

? k

@cmelnickJun 05.2003 — #All right, I was able to reproduce your problem. I tried playing around with capturing events and all that stuff and have so far been unsuccessful. Can you post code anyway so we can see if there is a similar way to do what you are trying to do? You could "fake it" like the example below.

&lt;html&gt;
 &lt;head&gt;&lt;title&gt;CSS transparency test&lt;/title&gt;&lt;/head&gt;
 &lt;body&gt;
 &lt;div style="
 text-align: center;
 display: block;
 width: 300; 
 height: 300; 
 position: absolute; 
 top: 0px;
 left: 0px;
 z-index: 20;
 background: lightblue; 
 border: 3px solid black;"
 onMouseOver="this.innerHTML = 'Hidden text!';this.style.background = 'transparent';"
 onMouseOut="this.innerHTML = '';this.style.background = 'lightblue';"
 &gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@IxxIauthorJun 05.2003 — #No I can't really cheat, and I'll need to explain a bit. The stuff I've zipped needs all to go in the same folder and then just open index.htm. If you now move your mouse over "contacts" (3rd link down). Now if you move just to the right of any of the links (above the arrow) the menu will close. Equally if you click on the arrow then almost as soon as the menu has shifted down it will close. Now click on "search" (2nd link down) and you should be taken to a page with lots of blanks. Now if you try the same thing again the menu will stay there, and the same once you have clicked the arrow. However if you scroll down the page to where there's loads of text you get the same problem. Now if you go into menu.css and find .subs, change background-color: transparent; to background-color: white; and try again, now there is no longer a problem. Sorry for the spiel and thanks for helping...

IxxI

[upl-file uuid=f5529ed0-f708-4cdf-8156-2e8c3d0adeb9 size=91kB]test.zip[/upl-file]

@khakiJun 05.2003 — #okay xx....

a couple of things...

first.... not all of the files came included in the zip file.

second... is this cross-browser functional?

cause I'm not using IE and I'm not seeing anything happen at all.

third... the menu is a javascript creation....

so....

I'm out :rolleyes:

aside from the fact that i am a dunce with javascript...

i no longer believe that javascript menus should be used.

that's just a personal opinion.... and i'm not making any judgements.

and if i actually had some clue about javascript...

then i might look at this as a challenge...

but i don't...

so it's not.

:rolleyes: sorry ?

and besides....

it looks like the weather is starting to clear

?

could this turn into a beach day?

(please please please please please please)

good luck buddy (sorry ? )...

? k

@IxxIauthorJun 05.2003 — #Right sorry, missed a couple of things in my explanation. All the files you need should be there, I know not every link goes to a page (well only the first 2 do) but it should be enough for an example. Second ummm :rolleyes: I've never known how to program for netscape, and I'm doing this for a company's intranet - they only use IE and javascript is always enabled... As to javascript menu's - fair enough everyones entitled to an opinion. Thanks for the help so far, and I hope the weather there is better than the weather here...

IxxI

?

@nkaisareJun 05.2003 — #[i]Originally posted by cmelnick [/i]

[B]width: 300;

height: 300;[/B][/QUOTE]
This ought to be "width: 300px; height: 300px;". You may omit units only if the width/height is 0. width: 300 will be ignored even by IE in standards mode.

@khakiJun 05.2003 — #i don't want to bust your chops xx (seriously.... you know that right? ? )...

but the use of javascript for navigation is inaccessible REGARDLESS as to whether a company uses IE only and enables javascript company-wide.

I've seen Charles go-off about how companies can (or should) be criminally prosecuted for such offenese...

and while I feel that it is unlikely to happen...

I would personally place a disclaimer on the site stating the limitations that the site is created for.

After all... it's the company's choice to allow their site to be designed this way.

and the bottom-line is...

you are not developing a "website" for cross-browser/accessible purposes.

what you [I]are[/I] developing is a "proprietary application" for use within the company's own internal network.

just cover your own butt (and let the company deal with any issues regarding any disabled employees that they may hire or already employ).

sorry if that seemed like chop-busting.

it wasn't meant that way.

it's just that I am now becoming careful about these things for myself...

and I think that it's wise for everyone to cover their own tracks in situations such as this.

i hope that your not mad at me now... are you ? ...

? k

oh... and no... the weather has gone dark and gray again ?

@nkaisareJun 05.2003 — #[i]Originally posted by khaki [/i][/quote]
[B]I've seen Charles go-off about how companies can (or should) be criminally prosecuted for such offenese...

and while I feel that it is unlikely to happen...[/B]

Well actually, it HAS happened. Sydney olympic committee was successfully sued because the navigation for the entire site was javascript based. A user who didn't have javascript (or preferred not to use it) sued it because he couldn't get to the contents page and no alternative navigation was provided. This lawsuit may be first of many.

[b]After all... it's the company's choice to allow their site to be designed this way.[/b]

I know of a case where a company was required to create additional entrance close to the parking lot to make their office handicapped accessible. Who knows, in the near future, non-personal sites may be required to meet certain level of accessibility requirements.

[b]sorry if that seemed like chop-busting.[/b]

Is it still raining. BTW, I was in NJ/NYC for 3 wet days. Glad to be back in sunny Atlanta.

@Robert_WellockJun 05.2003 — #It is highly likely various categories of non-personal sites will have to meet specific accessibly standards within a few years in the UK: http://www.disability.gov.uk/law.html

I myself am classified as having a [i]disability[/i] in the eyes of the law.

@khakiJun 05.2003 — #first of all...

I feel bad that I didn't offer a solution to the original question.

secondly...

I really only wrote what I did because I think that companies that encourage/support proprietary web development are exceptionally short-sighted in their thinking...

and they will become captive to specific vendors and/or will need to re-train or fire/hire developers when or if the vendor changes.

as developers... we owe it to ourselves to learn and abide by the standards of our own medium.

and if a company makes decisions that take us away from that direction...

then we should cover our own butts.

But ultimately... and for our own good...

we should all try to learn and abide by the standards of our own medium.

after all... it's easy to dumb-down our product for others if we really need to.

But it's a bad thing to find yourself an IE-only developer in a company that changes browser vendors (which happened to me in my 1st web development job... so I know first-hand!).

yikes....

sorry xx

i'm off-topic and talking too much.

? k

@IxxIauthorJun 05.2003 — #Cheers khaki,

Don't worry I'm not mad at you (how could I be ?...) I've read the threads and seen the arguments, and don't worry there is a non-javascript alternative, on the site the menu's that slide out only take you to relative links on the page that you can get to by clicking the original menu button, I just want to get the javascript one working now... And also definately I will cover my butt, I'll make sure those who employ me know the limitations of what I'm doing (but a non-javascript alternative should be enough, right?). Thanks for the advice. Also nkaisare, if you look at the css in the zip you'll find its all px'ed, but thanks for pointing it out...

Oh and if anyone else has a suggestion about the transparency problem I'm all ears :p

IxxI

@nkaisareJun 05.2003 — #I guess we just took off leaving the topic stranded in the tarmac.

IxxI, nothing shows on the index page. The other pages show the sentences "Lots of text Lots of text Lots of text Lots of text Lots of text This is an example page" repeated a number of times.

The file mainmenu.js is not included in your zip file.

[size=1]<BODY bgcolor="white">

<div id="menu">

<script src="mainmenu.js" type="text/javascript"></script>

</div>

</BODY>[/size]

This is exctly what sydney olympics got sued for. Their menu had no HTML, it was all javascript.

@khakiJun 05.2003 — # The file mainmenu.js is not included in your zip file. [/QUOTE] yeah... actually it is Niket (look again?)

and i'm the one responsibile for burying the original topic :rolleyes: ...

so I hope that one of you guys (or someone) can help xx with the solution.

and since i'm weak in the area required to solve this...

i'll bow-out now

(but seriously.... the js file is in the zip contents)...

? k

@IxxIauthorJun 05.2003 — #Yeah it should be there. And yes - I've converted mainmenu.js to html already - that was just handy at the time. And about being an IE specific developer stuck when a company changes browsers, I'm not there for much longer. This is only a gap year job, so I'm off to Uni soon, but I didn't originally get employed for my coding skills (when I got there I didn't even know what HTML stood for), but since this January I've been learning (mostly from you guys) and so they've kept me on to redesign their intranet...

Anyway - thanks for your input khaki, its udeful as always, and thanks for somehow bringin it back to the topic...?

IxxI

@cmelnickJun 06.2003 — #Hello again...

There's not a whole lot you can do to fix this. You could set the timeout to be greater than 500 ms so that the user has more time to move the mouse back over the menu so the timer resets. Instead of closing the menu on a mouseout, you could close it on a click anywhere else on the page (I HATE this option, but I thought I would throw it out there.) You could add a transparent gif to the end of each menu item so it would be the same width as the menu item with the arrow. I actually like this one the best, even though it is not the best code fix, but more of a workaround. It would take some tweaking of what you currently have, because right now if you add another image, it wraps around, so you would need to make your div widths bigger. In pseudocode, here is what I would do:

<i>
 </i>&lt;div class="SubMenu"&gt;
 &lt;div class="MenuItem"&gt;
 &lt;img src="halifax.gif" width=150 height=30&gt;
 &lt;img src="transparent1px.gif" width=30 height=30&gt;
 &lt;/div&gt;
 &lt;div class="MenuItem"&gt;
 &lt;img src="newyork.gif" width=150 height=30&gt;
 &lt;img src="transparent1px.gif" width=30 height=30&gt;
 &lt;/div&gt;
 &lt;div class="MenuItem"&gt;
 &lt;img src="france.gif" width=150 height=30&gt;
 &lt;img src="uparrow.gif" width=30 height=30 onClick="function to scroll up"&gt;
 &lt;/div&gt;
 &lt;/div&gt;

You don't really need the up/down arrows in divs of their own.

Hey, it might not be beautiful code, but it works ?

[URL=http://www.aardwulf.com/pics/transparent1px.gif]You can download my 1px transparent gif here[/URL]. You will just need to set width and height to what you need.

@IxxIauthorJun 06.2003 — #Cheers cmelnick,

As you can see from the majority of my code I have been avidly following the cult of not-beautiful-but-it-works-damnit coders, therefore I will gladly use your workaround, thanks for the idea - I should really have thought of that one myself, but as usual its a lot easier if other people do it for me ?

IxxI

@cmelnickJun 06.2003 — #No problem... Glad to be of help to you. From personal experience, sometimes an answer is right in front of my face, but I have been looking at it for so long, I can't see it.

Have a good one!

@khayman2001Oct 25.2003 — #[i]Originally posted by AdamGundry [/i]

[B]khaki, that is CSS in the div's [URL=http://www.w3.org/TR/html401/present/styles.html#adef-style]style[/URL] attribute, known as an inline style. It is legal but less often used because it negates the advantage of using external stylesheets. The mouseover attributes are not part of the CSS.

BTW, shouldn't width and height have units (px) specified?

Adam [/B][/QUOTE]

It doesn't necesscarily negate the advantage of using the external sheets, there's just a hierarchy of which take precidence. Inline styles override style tags, which in turn override externally linked sheets. So you can have an external, and if you want to change a slight thing on one page, slip a style tag in the head, and if you want to further tweak a single element, you can add an inline.

@nkaisareOct 26.2003 — #Unless of course you use [color=blue]!important[/color] to override all else ?

@PunkSktBrdr01Nov 04.2003 — #For the MenuItem class, try adding:

[CODE]
 display:block;
 width:100%;
 [/CODE]

Also in #CSS _↴

Aiming for 2-column layout fixed background Extra spacing for php conditioned link?

Success!

Help @IxxI spread the word by sharing this article on Twitter...

Tweet This

background-color: transparent…

28 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

background-color: transparent…

28 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #CSS _↴