I have created a simple html file containing 2 buttons and one text box.
What I don't understand is that the height of my various elements is set equally to 20px for all elements, but they don't seem to be very well aligned (vertically). Even more frustrating, I was expecting my + and - buttons to be center aligned both on the vertical and the horizontal axis.
Do you have any idea what I have missed ?
Many thanks for your kind help.
Contents of 'form.html' :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Form | 24ways.org</title>
<link rel=stylesheet href=style.css>
<script>
</script>
</head>
<body>
<input type="text" name="country" class="resizedTextbox" value="20" readonly>
+
-
</body>
</html>
Contents of 'style.css' :
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0815cc;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 0 10px 10px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:20px;
}
.myButton:hover {
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
.resizedTextbox {width: 50px;
height: 20px;
padding: 0 10px 10px 10px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
}
If you want vertical centering on the buttons (which are already using display:inline-block;), you can just use vertical-align. I do this all the time with buttons and icons. Just adjust as needed, i.e. vertical-align:-1px. You can use positive and negative values for vertical-align. You might need your input to have the same display. You could also try adding a margin to the top of the buttons. If that doesn't work, change the buttons to display:block;, use float:left;, and then add margin-top. Haven't tested but this is how I would approach it.
You are not accounting for the 2px top and bottom border on the input field, add 2px to the height of the buttons. https://jsfiddle.net/u8v3rgyt/4/
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0815cc;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 0 10px 10px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:22px;
}
Related
I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.
If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine
Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
I want to show the box shadow on every side except bottom.
Here is the css I'm using.
box-shadow: 0 0 12px 4px #ddd;
How to remove bottom shadow from it?
You can't change the dimensions of the shadow across one axis only (i.e you can't reduce just the height of the shadow). One trick is to add the shadow to a pseudo element and reduce the height of that element.
.shadow {
margin:20px;
width:400px;
height:200px;
background:red;
position:relative;
}
/* Pseudo element for adding shadow */
.shadow:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:16px;
box-shadow: 0 0 12px 4px #999;
z-index:-1;
}
<div class="shadow"></div>
You can use the negative value to push it off the edge.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 0px -4px 12px 4px #888888;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
you may use more than 1 shadow:
body {
box-shadow:
-12px -10px 12px -4px /* negative value here decrease the size */#ddd,
12px -10px 12px -4px #ddd,
inset 0 -3px lime /* demo , show bottom */;
padding:4em 8em;
background:gray;
}
/* demo purpose */
html {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
it can draw things like this
I'm working on a input text with image and I'm trying to position the image on the right side corner of the input text and it seems that my top positioning has different output in different browsers. So I have this HTML structure like so:
<div class="bcb-box-left-content">
<input type="text" name="skills" id="skills"/>
<img src="assets/images/plus-in-box.png" alt=""/>
<p>Maxiumum 3 skills for a guest account.</p>
</div>
And here is the style for that:
/*----the parent container-----------*/
.bcb-box-left-content
{
max-width:444px;
margin-left:17px;
position:relative;
margin-right:20px;}
/**********the anchor *********/
.bcb-box-left-content a
{
position: absolute;
bottom: 0;
right: 4px;
top:5px;
}
/**********the input text *********/
#skills {
width:100%; padding: 10px 20px 10px 10px;
}
So now is there any approach like this (but not literally the code itself):
/*in this case TOP for chrome*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for mozilla*/
-moz-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for normal*/
box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
DEMO:
http://jsfiddle.net/leonardeveloper/Wm4ML/
Apply margin and default border property to your #skills class. It will give the same result on all the browsers as you mentioned. Update your CSS like below.
#skills
{
width:100%;
padding: 10px 0px 10px 10px;
margin:0;
border:1px solid #ccc;
}
DEMO
I´m trying to do a basic effect in css to give some depth to my input, something like the image below. I´m trying to do with my code below but anything is missing here because my result is not icual to my image example.
My html:
<form>
<input type="text" placeholder="Search..." />
</form>
My css:
input[type="text"] {background-color:#232323; color:#fff; border:1px solid #151515; -webkit-border-radius: 15px;}
What I´m trying:
You will need at last 2 elements here: one for the dark-grey background, the other for the input.
The rest of my answer has been tested and works in IE10 +, FF & Chrome. If you're looking for IE support for 9 and below this wont work out of the box. It also relies on setting some fixed widths.
You'll recall I mentioned two elements, well you should be using a label tag anyway.
Adjust your HTML to te following:
<label>Search
<input type="text" placeholder="Search" />
</label>
The follwoing CSS positions the input to hide label text.
label {
display:inline-block;
border:1px;
padding:10px;
background-color:#111;
position:relative;
color:#FFF;
width:200px;
height:20px;
}
label input {
-moz-box-shadow: inset -1px -1px 2px #CCC;
-webkit-box-shadow: inset -1px -1px 2px #CCC;
box-shadow: inset -1px -1px 2px #CCC;
border-radius:5px;
background-color:#000;
color:#FFF;
border:none;
padding:3px;
position:absolute;
left:5px;
padding:5px;
width:200px;
height:16px;
top:7px; /* This is ((label hight + (padding * 2)) - this height)/2;*/
/* e.g. ((20 + (2 * 10)) - 16)/2 */
}
Demo
Not sure exactly what you mean, but is this getting close to what you want?
input[type="text"] {
background-color:#232323;
color:#fff;
padding:2px 5px;
border:5px solid #151515;
-webkit-border-radius: 15px;
}
I am trying to create an object with a drop shadow. I believe you need CSS3 to do this and I have something like this so far.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Add box shadows:
#thediv
{
width:300px;
height:100px;
-moz-box-shadow: 10px 10px 5px #888; /* firefox shadows*/
-webkit-box-shadow: 10px 10px 5px #888; /* chrome / safari shadows */
box-shadow: 10px 10px 5px #888; /* general browser support */
}
example on this fiddle but as a note, as this is CSS3 and IE6/7 are old, it will not work with them.
Add this style into your div tag
-moz-box-shadow: 10px 10px 5px #888888;
/* Firefox 3.6 and earlier */
box-shadow: 20px 20px 55px #888888;