html:
<div class="no-contact-info">
<textarea></textarea>
<span>no contact info</span>
</div>
css:
.no-contact-info {
width: 400px;
}
.no-contact-info textarea {
width: 100%;
border-width: 1px;
border-style: solid;
border-right-color: #dbdfe6;
border-bottom-color: #e3e9ef;
border-left-color: #e7e8ed;
border-top-color: #abadb3;
z-index: 2;
}
.no-contact-info span {
display: block;
background:#FFFFC6 url(/media/icons/error.png) no-repeat 4px center;
padding: 2px 0 1px 24px;
color: #333333;
font-size: 12px;
font-weight: bold;
border: 1px solid #abadb3;
border-top-color: red;
width: 200px;
margin-top: -3px;
z-index: 1;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
}
view: http://jsfiddle.net/XurSz/
I want to push the "no contact info" span up slightly so that it covers the bottom border of the textarea... but the textarea keeps wanting to go overtop. How can I get around this?
The z-index property only affects elements that have been positioned. Adding position:relative; to the textarea and the span should do the trick.
Related
This is my current input field styling however for some reason which I am unable to see, they are not aligning properly next to each other.
Code:
<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
display: inline-block;
height: 30px;
margin-top: 15px;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
display: inline-block;
height: 30px;
font-size: 16px;
}
JSFiddle:
https://jsfiddle.net/0Lsake9j/
Any solutions?
Remove margin-top:15px and add line-height:30px; in .labelInputField style. That will make your div and input alignment proper.
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
display: inline-block;
height: 30px;
line-height:30px;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
display: inline-block;
height: 30px;
font-size: 16px;
}
<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">
You can also test it here
Offload layout responsibility to a container and/or additional layers of markup.
Remove margin-top on the div
Use a <label for="[YOUR_INPUT_ID]"></label> and ensure your input has id="[YOUR_INPUT_ID]".
Add type="password" on your input, unless you have a specific reason not to.
Remove existing layouts styles from selectors that are styling the input and label (i.e. inline-block in this case.).
Apply your layout styling with an object that's sole purpose is to handle layout of your elements
.iHandleLayout {
display: flex;
/* rest of your layout styling etc. */
}
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
min-width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
font-size: 16px;
}
<div class="iHandleLayout">
<label class="labelInputField" for="password">Confirm Password</label>
<input type="password" class="inputField" id="password">
</div>
In the end, there are many ways to control the layout (display: inline-block, flex, table, etc), but the main principle is the separation of concerns with your styling and the markup structure as part of that separation.
I have a border around my h4 header :
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
}
which renders as
I would like to indent the whole header (including the border) by 50px. Adding text-indent: 50px; indents just the text, not the border (and border-indent apparently does not exist)
What should be done so that the border is indented as well (or is indented, dragging the text within)?
use margin:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left: 50px; /* change this as you like */
}
margin will shift the whole element while padding will increase the space between the content and the border.
Look at this picture to understand the difference:
Use margin-left property to move the border also for h4 tag
Check out JSFiddle
CSS:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left:20px;
}
Add a wrapper:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 100%;
border-style: solid;
padding: 5px;
}
#wrapper {
width:90%;
padding-left:12px
}
<div id="wrapper">
<h4>ddd</h4>
</div>
you can try this one:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding:5px;
margin-left:50px;
}
DEMO HERE
Add padding-left: 50px and a margin-left: 50px to the h4
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px 5px 5px 50px; /*top, right, bottom, left*/
margin-left: 50px;
}
The padding will affect the space between the border and the content, while the margin the space between the container and the nearest element
I have problem, I can't align two buttons in one line.
I tried to set padding of span class pptext2 but without success.
Here is code
http://jsfiddle.net/71782p4L/1/
HTML
<div class="ppdiv">
<button class="ppenvelope"><img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATE MESSAGE</span></button>
</div><!--Zatvoren ppdiv-->
CSS
.ppdiv{
padding-top:22px;
padding-left: 19px;
}
.ppdiv img{
padding:10px;
font-size: 20px;
}
.ppenvelope{
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.pptext{
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
}
.pptext2{
display: inline-block;
color:#4c6974;
padding-top: 15px;
padding-bottom:13px;
padding-left: 13px;
}
I would set float: left; on both buttons and overflow: hidden; on .ppdiv. To make sure both buttons stay the same height, also set height on them (e.g. height: 48px;). You can also remove the span.pptext2 element altogether, unless you need it for other purposes. Take a look at the fiddle: https://jsfiddle.net/igi33/ck4w6cLq/1/.
HTML:
<div class="ppdiv">
<button class="ppenvelope">
<img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
</button>
<button class="pptext">PRIVATE MESSAGE</button>
</div>
CSS:
.ppdiv{
overflow: hidden;
}
.ppenvelope, .pptext {
float: left;
border: none;
height: 48px;
}
.ppenvelope{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.ppdiv img{
padding:10px;
}
.pptext{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
color:#4c6974;
}
Use vertical-align: middle; on both buttons.
.pptext {
background: none repeat scroll 0 0 #c9e0e6;
border: medium none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
vertical-align: middle;
}
.ppenvelope {
background: none repeat scroll 0 0 #b2d4dd;
border: medium none;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
vertical-align: middle;
}
https://jsfiddle.net/71782p4L/2/
Here you are.
.ppdiv {
height:43px;
overflow:hidden;
}
.ppdiv img {
padding:10px;
}
.ppenvelope {
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
float:left;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}
I guess the title is kind of hard to understand, so I'll explain.
I am trying to achieve this effect (from .png file):
This is half a cycle with black line inside
I couldn't create this inner line no matter how I tried.
This is what I got so far:
HTML
<div id='halfCycle'>
<div id='halfCycleInner'>
</div>
</div>
CSS
#halfCycle
{
width: 23px;
height: 43px;
background-color: #383838;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 2px 0 2px 0px #222;
}
#halfCycleInner
{
position: relative;
top: 1px;
right:0px;
width: 22px;
height: 41px;
background-color: #383838;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-right-width: 1px;
border-right-color: #212121;
border-right-style: solid;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Here is a DEMO
It's very close, but not the same.
Any idea how to make this inner line.
You could use a pseudo element to and give it the border :
DEMO
HTML :
<div id='halfCycle'></div>
CSS :
#halfCycle
{
width: 23px;
height: 43px;
background-color: #383838;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 2px 0 2px 0px #222;
position:relative;
overflow:hidden;
}
#halfCycle:after{
content:'';
position:absolute;
top:1px; right:1px;
width:42px;
height:39px;
border-radius:100%;
border:1px solid #000;
}
there is a solution i hope it will work for you.
DEMO
.halfCycle{
background: #383838;
height: 42px;
width: 20px;
border:1px solid #202020;
border-radius: 0 60px 60px 0;
border-left: none;
position: relative;
box-shadow:5px 0px 5px 0px #222;
}
.halfCycle:after{
content: '';border:1px solid #383838;
position: absolute;
height: 44px;
width: 21px;
left:0;
top:-2px;
border-radius: 0 60px 60px 0;
border-left:none;
}
What I've done here is just make a box like the image below but how to fade a color and set
margin-left= 10px; margin-top: 5px for the title's box with CSS
Demo
HTML:
<div id="_div">
<span class="_top">Company Performance</span>
<span class="_content">Electric Consumption: 2300kW</span>
<div>
CSS:
#_div {
display: block;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
width: 300px;
height: 100px;
background-color: #FFFFFF;
box-shadow: 5px 5px 5px #e0e6e8;
border: 1px solid #c1dee0;
}
._top {
display: block;
background-color: #D0E3EC;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
padding-bottom: 10px;
border-bottom: 1px solid #c1dee0;
}
._content {
display: block;
margin-left: 10px;
margin-top: 10px;
}
Not clear why you want to use the margin
if you want to align the text use padding with _top class
Remove all the padding from _top class and add
padding: 5px 0 5px 10px;
To fade the color use opacity: .5
To solve my problems, I have used linear-gradient(#D0E3EC, #e9f2f6); and padding-left: 10px; padding-top: 5px;. To be more detail, please have a look on the code below.
Code:
._top {
display: block;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
padding-bottom: 10px;
border-bottom: 1px solid #c1dee0;
background-image:
linear-gradient(#D0E3EC, #e9f2f6);
padding-left: 10px;
padding-top: 5px;
}
Demo