I need to apply a style class that will make a minumum margin to the right of labels. The tag is shown here with class "label-format":
echo '<p><span class="label-format">Make: </span>' . $term->name . '</p>';
echo '<p><span class="label-format">Model: </span>' . $term->name . '</p>';
echo '<p><span class="label-format">Condition: </span>' . $term->name . '</p>';
and I need to make it so that the values are pushed to the right like so (the periods represent whitespace):
Make:.........Ford
Model:........Focus
Condition:...New
the best I can get with margins is:
Make:...Ford
Model:...Focus
Condition:...New
A more maintainable option would simply be to use a table. For the <td>s containing the properties of $term, you could set text-align: left; and it will look the same.
You may use inline-block and whidth:
p span {
display:inline-block;
width:5em; /* here set width that you want*/
}
float:left; works too :)
Related
I have a problem, the code below allows me to view posts made. And with the CSS I can align the text in this div to be "left-aligned". I need to keep it in a inline-block, or else it will affect everything else. This works great, but only for the first post. The next one isn't affected by the CSS. Look at the screenshot, first 4 lines are the first post, and the others are different post, which are not aligned. Problem shown here.
PHP:
$output .= '<div class="vs-info">';
if ($event_excerpt != 'yes') {
$output .= $content = apply_filters( 'the_content', get_the_content() );
} elseif (!empty($event_summary)) {
$output .= apply_filters( 'the_excerpt', $event_summary );
} else {
$output .= $content = apply_filters( 'the_excerpt', get_the_excerpt() );
}
$output .= '</div>';
CSS:
#vs .vs-info {display:inline-block; text-align:left;}
The CSS selector statement you've written isn't correct; you're asking for an element of class "vs-info" which is a descendant of an element with the ID "vs".
Place a comma into your CSS like this:
#vs, .vs-info {display:inline-block; text-align:left;}
Now your CSS will apply to either an element with ID "vs" or an element with class "vs-info", and the DIVs you're creating with your PHP will be assigned to display inline-block.
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.
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.
I'm trying to print out my list horizontally but it isn't working with display inline. I also used float: left; and position:center but then it isn't centered horizontally.
PHP
foreach ($memberinfo as $info)
{
echo "<ul><li><a href='profile.php?user_id=" . $info['user_id'] . "'><img class='group_member_img' src='uploads/" . $info['avatar'] . "'/><br>" . $info['surname'] . " " . $info['name'] . "</a></li></ul><br>";
}
CSS
.groupmember ul
{
margin:0;
list-style-type: none;
text-align:center;
}
.groupmember ul li
{
display:inline;
}
You are creating a new unordered list ul for every $memberinfo, so the display:inline is working, but the ul's remain like block elements.
Create the ul tag before the foreach and close it after it, so your list items will be displayed like you want:
echo "<ul>";
foreach ($memberinfo as $info) {
echo "<li><a href='profile.php?user_id=" . $info['user_id'] . "'><img class='group_member_img' src='uploads/" . $info['avatar'] . "'/><br>" . $info['surname'] . " " . $info['name'] . "</a></li>";
}
echo "</ul>";
By the way, the break line br tag is unnecessary because you want to put every li one beside the other.
Using display: inline-block as suggests probably the right solution here.
.groupmember ul li {
display:inline;
}
display: inline is not really useful for anything but elements that have no nested elements inside them.
display:inline is very limited and doesn't allow any block-level styling to added to it.
You're better off using display:inline-block or using float:left.
Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
How to change the color of the specific row in a table in javascript
foreach($this->paginator as $record)
{
echo "<td width='61'> <a href='#' class='test' data-id='" . $record['id']. "'>". $record['id'] . "</td>";
echo "<td width='61'>". $record['firstname'] . "</td>";
}
Add style="background-color: #123" to the tr-element containing the td elements.
You may try this using CSS like;
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Or jQuery like;
$("#Your-ID > li:nth-child(odd)").addClass("odd");
In case you want to color a specific row
$('table tr:eq(3)').addClass('highlight')
Replace the number (3) with the index of the row you want to highlight. It's probably a better idea to do this server side though: Render the 'highlight' class on the backend.
Language: PHP, HTML
Hi, I am having an issue with making some buttons that represent rooms.
Each button is labelled with a room number and I am trying to get the buttons to be side by side.
foreach($row1 as $row2)
{
echo "<form method='post' action='ss room details.php'>";
echo "<button>".$row2."</button>";
echo "<input type=hidden name=roomNum value=".$row2.">";
echo "</form>";
}
echo "</td>";
The buttons are listed vertically and make a new line for each button. How do I display it horizontally?
Thanks!
The buttons wouldn't probably end up next to each other horizontally, except for the fact that you're including each one in a separate form element. In your css, you can float the form left:
form {
float: left;
}
You could also float the buttons, too -- make sure to try it in different browsers. Wouldn't hurt to include a CSS reset template too.
You can either use float:left like #compeek has mention or you can use break tags like this:
foreach($row1 as $row2)
{
echo "<form method='post' action='ss room details.php'>";
echo "<button>".$row2."<br/>";
echo "<input type=hidden name=roomNum value=".$row2."><br/>";
echo "</form>";
}
echo "";
You want to float: left; (CSS) on each one.
However, floating acts kind of strange sometimes, so you'll definitely want to do some Googling to get a good idea of how it works.
So, to quickly show you with inline CSS, modifying your original code:
foreach($row1 as $row2)
{
echo "<form method='post' action='ss room details.php'>";
echo "<button style=\"float: left;\">".$row2."</button>";
echo "<input type=hidden name=roomNum value=".$row2.">";
echo "</form>";
}
echo "</td>";
EDIT: It's never a good idea to use inline CSS, though, so putting the CSS in your spreadsheet is a much better idea:
button {
float: left;
}
I would tend to use display: inline. This will make the form and the button behave like normal elements in the text flow. Do a line break <br> where necessary.
form { display: inline }
button { display: inline }