Is there a way to turn this feature off? Contents of <button> are always vertically centered, as opposed to what happens in a regular HTML tag.
Demo: http://jsfiddle.net/HbqnR/
I want <button> behave like <a>, with the text at the top left corner of the button.
I'm looking for a WebKit specific fix, maybe there is some -webkit-* css property that controls this behavior. Hacks are welcome but without using additional markup!
Thank you in advance :)
.button
{
display:inline-block;
height:200px;
border:4px gainsboro outset;
background:silver;
vertical-align:middle;
padding:20px;
box-sizing:border-box;
text-decoration:none;
width:200px;
text-align:left;
}
<button class="button"><button></button>
<a>
Add this:
button:before {
content:'';
display:block;
margin-top:-50%;
}
See http://jsfiddle.net/r6yXw/
And, if you want it to only apply to webkit based browsers, wrap it in
#media screen and (-webkit-min-device-pixel-ratio:0) { ... }
see http://jsfiddle.net/r6yXw/1/
I see that you requested no additional markup, but if you decide to go down that route, one quick idea is to use positioning and one additional element.
button {
position: relative;
}
button > span {
position: absolute;
top: 0;
}
<button><span><button></span></button>
You can't. Not without introducing a <span> inside the <button> and use positioning:
<button class="button"><span><button></span></button>
Then add the following to .button:
.button
{
/* ... */
position:relative;
}
.button > span {
position: absolute;
top: 20px;
left: 20px;
}
Demo
If you want to keep your HTML intact, you can modify the document using JavaScript as well:
$('button.button').wrapInner('<span>');
Note that if JavaScript is disabled, it won't work :)
button {
height: 100px;
display: flex;
}
Check this out :P JSFIDDLE DEMO
.button
{
display:block;
height:200px;
border:4px gainsboro outset;
background:silver;
vertical-align:top;
padding:20px;
box-sizing:border-box;
width:200px;
text-align:left;
text-indent: 0;
white-space: normal;
word-spacing: 0px;
letter-spacing: 0px;
float: left;
top:0;
}
It might work heh. I don't really know what do you need the button for. But this gets to see just like what you were asking before.
Used it here.
<title>Documento sin tÃtulo</title>
<body>
<form id="form1" name="form1" method="post" action="">
<button class="button">tODAY WE ARE HERE WONDERING WHAT TO DO<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></button>
</form>
</body>
Related
I was looking at Android developer's website and I wanted to copy how they designed the article's animation when someone hovered on top of it. As such I tried to make something similar in plain HTML/CSS. However, I am running into an issue.
I used float expecting that the div tags would seperate from one another and apply the appropriate margins. However, It seems that the div tags are stacking on top of each other instead of being spread out.
I wanted them to look like this
but it ended up looking like this
https://codepen.io/alfielytorres/project/full/XYxPVO
I provided my files below.
HTML
<div class="new"><div>
<div class="new"><div>
<div class="new"><div>
CSS
body {
background: white;
font-family:courier;
padding:20px 100px 20px 100px;
}
.new {
width:100px;
height:100px;
background-color:white;
position: relative;
border:2px solid black;
float:left;
padding:15px;
border-radius:5%;
}
.new::before {
content:"";
width:100px;
height:100px;
padding:15px;
background-color:black;
position:absolute;
transform:translate(-6px,-6px);
border-radius:5%;
z-index: -1;
}
.new:hover:before{
animation-name:click;
animation-duration:500ms;
animation-fill-mode:forwards;
}
#keyframes click {
0% {
transform:translate(-6px,-6px);
}
100% {
transform:translate(-10px,-10px);
}
}
Thank you for your help!
You need to close your div tags like so </div>, then you could put these 3 div in a flex container and space them evenly.
hope this helps
I have the following month selector:
It has a left and a right button with the text of the current month inbetween.
As you can see it doesn't look ok.
HTML:
<div id="seletor">
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-w" href="#" id="subtrair">subtrair</a>
<div id="mescorrente"></div>
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar">somar</a>
</div>
CSS:
#subtrair, #mescorrente, #somar {
display:inline-block;
vertical-align:top;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size:20px;
text-transform:uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom:10px;
white-space: nowrap;
}
I tried all sorts of options in the display settings, like display:table and display:inline but it did not work.
In Chrome Dev Tools, if I uncheck and check again display:inline-block; it works!
What is wrong with this code?
Change the CSS for #mescorrente.
#mescorrente {
min-width: 200px;
text-align: center;
}
You can use this:
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar" style="float:right;">somar</a>
or
#somar {
margin-top:2px;
float:right;
}
but as long as you use px in your parameters, if the above ways does not help, you can set the distance form the left side like this:
#somar {
margin-top:2px;
left: 150px;
}
Just a slightly different approach - floating the three components left inside the div, then positioning the div - FIDDLE.
Did you want to do anything more with it?
CSS
#seletor {
width: 300px;
margin: 30px auto;
}
#subtrair, #mescorrente, #somar {
float: left;
vertical-align: top;
margin-left: 10px;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size: 20px;
text-transform: uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom: 10px;
white-space: nowrap;
}
You have two options that I see here. Either you can create multiple div elements and display them inline, or you could use
<span>
element, as it is intended to display elements inline natively.
http://www.w3schools.com/tags/tag_span.asp
I would recommend using the span element, as I've had good success using this method, so long as you want them truly inline and not staggered/relatively aligned via script.
I am trying to put my text on the horizontal line.
I want if the text length increases the line should get adjusted according to the text length. which is working fine on IE7,8, Mozilla. I want to make it work for Google Chrome.
It's working fine except Google Chrome.
Here is my code:
/*CSS*/
.pageHD{ font-size:30px; color:#369; font-weight:bold; padding:20px 0} .pageHD p{display:block; margin-right:10px}
.title-line{ height:1px; border:0 none; background:#e5e5e5; position: relative; right:0; top:0px}
<!--HTML-->
<div class="pageHD"><p class="left">Zones Showcases</p> <hr class="title-line" /></div>
Can anybody help me for this.
Thanks.!
Here's what I understand on your question:
You want to make a text overlap a hr element.
If I'm not mistaken on understanding your question, then this would be my answer.
Just make a content after the hr so it would overlap the hr.
Your new HTML would be:
<div class="pageHD"><hr class="title-line" /></div>
And your new CSS would be:
.pageHD {
font-size:30px;
color:#369;
font-weight:bold;
padding:20px 0
}
.pageHD p {
display:block;
margin-right:10px
}
.title-line{
height:1px;
border:0 none;
background:#e5e5e5;
position: relative;
right:0;
top:0px;
z-index: 0;
}
.title-line:after {
position: absolute;
content: 'Zone Showcases';
bottom: -15px;
z-index: 1;
}
Here's a jsFiddle Example: jsFiddle Example
this will solve your problem
border-bottom:1px solid #e5e5e5;
Check this fiddle
I am looking for the easiest, most maintainable way to do this:
These are text slugs that will be appended to certain images throughout the site. They all say this same thing, but the images are varied and come from a CMS.
I know how I would do it with the image set to position relative and a div with "there's a better way" in an absolutely positioned child div.
However, since that requires HTML added to every image that gets this treatment, I was looking for a way to do this with a css class using the :before pseudo element. So far, applying the class to a wrapping link has no effect:
<img src="imagepath" alt="">
.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}
Is this sort of thing possible? Having the whole thing in CSS means all I have to do is have the CMS apply the class attribute when needed.
Yeah, ::before and ::after don't work on images. But you can apply them to the wrapper
link:
a{
position: relative;
}
a, a > img{
display:inline-block;
}
a::before{
content: 'theres a better way';
position: absolute;
left: 0;
top: 0;
width: 80%;
height: 20px;
left: 10%;
background: #000;
opacity: 0.4;
color: red;
font-size: 18px;
}
demo
If you want the text added in the HTML, you'll have to put a real element with it in your link (and apply the same rules to it, but without content)
I'll do it like this with jQuery :
Html
<div class="thumb">
<img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
<div class="caption">My caption</div>
</div>
Css
.thumb {
position:relative;
width:230px;
height:230px;
}
.thumb img {
max-width:100%;
}
.thumb .caption {
display:none;
position:absolute;
top:0;
height:20px;
line-height:20px;
width:100%;
text-align:center;
background:rgba(255,255,255,0.5);
}
JQuery
$('.thumb').hover(function() {
$(this).find('.caption').fadeIn();
}, function() {
$(this).find('.caption').hide();
});
See fiddle
NOTE TO ANYONE FINDING THIS THREAD: In Firefox 21 and IE 9/10 this did not work right with oversized images. It forced the images to 100% even if globally set to max-width: 100%
I had to follow the answer I selected above but set the A tag to display:block instead of display:inline-block to fix.
I'm trying to remove all effects on a HTML Button element.
The HTML:
<div id="go">
<button onclick="load.update(true,cards.id);" type="submit"></button>
</div>
The CSS:
#header #go button{
display:block;
border:0 none;
cursor:pointer;
outline:none;
vertical-align:top;
width:18px;
height:33px;
background:url('../images/cards/go.png'); //Just an image to replace it all.
}
In Chrome and Firefox this works fine, but in IE (8 at least) the "push" effect of the button is still there when the button is clicked (EG the offset)
Is there any Tricks i can use to remove this effect?
Thanks in advance!
Diesal.
you need to add background styles to :hover :active :focus as well.
#header #go button:hover {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:active {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:focus {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
I had a similar experience, and was able to fix it in IE8, but not IE7. See it working here:
http://jsfiddle.net/GmkVh/7/
HTML:
<button></button>
CSS:
button {
color:#fff;
background:#000;
border: none;
outline:none;
padding: 5px;
cursor: pointer;
height: 25px;
}
/*
It hits this state (at least in IE) as you're clicking it
To offset the 1px left and 1px top it adds, subtract 1 from each,
then add 1 to the right and bottom to keep it the same width and height
*/
button:focus:active {
padding-top: 4px;
padding-left: 4px;
padding-right: 6px;
padding-bottom: 6px;
color: #ccc;
}
One way would be to get rid of the <button> tag completely and use a <a href=".." /> tag in its place styled the way you want.
Just have the link do a javascript postback.
update (from comments):
one example:
Click Here
Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.
There are alternate versions if you are using .net webforms or jQuery.
After you have done whatever you like with the border etc., just put a span inside the button around the text like so:
<button class="button" type="submit"><span class="buttonspan">Blah</span></button>
Then the CSS becomes:
button {position:relative; width:40px; height:20px /* set whatever width and height */}
buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="calculation_button">
<button type="submit"><span>Count</span></button>
</div>
.calculation_button span {
position: relative;
left: 0;
top: 0;
}
works for me in IE and FF
The following helped for me in IE 10:
button:active {
position: relative;
top: -1px;
left: -1px;
}
It fixed the top perfectly, but left still had background bleed-though for my case. Still looks a bit odd if the user starts clicking and then moves the mouse off the button. Also obviously only enable the rule for relevant IE version(s).
Position relative seemed to have taken care of the problem
Simply have a wrapper within the button:
So
<button>
<div class="content">Click Me</div>
</button>
and set the DIV to position relative with top: 0, left: 0
Example below:
http://jsfiddle.net/eyeamaman/MkZz3/
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
This is a duplicate question