i want to disabled thead color when active/selected, i mean thead color still #dddfe2 when sorting/thead selected.
The default clor is #dddfe2 .
CSS :
#new-izbox table thead th{
background: #dddfe2;
border-left:0px;
border-right:0px;
border-top: 0px;
border-bottom: 1px solid #dddfe2;
text-align: left;
font-weight: normal;
color: #555;
padding:10px;
margin:0px;
text-align: left;
cursor: pointer;
}
I try something like this, but no luck :
#new-izbox table thead th.selected{
background: #dddfe2;
border-left:0px;
border-right:0px;
border-top: 0px;
border-bottom: 1px solid #dddfe2;
text-align: left;
font-weight: normal;
color: #555;
padding:10px;
margin:0px;
text-align: left;
cursor: pointer;
}
any helps will be appreciated.
Related
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 want to align an addition(plus) mark and text next to it, however, since the "+" is too small, it is enlarged with a tag. This causes the character to become too big, making it hard for me to align them. How would I align the + character and Text evenly next to each other?
This is the code:
http://jsfiddle.net/rs75V/
Have you tried
vertical-align:middle;
or
vertical-align:-10%;
? This looks all right to me.
Try playing around with this:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
I think it's what you're looking for, it has a ton of different ways to move text alignment up or down.
It's hackish, but this should work.
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
line-height:40px;
display:inline-block;
cursor:pointer;
}
span{
font-size:40px;
vertical-align:-15%;
}
Try floating your a and span.
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
cursor:pointer;
line-height: 40px;
float: left;
}
span {
font-size:40px;
float: left;
margin: 0 .1em 0 0;
}
You can display the span as an inline-block and then use padding on it...
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
display:inline-block;
cursor:pointer;
}
span{
font-size:40px;
line-height: 0;
display: inline-block;
padding-bottom: 9px;
}
Try this:
span {
font-size: 40px;
line-height: 0;
vertical-align: middle;
}
I'm using an ASP.net menu and when i hover inside my menu item's table, i change the background color on the table column, but unless i hover over the link text itself, the link text color will not change.
Is it possible to have the link text color changed on the table hover?
Example below shows what happens.
Excuse the ugly CSS:
.TopStaticSelectedStyle
{
cursor: pointer;
font-size: 11px;
font-family: Verdana;
}
.TopStaticMenuStyle a,
.TopStaticMenuStyle a:visited,
.TopStaticMenuStyle a:active
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-family: Verdana;
}
.TopStaticMenuStyle a:hover
{
color: #000000;
text-decoration: none;
font-size: 11px;
font-weight: bold;
font-family: Verdana;
}
.TopStaticMenuItemStyle td
{
padding: 0px 12px 0px 12px;
text-align: center;
background-color: #6c85b0;
height: 18px;
border-top: solid 1px #012754;
border-bottom: solid 1px #012754;
border-left: solid 1px #012754;
border-collapse:collapse;
}
.TopStaticHoverStyle
{
font-weight: normal;
font-family: Verdana;
}
.TopStaticHoverStyle td
{
padding: 0px 12px 0px 12px;
text-align: center;
background-color: #ffffff;
height: 18px;
border-top: solid 1px #012754;
border-bottom: solid 1px #012754;
border-left: solid 1px #012754;
border-collapse:collapse;
color: #000000;
}
I scrapped your css and just started from scratch but you should be able to get the idea from this.
So some basic table html:
<table>
<tr>
<td>
Test
</td>
<td>
Test 2
</td>
</tr>
</table>
And then the css:
a {
color:#000;
}
td {
border:solid 1px black;
background:#234567;
padding:5px 10px;
}
td:hover {
background:#eee;
}
td:hover a {
color:#ccc;
}
td a:hover {
color:#777;
}
The key here is the td:hover a selector which is what you need to change the color on hover of the td.
I'm using Devexpress's MVC exctensions within my MVC3 w/razor project. I have data grids using Devexpress's MVC extensions and also basic html tables without any styling.
Is there a way to apply the devexpress styles to my html tables for a consistent look?
You can use css to style a grid then follow the same principle for a table. Here is a style for a grid I created then styles for a similar looking table
/************************GRID STYLE************************************/
.mGrid
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px; /*width: 820px;*/
text-align: center;
}
.mGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
height: 20px;
}
.mGrid th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
}
.mGrid .alt
{
background: #fcfcfc url(images/grd_alt.png) repeat-x top;
}
.mGrid .pgr
{
background: #424242 url(images/grd_pgr.png) repeat-x top;
text-align: left;
}
.mGrid .pgr table
{
margin: 5px 0;
}
.mGrid .pgr td
{
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a
{
color: #666;
text-decoration: none;
font-size: 13px;
}
.mGrid .pgr a:hover
{
color: #AED434;
text-decoration: none;
font-size: 13px;
}
/************************END GRID STYLE************************************/
/************************mGrid Table Look alike STYLE************************************/
.mGridLookAlikeTable
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px;
/*width: 820px;*/
text-align: center;
}
.mGridLookAlikeTable td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
height: 20px;
}
.mGridLookAlikeTable th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
}
/************************END mGrid Table Look alike STYLE************************************/