Hi guys got a little design issue here.
I got this repeater that contains this table
<table class="Library">
<tr>
<td style="width: 170px; padding-left: 30px; height: 50px;"><%#RemoveTimeInDate(Eval("ValidTo").ToString())%></td>
<td style="width: 449px; height: 50px;"><a style="color: black" href="Info.aspx?id=<%# Eval("Id") %>"> <%# Eval("Title") %></a></td>
<td style="width: 2px; padding-left: 3px; height: 50px;">></td>
</tr>
</table>
CSS:
.Library {
font-size: 12px;
}
.Library a {
color: #007583;
}
.Library a:visited {
color: #007583;
}
.Library tr:nth-child(Odd) {
background-color: #FFFFCC;
}
To get this to work i haft to add another tablerow for the row colors to change.Is there a way to add different row colors when there is only 1 in the repeater
If you have only one row in a table, you can style it using the :only-child css selector.
You can also combine the use of :only-child and :nth-child as I did in this example on Codepen, to style both tables with just one row and tables with multiple rows, even with different colors for the first row in multiple rows case and the only row in the single row case. Here is the relevant CSS:
.Library tr:nth-child(Odd) {
background-color: #FFFFCC;
}
.Library tr:nth-child(Even) {
background-color: #CCFFFF;
}
.Library tr:only-child {
background-color: #CCFFFF;
}
Note that the :only-child selector must be after the :nth-child(Odd) one, to have precedence over it in the case of tables with a single row.
I dont get what you need exactly but you can use :nth-child(even) to start coloring from the first row.
here is the w3 example of even odd nth child
Related
If I have the following code what would I add to make a row clickable as a link? (be gentle I am new to this) I have tried a couple of things, but I am very new to this so I am struggling to get it right:
.hoverTable {
width: 700px;
border-collapse: collapse;
}
.hoverTable td {
padding: 7px;
border: #315795 1px solid;
font-family: "tradegothic";
font-size: 14px;
color: #315795;
}
/* Define the default color for all the table rows */
.hoverTable tr {
background: #bec7d6;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #315795;
color: #ffffff;
}
/* Define the hover highlight color for the table row */
.hoverTable td:hover {
background-color: #315795;
color: #ffffff;
}
<table class="hoverTable" style="width: 700px;">
<tbody>
<tr class="clickable-row" data-href="mathdept.ucr.edu">
<td colspan="3"><strong><a>CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE<span style="float: right;">►►</span></a><br /></strong></td>
</tr>
<tr>
<td colspan="3"><strong>OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></strong></td>
</tr>
<tr>
<td colspan="3"><strong>SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH <span style="float: right;">►►</span></strong></td>
</tr>
</tbody>
</table>
HTML has two basic types of elements, inline elements and block elements.
If you want to know more about it, just read here.
Because them <a> tag belongs to the class of the inline elements, it won't fill the whole table cell. The trick is to convert the anker tag with the link to a block element:
a {
display: block;
}
Now the anker will fill the complete cell.
Below you will find a code example on how this solution works.
I have two extra advices for you as beginner:
Use of Non-Standard Fonts
Please take care, if you are using unusual fonts like tradegothic, which are not installed an all computers. If a visitor of a website does not have this font installed on his machine, he will see your website in the default font of his web browser.
If you want to use a custom font, please read here.
Do not use tables if not necessary
Using a table to display a navigation or other non-table data is mostly considered as a bad style of code.
Below you will find the exakt same looking navigation box without using an html table. This code could be considered to be more clean.
.nav {
width: 700px; /* Define the width of the navigation box */
padding: 0;
}
.nav li {
list-style-type: none;
margin: -1px 0 0 0;
}
/* Define the style of the ankers */
.nav a,
.nav a:visited {
display: block;
border: #315795 1px solid;
padding: 7px;
font-family: "tradegothic";
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #315795;
background: #bec7d6;
}
/* Define the hover style for the ankers */
.nav a:hover {
background-color: #315795;
color: #ffffff;
}
/* Define the Arrows */
.nav a::after {
content: "►►";
float: right;
}
<ul class="nav">
<li>CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE</li>
<li>OUR PEOPLE - COMMITTEES</li>
<li>SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH</li>
</ul>
Original Solution with Table
If you, for whatever reasons, prefer the table solution, here you will find the fixed code.
.hoverTable {
width: 700px;
border-collapse: collapse;
}
.hoverTable td {
padding: 0;
border: #315795 1px solid;
}
/* Define the style for normal and visited links */
.hoverTable a,
.hoverTable a:visited {
display: block;
padding: 7px;
text-decoration: none;
font-weight: bold;
font-family: "tradegothic";
font-size: 14px;
color: #315795;
background: #bec7d6;
}
/* Define the hover style for the links */
.hoverTable a:hover {
color: #ffffff;
background: #315795;
}
<table class="hoverTable">
<tbody>
<tr class="clickable-row" data-href="mathdept.ucr.edu">
<td colspan="3">CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE<span style="float: right;">►►</span></td>
</tr>
<tr>
<td colspan="3">OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></td>
</tr>
<tr>
<td colspan="3">SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH <span style="float: right;">►►</span></td>
</tr>
</tbody>
</table>
if I understood correctly you need to create something like in the picture that I uploade:
In order to create that you need to put the href="information" inside of tag :
enter code here
<tr class="clickable-row">
<td colspan="3"><strong>CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE<span style="float: right;">►►</span><br /></strong></td>
</tr>
I cannot understand what I have done wrong here. The css styles should be separate for both my tables however "rcorners1" table appears to be affected by the settings of "water_table"
I have two tables the css for first table
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {background-color: #ffffff;}
table.water_table th, td {
padding: 15px;
text-align: left;
}
My first table looks like
<table border="0" align="center" class="water_table" id="water_table">
The css for my second table
table.rcorners1 {
border-radius: 10px;
border: 1px solid #a4b3bd;
padding: 2px;
margin: 3px;
width: 120px;
height: 160px;
float: left;
}
my second table looks like
<table width="100%" border="0" class="rcorners1" id="rcorners1">
I do not know if this is the correct solution. What I did to correct the issue is to remove "water_table" from the css style file and created a style block within the html before my "water_table" appears.
<style>
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {
background-color: #ffffff;
/*color: white;*/
}
table.water_table th, td {
padding: 15px;
text-align: left;
}
</style>
Generally you don't want to put an inline style block inside your HTML - if you were to do so, it should be at the head of your document, not in the body.
However, if moving the styles is what solved the problem for you, this means that there's something else in your css file that's overriding your desired styles.
Often times you can see all of the styles associated with an element in a browser inspector. If you were to inspect your element I bet you would see some additional styles that are crossed out from your CSS file.
I'm having trouble removing the inherited styles in a sub-table. My tables basically look like this:
<table class="twocoltable">
<thead>
<tr><th>BlahBlah</th></tr>
</thead>
<tr>
<td>blah</td>
<td>
<table class="nostyle">
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
</td>
</tr>
</table>
EDIT My .css now looks like this. The sub-table has no styles, but the parent table's td styles aren't working, but the th styles are working.
.twocoltable { border-spacing: 0px; padding: 0px; border: 1px solid #666666; }
.twocoltable>thead>tr>th { text-align: center; font-weight: bold; color: black; font-size: 12pt; padding: 4px; background-color: #DDD; }
.twocoltable>tr>td:first-child { text-align: right; vertical-align: top; font-weight: bold; color: black; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; }
.twocoltable>tr>td:last-child { text-align: left; vertical-align: top; font-weight: normal; color: #333333; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; white-space: nowrap; }
.nostyle * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
What I end up with at the end is a properly formatted parent table, but the sub-table also contains the formatting. It still has the bolding, borders, and alignment.
What am I missing?
Assign your styles only to your parent table's immediate children. This should work for properties like margin and padding. I.e.:
Instead of:
.twocoltable th
.twocoltable tr td:first-child
.twocoltable tr td:last-child
Do:
.twocoltable>thead>tr>th
.twocoltable>tr>td:first-child
.twocoltable>tr>td:last-child
However, other properties such as font-weight will still apply to child elements, because they are inherited. For those, you'll have to manually override in .nostyle definitions (which you haven't done). E.g.:
.nostyle {
font-weight: normal; // initial also works
}
EDIT:
Updating my answer with a general overview of what should be the final solution.
.twocoltable th {
// styles that will be applied to all th elements that live inside .twocoltable, including sub tables
}
.twocoltable tr td:first-child {
// styles that will be applied to all elements that are the first td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable tr td:last-child {
// styles that will be applied to all elements that are the last td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable>thead>tr>th {
// styles that will be applied ONLY to th elements that are direct children of tr elements that are direct children of thead elements that are direct children of .twocoltable. This excludes sub table th elements
}
// You should have got the idea by now
.twocoltable>tr>td:first-child {...}
.twocoltable>tr>td:last-child {...}
.nostyle {
// Styles that override styles that are inherited from its parent element even when that style has not been directly applied to it (e.g. font-weight)
}
By using this notation: .twocoltable tr, you will apply that style to all children of .twocoltable that are tr, no matter how deep they are.
You can choose to get more specific by adding classes to your tr elements, etc. Or you can use the child selector, >. It ensures the style is only applied to immediate children: .twocoltable > tr.
By having more specificity with your CSS, a great summary is found linked here, it will take precedence. Maybe using an ID for your main table, and a class for your nostyle cells would be the best way to organize it?
<table id="twocoltable">
<table class="nostyle">
Another option, you can override with CSS using !important, a jsFiddle linked here.
So, I made a design for a website in Photoshop and exported the website into HTML & Images. I messed around with it a bit and made it so that the menu items were click-able and when you hover, the text will change, and little things like that.
What I am wondering is how would I have a slice that is essentially just an image with a random colour for example, and be able to place stuff on top of it like buttons or text.
Code:
<td colspan="3">
<img src="images/index_17.png" width="395" height="90" alt=""></td>
This is an example of a specific slice I want to place text on top of and be able to change the text whenever I want.
Has anybody ever done this before or have any clue how to do it easily without messing up all of the images?
If you would like to target a specific cell to place and style content your best bet is to call it out in the code by giving it a unique id. Once your element has an ID you can use CSS to specifically affect the elements you place inside.
Because you're using the slice tool in Photoshop, it by default adds the sliced image into the table cell. Before you can place text in there, you will have to move that inserted image to be a background image instead. The thing to note is once you do that, the TD element will not know what size it should be so you will have to explicitly set that to be the size of the image you're moving.
For example using the code you posted you could do something like this:
table {
border: 1px dotted #333;
border-collapse: collapse;
}
td {
border: 1px solid #999;
padding: 10px;
background-color: #ededed;
}
/* Anything in that cell you would like styled, prepend it with the ID you gave the cell */
td#styled-cell {
height: 90px;
width:395px;
/*background-image: url("images/index_17.png"); */ /*Uncomment this line and update this URL to match where you have your images in relation to your CSS file */
background-color: #999;
}
td#styled-cell h2 {
font-size: 20px;
text-align: center;
color: lightblue;
text-transform: uppercase;
}
td#styled-cell p {
font-size: 12px;
text-align: center;
color: white;
}
td#styled-cell a,
td#styled-cell a:link {
font-size: 14px;
color: pink;
}
td#styled-cell a:visited,
td#styled-cell a:hover,
td#styled-cell a:active {
color: red;
text-decoration: underline;
}
<table>
<tr>
<td>
<!-- This is just to show you how it looks in a table, these would be replaced by the other rows and cells photoshop created -->
Other Example Cell
</td>
<td colspan="3" id="styled-cell">
<h2> Example Styled Text</h2>
<p> This is an Example Link</p>
<p>Example Paragraph with no link.</p>
</td>
</tr>
</table>
My css is located at http://sillybean.net/css/seaglass.css and i want to use this css for only one of html table, On the same page i have multiple html tables so i do not want to affect other html tables. What is the fastest way to do it with less modification on http://sillybean.net/css/seaglass.css ?
Can you just apply a class to the table you want to affect, then use that class in your CSS?
In your HTML, you can put:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
And then, add the class selector to your CSS:
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
Define an ID or CLASS in your CSS that will affect the table in question.
Then, in your HTML code, say
<table id="theid"... />
or
<table class="theclass" ... />
The CSS ID looks like
#theid
{
//attributes
}
Classes look like:
.theclass
{
//attributes
}
This is exactly what id and class attributes are for. If you can't change the markup (like styling myspace) then you need to use selectors to target the one table more precisely. The choice of selectors is something you'll need to decide yourself.
For Multiple Table and Classes
HTML Table
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
CSS Script
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
Here are class selectors and markup that will style the first table but not the second:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Or you can use an ID selector in a similar fashion:
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
Sometimes a religious war breaks out about which of these two approaches to use. Either is fine for your needs. According to the spec, you can only put a given ID on at most one element in your HTML (but most browsers allow you to break that rule).
Apply the Class name to the table on which you want to apply css rest is fine...
While you should add a class to the table you want to affect, let's assume you can only modify the css. In that case you can get pretty fancy with selectors. But not all the browsers support them. You can see that the CSS 2 selectors don't support the n-th child concept. Otherwise, if you had html like:
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
You could target the first with CSS2 selectors, but the second and third can only be targeted with CSS3 ones.
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
Select table by class for styling a desired table e.g if you have table:
<table class="tableOne"></table>
<table class="tableTwo"></table>
Then in CSS, you will use something like this:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}