Table style in CSS - css

I currently have a little HTML page with following HTML/CSS codes inside.
<table style="width: 300px;">
<tr style="height: 120px;">
<td width="width: 100px;">
<img src="images/lol/avatars/3.png" style="vertical-align: middle; width: 100px; height: 100px;">
<img src="images/score/3.png" style="display: block; background: #0c0c0c;" alt="3" title="5 üzerinden 3" />
</td>
<td width="width: 200px;">
aaaa bbb cccc ddddd
<h2 style="font-size: 1.6em; text-shadow: 0 -1px 1px #0c0c0c; text-transform: none; color: #fcfcfc; ">Anil wrote.<h2>
</td>
</tr>
</table>
The current output is:
(Live example is here: http://www.sobafire.com, under the right side of slider.)
The picture pretty much explains what I need, but I'll write them regardless.
The text at top (aaa bbb...) should be centered. Also, it should automatically keep centering itself if the text is long. (It shouldn't go upside or downside, it should be going upside by %50 and downside by %50.)
The "score" image with stars has a background color, which is "#0c0c0c". It should be the background color of entire bottom area, including "Anil wrote." text.
"Anil wrote." text should be aligned to right side.
I'll be glad if you can help me in this case.
Ps. There will be 3x TR in the current table, not a single like this. It won't make a difference but just a side note.
Ps 2. Live example added for users who would like to see it live.

Use two TR for this, first row has the main image and the "aaaa bbb cccc ddddd"
Second row has the stars and the "Anil wrote" info
you will probably need a rowspan=2 for the first column.
Sorry, forget about the rowspan.
Then if you have additional rows, just add them at the end, so you might have 4x TR and not 3.
Move all of your style items to a CSS style sheet
In general div is a better choice for layout, but you will find various points of view on this topic.
Tables should be used for tablular data, not for layout.
Harv

You need to add another <tr> containing two td's one with the rating and one with the 'Anil wrote' bit.
then you can add text-align: center to the comment td

I would suggest you to add another <tr> and <td> and use valign:xxx; and align:xxx;
CSS on divs and spans will work fine

Related

Table width is over sizing in Outlook

I am creating an email flyer but Outlook is making my two columns wider than they should be.
My flyer consists of one table divided into two columns and then two nested tables, one in each column.I created them this way so I can edit one nested table without affecting the layout of the other.
Here is an image of the problem that I have when I view it in Outlook, and you can see that the text should be where the red lines are so it runs flush down the flyer:
And this is how I want it to look in Outlook:
Here is my Fiddle.
<table id="father" width="700" border="0">
<tr>
<td height="666" align="left" id="column1" style="border: solid 0 #E0E0E0; border-right-width:1px; margin-bottom:10px">
...
</table>
Not sure what's causing the problem, as I've checked widths. I know Outlook can be funny with <table>'s
Fixed the problem. I added:
table.father {
table-layout:fixed;
}
table.father td {
overflow: hidden;
}
This stops the tables from forcing outwards.

CSS - bottom border around a TD gets cut off when browser is resized

I have a web app that uses bootstrap to make it mobile friendly.
In an attempt to visually group 3 items together, I have created a class the puts a box / border around the table cell where these three items appear. (the three items are link4, 5 and 5)
Here's the class:
td.lights
{
border: 2px solid black;
}
And here's the problematic HTML - I've paired it down to the minimum code, just for demo purposes.
What I'm noticing is that when I simulate a mobile device (using Firefox's Responsive design view tool) the bottom of the
<table>
<tbody>
<tr>
<td>link1</td>
<td>link2</td>
<td>link3</td>
<td> </td>
<td class="lights">link4 / link5 / link6</td>
</p>
</tbody>
</table>
Immediately after this table, I have this code to create another table:
<P>
<table class="table table-bordered table-striped">
<thead>
etc...
</thead>
</table>
When i resize my browser, the border on the bottom of my in table 1 gets cut off, depending on how small by browser size gets. The other fields look fine, but then again, they don't have a border around them. To me, it looks like there's a fixed set of space above and below my text ("link4 / link5 / link6") that is not dynamically changing.
I've tried adding a height "dynamic" height property to my td like so:
td.lights
{
border: 2px solid black;
height: 1em;
}
But that didn't resolve my problem.
Any suggestions? Please and thanks!
As far as I can tell you have quite a few errors in your markup:
</p>
Should be:
</tr>
Also, should you have a:
<P>
Before your second table? I would avoid wrapping your tables with P tags as this will add unwanted padding and doesn't make sense from a semantic perspective.
Fix those first and see what happens. Secondly I would recommend - when dealing with tables - to use the following:
<table cellpadding="0" cellspacing="0" border="0">
You can also do this in CSS with the following:
table, tr, td { margin: 0; padding: 0; border: 0; }
This should make sure you have no unwanted padding in and around your cells.

need corrections in css image gallery

In the image gallery in the below page, how do i align the thumbnails of the image gallery to the center.
http://kbay.in/details.php?id=5
I tried everything including aligning the tables and tds too...need help badly.
Try this
1) - Remove align="center" from the table data which is right above div id="galleryVideo"
<td colspan="4" height="310" align="center" valign="middle">
2) - Then to the ID Gallery add padding-left: 50px; or percentage which ever you prefer.
<div id="gallery" style="padding-left: 50px;">
I am afraid that using a table for that sort of layout isn't optimal. You should reconsider creating it with div elements instead.
Here's a jsfiddle with an example layout: http://jsfiddle.net/J4bkm/10/

How can I keep an element in the same place regardless of browser size (not static though) within flow of page

I am taking care of a website where the company logo is part of a huge background image which includes about 1/5th of the page design. My boss has asked me to place an image of the logo over that background image so that it can be copied or saved as a separate file. He also wanted users to be able to link back to the homepage by clicking the logo.
I have managed to position an anchor tag over the background image, which I can then put the logo image inside of when the problem is resolved. The problem is that the positioning of the element changes when the browser is resized. How do I keep this element in the same place (over the logo section of the background image) regardless of browser size?
I took over the typo3 site and found that the design was in some sort of DW tables layout. I need to add this without totally restructuring into a DIV layout.
The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html and if you need any more code info please ask!
You need to position the a within the table structure. Using firebug, the below code generally worked for me (a bit of tweaking would be in order to smooth it out). It adds a div inside your table row that holds the "Home" and "Contact" links. That div has a position relative set so that the a tag can then be positioned absolutely to the bottom of it, in order to keep it aligned with your logo area. Again, some pixel positioning might need to be tweaked to get it located just right, but the general idea is that you need the a tag positioned within that tr to get your effect to move with resizing.
<tr height="104">
<td height="104" width="25" background="fileadmin/images/line_li.jpg"></td>
<td height="162" width="826" valign="top" background="fileadmin/images/header_about_us2.gif" rowspan="2">
<div style="width: 300px; height: 162px; position: relative; margin-bottom: -162px; z-index: 1;"><a style="background:none; position:absolute; bottom: 0; left: 0; height: 125px; width:300px;" href="http://overbeckanalytics.com"> <!-- <!-- <img src="fileadmin/images/OAL_LOGO.png" border="none"> --> </div>
<table height="104" width="826" cellspacing="0" cellpadding="0" border="0">
...more of you nested table code here...
</table>
</td>
<td height="104" width="25" background="fileadmin/images/header_re.gif"></td>
</tr>

Using "word-wrap: break-word" within a table [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Word-wrap in a html table
This text behaves exactly the way I want on Google Chrome (and other modern browsers):
<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
<p>
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</div>
When the browser is wide enough, a+ and b+ are on the same line.
aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
As you narrow the browser, a+ and b+ are put on separate lines.
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb
That's all great.
In my situation, however, this is not a div but a table, like so:
<table style="border:1px solid black; width:100%; word-wrap:break-word;">
<tr>
<td>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</td>
</tr>
</table>
In this case, #1 and #2 happen, but not #3. That is, the table stops narrowing after step 2 and step 3 doesn't ever happen. The break-word doesn't seem to be filtering down.
Does anyone know how make #3 happen? The solution only need work in Chrome, but it it also worked in other browsers that would be even better.
P.S. "Don't use tables" is not helpful.
table-layout: fixed will get force the cells to fit the table (and not the other way around), e.g.:
<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
table-layout: fixed;">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</td>
</tr>
</table>
You can try this:
td p {word-break:break-all;}
This, however, makes it appear like this when there's enough space, unless you add a <br> tag:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
So, I would then suggest adding <br> tags where there are newlines, if possible.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
http://jsfiddle.net/LLyH3/3/
Also, if this doesn't solve your problem, there's a similar thread here.

Resources