|
HTML - Drag Ap (layer) Element, Cs3, Z-index, Firefox
The 'Drag AP Element' behavior allows one to click a floating div and move it around. There is also a setting that is supposed to bring the layer to the front when it is dragged and then it can be set to leave it on top or put it back (restore z-index) While this behavior works perfect in IE, it has a few quirks in Firefox. While the drag part works fine, Firefox will not bring the layer to the front - unless, as I just discovered, all the layers have the same z-index - which, in my current case, is a acceptable workaround. Drag AP still doesn't function at all in safari but thats a 'whole nother' thread
Similar TutorialsHello, I am building a website for a client : http://timhawarah.com/testing.php In Firefox (my favorite browser) there is about a 15 px space in the rooftop of the house which is wrong. In IE the website looks like it should. What can I do to correct this problem. Any help would be most appreciated! Thanks, TaylorJumbo MY CSS looks like this: Quote: body { background-color: #202020; font-family: Arial, Verdana, sans-serif; font-size:12px; color:#202020; text-align: left; } #topnavigation li { display: inline; list-style-type: none; padding-right: 13px; } #top2 li { display: inline; list-style-type: none; padding-right: 13px; } a:link, a:visited { text-decoration:none; font-weight: none; font-family: Arial, Verdana; padding: 0px; marging: 0px; font-size: 10px; background-color: transparent; color: #202020; border-bottom: 1px dashed #3e9446; } a:hover { text-decoration:none; font-weight: none; font-family: Arial, Verdana; padding: 0px; marging: 0px; font-size: 10px; background-color: transparent; color: #fff; border-bottom: 1px dashed #3e9446; } a.imagelink:link, a.imagelink:visited, a.imagelink:active { text-decoration:none; font-weight: bold; font-size: 12px; background-color: none; color: #202020; border: 0px; } a.imagelink:hover { text-decoration:none; background-color: none; color: #fff; border: 0px;; } #outercase { width: 790px; background-color: #fff; margin: 0px auto; padding: 0px; border: 0px; text-align: left; } #top1 { width: 790px; height: 57px; margin: 0px; padding: 0px; text-align: left; background-color: #fff; background: url("/images/wip1.jpg") no-repeat; border: 0px; } #top2 { width: 790px; height: 122px; margin: 0px; padding: 0px; text-align: right; background-color: #fff; background: url("/images/wip2.jpg") no-repeat; border: 0px; } #topnavigation { width: 780px; margin: 0px; padding-right: 10px; padding-top: 5px; text-align: right; background-color: #fff; border: 0px; } #middle { width: 750px; height: 300px; margin: 0px; padding: 20px; text-align: left; background-color: #fff; border: 0px; } #banners { width: 770px; margin: 0px; padding: 10px; text-align: left; background-color: #fff; border: 0px; } #bottom { width: 780px; height: 10px; font-size: 9px; margin: 0px; padding: 5px; text-align: left; background-color: #3e9446; border: 0px; } and my xhtml looks like this Quote: <?include("header.php");?> <div id="outercase"> <div id="topnavigation"> <?include("navitop.php");?> </div> <div id="top1"> </div><div id="top2"> <?include("teasertop.php");?> </div> <div id="middle"> </div> <div id="banners"> <?include("banners.php");?> </div> <div id="bottom"> <?include("footer.php");?> I finally figured out how to add text to my index and now I have another question. In my website template There is Heading 1 and a Heading 2 so my question is how do I delete any sections or headings that I don't need to make it go away on my home page. There is so much and I don't think I need all of it..... Thanks in advance im looking for a drag and drop code. for example: i have a plain image thats green (grass) and have an area under it that has images (houses) , know i want so the images in the bottom so he would be making his town in the grass from houses then they will be able to save it or if not they can take a screenshot lol can someone tell me how to do this? -USprodigy well im following this: http://www.walterzorn.com/dragdrop/dragdrop_e.htm i downloaded and unzipped wz_dragdrop.zip contains transparentpixel.gif and wz_dragdrop.js. I put them in my site aka: = i put: <script type="text/javascript" src="wz_dragdrop.js"></script> right after the <body> and: <script type="text/javascript"> <!-- SET_DHTML("name1", "name2", "anotherLayer", "lastImage"); //--> </script> right bfore </body> BUT i dont understand this: can someone help me? THNX Would it possible to use the iGoogle api to drag and drop boxes around ? Could you indicate me the link ? thanks hi can any one help me out in this how to make these drag n drop icon which i usually see on many sites n it look's nyc tooo for e.g i want to make one of mine too can anybody provide/help me wid source code of it thanks in advance I have a jpeg (1600 x 1600) and a "view port" on my html page that measures 400x400. Can I put the entire jpeg "behind: the viewport somehow and enable the user to drag it around so as to be able to see the whole thing (like on Google Maps)? If there is an example somewhere of how to do this, could you point me to it? Thanks, JAS didn't get a reply in the css forum, here is the site.. http://www.pomatrock.brevard.k12.fl.us/goodnews.html the css file is attached as a word doc. if you go to any of the years..(2k5,2k6 etc) there is a div on the left side, used to cover up the dark brown with a light brown. Problem is, in Firefox it shows up way too long and adds a long extension of brown from the bottom of the page, but in IE it looks just fine. Some help would be greatly appreciated. :-D thanks. hi all, is there a way to have a div layer 100% in height and 100% in width? thanks This is kind of hard to explain so I hope you stay with me. I have a site and everytime you navigate to a page everything is loaded. The same images the same background everything. So I firgured to help save the load time of pages I would make a frameset. Since the Only thing the on my site that changes is one layer with new text. Unfortunately, the frameset won't work. I use hidden layers as a drop down navigation for a few buttons when you hover over them. So if I were to use a framset the layer would then drop down but the mainframe would cover up the drop down navigation (which is a layer). I tried figuring out to get a layer to show up over all frames but I had no luck. I also messed around with z index but that still didnt work. So my question is... is it possible to get a layer to change but not the entire page? Here is the site, www.griffithband.com If you look you will see that layer17 is the only layer that changes. Is there a way to get that to be the only thing to change when going to a new page rather then the entire page? Layers 31, 30, and 29 are the drop down navigation, and the reason why I cannot use the frameset as they will not show becuase they go underneath the mainframe. I'm in no way very fluent with any coding. I only work on this site and thats it. Thanks in advance. Hello all, I'm having some trouble getting html to display in my <layer> tags, for example if I use the code: HTML Code: <layer src = "myfile.html"> The file that I'm trying to display does not show, even though it is in the same local directory. Has anyone else ever tried this successfully? Thanks! I created the css below. It is a list that contains my navigation buttons on the left hand side of the page. The buttons work good. Now, I want to add some pictures to the left of the buttons. When I do this a space becomes apparent between the buttons. (top & bottom). I tried adding a layer but like I said it creates a space between buttons. Any help is appreciated. Thanks,. .Blockhead #navcontainer { width: 200px; } #navcontainer ul { margin-left: 0; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a { display: block; padding: 3px; width: 160px; background-color: #669966; border-bottom: 1px solid #eee; ; background-image: none } #navcontainer a:link { color: #FFFF00; text-decoration: none; } #navcontainer a:hover { color: #33FF99; ; background-image: none ; background-color: #669999 } #navlist a:visited { color: #CCCCCC; text-decoration: none; Here's the CSS code: HTML Code: <style type="text/css">
<!--
body {
scrollbar-arrow-color: #425B5E;
scrollbar-base-color: #98A5A6;
scrollbar-face-color: #98A5A6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #425B5E;
scrollbar-3dlight-color: #DEE7E8;
scrollbar-track-color: #DEE7E8;
scrollbar-darkshadow-color: #DEE7E8;
}
div#content {
width: 600px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.header {font-family: trebuchet MS; size: 11px; color: white; font-weight: none;
BORDER-RIGHT: none 1px solid;
BORDER-TOP: none 1px solid;
BORDER-bottom: white 1px solid;
BORDER-LEFT: none 1px solid; background-color: #660000;}
.head2 { font-family: verdana; font-size: 11px; color: #4A4A5B; background-color: #FFFFFF; border: #4A4A5B; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; text-align:center; background-repeat: no-repeat; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}
.head { font-family: verdana; font-size: 14px; color: #64657E; background-color: none; border: #75AAB0; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; text-align:center; background-image: url(head.gif); background-repeat: no-repeat; font-weight: bold; height: 26px; padding-top: 4px;}
b { color: #6D82A1; font-size: 11px; font-weight: bold; }
A:link
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:visited
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:active
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:hover
{color:#5b1435;text-decoration:underline; cursor:default; font-weight: bold; border-bottom: 1px #000000 solid;}
body
{background-color: gray;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: left;
font-family: arial;
color: black;
margin: 0px;
letter-spacing: 0px;
font-weight: normal;
font-size: 12px;
cursor: default;}
td { font-family: trebuchet ms; font-size: 11px; color: black; font-weight: normal; }
-->
</style>
And here's the text itself; HTML Code: <html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="simple/simple.css" />
<script src="simple/click_menu.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Ironman Football Academy | Don Bosco Prep</title>
</head>
<body onload="clickMenu('menu')">
<center><img src="mainimage.png">
<ul id="menu">
<li class="sub"><a href="#nogo1">Home</a>
<ul>
</ul>
</li>
<li class="sub"><a href="#nogo1">Information</a>
<ul>
</ul>
</li>
<li class="sub"><a href="#nogo1">Registration</a>
<ul>
</ul>
</li>
<li class="sub"><a href="#nogo1">Don Bosco Prep</a>
<ul>
</ul>
</li>
</ul>
</center>
</div>
<div id="content" style="position: absolute; z-index: 2; margin-left:auto; margin-right:auto;
top: 303px; width: 600px; height: 0px; overflow: visible">
<div class="header"> Welcome</div>
We plan to change C-5 plane in such a way that the limitations and hazards involved with them might disappear or be
lessened, advancing the study of aeronautics and its applications in technology. As the group researches the flaws
associated with the structural mechanics, equipment, materials, and technology, we will develop a plan to inspire a
more efficient plane. <a href="http://donboscoprep.org/istf/skystar/component2/task1.php"">Task 1</a>
</div>
</html>
Why isn't the text (with the header welcome) not centered? this issue has been solved Hello, Please point me in the direction of button-layers. In other words: How do I make a whole layer act as a link so that when a user clicks anywhere within a layer (and not ONLY on the link in the center of it), the whole layer acts as a button? Thank you for your expertise! I'm trying to centre and image with in a layer, both vertically and horizontally but I'm having no joy. I've tried normal HTML but would I be better off creating a second CSS? Any help on the coding with either would be a great help! Ian I know IE7 sucks but i need my website to be viewable in it. First look at my site in Firefox, then IE7 if you have it. The menu shows up properly in firefox, but not in IF7. Any ideas how to make IE7 show the menu properly? Thanks link: http://www.dynamitedave.com/redesign/index_1.html Hi guys, I have a problem with the layers, i'm trying to make a button that have a behavior which make visible an invisible layer, perfect, it works, but i need that this happen over a video qt, but te video doesn't allow that. I mean, if under tha layer are an image or text, the layer is over that items, right, but when under the layer are a video qt or a flash movie, the layer apear under them, i tried inclusively with the "z-index" but it didn't work either; if you know how to do that, i would appreciate any help about it. Thanks... |
|||||||