css newbie question -
we have a generalized css defined for Table along with its Table Cells as:
.table {
width: 100%;
margin: 1em 0 1em 0;
border-top: 1px solid #A3C0E8;
border-left: 1px solid #A3C0E8;
}
.table td, .table th {
padding: .6em;
border-right: 1px solid #A3C0E8;
border-bottom: 1px solid #A3C0E8;
vertical-align: middle;
background:#D7E8FF;
color:#333;
}
In one scenerio, I want to override td style so that I can show an icon image in front of Table Cell text.
so, if Table Cell is defined as - <td> Vehicle Name & Details </td>
I want to apply style for this Table Cell so that it also show icon image in front of text - 'Vehicle Name & Details'.
I added this style in css file -
.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }
and added to td as <td class="vehicle"> Vehicle Name & Details </td>
but no icon is being shown. Parent table of this td is <table class="table">
Am I missing something?
Thank you!
.vehicle (one class selector) is less specific than .table td (one class selector + one type selector).
You need either:
a more specific selector (e.g. .table td.vehicle)
an equally specific selector (e.g. td.vehicle) in a rule-set that appears later in the stylesheet
Change your selector to td.vehicle also make sure it appears after .table td selector in your css file.
You can also make the special td's style inline:
<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>
Double check to make sure your URL location is correct. I would first put in an absolute path (http://site.com/mainFolder...) first, then change it to a relative path.
try replacing the background position to
background:url(mainFolder/img/icons/vehicle.png) no-repeat left top;
You can also change the no-repeat to repeat for debuging purposes to see if the image loads.
Also i advice u install firebug (if you are using firefox) so you can manipulate html and css on the fly.
It should work, make sure that the route to the image is correct. And also note that is a background image you are setting, so if you don't want the image to be behind the text you have to use padding --> jsfiddle
Related
I am creating a website and I used google custom search for it. When I trying to add a border for th, td they also applied for my GCSE. It looks ugly when it appears there. I am trying to figure out how can I use my CSS code all table except google custom search. Here is my website, https://vendabariulo.gov.bd/citizen-charter/
Here is my code,
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
Here is my search button screenshot, there shows a border around it. If I remove border from th, td it looks beautiful.
enter image description here
You could try to style the Google Custom Search itself.
This rule might help you
gsc-search-box th, gsc-search-box td {
/* apply your rules here as you like.
For example, border:none; */
}
Thanks all. After thinking and trying half an hour, I figure out something. It's work for me. I think it's a valid CSS rule.
I add a div class to my google custom search code and add this simple code,
.gcse td, th, tr {
border: none;
}
Use :not() CSS pseudo-class as doctrine in developer.mozilla.org
table:not(table.gsc-search-box){
/* your style definition */
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
Hope it helps.
I have some CSS added to support a table that looks like this:
#outertable {
background-color: #000000 !important;
border: 40px black solid !important;
}
#innertable {
background-color: #000000 !important;
border: 20px #A67100 solid !important;
}
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
}
When I use the above CSS in a stand-alone HTML page, it works fine. There is no other CSS, so there are no conflicts. However, when I incorporated the above CSS into a Joomla template there is a problem, that Table's cell doesn't include what is expected. I used Inspect in Google Chrome web browser and identified the source of the problem. Here is the CSS that's causing the problem to the above CSS:
table, table td {
border-collapse: collapse;
}
While in Inspect in Chrome I can uncheck the box for this CSS code and the page looks like expected. The CSS for this is coming from com_content.css. But I don't want to override this CSS for the entire website, just for the table it's being used in on this specific Joomla web page of the site.
How can I incorporate the above CSS into the CSS at the top of this posting so it has the same effect that unchecking it does in Chrome's Inspect, but only on this table on this web page of Joomla?
I have tried adding a 'border-collapse:separate', but it doesn't do anything:
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
border-collapse:separate !important;
}
I'm not a CSS expert by any means, so I would greatly appreciate help on this. Thanks!
The border-collapse property affects tables only, not cells, so you need to set it on the table element:
#innertable { border-collapse: separate }
You should also consider using selectors and named HTML elements so that you can apply styles on a per element basis
I am struggling with a cell padding issue in a given HTML table (generated by Drupal).
The table is the following:
I tried the following:
.view-thumbnails-of-tips-and-tricks {
padding: 10px 10px 10px 10px;
}
I want to adding padding around cell content as following:
Unfortunately, the padding goes around the table, rather than the cells' content. How can I solve this?
.view-thumbnails-of-tips-and-tricks tr td {
padding: 10px;
}
Specify td after your class:
.view-thumbnails-of-tips-and-tricks td {
padding: 10px;
}
Also, make sure to set cellpadding to zero in the HTML in case user-agent stylesheets provide their own value. This value may override or add to the CSS value.
<table cellpadding="0">
You should set css to that cell, not the holder.
So you can set class name for that cell and customize the css.
e.g: .view-thumbnails-of-tips-and-tricks td { padding: 10px; }
Hope this help
Try defining your style like this:
.view-thumbnails-of-tips-and-tricks td {
padding: 10px 10px 10px 10px;
}
It means that you are defining style for:
top div (identifier ".view-thumbnails-of-tips-and-tricks")
table inside that div ("td")
I have CSS items for all my table elements (<table>, <tr>, etc...) but I have one table for which I don't want the CSS to apply.
What is the quickest way to have this table just display as a raw HTML table and not apply my CSS formatting.
Also, in my CSS file, I have this:
table td
{
padding: 5px;
border: solid 1px #e8eef4;
}
table th
{
padding: 6px 5px;
text-align: left;
background-color: #FFFFFF;
border: solid 1px #e8eef4;
}
what if I want to have multiple table formats, how do I do this?
You should use classes to define several different styles, e.g:
// global table styles - will be applied to all tables
table td
{
background-color: green;
}
// styles for tables with class "style1"
table.style1 td
{
border: solid 1px red;
}
table.style1 th
{
...
}
// styles for tables with class "style2"
table.style2 td
{
border: solid 1px blue;
background-color: white;
}
Then set the class attribute on the tables where you want to apply that style:
<table class="style1"><tr><td> red border, green background </td></tr></table>
<table class="style2"><tr><td> blue border, white background </td></tr></table>
<table><tr><td> default border, green background </table>
Here style1 is applied to TDs of the first table, style2 to TDs of the second table.
Note that global styles (without any class name) apply to all matching elements (e.g. TDs), but these styles can be overridden by specific styles (as shown with the background-color, which is globally set to green, but overridden for style2).
BTW: for a tutorial about CSS, have a look at http://w3schools.com/css/.
Use a class for the table you want formatted. For example
<table class="myformat">
....
</table>
Now on the css side make sure you define the correct formatting as follows:
table.myformat th {
color: red;
}
table.myformat td {
color: green;
}
The tables that have the class="myformat" property will have the formatting. The ones that not will not. With this approach you can further make various table formats as different classes and apply them to your different tables.
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}