inline css inside php output

Question

I have a table I want to add a vertical-align to:

$output = '<style type="text/css">div.bar-container {border: 1px solid #ccc; width: 150px; margin: 2px 5px 2px 17px; padding: 3px; float: left; background: white; position:relative; border-radius: 4px;}div.bar-container div {background-color: #ff7021; height: 12px;}div.bar-container span {width:140px;text-align:center;float:left;font: normal 9px Arial,sans-serif;margin-top: 0px;}</style>
<span style="text-align: left"><h2>Control</h2></span><br />
           ' . $htmlarray["clientkeyautherror"] . '
           <table width="100%" height="450px" cellspacing="0" cellpadding="0" class="frame">
           <tr><td style="border:none">
           <table width="100%" height="450px" border="0" cellpadding="10" cellspacing="0">
           ' . $htmlarray["displaystatus"] . '
           ' . $htmlarray["bandwidthbar"] . '
           ' . $htmlarray["memorybar"] . '
           ' . $htmlarray["hddbar"] . '
           ' . $htmlarray["buttons"] . '
           ' . $htmlarray["ips"] . '
           ' . $htmlarray["graphbutton"] . '
           </table>
           </td>
           </tr>
           </table>
          ';
   return $output;
 }

I need to add a vertical-align: middle; to the html array attributes such as memorybar. Can anyone show me how I would do this in the above example? Thanks!

I've tried this:

' "<div style='vertical-align:middle;'>" . ' . $htmlarray["displaystatus"] . ' . "</div>" '

but got the beautiful white page of death.

can you supply what the content of memorybar is. also, what have you tried? — haxxxton
– haxxxton, Commented Aug 26, 2014 at 1:00
It's text inside a table but the text isn't centered it is touching the top line of the table. I didn't keep all my tries, I'll do that next time. — robetus
– robetus, Commented Aug 26, 2014 at 2:08
what is your rendered html??. Based on the rendered html you can apply the css. — Pbk1303
– Pbk1303, Commented Aug 26, 2014 at 8:08
You should not mix server sided logic with design as in your example. Try using a PHP template system. — Martin Braun
– Martin Braun, Commented Aug 26, 2014 at 8:38

Hristo Valkanov · Accepted Answer · 2014-08-26 08:04:53Z

1

You can always put a class on the objects you want to affect or use :nth-child selector. For example like this, with using a class named 'middle' and the 1st child:

.middle{
    vertical-align: middle;
    background: green;
}

.frame td:nth-child(2){
    background: brown;
    vertical-align: middle;
}

Example in jsfiddle.

Also: Avoid using inline styles. It's bad practice.

EDIT1: Explanation on inline styles.

Consider the following: Every character you insert, makes your page bigger, thus slower.

'style='vertical-align:middle' = 29 extra chars. class='midtd' = 13 charts

that's a 16 char difference.

.midtd{vertical-align:middle;} = 30 chars.

if you need to apply the style to a single <td> inline yields 29 total chars, class yields 43 chars.

if you need to apply the style to 2 <td>s inline yields 58 total chars, class yields 56 chars.

if you need to apply the style to 3 <td>s inline yields 87 total chars, class yields 69 chars. And for every extra td, the difference grows bigger.

so if you need to apply it to more than 1 td, class is better than inlines, in terms of page size. It seems laughable but believe me you will thank me for this one at some point in your life ;).

Also, if you need to apply the style to an entire column, let's say the 2nd column, it costs you .frame td:nth-child(2){vertical-align:middle;} or 46 chars, independent of the amount of table rows.

In other words, nth-child is by far lighter than most solutions, but it is not suitable for random cells (let's say, you want to apply the style to the 3rd and the 5th cell on row 1, but only on the 4th cell on row 2, and like that the order is determined by server logic instead of a pater inside the table) for which the class method is by far lighter then inlines. And you can apply the same class to unlimited amount of elements.

this, and also, there is a great deal of people who think of your page less if it has 1 or 2 inline styles floating around.

edited Aug 26, 2014 at 8:04

answered Aug 26, 2014 at 1:16

Hristo Valkanov

1,68522 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

robetus Over a year ago

I understand about the inline css but due to the code this time is necessary and won't hurt anything. I'm a little confused by your answer. I thought there might've been a simple way to insert a <p style> or a <span style> in there but maybe not?

Hristo Valkanov Over a year ago

@conlustro explanation on inline styles is added.

robetus Over a year ago

Thanks for the info but my question still isn't answered. Your example does not work with my code. the output does not allow each array to be inside <td>s. So I need something else, and again for this small table on my fairly large website I would not mind having inline css to make it look better. I do not use inline css normally.

Hristo Valkanov Over a year ago

@conlustro if it doesn't work, then there is something I misunderstood about the structure of your table. Can you put on a/the jsfiddle a example code from your table. Let's say... copy 2-3 lines and replace the content with the words 'aligned' and 'non-aligned' for the respective needs you have.

Collectives™ on Stack Overflow

inline css inside php output

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related