The below is the css and asp code for the gridview.
The border are spreading out then expected.
I tried setting Width=100% which worked, but I want the border to follow the size of grid instead spreading the grid view to occupy space unnecessarily.
This is an Asp Gridview with css for rounding corners
CSS:
.rounded-corners {
border: 1px solid #565656;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
}
.Grid td, .Grid th {
border: 1px solid #565656;
text-align: center;
padding-top: 3.5px;
padding-bottom: 3.5px;
font-size: medium;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
Source Code:
<div class="rounded-corners">
<div>
<table class="Grid" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<tbody>
<tr>
<th>Description</th>
<th>Time</th>
<th>Time</th>
</tr>
<tr>
<td>abc</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>def</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>ghi</td>
<td>07:30</td>
<td>07:30</td>
</tr>
</tbody>
</table>
</div>
</div>
I think the grid is rendered like this:
<div class="Grid" id="XXXX_gv1">
<table>
<tr><th>column 1</th><th>column 2</th><th>column 3</th></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
</table>
</div>
so you could then style it:
.Grid {
display:inline-block; /* trick to not take 100%. */
/* alternatively: you could border .Grid>table */
border-radius:8px;
}
.Grid>table>tbody>tr:first-row {
/* special stuff for the first row here */
}
Related
This question was migrated from Super User because it can be answered on Stack Overflow.
Migrated 28 days ago.
I'm currently developing an app in .NET c# for my own company and I'm facing some trouble when trying to use a HTML template to send a automated e-mail to my users with my app in c#.
C# Code to send e-mail using Gmail API
public bool sendEmail(SendEmailModel email)
{
try
{
UserCredential credential = loadCredentials();
string message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
var service = new GmailService(new BaseClientService.Initializer() { HttpClientInitializer = credential, ApplicationName = ApplicationName });
var msg = new Google.Apis.Gmail.v1.Data.Message();
msg.Raw = Base64UrlEncode(message.ToString());
service.Users.Messages.Send(msg, "me").Execute();
return true;
}
catch(Exception ex)
{
return false;
}
}
string Base64UrlEncode(string input)
{
var data = Encoding.UTF8.GetBytes(input);
return Convert.ToBase64String(data).Replace("+", "-").Replace("/", "_").Replace("=", "");
}
HTML Template
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #f1f1f1;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
img {
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
.im {
color: inherit !important;
}
img.g-img + div {
display: none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<style>
.primary{
background: #17bebb;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #f7fafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding: 10px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 25px;
background: #e77d1a;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 25px;
background: transparent;
border: 1px solid #e77d1a;
color: #e77d1a;
}
.btn.btn-black-outline{
border-radius: 0px;
background: transparent;
border: 2px solid #000;
color: #000;
font-weight: 700;
}
.btn-custom{
color: rgba(0,0,0,.3);
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Poppins', sans-serif;
color: #000000;
margin-top: 0;
font-weight: 400;
}
body{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #17bebb;
}
table{
}
.logo h1{
margin: 0;
}
.logo h1 a{
color: #17bebb;
font-size: 24px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.hero{
position: relative;
z-index: 0;
}
.hero .text{
color: rgba(0,0,0,.3);
}
.hero .text h2{
color: #000;
font-size: 34px;
margin-bottom: 0;
font-weight: 200;
line-height: 1.4;
}
.hero .text h3{
font-size: 24px;
font-weight: 300;
}
.hero .text h2 span{
font-weight: 600;
color: #000;
}
.text-author{
bordeR: 1px solid rgba(0,0,0,.05);
max-width: 50%;
margin: 0 auto;
padding: 2em;
}
.text-author img{
border-radius: 50%;
padding-bottom: 20px;
}
.text-author h3{
margin-bottom: 0;
}
ul.social{
padding: 0;
}
ul.social li{
display: inline-block;
margin-right: 10px;
}
.footer{
border-top: 1px solid rgba(0,0,0,.05);
color: rgba(0,0,0,.5);
}
.footer .heading{
color: #000;
font-size: 20px;
}
.footer ul{
margin: 0;
padding: 0;
}
.footer ul li{
list-style: none;
margin-bottom: 10px;
}
.footer ul li a{
color: rgba(0,0,0,1);
}
#media screen and (max-width: 500px) {
}
</style>
</head>
<center style="width: 100%; background-color: #f1f1f1;">
<div style=" display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"></div>
<div style=" max-width: 900px; margin: 0 auto;" class="email-container">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #dedede; margin: auto;">
<tr>
<td valign="middle" class="hero bg_white" style="background-color: #dedede; padding: 2em 0 2em 0;">
<div class="text-author" style="border-radius: 20px;background-color: #ffffff;border-color: #ffffff; ">
<table table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="{LOGO_1}" style="height: 100px; width: auto;">
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 600; font-size: 25px; color: #171717;">Olá,</h3>
<span class="position">{content}</span>
</td>
</tr>
<tr >
<td style="text-align: center;">
<p><a class="btn btn-white-outline" style="width: 94%;">{btn_1_content}</a></p>
<p>{btn_2_content}</p>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div style="height: 10px;"></div>
<span class="position" style="color: #dbdbdb;">Este é um e-mail enviado automaticamente.</span>
<div style="height: 10px;"></div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="separator" style="background-color: #d7d7d7; height: 1px;"></div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div style="height: 20px;"></div>
<span class="position" style="color: #dbdbdb;">Se você já realizou o pagamento desse boleto desconsidere esse e-mail.</span>
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 250; font-size: 16px; color: #171717;">Abraços,</h3>
<h3 class="name" style="font-weight: 600; font-size: 16px; color: #171717;">Equipe Acalanto.</h3>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div>
<img src="{LOGO_2}" height="60px">
<h3 style="color: #898989; font-size: 14px;">© Organização Diamante LTDA</h3>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I have no idea on how to use any kind of template with Gmail API. If Gmail API isn't the "go" for this case please let me know, I don't mind to use othe types of e-mail services but I really like Google stuff, but, in this case they don't have any info on .NET c# or even on how to use templates.
SOLUTION
After some thought I found the solution.
In the line of code:
tring message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
I just replaced <h1>{email.content}</h1> with File.ReadAllText("PATH_TO_HTML_FILE") and that was it. Sorry for the dumb question. In my opinion, Google should update their Gmail API documentation and examples, because I don't think anyone will go to the trouble of implementing a e-mail api and e-mail system to send simple e-mails with plain text and images.
How to footer float to bottom and horizantal scroll working correctly with thead and tbody ?
I tried to it, But it dont work horizontal scroll correctly when footer position:fixed , position:absolute and other state.And is it Possible to work without tbody:after css ?
<body>
<table><thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>TestHeader1</th>
<th>TestHeader2</th>A
<th>TestHeader3</th>
<th>TestHeader4</th>
<th>TestHeader5</th>
<th>TestHeader6</th>
<th>TestHeader7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>100</td>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
<td>105</td>
<td>106</td>
<td>107</td>
</tr>
<tr>
<td>February</td>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>180</td>
<td>182</td>
<td>184</td>
<td>186</td>
<td>188</td>
<td>190</td>
<td ></td>
<td >194</td>
</tr>
</tfoot>
</table>
</body>
Image
styles
html,
body {
height: 100%;
margin: 0;
}
table, th, td {
border: 1px solid black;
}
tbody:after
{
background-color:orange;
height:100px;
content: "";
display: block;
}
</style>
You can set a sticky position for footer tag and set inset-block-end for fixed footer in bottom
table,
th,
td {
border: 1px solid black;
}
tbody:after {
background-color: orange;
height: 1000px;
content: "";
display: block;
}
table tfoot {
position: sticky;
background-color: white;
}
table tfoot {
inset-block-end: 0; /* "for fixed in bottom" */
}
<!DOCTYPE html>
<html>
<head>
<title>Another simple example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<body>
<table><thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>TestHeader1</th>
<th>TestHeader2</th>A
<th>TestHeader3</th>
<th>TestHeader4</th>
<th>TestHeader5</th>
<th>TestHeader6</th>
<th>TestHeader7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>100</td>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
<td>105</td>
<td>106</td>
<td>107</td>
</tr>
<tr>
<td>February</td>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>180</td>
<td>182</td>
<td>184</td>
<td>186</td>
<td>188</td>
<td>190</td>
<td ></td>
<td >194</td>
</tr>
</tfoot>
</table>
</body>
</body>
</html>
I am having issues using the HTML Renderer properly. It generates the PDF, but for some reason, when I have a colspan of 2, it seems to ignore this.
Here is the entire HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Receipt</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
.invoice-box table tr.top table tr td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table tr td {
width: 100%;
display: block;
text-align: center;
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="" style="width:100%; max-width:300px;">
</td>
<td>
Order number #: xxxxxxxx<br>
Order Date: February 26 2018
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
CompanyS<br>
address<br>
state
</td>
<td>
Contact<br>
Email
</td>
</tr>
</table>
</td>
</tr>
<tr class="details">
<td>
</td>
<td>
</td>
</tr>
<tr class="heading">
<td>
</td>
<td>
</td>
</tr>
<tr class="item">
<td>
</td>
<td>
</td>
</tr>
<tr class="total">
<td></td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
And here is the code to get the HTML:
var emailContentUrl = url;
var html = FetchResponseHtml(emailContentUrl);
var pdf = PdfGenerator.GeneratePdf(html, PageSize.A4);
FetchResponseHtml:
public string FetchResponseHtml(string emailContentUrl)
{
var request = (HttpWebRequest)WebRequest.Create(emailContentUrl);
var response = (HttpWebResponse)request.GetResponse();
var responseHtml = "";
if (response.StatusCode == HttpStatusCode.OK)
{
var receiveStream = response.GetResponseStream();
StreamReader readStream = null;
if (response.CharacterSet == null)
{
readStream = new StreamReader(receiveStream);
}
else
{
readStream = new StreamReader(receiveStream, Encoding.GetEncoding(response.CharacterSet));
}
responseHtml = readStream.ReadToEnd();
response.Close();
readStream.Close();
}
return responseHtml;
}
But for some reason, when the PDF is generated, the PDF only has the company info. There is no Order Number/Order Date nor any contact info.
Is HTML Renderer ignoring extra colspans, or why does this happen?
The HTML code seems to be valid.
Maybe you are breaking the syntax while adding Order related information.
Here is my code, in this i'm seeing a table filled with data but no separators are visible like i want separator b/w rows and columns. How to add separator in asp.net html table. How to update in css file to get separator look
<table class="tableStyle" id="Table1">
<thead><tr><th id="Th1" style="background-color:#507CD1;width:150px;font-weight:bold;color:White"><div>Number</div></th>
<th id="Th2" style="background-color:#507CD1;width:150px;font-weight:bold;color:White">Type</th><th id="Th3" style="background-color:#507CD1;width:150px;font-weight:bold;color:White">Name</th>
</tr></thead>
<%
for(int i=0 ;i<10;i++)
{
String id = i.ToString();
%>
<tr><td headers="Th1" style="background-color:#EFF3FB;">Hello world
</td><td headers="Th2" style="background-color:#EFF3FB;">Hello world</td>
<td headers="Th3" style="background-color:#EFF3FB;"></td></tr>
<%}
%>
</table>
Here is the css example. SEE DEMO
If your redered HTML are following.
<table>
<thead>
<tr>
<th>Number</th>
<th>Type</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
CSS
table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid black;
background-color:#EFF3FB;
}
table thead th {
background-color:#507CD1;width:150px;font-weight:bold;color:White
}
http://jsfiddle.net/E8W2F/
I solved by adding border: 1px solid #C1C1C1; in my rows i.e
style="background-color:#EFF3FB;border: 1px solid #C1C1C1;"
You can use HTML and CSS to style your tables
Here is some code please (the HTML and the CSS could be well formatted, but this is just a sample code)
HTML AND CSS CODE:
<style>
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; }
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td, .datagrid table th { padding: 3px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 4px solid #A8A8A8; }
.datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00496B; border-left: 4px solid #E1EEF4;font-size: 12px;border-bottom: 2px solid #141BF4;font-weight: normal; }
.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }
.datagrid table tfoot td div { border-top: 1px solid #006699;background: #E1EEF4;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }
.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }
.datagrid table tfoot li { display: inline; }
.datagrid table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #006699; color: #FFFFFF; background: none; background-color:#00557F;}div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }
</style>
<div id="all" class="datagrid" style="margin-top: 33px;">
<table>
<thead>
<tr>
<th>Title</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<div id="no-paging" style="display: none;">
</div>
<div id="paging">
<ul>
<li>
<span>Previous</span>
</li>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
<li>
<span>Next</span>
</li>
</ul>
</div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr class="alt">
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr class="alt">
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
</div>
Another tip: There is a website that visually and easilly generates CSS styles for tables. Go to http://tablestyler.com/ and enjoy.
I am working on a project, but having problem with applying CSS only to navigation bar. My project contains
master page
home.aspx
gallery.aspx
When I apply menu.css file to navigation bar on master.page it effects rest of the tables as well as other content pages (home.aspx and gallery.aspx) my code looks like following:
master.page
<body style="background-image: url('/WebSite5/bacground/Fruit-drinks-vector-pptbackgrounds.jpg')">
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<table align="center" class="style1">
<tr>
<td style="text-align: center">
<img alt="" class="style2" src="bacground/logo.png" />
</td>
</tr>
<tr>
<td>
<uc1:menu ID="menu1" runat="server" />
</td>
</tr>
</table>
</asp:ContentPlaceHolder>
</div>
<table class="style3">
<tr>
<td style="text-align: center">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
menu.ascx
<table class="style1">
<tr>
<td>
<ul id="nav">`enter code here`
<li class="home" aria-orientation="horizontal">Home</li>
<li class="Gallery">Gallery</li>
<li class="events">Events</li>
<li class="About US">About US</li>
<li class="contact">Contact</li>
</ul>
</td>
</tr>
</table>
menu.css
#ul li {
list-style: none;
height: 44px;
float: left;
padding: 10px 5px;
width: 175px;
}
#ul li a {
width: 146px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
#li:nth-child(1) a {
border-color: #636393;
}
#li:nth-child(2) a {
border-color: #B5222D;
}
#li:nth-child(3) a {
border-color: #D4953C;
}
#li:nth-child(4) a {
border-color: #609491;
}
#li:nth-child(5) a {
border-color: #87A248;
}
#li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
}
#li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
}
#li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
}
#li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
}
#li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
}
Please help me.
To apply CSS to one element use id, ex. then in CSS:
#nav {
color:yellow;
}
#nav li {
font-size:19pt;
}
Rest of the elements (without id==nav) will not be affected.
Example:
http://jsfiddle.net/igos/tJWq6/