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.
Related
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 style a warning message by adding a left border. I did this but there is a problem with the left border because it is not placed inside of the red border...it is displaced somehow to left
HTML:
<div class="msg-warning">Random warning message</div>
CSS:
.msg-warning {
border: 1px solid red;
padding: 0px 5px;
border-left-width: 12px;
}
.msg-warning {
border-left-color: blue;
}
https://jsfiddle.net/uoedzqj1/
you could trying like this:
.msg-warning {
border: 1px solid red;
padding: 0px 5px;
border-left: none;
box-shadow:-12px 0 blue;
margin-left:12px;
}
<div class="msg-warning">Random warning message</div>
Fiddle: https://jsfiddle.net/uoedzqj1/2/
something like this? nest another div in your .msg-warning div
.msg-warning {
border: 1px solid red;
padding: 0px 5px;
padding-left: 0px;
}
.blue {
display:inline-block;
width: 12px;
height: 100%;
background-color: blue;
margin-right: 5px;
}
<div class="msg-warning"><div class="blue"> </div>Random warning message</div>
Use outline and border properties:
.msg-warning {
outline: 1px solid lightGray;
padding: 0px 5px;
border-left:12px solid #FCF8E3;
}
I wanted only border-bottom line, not border-left, border-right or border-top:
So I wrote a code like this:
CSS code and HTML code:
.category {
border-radius: 4px;
border: 1px solid blue;
height: 33px;
margin: 2% 0;
padding: 1% 2%;
width: 100%;
border-bottom: lined;
border-bottom-color: blue;
}
<div class = "category">
<span class = "ctgryName" id="ctgryName">JNCIA - Junos</span>
<!-- <span class = "ctgryIcon pull-right"></span> -->
</div>
But I'm getting a whole border, I want only border-bottom line.
How can I do it?
You can select wich border you want to display like this :
border:0;
border-bottom:1px solid blue;
Your mistake is that you set the border instead of border-bottom, please do the following-
change this css line:
border: 1px solid blue;
to
border-bottom: 1px solid blue;
try this code..
u made mistake in css
you have used border also and border-bottom also. u need to use only border-bottom
.category {
border-radius: 4px;
border-bottom: 1px solid blue;
height: 33px;
margin: 2% 0;
padding: 1% 2%;
width: 100%;
}
change
border: 1px solid bleu;
to
border-bottom: 1px solid blue;
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!!!
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.