Embedding CSS directly into PHP output

I have a table where I want to include a vertical-align property:

$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;
 }

If anyone knows how to add vertical-align: middle; to the html array attributes like memorybar in the above example, please share your solution. Thank you!

This is what I attempted:

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

However, it resulted in the dreaded blank page of death.

htmlcss

Answer №1

If you want to target specific objects, consider adding a class or using the :nth-child selector. For instance, you can create a class called 'middle' and style the 1st child as follows:

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

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

For a live example, check out this jsfiddle.

Remember to avoid using inline styles, as it's considered a bad practice.

In addition, remember that every character you add to your page affects its size and performance.

Choosing between inline styles and classes depends on the number of elements you need to apply the style to. In general, using a class is more efficient than inline styling for multiple elements.

When targeting entire columns, such as the 2nd column, the nth-child selector is a lightweight solution in terms of code length.

While nth-child is great for many scenarios, if you need to target random cells based on server logic, using classes is more efficient than inlines. Classes can be applied to any number of elements with less impact on page size.

Keep in mind that excessive inline styling may affect how others perceive your webpage design.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Css animations not functioning properly in Chrome

I've been working on this animation project, here is the link: http://codepen.io/Zeaklous/pen/dIomg It seems to work perfectly fine on Firefox but not on Chrome. Here is the code snippet: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/ ...

htmlcss

PHP script is not successfully receiving the Ajax post request that is

As a newcomer to the world of php and ajax, I am facing a challenge in passing a variable from jquery to a php page loaded within a modal window. My php script fetches table information for multiple users. Next to each user's name, there is an edit b ...

javascriptphpjqueryhtmlajax

What is the best way to achieve a sophisticated layout using the flex grid in CSS3?

Looking to achieve a responsive layout using flex without the need for media queries. Can anyone provide the CSS code for a layout using flex or grid? I've attempted the following: .parent { display: flex; flex-wrap: wrap; height: 100vh; } ...

htmlcssnext.js

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

javascripthtmljquerycssowl-carousel-2

What is the best way to populate a remote html page in real-time according to user input?

Is it feasible to use only JavaScript and HTML to allow users to select from a list of options and then print a page that includes a checklist of their selections? ...

javascriptjqueryhtmljspdf

I'm struggling to achieve the placement of my logo and navigation bar side by side

Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...

htmlcss

Guide on attaching an event to every dynamically created element in JavaScript

I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...

javascripthtmlcss

Easy steps to dynamically add buttons to a div

I need help with a JavaScript problem. I have an array of text that generates buttons and I want to add these generated buttons to a specific div element instead of the body. <script> //let list = ["A","B","C"]; let list = JSON.p ...

javascripthtml

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

csshtml

The size of the Tweet button iframe is set at 107 pixels

Has anyone been able to successfully adjust the size of the tweet button generated by Twitter's iframe code? My attempts have resulted in a default width of 107px, but I need it to match the actual button size. I've tried adjusting the CSS proper ...

htmliframetwittershare

Include dimensions in the images using the width and height attributes, either in the HTML or CSS code

I've recently been working on my wordpress site and have made a change to how I handle image sizes. I've been removing the width and height attributes when adding images, as they are automatically added. Instead, I've been using the followin ...

xhtmlheightwidthcss

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

Establishing the Default Volume within a script

I'm looking to adjust the default volume of music on my website. Currently, it plays too loudly on load, but I have a slider bar that allows users to change the volume. How can I set the default volume to be 25% of the slider? CHECK OUT MY WEBSITE! ...

javascripthtml

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

javascripthtmlcalculatorcalc

What is the reason behind the Chrome icon flickering momentarily while loading certain web pages?

I recently put together a basic html document, here it is: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <title>Just a test.</title> </head> <body> <svg ...

htmlgoogle-chrome

set a variable to determine the padding-top of a div

Below is the code snippet: return '<div style="width: 100%; height: 0; position: relative; padding-top: 56.25%"> <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0;"> <unitydog width="'.$width.'" hei ...

phphtmlcss

Centering text both vertically and horizontally over an image using CSS

I've been attempting to center the div banner_title both vertically and horizontally within another div in this way... .box { text-align: center; } .banner_title { font-size: 32px; position: absolute; top: 50%; width: 100%; } .banner_titl ...

htmlcss

What is the widely used term for the container that allows for panning by dragging with a mouse?

I am looking to design a container that extends beyond the width of the page, allowing users to pan by dragging through empty space between controls without zooming in or out. What is this type of container control typically referred to as? I am intereste ...

htmlvue.jsuser-interfacecontrols

What is the best way to make a sliding DIV appear at the edge of the browser window?

I recently came across a really interesting effect on a webpage. After arriving on the page, a slide-in window appears after about a minute. It slides in from the right side, remains at 250x180 for around ten seconds, then shrinks to 250x50 and stays visib ...

jquerycss

Adjust image size with react - personalize styling for react-easy-crop

I am currently working on developing a basic react component that involves cropping images using react-easy-crop. It seems like the style of the react-easy-crop module can be customized with the style prop, which consists of three objects: containerStyle, ...

cssreactjscrop