I've got the following div element and I'd like the height on the right to be the number of pixels I specify e.g 5px. How can I achieve that?
Html
<div class="square"></div>
css
.square {
height: 14px;
width: 14px;
border: 2px solid #4faadf;
}
Try this one!
.square {
width: 0;
height: 0;
border-top: 5px solid #555;
border-left: 14px solid #555;
border-bottom: 9px solid transparent;
}
<div class="square"></div>
If you want to change the right side height of the div, you should have to set that value to border-top and remove that value from the border-left value and set it to the border-bottom value. Just like below one. In here, I have set the right side height to 2px.
.square {
width: 0;
height: 0;
border-top: 2px solid #555;
border-left: 14px solid #555;
border-bottom: 12px solid transparent;
}
<div class="square"></div>
Thanks and best regards!
I created class border for a link and put the link into that border. Then when I see by responsive device link is over length form that border while I try to keep sentence into border it has no problem.
How can I resolve it?
My CSS:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
You probably used an element with display: block as a host of your .border class:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<div class="border">
Google
</div>
<div>'s default display value is block, hence full width.
What you need is using an element with display: inline:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<span class="border">
Google
</span>
Or, simply add display: inline to your .border styles:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
display: inline; /* <---- */
}
<div class="border">
Google
</div>
I want to draw this:
So I wrote this code:
HTML:
<div class="outer_border_cp">
<div class="inside_border_cp"><p>تعديل معلومات المستخدم</p></div>
</div>
CSS:
.outer_border_cp {
border: 1px solid #ccc;
padding-left: -10px;
}
.inside_border_cp {
border: 1px solid #ccc;
margin-top: 10px;
margin-bottom: 10px;
position: static;
}
But I got this result:
How can I complete this correctly?
I changed your CSS to this, and it works:
.outer_border_cp {
margin: 10px;
border: 1px solid #ccc;
}
.inside_border_cp {
border: 1px solid #ccc;
margin: 10px -10px;
padding: 0 20px;
position: static;
}
You can see it on codepen: http://codepen.io/anon/pen/cgvlD
Try using margin-left:-10px rather than padding-left:-10px. You cannot have negative padding values in CSS.
This should be fairly simple, but after trying a lot of solutions from Google and other Stack Overflow questions I still haven't found a solution. I have a html.erb partial in a rails project:
<div class="resource-body">
<div class="arrow-up"></div>
<h4><%= resource.title %></h4>
<div class="resource-section-id">
<span hidden><%=resource.section_id%></span>
</div>
</div>
And the corresponding CSS:
.resource-body{
padding-left: 20vw;
margin: 0;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0;
border-bottom: 5px solid black;
}
The arrow appears above the URL. I'm trying to get the arrow to be immediately to the left of the link. I've tried the usual suspects like display: inline, etc. but no dice. Any ideas?
Here I have modified the css and added two properties in .arrow-up class
float: left;
padding-top: 6px;
Here is the link to fiddle
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0;
border-bottom: 5px solid black;
position: relative;
top: 33px;
left: -18px;
}
Make it easy!!!!!
just add this rules to your css:
h4 a {float:left;}
Enjoy it!!!
Is it possible to somehow create a double border in CSS, with these 2 added customizations:
One line is slightly thicker than the other
There is a small gap between the two lines
This is the kind of border I need:
EDIT:
Guys, I cannot make any changes to my existing HTML code. I can only apply CSS for the existing HTML code. As far as you're concerned, consider I have a div named sampleDiv, and I want to apply the border on the top side of this div (see below).
Secondly, if you're using any technique other than border, please note that I only want to apply the this specialized border on the top side of my sampleDiv div.
pure CSS & Cross browser - the thickness and spacing can be customized
After your latest Edit: this is a Working Fiddle
without changing the markup, top border only.
your HTML:
<div class="sampleDiv">
some content
</div>
new CSS
.sampleDiv
{
border-top: 2px solid black;
padding-top: 1px;
}
.sampleDiv:before
{
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
If you are allowed to change the DOM:
one line anywhere in the markup: Working Fiddle
HTML:
<div class="SpecialLine"></div>
CSS:
.SpecialLine
{
border-top: 2px solid black;
height: 2px;
border-bottom: 1px solid black;
}
full container border: Working Fiddle
HTML:
<div class="SpecialContainer">
<div class="Content">
here goes the content
<div>
</div>
CSS
.SpecialContainer
{
border: 2px solid black;
padding: 1px;
}
.Content
{
border: 1px solid black;
}
There are various ways you can have multiple borders. One way is to use box-shadow, you can specify multiple box shadows to create the effect you want.
Example
box-shadow: 0 0 0 5px black, 0 0 0 7px red;
Update
I have created a jsFiddle to show you how you can create your borders using box-shadow
Fiddle
There's not a specific property or something for this,but you can easily create one.Something like this:
html:
<div id="wrapper">
<div id="middle">put whatever you want here</div>
</div>
css:
#wrapper{
border: 3px solid black;
padding: 1px;
}
#middle{
border: 1px solid black;
}
here's a js fiddle link:
http://jsfiddle.net/roostaamir/GEqLJ/
UPDATE:
so I saw your edit,and here's the first thing that came to my mind(if you have the width of your sampleDiv this will work):
#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}
#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}
Your div: <div class="framed" />
Simple CSS:
.framed {
border: solid 2px #ccc;
box-shadow: 0 0 0 14px #ccc;
outline: solid 8px #fff;
}
Demo Fiddle: http://jsfiddle.net/uRFsD/
The easiest way to do this would be wrapping the main div in a container div for the second line like so:
.inner {
border: 2px solid #000;
}
.outer {
border: 1px solid #000;
padding: 1px;
}
It's not particularly semantic but it's an easy way to get the job done. You could also use border-image if being semantic is important, but it's more complicated. I guess you could also use both border (inner) and outline (outer) on the same div, but that is not ideal since outline isn't technically part of the box model at all as far as I understand it.
HTML
<div></div>
<div></div>
CSS :
div{
display: block;
background-color: #000;
}
div:nth-child(1){
padding: 2px 0;
}
div:nth-child(2){
margin-top: 1px;
padding: 1px 0;
}
Check this fiddle
May be something like below:
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
http://jsbin.com/iWiGEzU/1/edit?html,css,output
Like
demo
css
.outline {
border-top: 2px solid #000;
border-bottom:1px solid #000;
height:3px;
}
CSS
.doubleBorder
{
border: 4px solid black;
padding: 2px;
}
.doubleBorder>div {
border: 2px solid black;
}
HTML
<div class="doubleBorder">
<div>
<p>Hello</p>
<p>World</p>
</div>
</div>
Working demo
Not in pure CSS as far as I know. Instead you could add in a div element to your HTML, set its width to the one below it and set it's border-top, thickness, margin properties to be meet your thicker border requirement.