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.
Related
I have a problem with my button. When I wish to click on my button, normally the color of the button which is "blue" should change of color in black.
It seems my background color (black) is not whole???
.more-information{
position:absolute;
height: 33px;
width: 158px;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
.more-information a:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
I moved most of the CSS from the outer div to the <a> instead and now it behaves as you might expect.
.more-information{
position:absolute;
height: 33px;
width: 158px;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
Try this.
.more-information{
position:absolute;
height: 33px;
width: 158px;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
.more-information:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
Change
.more-information a:hover{
to
.more-information:hover{
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>
How can I adjust the width of the .TopMenuItem instead of having them stretch to fit 100% window width? I changed .TopMenuGroup width to 100% so that the green background stretches total width.
http://themusicshop.com/aeRntplan.aspx
Here is my CSS:
.TopMenuGroup
{
border: solid 0px #003167;
background-color: #005E20;
padding-bottom: 5px;
padding-top: 5px;
width: auto;
}
.MenuGroup
{
border: solid 0px #003167;
background-color: #005E20;
color: #000000;
font-size: 11px;
}
.MenuGroup td {
color: #FFFFFF;
font-size: 11px;
}
.MenuGroupHover td {
color: #FFFFFF;
}
.MenuItemHover td {
color: #99FF33;
}
td.MenuItemHover {
color: #99FF33;
font-size: 11px;
}
.TopMenuItem
{
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
cursor: hand;
cursor: pointer;
font-family: helvetica, arial, sans-serif;
padding-left: 0px;
padding-right: 0px;
}
.TopMenuItemHover
{
color: #99FF33;
background-color: #005E20;
font-size: 12px;
font-weight: normal;
cursor: hand;
cursor: pointer;
font-family: helvetica, arial, sans-serif;
}
-- leaf menu items
.MenuItem
{
background-color:#EEEEEE;
color:#FFFFFF;
font-size:11px;
border: solid 0px white;
cursor:hand;
cursor:pointer;
padding-top: 3px;
padding-bottom: 3px;
}
.MenuItemHover
{
background-color: #005E20;
color: #79FF00;
font-size: 11px;
border: solid 0px white;
cursor: hand;
cursor: pointer;
padding-top: 3px;
padding-bottom: 3px;
}
-- group menu items
.MenuItem td
{
color:#FFFFFF;
font-size:11px;
border: solid 0px white;
cursor:hand;
cursor:pointer;
padding-top: 3px;
padding-bottom: 3px;
}
.MenuItemHover td
{
background-color:#FEDF15;
color:#000000;
font-size:11px;
border: solid 0px white;
cursor:hand;
cursor:pointer;
padding-top: 3px;
padding-bottom: 3px;
}
You should do an horizontal list for your top menu, its much simpler.
I made this for you : http://codepen.io/anon/pen/avlAc/
Try to use tables only to present data in rows and columns, not for menus ;)
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;
}
I have used following css for select tag:
select {
background-color: transparent;
border: 1px solid #A96800;
color: #fff;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
This css affects the text also.
You are unable to see the options because in your css, you are setting text's color to white.
color: #fff;
Just remove the above line so that your css looks like:
select {
background-color: transparent;
border: 1px solid #A96800;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
Now you can view your options as well.
Here's the updated fiddle: http://jsfiddle.net/UJMkN/1/
Hope this helps.