This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I line up the text inside a <span> following a <button>
(2 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
My question is "how to center a span class on button?". See this, arrow-up is behaving in it's own way and not at the center of button. If the code works correctly, An equilateral trinagle will appear in the left of button following with the words Go back to top. And my code has errors which is limiting that to appear in the above mentioned manner. This is running example, https://codepen.io/vkdatta27/pen/XWdvMQL
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #101010;
}
<button><span class="arrow-up"></span>Go back to top</button>
Another possible solution without absolute positioning. Three lines are added to the arrow-up:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #101010;
/* new lines */
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<button><span class="arrow-up"></span>Go back to top</button>
There are different ways to do it, one way to do it is using position: absolute; and adjusting its position, see the code below.
button {
padding-left: 20px;
}
.arrow-up {
position: absolute;
left: 15px;
top: 15px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #101010;
}
<button><span class="arrow-up"></span>Go back to top</button>
<!-- Arrow up isn't in center like other text -->
You can use flexbox to the button container to achieve that result (codepen).
CSS:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #101010;
}
.container {
display: flex;
align-items: center;
}
HTML:
<button class="container"><span class="arrow-up"></span>Go back to top</button>
<!-- Arrow up isn't in center like other text -->
Dont make it so complicated espaically with CSS if there is no reason to it.
Simply remove the Span and isnert the unicode of the up-triangle ▲.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #101010;
}
<button>▲ Go back to top</button>
Just make the span display:inline-block:
.arrow-up {
width: 0;
height: 0;
display:inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #101010;
}
<button><span class="arrow-up"></span>Go back to top</button>
then if you want you can add margin or padding to adjust .
There are different ways. This will be one of those ways:
.btn-container {
display: flex;
}
.arrow-up {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #101010;
margin-top: 5px;
}
<button class="btn-container">
<span class="arrow-up"></span
><span class="textOnBtn"> Go back to top</span>
</button>
Related
I'm trying to move boxes up when simply doing a mouseover. I can mouseover on each box, but can't get it to move up.
Here's my code:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
}
Here's my LIVE DEMO
Your given examples did it by two CSS properties:
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}
You should use transform like the following:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
transition: all 200ms ease;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translateY(-3px);
}
You can add the following code when you hover the element to move up.
.post-item:hover{transform:translateY(-3%);}
I was wondering if its able to have a square that has a point on the right side of it something like this in just one css:
http://prntscr.com/59wn94
I tried to make one just by using one div I wasn't able to manipulate enough its much easier for when creating a square then just add up a triangle right to it. but I want something that is on just on css like a combination of square and triangle-right.
Here is my http://jsfiddle.net/wbZet/1311/ . I just improvised some fiddle to create this stuff.
<div id="nav">
<a>PLAY</a>
</div>
<div id="triangle-up" />
#triangle-up {
width: 0;
height: 0;
border-left: 35px solid red;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
float: left;
}
#nav {
float:left;
display: block;
height:50px;
padding: 0px 10px;
background: red;
}
#nav a {
margin: 25px 0px;
}
Use Pseudo-elements - CSS
div{
position: relative;/*it important to set this to relative to be able to use :before in absolute*/
width: 60px;
height: 40px;
background: red
}
div:before{
content: '';
position:absolute;
left: 100%;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red
}
<div>Play</div>
Visit http://onecraftyshop.com
You will see the grey box on the first section with a star. If you look at the html it will be under #av_section_2 as .arrow-down.
I'm inserting the .arrow-down class using jQuery.
jQuery('#av_section_2').prepend(jQuery('<div class="arrow-down"></div>'));
And here is my css for the styling:
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}
So i'm sure that the jquery is fine as it is displaying on the page, but for some reason I can't get the css to make a triangle.
How can I fix this? the corrected css would be great!
If you need any other info let me know!
Thanks
You need to be more specific because some other rules in your style sheet are over-riding it.
.avia-section .arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}
I am trying to get the dropdown menu in Bootstrap 2.3.2 to be full screen.
Here is a demo: http://bootply.com/100126
So when you click on a drop down area, the dropdown will be edge to edge single line but I can't quite figure out how to get there.
If I specify a certain width in px I can get it to work but means I get left to right scroll etc. and that is not ok ;-)
Any advice would be appreciated!
For your .dropdown-menu style, set the position property to fixed, and the top property to 40px as shown below:
.dropdown-menu {
position: fixed !important;
display: block;
float: left;
left: 0 !important;
top: 40px;
height: 35px;
z-index: 1000;
display: none;
list-style: none;
width: 100%;
background-color: #58e137;
}
//the following style is left in from your code
.dropdown-menu li {
float:left;
}
Then, these styles will override bootstrap styles for the default position of the little drop-down arrow, and position them relative to the menu item clicked on rather than the actual drop-down menu:
//custom style
.navbar .nav li.open:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: -4px;
left: 9px;
z-index: 2000;
}
//custom style
.navbar .nav li.open:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
bottom: -3px;
left: 10px;
z-index: 2000;
}
//bootstrap override
.navbar .nav>li>.dropdown-menu:before {
content: '';
display: inline-block;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 9px;
}
//bootstrap override
.navbar .nav>li>.dropdown-menu:after {
content: '';
display: inline-block;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid #ffffff;
position: absolute;
top: -6px;
left: 10px;
}
This should work for all drop-down menus without needing to add any JavaScript to position elements. Just remember that since we are overriding the bootstrap styles, any page that uses these styles will also be over-ridden.
I'm programming a website using HTML, CSS and JavaScript. I have two buttons on a page that use JavaScript to display information when clicked (each button fades out the others information when clicked to save space). But the same code isn't working for my other buttons?
JavaScript:
<script type = text/javascript>
$('#scoreButton20102011').click(function() {
$("#maleRec20102011").fadeIn(1000);
$("#femaleRec20102011").fadeIn(1000);
$("#maleRec20112012").fadeOut(1000);
$("#femaleRec20112012").fadeOut(1000);
});
$('#scoreButton20112012').click(function() {
$("#maleRec20112012").fadeIn(1000);
$("#femaleRec20112012").fadeIn(1000);
$("#maleRec20102011").fadeOut(1000);
$("#femaleRec20102011").fadeOut(1000);
});
</script>
The button for 2010/11 shows up both buttons text, and the button for 2011/12 makes everything fade out? I cannot see why.
CSS:
#maleRec20112012 {
border-top: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
position: absolute;
display: none;
right: 0;
width: 350px;
height: 400px;
}
#femaleRec20112012 {
border-top: 3px solid #E6E6DC;
border-left: 3px solid #E6E6DC;
border-right: 3px solid #E6E6DC;
border-bottom: 3px solid #000;
position: absolute;
display: none;
left: 0;
width: 350px;
height: 400px;
}
#maleRec20102011 {
border-top: 3px solid #E6E6DC;
border-left: 3px solid #E6E6DC;
border-right: 3px solid #E6E6DC;
border-bottom: 3px solid #000;
position: absolute;
display: none;
left: 0;
width: 350px;
height: 400px;
}
#femaleRec20102011 {
border-top: 3px solid #E6E6DC;
border-left: 3px solid #E6E6DC;
border-right: 3px solid #E6E6DC;
border-bottom: 3px solid #000;
position: absolute;
display: none;
left: 0;
width: 350px;
height: 400px;
}
try to use
<script type = text/javascript>
$('#scoreButton20102011').live('click',function()
{
$("#maleRec20102011").fadeIn(1000);
$("#femaleRec20102011").fadeIn(1000);
$("#maleRec20112012").fadeOut(1000);
$("#femaleRec20112012").fadeOut(1000);
});
$('#scoreButton20112012').live('click',function()
{
$("#maleRec20112012").fadeIn(1000);
$("#femaleRec20112012").fadeIn(1000);
$("#maleRec20102011").fadeOut(1000);
$("#femaleRec20102011").fadeOut(1000);
});
</script>
or try to put the code in onready function
Does this simplified JSFiddle work as you intended? http://jsfiddle.net/9JAGK/ If so, I'd guess your problem is actually elsewhere in your code. Maybe check for any other events that might be assigned to your buttons or styles that might be conflicting with the fadeIn/fadeOut?