I want a text-area with black background to be within DIV with white background. Text-area should not fill the complete DIV so the DIV's white color is still seen around text-area. DIV itself should occupy only 80% of the screen's width (or browser's tab). The problem is that the DIV's white background ain't seen around text-area.
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: white;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
You can use display:inline-block; instead of float:left;
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
Jsfiddle
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
<div class="mydiv">
<textarea class="mytextarea"></textarea>
</div>
Related
I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img
We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;
I have a span inside a h1 and I would like to center it vertically in the h1 background.
h1 {
background-color: green;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 10px;
height: 15px;
padding-left: 5px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
<h1>Title <span>i</span></h1>
Just add vertical-align:middle; to it's styles:
h1 {
background-color: green;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 10px;
height: 15px;
padding-left: 5px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
vertical-align:middle;
}
<h1>Title <span>i</span></h1>
If that isn't central enough (it can be based on you font size), you can use flex for true centering - the following also centres the i in the circle:
h1 {
background-color: green;
/*add this*/
display:flex;
width:100%;
}
span {
font-size: 8.5px;
color: #fff;
width: 15px;
height: 15px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
/*use this for vertical centering*/
align-self:center;
/*use this to center the i*/
display: inline-flex;
justify-content:center;
align-items:center;
}
<h1>Title <span>i</span></h1>
h1 {
background-color: green;
position:relative;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 10px;
height: 15px;
padding-left: 5px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
position:absolute;
top:50%;
transform:translate(0,-50%);
}
<h1>Title <span>i</span></h1>
You have to use equal height and width property with border-radius to get proper circle and remove padding-left
You can use flex for it and update css as i posted below
h1 {
background-color: green;
vertical-align: middle;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 15px;
height: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
vertical-align: middle;
}
<h1>Title <span>i</span></h1>
I create two classes which have same properties but only one property(width) is different then how to decrease css code?
.login-box button{
width: 100%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.add-category-box button{
width: 48%;
height: 40px;
background-color:#ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
You can group selectors using a comma (,) separator:
.login-box button,
.add-category-box button {
width: 100%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.add-category-box button {
width: 48%;
}
In that case, you can give the button a class of .button and make it as a reusable component with different variations.
.button {
width: 48%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.button--full {
width: 100%;
}
.button--outline {
background: transparent;
border: 1px solid #000;
}
And in your HTML you can add the above classes as ingredients:
HTML
<button class="button">Submit</button>
OR
<button class="button button--full">Login</button>
That way, you can reuse the buttons anywhere in your project very easily.
I am coding a button with html5 and css3. Here are how it looks in different sizes:
You can see the icons are not in the middle. I know why it happens. But how can I set the icons in middle? Here is my code:
<i class="icon">a</i><span>start</span>
CSS:
.blue-pill {
display: block;
text-decoration: none;
width: 135px;
height: 50px;
margin-bottom: 15px;
position: relative;
background-color: #002032;
border: none;
color: #FFF;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 0;
border-radius: 50px;
cursor: pointer;
z-index: 2;
text-align: center;
line-height: 50px;
-webkit-box-shadow: 0px 5px 0px #1488ae;
-moz-box-shadow: 0px 5px 0px #1488ae;
box-shadow: 0px 5px 0px #1488ae;
}
.blue-pill .icon {
display: inline-block;
margin: 0 5px;
color: #e57125;
font-size: 20px;
}
.blue-pill span {
display: inline-block;
}
.blue-pill.centered {
margin-left: auto;
margin-right: auto;
}
.blue-pill.inline {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
I am using icon fonts for icons. Here is what I want:
add vertical-align:middle to .blue-pill .icon and .blue-pill span
Example
I have a menu where each link is a div box. This div box have a gray border-bottom, however, when the link is visited it turns black. I just can't figure why.
On the following image I've clicked the Rediger profil and Log af links.
JSFiddle: http://jsfiddle.net/LpGbT/
HTML
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
<div class="design_sidebar_menu_item">Besøgende</div>
<div class="design_sidebar_menu_item">Mine favoritter</div>
<div class="design_sidebar_menu_item">Rediger profil</div>
<div class="design_sidebar_menu_item">Log af</div>
</div>
CSS
a {
text-decoration: none;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
}
.design_sidebar_menu_item:hover {
color: white;
background-color: #a6242f;
}
You may define a copied version of your div selector with a :visited suffix in order to set new colours for visited objects.
Aldo div classes are prefixed with a dot (.) instead of a sharp (#) character. Just a reminder. :)
.design_sidebar_menu_item:visited {
border-color: <your_color>;
}
If it doesn't harm your design etc. I would suggest this:
HTML:
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
Patrick Reck
Besøgende
Mine favoritter
Rediger profil
Log af
</div>
CSS:
div#design_sidebar a {
text-decoration: none;
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
display: block;
}
div#design_sidebar a:hover {
color: white;
background-color: #a6242f;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
EDIT:
How about adding:
a {
text-decoration: none;
display: block;
border-bottom: 1px solid #d6d6d6;
}
And removing border-bottom: 1px solid #d6d6d6; from .design_sidebar_menu_item {...}
The others will need links around them for this to work.
It doesn't..
I changed border-bottom color to 'green'. Now you have a clear view.
Check jsFiddle : check it out
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #00FF00;
}