I'm trying to make a 30x30 pixel box. I don't care if it uses a button, a, span, whatever.
I can't get anything to show up uniformly across all browsers.
Here are the requirements:
Must append to the end of an
existing line (no line breaks)
Must be able to assign click events in jQuery
Must be a square
Appears flat with no sort of bevel
You should be able to achieve what you want simply by styling an 'A' tag in your css.
CSS:
a {
display:inline-block;
width:30px;
height:30px;
background-color:#ccc;
border:1px solid #ff0000;
}
HTML:
See working example: http://jsfiddle.net/fQP6J/1/
<html>
<style>
.btn {
BORDER: 1px solid; COLOR: black; height: 30px; width: 30px;
}
</style>
<button class=btn >btn</button>
</html>
Related
I'm not sure how to deal with anything(except images) that is used for design/decoration only in terms of accessibility. For example, if in case like this I'll use an image, I'd simply use alt="" or use CSS background image, so the AT for example will ignore it. But what if I'm using some <div> or anything else? It can be a div with some CSS styling that is presented in a code-way, instead of image, or it can be some text with CSS styling so it will be just for decoration(instead of images), or really, anything else. How should I mark it so it will be ignored in a proper way by AT?
Simple example(for request):
<div><span>For Decoration</span></div>
div{
width:0; height:0;
border-bottom:116px solid #009;
border-left:500px solid #900;
margin:0 auto;
}
div span{
display:block;
position:absolute;
margin:0 auto;
left:0;
right:0;
width:150px;
color:#fff;
}
There are two solutions to this:
1) if you are using an empty tag such as a div with no text in it, the screen reader will ignore it automatically. You don't need to do anything in particular.
2) if you are using a tag with text inside you should: a) give it an aria-hidden="true" if you don't want the screen-reader to read the text or b) give it a role="presentation" if you do want the screen-reader to read the text but not announce it as a particular type of element.
-------------------
Based on the comments on this post I have added code below showing an example. It shows when you wouldn't need to do anything (the first and last div) and when you would want to use aria-hidden and role="presentation".
The top line is purely for decoration. Part of it is empty divs and part of it is text. The different words for "Hello" in the p tag should be seen but don't need to be read since they're purely ornamental which is why I am using role and aria-hidden on it.
.end {
display: inline-block;
width: 5%;
height: 20px;
border: 5px solid transparent;
}
.end-left {
border-left-color: #999;
border-top-color: #999;
}
.end-right {
border-right-color: #999;
border-top-color: #999;
}
.languages {
display: inline-block;
width: 80%;
text-align: center;
font-family: 'copperplate', 'century gothic';
color: #999;
}
.languages span {
display: inline-block;
width: 15%;
}
<div class="end end-left"></div>
<p class="languages" aria-hidden="true" role="presentation">
<span class="english">Hello</span>
<span class="french">Bonjour</span>
<span class="italian">Ciao</span>
<span class="spanish">Hola</span>
<span class="hinid">Namaste</span>
<span class="persian">Salaam</span>
</p>
<div class="end end-right"></div>
<h1>Languages</h1>
<p>Welcome to your first language lesson. You will learn how to speak fluently.</p>
I have multiple dropdowns (select boxes) on my website - i want to align the dropdown differently like i want some dropdown should come in center on one page but on another page a different select box will come on the right side
my designer is on holidays so i want to try this on my own will someone help me on this, i am not very good on css definition part but i can play with the existing css
a css has been written like this
select
{
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
}
i modified it on a page like this
select
{
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
float:left;
margin-left:20px;
}
when i looked the result it was looking good on a page but when i moved on to a inner page the select box shifted to different place
how can i use the css differently on different pages???
thanks
The select tag is a general tag. Any css styling that you give to a select tag will be applied to every single select dropdown on your site (assuming the same stylesheet is used)
If you want to have your select dropdown menus appearing differently, then you need to give them an ID so you can target a specific one.
For example
#select1{
float:right;
}
#select2{
float:left;
}
In this scenario, a select field with the id of select1 will be floated right, and select2 will be floated left
most likely the float:left causes the harm. But you may give them different styles:
<select class="first"></select>
<select class="second"></select>
<style>
.first{
// some stuff
}
.second{
// some stuff
}
</style>
or give them IDs and define two styles accordingly:
<select id="first"></select>
<select id="second"></select>
<style>
#first{
// some stuff
}
#second{
// some stuff
}
</style>
I guess your best bet would be to
assign different classes to the <html> tag on each page
Example :
<html class="page1">
<head>
....
</head>
<body>
....
<select>
....
</select>
</body>
</html>
if you have pages like 'page1.html', 'page2.html', etc..., then do something like this...
select{
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
}
.page1 select{
float:left;
margin-left:20px;
}
.page2 select{
float:left;
margin-left:40px;
background: blue;
}
In this way you can put all the common styles in a single group and the individual styles in a group meant for its own. Hope this helps.
I saw some nice styled dropdown boxes like this one and wanted to create my own one:
The CSS to create the arrow was quite simple. It just adds a unicode character as arrow as content to the :before class of an element;
.select:before{
content: "\f0d7";
}
I tried it on my own, but the character is not shown, because the character is not contained in a default language like Arial:
http://jsfiddle.net/3cW9M/
I could of course include a font, that contains this character, but I think its to much overhead to add another ~100kb to the page just for the error.
Is there any other good solution to archive this arrow style without additional fonts or images?
You may use other unicode or use borders :
DEMO
.select:before{
content: "\25be or \25bc ? ";
float:right;
color:gray;
}
.select:after{
content: "";
margin:0 0.5em;
display:inline-block;
border: 7px solid transparent;
border-top:8px solid gray;
border-bottom:0 none;
}
Use \25bc instead.
And if you want to change the color just add css color property.
.select:before{
content: "\25bc";
color: gray;
}
All CSS method
.arrow-down {
height:0px;
width:0px;
border:none;
border-top:5px solid #000000;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
}
http://jsfiddle.net/2sU2x/2/
If you want to use FontAwesome:
add this information into the <head> </head> section:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
then this CSS:
.select:after {
content: "\f0da";
float: right;
border: none;
font-family: 'FontAwesome';
}
caret-down = "\f0d7"
caret-up = "\f0d8"
caret-left = "\f0d9"
caret-right = "\f0da"
Your estimate of 100kb is a bit off for that one arrow. You can compile fonts from just the symbols you need for your app, using for example http://icomoon.io/. I can, off hand, estimate that arrow would generate a font of about 1kB.
If you take into account all the little bits and pieces you want to include in your page, like say social plugin icons, navigation tidbits, user icons, action icons, et caetera, then the method you specify of including custom fonts in your page is pretty worth it, assuming you only include the glyphs you need!
<container>
<element1>
</element1>
<element2>
</element2>
</container>
#container {
position:absolute;
right:33px;
top:15px;
}
#element1 {
position:relative;
float:right;
height:31px;
background:url(../main_bg.gif) repeat-x top left;
border: 1px solid #6a6a6a;
clear:both;
}
#element2 {
position:relative;
float:left;
clear:both;
background-color:#f8f0ce;
border-left:1px solid #6a6a6a;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
}
The reason your container seems to be displayed as wide as it content in other browser is because it is out of the "body" and displayed in "nothing" (ence, as wide as its content). IE6/7 seems to treat this differently.
I do not have your issue in IE8, so I suppose you want this for IE6 or 7. It also seems you want 2 box, one under each other (clear).
From the code and the style you supplied, it seems we could simply get rid of the floating and put a text-align:right.
Would this solution work for you?
It does not work in IE6 however.
This one does however, but require a <br /> (and display:inline. Thanks #kei for the suggestion.)
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.