Solved

style the td content

Posted on 2014-02-05
9
243 Views
Last Modified: 2014-03-09
I am trying to style a table cell, so when I see the content i will have the text in the middle of the cell, however there could be an image then i need to shift the text to the top and image under it.

<table class="tblContent" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="namePlace">
                                                test name
                                                <div class="textPlaceHolder">
                                                <img src="/includes/images/check.jpg" width="170px;"></cfif>--->
                                                
                                                      <img src="imagePath" width="113" height="113">      
                                                            
                                          </div>
                                          </div>
</td>
</tr>

</table>
0
Comment
Question by:erikTsomik
  • 4
  • 3
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39835757
I think you had some of your cf code in there. Just place your text in a div and that will force the image below.  

<table class="tblContent" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="namePlace">
                                               
                                                <div class="textPlaceHolder">TEXT HERE</div>
                                                <img src="/includes/images/check.jpg" width="170px;">
                                                
                                                      <img src="imagePath" width="113" height="113">      
                                                            
                                          </div>
                                         
</td>
</tr>

</table>

Open in new window

0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39835873
but in the case when i do not have an image i need the text to be in the middle of the cell
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39835919
Add css

td{text-align:center}

and that will make all td's align their content center (images or text).

Or you can give a td a class

td.centerme{text-align:center}
<td class="centerme">Your content</td>
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 19

Author Comment

by:erikTsomik
ID: 39835932
it has to vertically aligned
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39835998
If you place each item in a block, they will align center vertically.
http://jsbin.com/ceve/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style>
  td{text-align:center;}
  
  </style>
  </head>
  
<body>
  <table class="tblContent" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="namePlace">
                                               
  <div class="textPlaceHolder">TEXT HERE</div>
  <div><img src="/includes/images/check.jpg" width="170px;"></div>
  <div><img src="imagePath" width="113" height="113">  </div>    
</div>
                                         
</td>
</tr>

</table>
</body>
</html>

Open in new window

0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39836436
Also forgot to tell you I have dispaly set display: inline-block;
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39836515
Erik, if you look at what I did here http:#a39835998 it does exactly what you want.  If you have something set to inline-block and it is not working, then simply remove it.  A div is a block unless you changed it.  If you have the images as inline blocks, that will not matter because my code places them inside of a div.  

If it is still not working, please post a link to your sample page.  If you don't have it live now, please create a sample page you can upload and take out any content you don't want public.

Thanks!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now