Is there a way to make the border bigger than the div that it's attached to? For example, if the div dimensions were 10x10, could I make the border 20x10?
Yes you can:- check this link - http://jsfiddle.net/QnTqh/2/
div{
width:100px;
height:100px;
border:1px solid red;
border-width:200px 200px 10px 10px;
}
You can use the following to control each side independently:
border-top: 10px solid #000;
border-right: 20px solid #000;
border-bottom: 10px solid #000;
border-left: 20px solid #000;
Or make them all the same:
border: 20px solid #000;
Related
I'm trying to create this vertical line within my HTML page, I wanting to use it as a place to put side information. I'd like to be able to color this as well! I tried a few things, but just can't get it right. Here is my code:
#sidebar {
width: 200 px;
border-right: 3px solid #000000;
border-left: 3px solid #000000;
}
#sidebar {
float: left;
width: 200px;
padding: 15px 10px 15px 20px;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
min-height: 100vh
}
I think this is what you're wanting
Just a short question
Is there a shorter way of writing this code so that all 3 are covered in one rule?
border-left: 2px solid #006699;
border-right: 2px solid #006699;
border-bottom: 2px solid #006699;
You would use the border shorthand and then set border-top to none. (example here)
border: 2px solid #006699;
border-top: none;
I would like to center the following 2 buttons side by side rather than underneath one another. Here is an example of how it is looking at the moment on JS Fiddle
Could you advise me the best way to handle this? Any help is really appreciated.
Define display:inline-block to your anchor tags & define text-align:center to it's parent. Write like this:
a.button {
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/*For IE7*/
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
.parent{
text-align:center;
}
HTML
<div class="parent">
<a class="button">Test</a>
<a class="button">Test</a>
</div>
Check this http://jsfiddle.net/2ws9r/11/
add a container with fixed width and margin 0 auto;
http://jsfiddle.net/2ws9r/13/
hope it helps
JSFiddle
<div>
<a class="button">Test</a>
<a class="button">Test</a>
</div>
div{ text-align: center; }
a.button {
display: inline-block;
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
a.button:hover {
color: #179FD9;
}
There is this triangle that is made with css: http://jsfiddle.net/W3hNx/1/
How can I make it face up? :)
Thanks!!
Just change border-top to border-bottom in .triangle. updated jsFiddle
Change
border-top: 30px solid green;
to
border-bottom: 30px solid green;
in .triangle selector.
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 30px solid green;
this will make the triangle face up
Is there a way of combining border-top,border-right,border-left,border-bottom in CSS like a super shorthand style.
eg:
border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
No, you cannot set them all in a single statement.
At the general case, you need at least three properties:
border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;
However, that would be quite messy. It would be more readable and maintainable with four:
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
Your case is an extreme one, but here is a solution for others that fits a more common scenario of wanting to style fewer than 4 borders exactly the same.
border: 1px dashed red; border-width: 1px 1px 0 1px;
that is a little shorter, and maybe easier to read than
border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red;
or
border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;
I can relate to the problem, there should be a shorthand like...
border: 1px solid red top bottom left;
Of course that doesn't work! Kobi's answer gave me an idea. Let's say you want to do top, bottom and left, but not right. Instead of doing border-top: border-left: border-bottom: (three statements) you could do two like this, the zero cancels out the right side.
border: 1px dashed yellow;
border-width:1px 0 1px 1px;
Two statements instead of three, small improvement :-D
No you can't set them as single one
for example if you have
div{
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
same properties for all fours then you can set them in single line
div{border:2px solid red;}