backgrounds - Page 6 - Post ID 221353

User 2622002 Photo


Registered User
25 posts

Table looks good.
Please tell me the code and where to put it to change font size to h3 and add a background color.
k.
User 122279 Photo


Senior Advisor
14,450 posts

Here is the entire css code pertaining to the table. See that line in bold? I've added it, and you can change the #eee to whichever colour you want.
.table {
width: 100%;
display: table;
margin: 10px auto 0;
padding-top: 10px;
background-color:#eee;
/* border: 1px solid red; */
}

.table-cell {
width: 20%;
vertical-align: top;
display: table-cell;
padding: 2px;
font-size: .8em;
}

.table-cell img
{
max-width: 94%;
display: block;
border: 0;
-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;
width: 95%;
}


Re the h3, you have to put it around any text you want to have it, like
<h3>your text...</h3>

If you want to change the way it looks, create a rule about it in the css, along the lines that I have done for h1 and h2. You may have to remove the line in italic in the code for .table-cell, where I have set a font-size.

One more thing, to preempt any misunderstandings. In css there is a difference between
table {...} and
.table {...}
The former is about html tables, the second one is for css tables.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2622002 Photo


Registered User
25 posts

Do I insert the .table info into my style.css? or does something need to go on html page?
I will have more than one table on some pages with different bg etc
User 122279 Photo


Senior Advisor
14,450 posts

If you want to have a different background colour for EVERY table, then add the bg colour style as inline styling.
If you want to have the same bg colour on all the adverts on ONE particular page, then add it as head styling on that page, like what you did with the h1 recently.
If you want to have one particular colour for MOST of the backgrounds, then add that to the style sheet, and override it with inline styling when you want a different colour.

The code I pasted above is already in the style sheet, except for these lines:
padding-top: 10px;
background-color:#eee;

As long as the table I created did not have a bg colour, I didn't bother about a padding-top, but with a colour, it didn't look good without the padding.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2622002 Photo


Registered User
25 posts

I can change bg color ok in css but can't figure out for an individual table how the code should read and where.
User 122279 Photo


Senior Advisor
14,450 posts

<div class="table" style="background-color: red;">

You can write the colour as 'red', 'white', 'blue', or you can use #fff (for white), #f52bff (for purple) etc.
If you want translucent colours, use this:
<div class="table" style="background: rgba(255, 255, 255, 0.6);">

This is a translucent white, the 0.6 is the degree of translucency and can be changed up or down.

Something else regarding the table I made for you: It has 5 columns, and therefore the width of each of them is 20%. If you need a different number of columns, you can create a new '.table-cell-4col' or so, and of course, the width of them will have to be 25%. Provided you want to have each table covering 100% of the available width, you don't have to create another '.table', only if you want it to have a different width. If you make a table say 80% wide, with 4 columns they still have to be 25%.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.