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%;
}
Related
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>
I am trying to make a header as shown in the image attached. I tried the other answers on this website too but none actually helped very much.
I already have figured out the text and logo parts but need someone to help with the slanting div borders.
The effect that I want:
Try This:
header {
border:1Px solid;
height: 200px;
position: relative;
}
header:before, header:after {
position: absolute;
width: 0;
height: 0;
content: '';
border-width: 100px;
border-style: solid;
}
header:before {
left: 0;
border-color: transparent transparent transparent #000;
}
header:after {
right: 0;
border-color:transparent #000 transparent transparent ;
}
<header></header>
Depending on what you have going on in your header, you could try using triangles to mimic the slanted borders;
header{
width: 100%;
height: 200px;
background: #2c2d2e;
}
.triangle-right {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: absolute;
left: 0;
border-left: 200px solid white;
}
.triangle-left {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 200px solid white;
position: absolute;
right: 0;
}
<header>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</header>
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>
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?