I am trying to replace div elements with button elements to improve accessibility, but I need the buttons to layout like the divs used to do. (note this only needs to work in webkit)
The div takes the width of the parent container, while the button only takes the place needed to display its content.
How can I change that?
I would not like to set something like width: 100%, because if you are using more then one button in a container with display: webkit-box the divs nicely layout to use remaining space.
Here is a small example:
<!DOCTYPE html>
<html>
<head>
<title>button test</title>
<style>
.mybutton{
display: block;
border: 1px solid red;
-webkit-appearance: none;
-webkit-border-radius: 6px;
background-color: transparent;
-webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee));
text-align: center;
}
</style>
</head>
<body>
<div class="mybutton">Div Button</div>
<button class="mybutton">Button</button>
</body>
</html>
If your button is in a container with "display: -webkit-box" then just add "-webkit-box-flex: 1" to the button (or any elements) within that container. This solves it.
http://jsfiddle.net/y53VT/
I'm not sure why you have backward slashes on your -webkit rules. Remove them and they will behave the same as divs, except for some inherited styles that need to be resetted.
You can see an example of buttons and inputs playing nicely with webkit box here:
http://jsfiddle.net/dt592/
Maybe you should go more specific. Try button.mybutton { in your css...
Related
Please note: I am new to CS. Brand new.
I want my button div to be placed horizontally inside the confirm div: example.
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
I am just placing two buttons inside my Div, so it's width should be equal to 128 (the total of two button witdh). Similarly the height should be equal to button height, but it isn't.
Second i want that mt button-div placed center horizontally . I tried left: 50% inside my button-div. But it is aligning the left margin with the centre of the confirm div. How can i do it?
EDIT
--------------------------------------------------
May be I didn't understand correctly, but if you want it inside then put it inside.
<div id="message">
Are you sure you want to
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
Demo
Update 1
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
Why, because <div>s are block tag, they always take 100% width of the containing element. It is not equal to the width of confirm Div.
To make the dialog-button take the actual width use display: inline-block as its CSS. Demo
Update 2:
To the best from what i understood. This is what you want. If not help me help you.
Update 3:
Ok, here is a demo with the image. I will leave the without image part to you. ;)
The div which the two buttons are in is actually the width of the of the comfirm div. The reasons why divs stretch to the width of their parent, is because that is block level element.
the reason every thing seems so confusing is that you have a lot left floating divs in your example. These are changing how things would normally laid out. To make things simpler why dont you try removing some of the more confusing elements. I suggest trying a more simple example like the one below:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/ie-css3.htc" type="text/css">
<link rel="stylesheet" href="css/messageDialogStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.1.js">
</script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js">
</script>
<script type="text/javascript" src="js/puff.js"></script>
<script type="text/javascript" src="js/jquery.dialog.js"></script>
</head>
<body>
<div id="confirm">
<div id="message">
Are you sure you want to
</div>
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
If you want to center a button. If you change the margin-left and margin-right to auto you will center any block element. try changing your css to the css below:
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#message {
width: 280px;
border:1px solid #ccc;
white-space: normal;
word-wrap: break-word;
margin:20px 0 0 0;
overflow: hidden;
}
#dialog-button {
border:1px solid #ccc;
position: relative;
}
button {
display:block;
margin-left:auto;
margin-right:auto;
width: 64px;
}
Note if you have to make the button a block element for the margin auto trick to work.
You can find more about block level element here.
Is there something that will do what margin does but without the background drawing in that area? For instance, when you give an element margin: 1em you get a 1em border of blank space around the element, but the background draws in that area. Is there something similar to that except where the background doesn't draw?
My problem is I'm trying to put something below three float: lefted divs and right now I can't get any spacing between that and the floated divs above it. They just abut directly against each other.
The div that is going below the float: lefted divs has the property clear: both. If there was something that made that div have space between it and that floated div above it then that would work too.
Maybe this example will help explain (and solve) your problem?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; }
h1, p { background-color: #eee; margin: 10px 0; }
div { background-color: pink; float: left; width: 100px; height: 100px; margin-right: 1px; }
br { clear: both; display: block; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<div></div>
<div></div>
<div></div>
<br />
<p>Lorem ipsum dolor set amit...</p>
</body>
</html>
Margins are supposed to be transparent. I think what you're seeing here is collapsing margins. Try putting a 1px border around your divs and see what happens.
Check out the CSS 2.1 spec:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Perhaps you're looking for:
border: 4px white; /* replace with your color */
With floated elements the margin around elements next to them is ignored. I think you will have to create an additional element between the floated element and the item you want.
Because the element is floated margin space won't always be properly respected. Use a margin/border hack where you simply set the element's color to the same color as your page background and its thickness to whatever you desire. Such as in the following post:
http://socialstreams.co/41/CSS_MarginBorder_Hack
I'm trying to create a border inside an image instead of outside of the image. I want to do this because I would like to put some alpha value on the border so that i can see the image through the border.
I tried placing a div a few pixels smaller than the image around the image and then setting "overflow:none". The border is now inside the image, but when i apply alpha to the border nothing can be seen through the border because overflow is set to none.
On the other hand. If i don't set "overflow", then the border won't show up.
I want something like this:
Tested in firefox and ie8 (no opacity yet in ie8, but you can use a filter for that):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.imgcontainer{padding:0; position: relative;
display: inline-block; overflow: hidden;}
.imgcontainer img{display:block;}
.borders, .borders2{position: absolute; width:100%; height:100%;
border: 4px solid #000;}
.borders{opacity: .5;}
.borders2{bottom: 4px; right: 4px;}
</style>
</head>
<body>
<div class="imgcontainer">
<div class="borders"><div class="borders2"></div></div>
<img src="img" />
</div>
</body>
</html>
This creates a 4px transparent border, but that can easily be changed.
Because the opacity only affects the absolute positioned divs the image doesnot become transparent. Two border-divs are needed in this example because this way the image size is variable, if your images always have the same size you could do this with only one.
jsfiddle: http://jsfiddle.net/Xb37w/2/
You can use a wrapper with negative margins and rgba(255,255,255,.5) as border-color.
I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
You should be able to do this with the CSS outline property:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Instead of borders, you may use outline property:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
<div></div>
http://jsfiddle.net/H7KdA/
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child {
margin : 10px;
}
This way any element put inside the .outer will automatically have 10px margin.
If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * {
margin : 10px;
}
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update-
Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.
I have a menu the have rectangular boxes 90x50. Some have single line text, other have multiline text
question : How to VERTICALLY align it to the bottom with pure css no hack please
Vertical aligninment in CSS isn't that easy as you'd intuitively expect. As far the straightforward property vertical-align: bottom works in table cells only. Here's an excellent resource which explains how (not) to vertical align in CSS: Understanding vertical-align, or "How (Not) To Vertically Center Content".
In a nut: the following works in real webbrowsers:
display: table-cell;
vertical-align: bottom;
But thus not in MSIE. You'd like to make the parent element relative and wrap the text in an absolutely positioned element and then put it to bottom. Here's a copy'n'paste'n'runnable example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
li {
position: relative;
width: 90px;
height: 50px;
border: 1px solid black;
}
li span {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li><span>text</span></li>
<li><span>text<br>multiline</span></li>
<li><span>text</span></li>
</ul>
</body>
</html>
I think the vertical-align property does what you want. Otherwise, perhaps you can clarify your problem further?
Edit: You can force table-cell-like behaviour for any other element by using the display property with the value 'table-cell'. I am not perfectly sure if this works with well with the vertical-align property, but perhaps you can build on it. If I remember correctly, an additional intermediate element was required.