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;
}
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 need to create two Horizontal line and between them there is a centered word.
I create this code:
html:
<div class="myRow">preference</div>
css:
.myRow
{color:red;
text-align:center;
border-style:solid;
border-width:medium;
border-color:#b2b2ac white #b2b2ac white;}
Unfortunately, the top border and bottom border are not straight at the ends.
How can I get the perfect rectangle border on the top and bottom of the box?
Borders meet at angles. The angle at which they meet is determined by the relative sizes of each border. If they are equal width, the angle is 45 degrees...if the aren't the same the angle is different.
Example:
.box {
width: 50px;
height: 50px;
margin: 10px 25px;
background: lightblue;
display: inline-block;
}
.large {
border-top: 50px solid red;
border-left: 50px solid green;
}
.medium {
border-top: 50px solid red;
border-left: 10px solid green;
}
<div class="box large"></div>
<div class="box medium"></div>
So, to have a square end, one of the widths needs to zero. In your case as this is needed at both ends, change the side border widths to 0.
.myRow {
color: red;
text-align: center;
border-style: solid;
border-width: medium 0;
border-color: #b2b2ac white;
width: 80%;
margin: 1em auto;
}
<div class="myRow">preference</div>
You can remove the border-left and border-right as below.
.myRow {
color: red;
text-align: center;
border-style: solid;
border-width: medium;
border-color: #b2b2ac white #b2b2ac white;
border-left: none;
border-right: none;
}
<div class="myRow">preference</div>
Try using this below code, hope this works for you.
.myRow {
color:red;
text-align:center;
border-style:solid;
border-width:3px 0;
border-color:#b2b2ac;
}
<div class="myRow">preference</div>
try this out
.myRow {
display: table;
margin: 0 auto;
color: red;
text-align: center;
border-style: solid;
border-width: medium;
border-color: #b2b2ac;
border-left: none;
border-right: none;
}
<div class="myRow">preference</div>
I am trying to create nine circles, with a picture of a person in each, with the name of the indidvidual directly in the middle of each picture. Below is my HTML and CSS file. I have tried using text-align: centre however it does not look accurate? Also, it only move the text horizontally and not vertically, i.e not to the center of the image, only to the center of the TOP of the image. Thank you.
<div class="friend">Stacey</div>
<div class="Sexy">Caroline</div>
<div class="friend"; id="best_friend">Adam</div></br>
<div class="boss">Paul</div>
<div class="friend">Phil</div>
<div class"colleague"; id="archnemesis">Luca</div>
<div class="friend">Ruth</div>
<div class="family">Mum</div>
<div class="enemy">Satan</div>
</body>
**My CSS file below:**
div {
display: inline-block;
margin-left: 5px;
border: 2px solid black;
border-radius: 100%;
height: 100px;
width: 100px;
text-align: center;
}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
.colleague {
border: 2px solid brown;
}
.boss {
border: 5px solid pink;
}
.sexy {
border-color: purple;
}
#best_friend {
border: 4px solid #00C957;
}
#archnemesis {
border: 4px solid #CC0000;
}
<html>
<head>
<style>
div {
display: inline-block;
margin-left: 5px;
border: 2px solid black;
border-radius: 100%;
height: 100px;
width: 100px;
text-align: center;
}
span.center-content {
display: inline-block;
vertical-align: middle;
line-height:100px;
}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
.colleague {
border: 2px solid brown;
}
.boss {
border: 5px solid pink;
}
.sexy {
border-color: purple;
}
#best_friend {
border: 4px solid #00C957;
}
#archnemesis {
border: 4px solid #CC0000;
}
</style>
</head>
<body>
<div class="friend"><span class="center-content ">Stacey</span></div>
<div class="Sexy"><span class="center-content ">Caroline</span></div>
<div class="friend"; id="best_friend"><span class="center-content ">Adam</span></div></br>
<div class="boss"><span class="center-content ">Paul</span></div>
<div class="friend"><span class="center-content ">Phil</span></div>
<div class="colleague"; id="archnemesis"><span class="center-content ">Luca</span></div>
<div class="friend"><span class="center-content ">Ruth</span></div>
<div class="family"><span class="center-content ">Mum</span></div>
<div class="enemy"><span class="center-content ">Satan</span></div>
</body>
</html>
Changes
Added a new span and common class to all spans - center-content
added new class in style - span.center-content
You will need to keep same height for div and span to get it in the middle of each div.
Either you can test the code above on your browser or else visit this demo url - https://jsfiddle.net/BRxKX/4962/
You probably want something along the lines of:
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;"></div>
</div>
</div>
This may be of help in the future http://howtocenterincss.com
You could use vertical-align:middlebut that requires to be a table and you can spoof it using display:table-cell.
I suggest to use line-height with the height of the circles, this works with only 1 line of text, if you one multiline you have to use internal divs or spans.
If if doesn't look accurate horizontally may be the padding.
div {
display: inline-block;
margin-left: 5px;
border: 2px solid black;
border-radius: 100%;
height: 100px;
width: 100px;
text-align: center;
padding:0;
line-height:100px;
}
First: I dont use bootstrap, I want to build this, without bootstrap.
I want to create this
,but I dont know how to handle the span on the right side of the input field. Here is my try.
.input_register{
padding: 5px;
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
padding: 5px;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</div>
Why is the span higher as the inputfield?
display: inline-block;
inline-block displays similar characteristics as an inline element while being able to alter the sizing like a block element.
Setting line-height: 1em sets the height of the containing block equal to the size of the font. In this case I've used line-height: 1.5em to give it some extra space.
Also, vertical padding on these elements yields unexpected results, using line-height instead gives a more consistent appearance.
.input_register,
.register_span {
display: inline-block;
font-size: 12pt;
line-height: 1.5em;
padding: 0px 5px;
}
.input_register{
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</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.