I need to create a sidebar menu like this http://wrapbootstrap.com/preview/WB07061TJ, but I can't find the image asset of the current item (a white arrow).
How can I do this?
This is a CSS border triangle trick:
You can achieve this with a span element in absolute position where you want the arrow and the following class
.triangle {
display: inline-block;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-right: 5px solid white;
}
As a side not: this "feature" is nothing bug an edge case of this http://jsfiddle.net/Xjmp5/
the arrow is made from 2 div-s
you can see the code ,he set the div width:0,height:0,line-height:0,font-size:0 to make sure the have no width and height
in this case ,if you set the border into 4 different colors ,you will see 4 triangles,in the shape of a square
what to do next is to set the border-left,border-top,border-bottom transparent .then you get a triangle,
the last thing you want to do is make another white triangle and cover it on the first one ,then you will get the arrow
Related
I am looking to color the bottom pixel (the bottom width pixel, along all the length of the image) of my image to one particular color when I click on it. I would like not to add anything in the html.
Can that be achieved only in css doing something like :
.image:active{
width: 1.5px;
background-color: my_color;
length: 100%;
}
Yes, you can use :active state selector. Basically, you can either add a border on the bottom or create a pseudo-element for this image's child (because not all browsers support :before and :after on images).
Border solution:
.image:active {
border-bottom: 1px solid red;
}
I think you wanna add an border at the bottom of your image on css like :
.image:active {
border-bottom: 1.5px solid #123;
}
I have four boxes in a row and they all have the same class. They all should be the same width but one is 1 pixel wider than the rest and it's throwing the row out. As far as I can see, the content is not pushing it, and there is nothing in the box to make it 1 pixel wider. It's the second last box to the right with the contact form in it on this site: http://www.guitarworldcityarcade.com.au/
If it's not content, how can I tell what's making this particular div 1 pixel wider than the rest?
I had compensated for the border in the widths of each box: layout is 1120px wide. 1120/4 = 280. Each box has a padding of 5px, so thats 5 on the left and right. 280-10=270. Then the border, which is 1px on each side, so thats 270-2 = 268. I have set my class for the boxes to be 268px wide and yet one is one pixel wider. I don't really want to sacrifice the border (yet).
You are using border: 1px solid #111111; on line 247 of global.css.
So if you are aware of CSS Box Model
The border is counted outside of the element and not inside hence it offsets your element by 2px and not 1px because it takes 1px on the left, 1px on the right as well as top and bottom too.
So two solutions here, either you can use border: 0; or you need to use box-sizing: border-box; on that element, which will count the border inside instead of outside.
That extra space is coming because of border. So you need to set it to zero.
Declare border: none; for the last box and it will work.
Add this code in your class
border: none;
outline: none;
width:0;
Remove the css border property to that div
border:0px;
I'm curious to know how the popular CSS triangles are made using just borders. Here's an example of the code:
#CLASS or ID name #CLASS or ID name:after {
border-color: transparent transparent #F3F3F3;
border-style: solid;
border-width: 6px;
bottom: 0;
content: "";
height: 0;
left: 50%;
margin-bottom: -1px;
margin-left: -6px;
margin-top: 0;
position: absolute;
width: 0;
}
Again, how is it exactly that this creates an up arrow? Additionally, I'm confused as to what content: "" does.
user1637741, you ask a very good question.
Firstly, let me begin by explaining the purpose of content:"";. You see, what we're using here is a called a pseudo element. These are intended to add content to your page, like words or images. The triangle (or arrow) situation is a hack of sorts, in that we don't actually want to add any new content to our page; instead, we simply want to draw a border for the element (which, yes, will ultimately give us a triangle). However, the pseudoelement's content does more than specify what it contains. It also acts as the boolean to determine whether or not to display the element at all. In other words, if there's no content, the thing won't render. Luckily for us, simply passing an empty string is enough to make it display.
Okay, so now about that pesky border. How in the world does it make a triangle? In short, what we're doing is drawing a border on a single edge of the element, then positioning the element such that we only see what appears to be a triangle.
Here, let me show you. Check out this JSFiddle. This isn't anything too out of the ordinary. It's just a div that is only displaying a bottom border. But, if you stare and it and think about it, imagine hiding most of that border so that what's left is a triangle. If you removed all of it except one of the edges, we'd have a very little triangle left over. Can you see it?
First, let's re-arrange your example a bit and get rid of any css that isn't pertinent to your question:
.my-div:after {
content: "";
border-style: solid;
border-width: 6px;
border-color: transparent transparent #F3F3F3;
}
What this is doing:
content: "" inserts some content immediately following .my-div. Since in this case it's an empty string, you now basically have a text node that has no content, and thus has 0px width
next, border-style: solid; and border-width: 6px are going to enclose that empty content with a 6px wide border. Since the content has no width, you've essentially got a solid box that's whatever color your default text color is
last, border-color: transparent transparent #F3F3F3; is going to reset the border colors for each of the four sides. The first transparent sets the top border to be clear, the second one sets the left and right borders to also be clear, and #F3F3F3 sets the bottom border to be an off white color. So now you've got a box that's all borders, and the top and side borders are invisible leaving just the bottom border. But instead of that just being a 6px thick line at the bottom, because of the 45 degree angles formed by each of the sides joining (think of the miters on a picture frame), what you end up with is an arrow, in this case pointing up.
The rest of the rules in your original example were just positioning rules.
I have a form surrounded by a border. When the window is resized the border sometimes overlaps the form. This should not happen.
See the fiddle output:
http://jsfiddle.net/sdSdW/embedded/result/
Can someone tell me what I have to change in my source to make the border surrounding my form, keeping a distance between the form and the border even if the window is resized.
I do not want to make the border fixed width (if not really necessary)
See the fiddle source:
http://jsfiddle.net/sdSdW/
You don't need many parents for the border. You can add the border to fieldset itself
try -
fieldset {
border: 1px solid #DDDDDD;
margin: 0;
padding: 40px;
}
JSFiddle
My application should look good on small screens. When it is normal size, everything looks good. But when the screen is too small my buttons starting to mess up.
Red square represents an image, yellow represents some text and blue represents buttons.
Normally, the top version is displayed (the correct one)
When the screen is small, the second situation happens, when the bottom button jump to a new line.
Ideally, both buttons should stay one above the other. This is my css code:
{
background-color: #6b89ac;
border: 1px solid #89a9d0;
border-bottom-color: #1d4474;
color: white;
font-weight: bold;
text-decoration: none;
padding: 2px 5px 2px 5px;
margin-bottom: 3px;
text-align: center;
display: inline-block;
width: 100px;
}
It happens on small screens because the button is being pushed far enough down to slide under the picture. Try wrapping the text and buttons together in a div. The buttons would then be bound by the left edge of that new div.
Depending on your code that new div might also need overflow: hidden.
In the 1st situation, the 2nd blue box being held to the right only because the red box is tall enough to prevent it from clearing.
To ensure the blue boxes stay to the right right, float them right {float:right}
You should then wrap each set in a div so that the 2nd red box doesn't run up into the middle of the 1st group. And you'd probably need to apply a cleafix solution to that div to ensure its height grows approprirately with the addition of floats.
clearfix references:
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method
(I prefer #2)
You can give the body a fixed width. Then, your layout doesn't change when the window width is reduced. You can use the overflow-x property to control the scrollbar behaviour