I'm wondering what html element to use for buttons on a web page - I'd like to style my 'buttons' like twitter does. For example:
http://twitter.com/twitter
the "more" button at the bottom of the tweet listing - is that a <button> element, or a <div> element? I'd like to know which to use. I think for either <button> or <div> we can supply rollover states and all that stuff to make it look pleasant?
Don't use <div> tags to make clickable elements. Use <a> or <button> elements. This enables browsers with JavaScript disabled to interact with them as expected. Even if your functionality requires JavaScript and there is no reasonable default behaviour you can assign to an <a>, use it regardless - it conveys "clickable" semantics.
In general, choose the tag that most closely describes the function of its content, not the appearance of its content, and avoid unnecessary <div> tags lest your documents suffer from divitis.
The "more" button on Twitter is an <a> with a background-image, CSS3 rounded corners, and a border. Here's the complete CSS (elem is <a class="more round">):
.more {
outline: none;
display: block;
width: 100%;
padding: 6px 0;
text-align: center;
border: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
background-color: #fff;
background-repeat: repeat-x;
background-position: left top;
font-size: 14px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
height: 22px;
line-height: 1.5em;
margin-bottom: 6px;
background-image: url('/images/more.gif');
}
.more:hover {
border: 1px solid #bbb;
text-decoration: none;
background-position: left -78px;
}
.more:active {
color: #666;
background-position: left -38px;
}
.round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Sample Button
You should use <a> or <button>, not <div>.
In general you want to use <a> for navigation and <button> for some action that takes place on that screen.
The best reason I can think of to prefer a <button> or <a> tag to <anything-else> is that during testing, it makes it easier to locate the actionable items. I use Capybara and Rspec for example, and the method click_on works a lot more reliably when it refers to a <button>, the same with the method click_link and <a>.
The other reasons given here are also good: semantics, screen readers, etc.
Pragmatically, your audience will decide if every single element on your page is a really fancy <div> or if you want to play nice with the rest of the web dev ecosystem. It may simply depend on whether your audience all uses X browser or not.
One gotcha: Since a <button> could submit a form or <a> take you to another page, you have to make sure to prevent those default actions. In the JavaScript function that handles the click, you have to specify that it only does the action you program.
function onClickEvent(e)
{
e.preventDefault();
// What you want to do instead
}
Use an a tag instead of button. My reasoning involves compatibility issues with older version of IE (IE6 hates the button tag).
<button> vs. <input type="button" />. Which to use?
I'd suggest <input id="Button1" type="button" value="button" /> with a css style to give the appearance that you're looking for.
Related
I have a login page with two fields:
<select id="operatore" name="operator">
<option disabled selected>Operator</option>
<option>John</option>
<option>Jennifer</option>
<option>Carl</option>
</select>
<input type="password" placeholder="Password" id="search_field" readonly>
I want that all the text appears centred. In Firefox all works fine. But in Chrome the written "Operator" appears on the left, even if the style inspector doesn't cancel the style, as you can see from the image:
In the native app for surf the net in Samsung Tablet, the written "Operator" appears centered, but the placeholder "password" appears on the left. Why? How can I fix all these problems?
HERE is the full CODE.
you can give it a text indent like text-indent: 40px;this won't make it aligned center but it will move it to the middle
and by the way there is a better way of making a placeholder for the select
<option style="display: none;" value="">Operator</option>
this way it won't show up in the drop-down
Taken from: Is it possible to center text in select box?
I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.
However, using a jQuery plugin, you could style the dropdown:
http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.
Ok, I believe I have fixed your Operator problem.
Here is the slightly changed code.
form input {/*ADDED*/
width: 250px;
}
form input, #operatore {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
padding-left: 90px;/*ADDED*/
padding-right: 80px;/*ADDED*/
/*TOOK AWAY width: 250px; PROPERTY*/
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
For some odd reason in Chrome the selector form input, #operatore is disabling any other changes made to (form) selector, option. Moreover if I were to add an extra selector, for example: #operatore {someCSS}, the (selector) form input, #operatore would STILL take precedence over that selector and I also used !important. Anyway you will have to align the text manually using padding-left and padding-right.
You can't really customise <select> or <option> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.
During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.
<a class="groupPopper">
<a class="name"> content</a>
</a>
But in the developer tool it appears different:
I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.
Is my assumption correct?
As #j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.
On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.
So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.
There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.
(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)
Nested links are illegal.
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
I had the same issue as #thinkbonobo and found a way to do it without JavaScript:
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
The trick is to make an anchor covering the whole .outer div, then giving all other anchors in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/
you can use object tag to solve this problem.
such as
<a><object><a></a></object></a>
I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.
Here is a codepen example I created....
http://codepen.io/thinkbonobo/pen/gPxJGV
Here's the html portion of it:
Example of link embedded in link....
<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
If you say run<br>
<button onclick="app.hitMe(event)">more</button><br>
<br>
And if you say hide...<br>
</div>
Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.
It is invalid HTML.
You can't nest a elements.
So, by definition, the behaviour is undefined.
For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.
OnClick of inner event, use e.stopPropagation();
I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions.
This is how I stacked the whole thing.
<style>
* {
padding: 0;
margin: 0 border:0;
outline: 0;
}
.outer_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
text-shadow: 0 1px 0 #616161;
box-shadow: 1px 1px 3px #000;
transform: translateY(0);
transition: background 250ms;
}
.inner_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
transform: translate(0px);
}
.inner_anchor:hover {
background: #647915;
}
</style>
ItemX<object><a class="elim_btn" href="#" title='Eliminate'>×</object></a>
Don't do it like that. I was facing the same issue in my app.
You can simply add <div> tag in top and <a> tags at child level.
something like:
<div id="myDiv">
</div>
make sure you add click event for myDiv in your script file as well.
window.location.href = "#dashboardDetails";
You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.
<div style="position:relative">
<img src="image-1.png">
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
This is a bad way of coding but you can try this -
aaaa <table><tr><td><a href="2">bbbb </td></tr></table> </a>
How do I render a normal (enabled-looking) button, via HTML/CSS, which doesn't change its appearance upon mouse over or mouse down (for illustration purposes e.g. Press [x] to cancel)?
(i.e. I don't want it to become "highlighted" or "pushed" when you hover the mouse over it or "press" it.)
I know I can use a picture of the button, but under different or future versions of browsers the subsequent real buttons may look different and not match the picture, which is why I'm looking to render it via HTML/CSS.
Maybe you can consider placing an empty <div> with a specified width and height overlapping the button, which will occlude the click on the button?
Depending the positioning modes of your outer elements, you can use the <div> to cover some outer element, or just the <input type="button" ...> itself (in which case JavaScript and DOM can be helpful to determine the actual size of the button and thus the coverage area).
#Navigeteur
just take a screenshot of a normal button and save it as bmp or png image
and render the image instead of button :)
The disabled attribute is supported in all major browsers, so you could use that.
<button type="button" disabled>Click Me!</button>
or, alternatively:
<input type="button" value="Click Me!" disabled />
To make it look like it's enabled, you could then edit its CSS properties for it's disabled state:
input[type="button"]:disabled, button[type="button"]:disabled {
background:#DDD;
color:#000;
}
But, as OP pointed out, this can make it appear completely different to what other buttons look like on certain browsers/systems. You could omit the background property in the CSS rule and they would render as any other disabled buttons, but with font color like enabled buttons. Alternatively, omit the disabled HTML attribute and position these buttons out of context they would normally belong to (being a part of a form).
EDIT: See Antony's answer for better explanation what styles need to be applied to make it appear like you expect them to ;)
You can force a disabled button to look just like a normal one using CSS.
DEMO
Safari: http://jsfiddle.net/9aXW9/2/
Firefox: http://jsfiddle.net/gZtT7/
IE buried its CSS in the registry. But as a general rule, apply color: #000; and other modifications would make it look like a normal button.
HTML
<input type="submit" disabled="disabled" value="I cannot be pressed." />
CSS
/* Safari */
input[type="submit"]:disabled {
-webkit-appearance: push-button;
-webkit-box-align: center;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box;
white-space: pre;
}
/* Firefox */
input[type="submit"]:disabled {
-moz-appearance: button;
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
text-shadow: none;
}
I'm using this free Web Template - EliteCircle and have just incorporated it into a master page. The master page wraps the html in:
<form id="form1" runat="server">
//master page html
</form>
The template almost comes out fine except the entire page is surrounded by a think white border (default CSS behavior for form?) and the footer background is half white on the very bottom.
I wouldn't expect the form with id=form1 to change anything in the layout. There is nothing in the [CSS][2] with that id.
When I remove the form tags from the master page (just to check) the layout is perfect, no problems.
Any ideas?
(Using Visual Web Developer 2008 Express)
Thanks,
Greg
The CSS: http://www.styleshout.com/templates/preview/EliteCircle12/images/EliteCircle.css
Have you seen the
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
declaration in your CSS file? That might just explain the thick white border and other stuff you mention :)
Either change that declaration to form.myForm (and change all forms that need it), or re-cascade the form1 id or interior tags on your page to override those settings.
I agree with Konerak, but a word of advice, don't set properties to html elements in a generic way, instead, use classes...
Your css:
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
The sugestted:
form.standard {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
If you set the css to the form element, all forms in your page will receive does properties, but if you set does properties to a class, only form's with that class will receive then...
Btw: DocType may also interfere with the desired result...
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.