|
CSS - Dhtml/css Pop-overs
i want to be able to have a site that has a table with some info, and a button next to it.. when the button is clicked on, a CSS pop-over opens and allows the person to type text, and submit... i can deal with the submit and php and such... i just need to know how to make the DHTML/CSS work for me.
Similar TutorialsI've been using on MouseOver and such for ages, however I've seen other means of detecting and acting on mouseovers/mouseouts and such. I need to learn how to do this using <div> or <td> elements - I'm not prepared to use <ul> and <li>, I don't understand the concept yet. From what I've seen, I should be able to have something along the lines of #button.over {attributes}. I do not know the details, but in effect, the element's CSS attributes would be automatically changed when a mouseover is detected and an 'over' class is supplied. Let me know if you need any further information - otherwise, thanks in advance for any insight you may provide. Hello I am a Novice in web design that is trying to make his way. I am build a website for my company and trying to make it compatible with many devices. I have chosen to Use html and css. This is my issue. I have a side bar menu (nav) and I have a div (menuebar) set to 125 by 500px css property's: Height, width, margin top, margin bottom, float:left Then i have another div inside that one use for my LINK or Button. div (menulink) set to 110 x 28px css property's: Height, width,Padding : Left5px, Right 5px top 2px and bottom 2px , Font Ariel. I want this div (menulink) to highlight on a mouse over or hover the entire div like this website has there colorful menu bar. w w w DOT entheosweb DOT com/dreamweaver/default.asp the bar i am talking about starts with teal, green... ect If you notice you can select the text with in that rollover. so when I use a rollover i cant see any option to do that. Now I have learn how to do a " a hover" css with text links but it dose not hightlight the whole div container. I have tried a behavior on the div tag and that works but dose not disappear on mouse out. I have tried many combinations of multiple behaviors and single combinations with all the option with in them. No such luck.... I will thank any one advance who can help me with this. Ps i don't want to use rollovers because of how big the web site is even with PS actions set up to speed up the process of editing each roll over img. I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at. kopertone.com/newsite/index1.html Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks! I'm running into a problem with an interface that I'm developing. Basically it's a collapsible treeview using DHTML and the display property to 'open' and 'close' tables. I need to have several of these tables side by side but without overflowing horizontally so that the user has to scroll horizontally. The best way I've found was to float the elements so that any overflowing tables would be wrapped. Example: [] [] [] [] [] [] [] [] [] [] [] [] However, a problem arised when I 'open' and 'closed' the tables repeatedly (three times or more). The other tables started to wrap immediately after the first table (the one I was opening and closing). So that all the tables lined up in a single column eventually and not flowing as they should've been. Example: [] [] [] [] [] Upon refreshing the page, everything flows as it should. Please let me know if I'm unclear in my description. right now i have a page that has an iFrame and three tabs, when you click on each tab, it loads a different page into the iFrame. this is done as the data on the rest of the page is randomly generated via PHP.... so i cant have a refresh on the entire page... is there a way to hide all three sections of info the tab calls up in a "display:none" div? and then bring it up upon the tab being clicked? thanks. I have a website were the dhtml menu is driven from a seperate file. I have applied a style sheet to my page. The only problem is the style sheet is applied to my dhtml menu which i dont want. Any suggestions greatly appreciated. I have a problem in IE when dynamically adding elements through the DOM, the problem is basically: if i add a element(a div btw), with document.createElement and use setAttribute("class", "my_CSS_classname") to apply styling, the styling doesnt get applied when viewing it in IE6 (it works fine in firefox). Does IE force you to style dynamic elements though the .style proberty or wah? I'm trying to build a window script. To start with I'm just trying to finalize the HTML needed for the window. You'll find my attempt below. The first one is before adding close and resize elements. It seems an ok starting point. The 2nd one shows my attempt to add the close & resize elements. The difficulty is in making them line up with the right hand side of the window and making the top one not take up an extra line. The problem is that I don't want to specify the size of the 'window' div because I want it to expand to fit the content. Because there is no width set any attempt to align right ends up aligning with the right hand side of the browser window. Anyone got some ideas as to how I deal with this? Am I approaching it wrong? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Document</title>
<style type="text/css">
html, body
{
margin: 0px;
}
.window
{
background: gray;
position: absolute;
border: 1px solid black;
top: 20px;
left: 20px;
}
.ex2
{
left: 300px;
}
.topBar
{
position: relative;
color: white;
margin: 2px;
}
.ex2 .topBar
{
background: none;
}
.closeButton
{
width: 16px;
height: 16px;
background: red;
}
.window .content
{
width: 200px;
height: 200px;
background: white;
overflow: auto;
}
.bottomBar
{
position: relative;
}
.ex2 .bottomBar
{
background: none;
}
.resizeHandle
{
background-color: green;
height: 16px;
width: 20px;
}
</style>
</head>
<body>
<div class='window'>
<div class='topBar'>
Title
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'> </div>
</div>
<div class='window ex2'>
<div class='topBar'>
Title <div class='closeButton'> </div>
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'><div class='resizeHandle'> </div></div>
</div>
</body>
</html>
hi there! well i have been working on how xoops cms ( http://www.xoops.org ) and sothink dhtml menu (Sothink Dhtml Menu ) can be made to work, i have been successful to some extent. the issue When i use the sothink dhtml menu on mywebsite: my Website the submenu width is all over the place. ok here is what i got so far 1) my website: http://ayubians.com/thesite/index.php with default theme, of sev_zero style css file : Sev_zero Style.css 2) Scroll down mywebsite and on left side you will see a block called themes. Change the theme to 7dana-jane a new look website will appear: with working DHTML menu style css is: 7dana-Jane Style.css I want to use this menu with : sev_zero theme kindly tell me which what changes do i need to bring in my sev_zero theme to make the dhtml menu work! Regards billyvision P.S::: If you intend to try this on your own xoops website: please put the following codes: in head of ur theme html document add: Code: <script type="text/javascript" language="JavaScript1.2" src="http://www.ayubians.com/tasveer/stm31.js"></script> where as in body of ur theme html add: Code: <script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu0283",430,"http://www.ayubians.com/tasveer","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0],this);
stm_bp("p0",[0,4,0,0,2,3,0,7,100,"",-2,"",-2,50,0,0,"#999999","#FFFFF7","",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Menu Item 2","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFF7",0,"#B5BED6",0,"","",3,3,1,1,"#FFFFF7","#000000","#000000","#000000","8pt Verdana","8pt Verdana",0,0]);
stm_aix("p0i1","p0i0",[0,"Menu Item 3","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7]);
stm_bpx("p1","p0",[1,4]);
stm_aix("p1i0","p0i0",[]);
stm_aix("p1i1","p0i0",[0,"Menu Item 1"]);
stm_aix("p1i2","p0i1",[]);
stm_bpx("p2","p0",[1,2,0,0,2,3,0,0]);
stm_aix("p2i0","p1i1",[]);
stm_aix("p2i1","p0i0",[]);
stm_aix("p2i2","p0i0",[0,"Menu Item 4"]);
stm_aix("p2i3","p0i0",[0,"Menu Item 3"]);
stm_ep();
stm_aix("p1i3","p2i2",[]);
stm_ep();
stm_aix("p0i2","p1i1",[]);
stm_aix("p0i3","p2i2",[]);
stm_aix("p0i4","p0i1",[0,"Menu Item 5"]);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p0i0",[]);
stm_ai("p3i1",[6,1,"#000000","",-1,-1,0]);
stm_aix("p3i2","p0i1",[0,"Menu Item 1"]);
stm_bpx("p4","p2",[]);
stm_aix("p4i0","p0i0",[]);
stm_aix("p4i1","p0i0",[0,"Menu Item 1","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#fffff7",0,"#66ffcc",0,"","",3,3,2,5,"#00cc33 #0099ff #00ff99 #00ccff","#00ff99 #00ccff #00cc33 #0099ff"]);
stm_aix("p4i2","p3i1",[]);
stm_aix("p4i3","p2i3",[]);
stm_ep();
stm_ep();
stm_ep();
stm_em();
//-->
</script>
Other resources: Sev-Zero theme http://www.xoops.org/modules/library/viewcat.php?list=S&start=10 7dana-Jane theme: http://www.7dana.com/download/pafiledb.php?action=file&id=33 Your help in this regard will be highly appreciated billyvision I have a problem with a tooltip i'm trying to make look decent in both browsers, IE and firefox. it looks beautiful in firefox the way i have it. but in IE it stick the image way above the tooltip and the padding is a bit funky. Code: <img src="eq2icons/"<?=$icon?>" class="itemicon" width="42" height="42"><table class="ttb" width="350" cellspacing="0" cellpadding="0"><tr bgcolor='#FFDE2E'><td colspan=2><span class=quality><?=$itemname?></span></td></tr><tr><td width=88%><?=$text1?></td><td width=12%></td></tr><tr><td colspan=2><?=$text2?></td></tr><tr><td colspan=2><?=$text3?></td></tr><tr><td colspan=2><?=$text4?></td></tr><tr><td colspan=2><?=$text5?></td></tr><tr><td colspan=2><?=$text6?></td></tr><tr><td colspan=2><?=$text7?></td></tr><tr><td colspan=2><?=$text8?></td></tr><tr><td colspan=2><?=$text9?></td></tr><tr><td colspan=2><?=$text10?></td></tr></table> CSS: Code:
span.quality { color: #000000; font-weight: bold; padding: 2px;}
span.quality1 { color: #FFCC00; font-weight: bold;}
span.quality2 { color: #21E626; font-weight: bold;}
table.ttb {
background-color: #282828;
color: #FFFFFF;
margin: 0px;
padding: 1px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
font-size: 11px;
}
table.ttb a:link { color: #8888FF; }
table.ttb a:visited { color: #7777EE; }
table.ttb tr {
padding: 3px;
}
table.ttb h6 {
font-size: 10px;
}
.itemicon{
float: right;
padding: 2px;
margin-top: 12px;
}
Here the site in question. (yes, i'm sorry i do require a signup to view the data to track and eliminate scrapers/data miners. Free signup though) http://www.eq2archives.com The tooltip is currently shown if you go to "quests by zone" then choose a zone and choose a quest with an item reward. ill post a few shots in IE and Mozilla thanks in advance =) Hi, I spend many hours on the net to fix this problem, hope you can help me. I made a site with 3 frames; header, menu and main. In the menu I made a table (width and height 100%), with rows with one cell each. In each cell is a link. With some links I want to choose between more pages. So I found a nice dhtml menu, witch looks like http://dhtml-menu.com/examples/dhtml-menu-ex2.html. Everything works fine, ecxept the position of the submenus. Here is some HTML: <table><tr><td> <a href="#" target="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime();" onMouseOut="startTime();">Name</a> </td></tr></talbe> ... <div id='layer1'> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name</a><br> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name2</a><br> </div> And here is some CSS: #layer1, #layer2, #layer3, #layer4 { position: absolute; z-index : 90; visibility : hidden; width : 150pt; left: 10pt } #layer1 { top : 0pt } Questions: 1 is it possible to position the submenu exactly next (or under or above)to the corresponding main menu item, I think it should be with relative positioning. 2 since I use frames and the menu takes the left frame, is it possible to position this submenu on the right side of the main menu item, i.e. on top of the main frame, or in the main frame. 3 I read a lot about this and many people say that a page like this should be made using tables (or CSS-P?), instead of frames. If I have to or want to change it, does that mean that I have to write a table structure in every page and when I want to change a menu item, I have tot change that in every page? Hope some can help me! |
|||||||