Jump to content

Search the Community

Showing results for tags 'zone'.

The search index is currently processing. Current results may not be complete.
  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. Hi, I'm in the process of making a todo list app in HTML5. This is how it looks at this moment: I'm not a HTML coder so I first wanted to see if I could do the interface in CSS. I use border-image to handle 9 slicing and I'm happy with the result. The interface is fully responsive so I can scale the main DIV and everything scales accordingly (when scaling horizontally buttons will grow larger filling the space etc). The second part of my quest now is to make the relevant buttons clickable and linking on a weblink with preferably a mouseover and mousedown effect and this is where I'm stuck. My requirements are as follows; - The solution should work with the responsive aspect of the tool; the clickable zone should scale up or down automatically. - The text contained in the buttons should not affect the clickability or change the mouse pointer unless its the weblink mouse pointer (problem visible in example bellow). Nice but not required; - It would be great if the solution allowed me to tweak the clicking zone manually once(that will work well when the button scales). For example I have buttons with quite large shadows and I might want to avoid having the shadows clickable, instead I would substract a couple of pixels down and perhaps left and right from the button's DIV area. I've made a simple test page with the border-image method and my buttons images if anyone wants to give it a shot. Here's the JSFiddle page: http://jsfiddle.net/gYLn8/ And the html code: <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">.MouseoverButton { border-width: 15px 21px 17px 20px; /* border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ /* -moz-border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ -webkit-border-image: url(http://www.stormunited.com/images/test/Button_UnPushed.png) 15 21 17 20 repeat stretch; position: absolute; font-style: normal; color: #B94400; text-align: center; padding-right: 73px; padding-top: 47px; left: 63px; top: 108px; font-size: xx-large; cursor: hand;}body { background-color: #2A2A2E;}</style></head><img src="http://www.stormunited.com/images/test/Button_UnPushed.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Hover.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Pushed.png" alt=""/><body><div class="MouseoverButton">Button</div></body></html>
×
×
  • Create New...