|
CSS - Problem With Onmouseout Event On Layer
Hello,
I have a table inside a layer (position: absolute). I want to apply onMouseOut event to my layer, so when I roll my mouse outside of the layer it gives an alert message. Well, it does give an alert when I move my out outside of the layer. But it also alerts when I move my mouse over the table which is inside my layer. I'm sure it's something simple, but I'm struggling with it for hours already and can't find any solution. Code below. What am I doing wrong? <div style="position:relative; z-index:1;"> <div style="position: absolute; z-index:2; background-color:#009900; padding:10px; width: 200px; height:200px;" onMouseOut="alert('hey');"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td>table</td> </tr> </table> </div> </div> Thanks so much! Similar TutorialsI've been re-designing my site in valid XHTML 1.1 and CSS, and I've hit a bit of a problem.... Everything works perfectly in Firefox, but IE isn't liking things at all. The navbar at the left should stretch all the way to the bottom image, but it isnt having it. I've tried messing with it for about an hour now, and can't fix it.... The page can be found at URL and the stylesheet at URL Oh, and I know the colours are all messed up, I'll fix that later :P Edit: Fixed bbCode (never mind, i dont need layers anyways) Sorry, pls delete this! Hi, the foolowing code is highlighting some options that I have in a layer sitting on top of a tablet type object. In IE the options are displayed 'inside' the tablet. In Firefox they are spread out down the page into my footer, any ideas what I can add to contain them within the tablet layer? PHP Code: <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 1px; top: 188px; visibility:visible" id="layer2"> <div style="position: absolute; width: 100px; height: 24px; z-index: 1; left: 46px; top: 35px; visibility:visible; right:0; bottom:0" id="layer3"> <p align="center"><font color="#4E261B"><b> <span style="font-size: 11pt"> <a href="home" style="text-decoration: none"> <font color="#4E261B">Home</font></a></span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">About US</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Register</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">User Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Supplier Log-in</span></b></font><p align="center"> <p align="center"> <font color="#4E261B"><b><span style="font-size: 11pt">Join Head2Toe</span></b></font></div> <img border="0" src="images/bridetablet1.bmp" width="190" height="302"></div> <p></div> <!-- to clear footer --> </div><!-- end outer div --> Layer 2 is the tablet, layer 3 is the text on top. if you need anything else, please let me know. Thanks, G Hi everyone, I am having a very difficult problem using Dreamweaver and I would be very grateful for any advice given. I recently created a simple website using layers and when I previewed it, it looked great and it had no reported browser errors. I had several people view it and only one of my friends had trouble seeing it. He said that the layers were out of position and sometimes overlaped. We both were using Explorer 6.0. The only difference between our computers is that he has a 21" monitor while I have a 17". Would that effect the web page design? Why are the layers not positioning correctly? If anyone needs to view the website it can be seen at http://sky.prohosting.com/lovecare Please help me! Thanks, Steve I am trying to put left and right shadows on a layer, I am doing this by using two alternatively padded layers on top of each other. This code does that: PHP Code: #maincontent{ background-image: url(images/layout/contentpanel/contentpanel_background.gif); background-repeat: repeat-y; background-position: left; border: 0px !important; padding-left: 30px; } #maincontent_inner{ background-image: url(images/layout/contentpanel/contentpanel_backgroundright.gif); background-repeat: repeat-y; background-position: right; border: 0px !important; padding-right: 30px; } PHP Code: <div id="hold_content"> <div id="maincontent"> <div id="maincontent_inner"><? include("includes/homepageloremipsum.php")?> </div><!-- End maincontent_inner --> </div><!-- End maincontent --> </div> Now, in firefox the shadow images work fine, however, on IE they start about 2 inches down. However, after scrolling up and down the page they start at the top so this is obviously some kind of layering problem. I can't work out what though. Any ideas? Hello, someone call tell me why this code didnt work? i try to put some flash banner in nested divs using z-index and its not working the flash div is above the higher div. i am tryin to href the flash banner: Code:
<asp:FormView DataSourceID="SqlDataSource20" runat="server">
<ItemTemplate>
<div style="width:728px; height:90px; position:relative; padding:0px; margin:0px; z-index:100; cursor:pointer; display:block; background-color:Lime;" onclick="window.new('<%#Eval("destUrl") %>', '_blank');">
<div style="width:728px; height:90px; position:absolute; left:0px; top:0px; padding:0px; margin:0px; z-index:-1; display:block;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="<%#Eval("bannerSrc") %>" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="opaque" />
</object>
</div>
</div>
</ItemTemplate>
</asp:FormView>
My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE). Nested webpage error URL Normal page URL I don't know why this is happening, especially since it's only part of time. Please help! Thank you, Misha I've seen a fix for this online before, but I can't seem to find it now. Basically I've got the following layer declartion: HTML Code _NOT_ php PHP Code: <div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low. How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this. Hello I thought I could make it, but what I got so far is jumping over the screen, so please a need some help. I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Now the issue, image 2 and 3 should be dynamically replaceable. Please help Thanks question about onmouseout effect using css my question is if i move the mouse over an image which is a link to get any effect i can use a:hover{ } lets say for example i have a horizontal row which contains images and these are links, ex= home aboutus ... total of 5 links just above this horizontal row lets say i have the same set of 5 images which by default are hidden using display: none; <img src="homehidden.jpg" id="home"> <img src="abouthidden.jpg" id="about"> ... #home{ display: none; } #about{ display: none; } ... only when i mouse over any of the links which are visible by default, i would like to show 1 image relavant to the link ex=home which is above all the 5 visible images so should my css code be visiblerowhomeimage:hover{ #home.visibility: visible; } which would show the invisible image on mouse over for home, aboutus etc... please advice if my code is correct. thanks. Hi all, I'm trying to center a CSS layer, and have tried everything google and I can find on the web about CSS centering, but none work. I simply cannot get the following "menu" to center horizontally in a browser window [note: I *can* get it to center if I set the left and right margins of the "menu" layer to the same value, but that stretches the "BDB76B" colored background out, which I don't want to do]. Any help appreciated - thanks in advance to any takers! Here is the relevant code in the html document: <div id="menu"> <a href="index.html" class=menu_link>home</a> <a href="services.html" class=menu_link>services</a> <a href="hosting.html" class=menu_link>hosting</a> <a href="testimonials.html" class=menu_link>testimonials</a> <a href="tips_tools.html" class=menu_link>tips & tools</a> <a href="contact.html" class=menu_link>contact</a> </div> and here is the relevant code from my style sheet: #menu { background: #BDB76B; position: absolute; top: 85px; height: 15px; width: 800px; padding-bottom: 5px; z-index: 100; } a.menu_link, a.menu_link:visited{ font-size: medium; color: #808000; font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-variant: small-caps; margin: 0px; padding: 2px 5px 4px 5px; text-decoration: none; } a.menu_link:hover{ font-size: medium; color: black; font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-variant: small-caps; margin: 0px; padding: 2px 5px 4px 5px; text-decoration: underline; } http://balmarketing.com/new/ I think actually the trouble lies in my content layer not centering itself correctly and its being pushed to the right by the nav layer. It looks semi what I want it to look like in FF but not in IE. Any suggestions on how I can fix this? I want to take a layer and center on a page. In other words if I have the margins top = 0 and left=0 then inside the main layer which takes into account the entire page I want it to be centered on the page. At present I can center a table on a page but not a layer???? how to do this? thanks Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space. So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks. Hi Guys, Basically I'm having trouble with getting the 'Content' div layer to wrap around the switching div layers. The grey background colour represents the 'Content' div layer which wraps around the button menu OK but doesn't wrap around the layers which switch. The bodged way of doing it is to have a fixed height but then it leaves a blank area underneath the divs that are short of text...If you get what I mean? Code:
<div id="content_test">
<div id="rollovercontentwrapper">
<div id="tabwrapper">
<ul id="tabmenu">
<li><p><a href="#" onClick="javascript:showTabContentOne('TabContentOne')">Summary</p></a></li>
<li><p><a href="#" onClick="javascript:showTabContentTwo('TabContentTwo')">Benefits</p></a></li>
</ul><!--TABMENU-->
</div><!--TABWRAPPER-->
<div id="TabContentOne" class="TabContentOne" style="visibility: hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus,
porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus,
et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies
urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu
cursus nisi interdum.</p>
<br>
<p>In hac habitasse platea dictumst. Sed vulputate auctor cursus. Morbi ac
ullamcorper dui. In sem velit, pulvinar sit amet cursus id, vulputate fringilla
erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Sed lorem urna, imperdiet eget fringilla eget, molestie nec justo.
Fusce diam nulla, fringilla a sodales at, rhoncus vitae massa. Donec tincidunt,
leo quis fermentum venenatis, purus elit tincidunt ipsum, vitae sollicitudin nulla
orci nec arcu. Sed non neque neque, ac pharetra lectus. Donec a massa mauris. Sed
vel magna eget tellus commodo placerat in quis risus. Aenean velit lectus, aliquam
quis dictum ac, pellentesque sed diam.</p>
</div><!--TabContentOne-->
<div id="TabContentTwo" class="TabContentTwo" style="visibility: hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus,
porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus,
et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies
urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu
cursus nisi interdum.</p>
</div><!--TabContentTwo-->
</div><!--ROLLOVERCONTENTWRAPPER-->
</div> <!----CONTENT_TEST---->
<div id="onebyone" style="visibility:hidden;">
<img src="onebyonepixel.gif" onLoad="javascript:showTabContentOne('TabContentOne')" width="1" height="1">
</div>
Code:
div#rollovercontentwrapper {
float: left;
width: 630px;
background-color: #E9E9E8
}
div#tabwrapper {
width: 630px;
}
ul#tabmenu {
display: block;
float: left;
width: 630px;
list-style-type: none;
border-bottom: 1px solid #0048A7;
}
ul#tabmenu li {
display: block;
float: left;
background-color: #E9E9E8;
}
ul#tabmenu li a {
display: block;
float: left;
padding: 10px;
background-color: #E9E9E8;
border-top: 1px dashed #0048A7;
border-right: 1px dashed #0048A7;
}
ul#tabmenu li a:focus {
display: block;
float: left;
padding: 10px;
background-color: #3383CD;
border-top: 1px dashed #0048A7;
border-right: 1px dashed #0048A7;
}
#TabContentOne {
float: left;
position: absolute;
top: 350px;
width: 628px;
z-index: 1;
padding-top: 10px;
padding-bottom: 10px;
}
#TabContentTwo {
float: left;
position: absolute;
top: 350px;
width: 628px;
z-index: 1;
padding-top: 10px;
padding-bottom: 10px;
}
div#onebyone {
float: left;
}
div#content_test {
float: left;
width: 900px;
padding: 20px;
background-color: #CCCCCC;
}
Can anybody help me out on this? Many thanks, Mark I need to position a 200px high by 300px wide layer in the center of the page. does anyone know a simple way to do this, i have thought about using JS to calculate the width of the page, take off the 200px, and halve it, but that seems like overkill, isnt there a simple CSS command? Thanks Xaphan Hi! Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality. Regards Bjorn Well, I can't post links so this is going to be hard as hell to type out. I have a layer within that page that I want in a certain position, yet when I move the width of my browser the layer does not stay where I want it. Obviousely, this does not make any sense because its something you have to see. I checked the rules for the forums and I can't find where it states anything about URLs, if someone would be so kind to show me, I'd appericiate it. Not that it matters witout seeing it on the page but my code for this layer is: Code: <div id="Layer1" style="position:absolute; left:848px; top:85px; width:118px; height:167px; z-index:1">
<div class="mltop">schedule +4hrs </div>
<p>00:00 - Music <br>
01:00 - Music <br>
02:00 - Music <br>
03:00 - <a href="">BRR</a></p>
<p><b>Current time: 00:00</b><br>
Times in CST/CDT
<br>
</p>
</div>
|
|||||||