I am working on an asp.net grid. I want to apply a 3D effect on the grid using CSS. Below is the CSS I am using currently. Is it possible to add CSS to the below CSS to achieve the 3D effect on an asp.net grid/html table?
.mGrid {
width: 100%;
background-color: #F1F7FE;
margin: 5px 0 10px 0;
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
.mGrid td {
padding: 2px;
border: 1px solid #ffffff;
color: #001131; /*word-break:break-all;word-wrap:break-word;*/
/*border-style: solid;
border-width: 1px;
border-color: #666 #DDD #DDD #666;
padding: 3px;*/
}
.mGrid th {
background-position: top;
padding: 4px 2px;
color: #1F364E;
background: #B7D6FF url(../../Images/outlook/grid_head.png) repeat-x top;
border: solid 2px #eeeeee;
font-size: 0.9em; /*word-break:break-all;word-wrap:break-word;*/
}
.mGrid .alt {
background-position: top;
background: #D9EAFE repeat-x top;
}
You can sail around the problem that table cells behave a bit different than other HTML elements by using CSS3 after or before pseudo elements and put them on top of your tds.
.mGrid td {
padding: 2px;
position: relative;
}
.mGrid td:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-style: solid;
border-width: 1px;
border-color: #666 #DDD #DDD #666;
padding: 3px;
}
JS-Fiddle
Related
I'm trying to place a css-shaped triangle inside a div.
Here is CSS:
/*Outer DIV*/
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
/*Triangle DIV*/
div.arrow {
width: 0.5em;
height: 65%;
background-color: #000;
position: relative;}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: -60%;
transform: translateY(80%);
bottom: -1em;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
Desired result:
https://jsfiddle.net/k1x1car4/
How can I can do the same placement in a less tricky and more precise manner?
Thank you!
Just use an .arrow class and a pseudo-element on the parent div.
There is no need to create actual HTML for styling in this intance.
Then position element bottom:0 and left:0. Simple!
div.auth {
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
}
div.arrow {
position: relative;
}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
<div class="auth arrow">par Makarios, Évêque de Lampsaque</div>
I don't know if you are able to change div.arrow, but if so I recommend you not to use a pseudo-element at all and just put the triangle directly into div.arrow. You can then position it using
position: absolute
left: 0;
bottom: 0;
Note: You're going to have to add position:relative to div.auth in order for position:absolute to work on div.arrow.
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
position: relative;
}
div.arrow {
display: block;
content: '';
position: absolute;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
left: 0;
bottom: 0;
}
<div class="auth">
<div class="arrow"></div>par Makarios, Évêque de Lampsaque</div>
I'm trying to create a shape of a triangle cutting a square.
I tried using this code but it doesnt create the shape I want.
.square-cut{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid purple;
border-bottom: 20px solid purple;
border-right: 40px solid white;
}
<div class="square-cut"></div>
The shape I want is this:
How's this (comments in code):
/* make arrow as after pseudo element*/
.square-cut:after {
content: '';
display: block;
line-height: 0%;
font-size: 0px;
background: purple;
border-top: 20px solid purple;
border-bottom: 20px solid purple;
border-left: 40px solid white;
}
.square-cut {
box-sizing: border-box;
width: 50px; /* as arrow is 40px x 40px, this gives 10px under the tip*/
height: 50px;
padding: 5px 0; /* 5px on either side offat side of the arrow */
background: purple;
font-size: 0px;
}
<div class="square-cut"></div>
What I am trying to accomplish on :hover.
.nav li {
margin: 12px 0 0 20px; padding: 0;
color: #000; font-weight: 700;
display: inline-block;
}
.nav li+li:hover {
background: #2f3343;
padding: 5px 10px 5px 10px;
margin: 0 -2px 0 20px;
border-radius: 2px;
font-weight: 700;
border: none;
}
.nav .triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 12.5px 0 12.5px;
border-color: #000000 transparent transparent transparent;
}
I would like to put the triangle in the :hover but it's completely messed up. Do I need to set a specific height and add a position?
Try this
i create a new
.nav li {
margin: 12px 0 0 20px; padding: 0;
color: #000; font-weight: 700;
display: inline-block;
padding: 5px 10px 5px 10px;
position:relative;
border-radius: 2px;
}
.nav li:hover {
background: #2f3343;
border: none;
}
.nav li:hover:after {
content:"";
border-style: solid;
position: absolute;
left: 50%;
bottom: -10px;
margin-left:-10px;
border-width: 10px 12.5px 0 12.5px;
border-color: #000000 transparent transparent transparent;
}
Demo
Try the following css:
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
margin-left: 15px;
display: none;
}
button:hover + .arrow {
display: block;
}
I have made a JSFiddle similar to this. Have a look and provide your comments.
I want to fix the table width using Display Tag.
.displayTable table {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.displayTable th, .displayTable td {
padding: 2px 4px 2px 4px !important;
text-align: left;
vertical-align: top;
width: 100%
}
.displayTable thead tr {
background-color: #9999CC;
}
.displayTable th.sorted {
background-color: #9999CC;
}
.displayTable th a,.displayTable th a:visited {
color: black;
}
.displayTable th a:hover {
text-decoration: underline;
color: black;
}
.displayTable th.sorted a,.displayTable th.sortable a {
background-position: right;
display: block;
width: 100%;
}
.displayTable th.sortable a {
background: url(../img/arrow_off.png) no-repeat right center ;
}
.displayTable th.order1 a {
background: url(../img/arrow_down.png) no-repeat right center ;
}
.displayTable th.order2 a {
background: url(../img/arrow_up.png) no-repeat right center;
}
.displayTable tr.odd {
background-color: #fff
}
.displayTable tr.tableRowEven,.displayTable tr.even {
background-color: #fff
}
.displayTable div.exportlinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
margin: 2px 0 10px 0;
width: 79%;
}
.displayTable span.export {
padding: 0 4px 1px 20px;
display: inline;
display: inline-block;
cursor: pointer;
}
.displayTable span.excel {
background-image: url(../img/ico_file_excel.png);
}
.displayTable span.csv {
background-image: url(../img/ico_file_csv.png);
}
.displayTable span.xml {
background-image: url(../img/ico_file_xml.png);
}
.displayTable span.pdf {
background-image: url(../img/ico_file_pdf.png);
}
.displayTable span.rtf {
background-image: url(../img/ico_file_rtf.png);
}
.displayTable span.pagebanner {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
margin-top: 10px;
display: block;
border-bottom: none;
}
.displayTable span.pagelinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
display: block;
border-top: none;
margin-bottom: -5px;
}
Depends on the data loaded, the table width varies. So, I want to make it look better by fixing the width of table. But I can't. How can I make it to fix the table width?
I try to wrap the Display with Div and set the css class of Div too. But It still doesn't work (for both display:table-cell or display:inline-block;. Thanks.
.commonList{
overflow: hidden;
background: #c0c0c0;
display: table-cell
text-align: center;
width: 100%;
height: 100%;
}
Edited: When I try to wrap the display table with Div of the above css setting, table width become 100% . but as each of the column of table has various width, it becomes so ugly because the first column becomes so wide (which only display id ,1 ,2 ,3 etc) And even my display tag pagination gone. How can I solve it? Thanks.
.displayTable table {
table-layout:fixed;
}
Specify table layout as fixed and that will solve ur problem
Here is my solution. for each columns, specify a certain class and use in Display Tag.
.displayTable {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.colId{
width: 2%;
}
<display:column class="colId">
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************************************/