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.
Related
$Option = "<p>6 < x < 8</p>" //For demo I have assigned directly, in reality the value will come from MySQL database.
I want to display this value something like:
But I am getting it like:
I know the reason why it is like that because the input tag is out of paragraph tag.
<input type="radio" name="<?php echo $i; ?>" value="A"><?php echo $Option; ?>
What can I do so that the radio button is inside paragraph tag?
p elements are block elements by default. You can make them inline elements by setting the display property value to inline:
$Option = '<p style="display:inline">6 < x < 8</p>';
Update: If you are not able to change the value of the variable then you can try using external or internal CSS:
input[type=radio] + p{
display: inline;
}
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 :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<?php
$mysqli = new mysqli("Logxxxom", "Lxxxc", "axxx!", "Lxxxc");
$result = $mysqli->query("SHOW TABLES");
while ($row = $result->fetch_row()) {
$table = $row[0];
echo '<h3>', $table, '</h3>';
$result1 = $mysqli->query("SELECT * FROM $table");
if ($result1) {
echo '<table cellpadding="0" cellspacing="0" class="db-table">';
$column = $mysqli->query("SHOW COLUMNS FROM $table");
echo '<tr>';
while ($row3 = $column->fetch_row()) {
echo '<th>' . $row3[0] . '</th>';
}
echo '</tr>';
while ($row2 = $result1->fetch_row()) {
echo '<tr>';
foreach ($row2 as $key => $value) {
echo '<td>', $value, '</td>';
}
echo '</tr>';
}
echo '</table><br />';
}
}
$mysqli->close();
?>
I need this code aligned to the top right corner of the page.. Kind of stumped??? Any suggestions would be appreciated!!! Thanks in advance.
If you want to align to top and right the content (only the table) you have to put this on the < head > and < /head > tags of you php file:
<style>
.db-table {position:absolute;top:0px;right:0px;}
</style>
Your browser has no idea of what PHP is, all it sees is HTML, CSS and Javascript. If you need help about formatting your webpage, you need to ask your question with the HTML/CSS tags.
If you don't understand that PHP is back-end and has nothing to do with how your page is displayed, you might want to hit the books.
PHP will echo the HTML code you ask it to echo, this HTML code that you echo is what needs to be modified.
You could use absolute positioning for your table but do take into account that absolute positioning is highly dependent upon parent containers which means that the following code might work only if your table has no positioned elements between it and the <body> element (otherwise the element that has a position declared will act as a positioning parent to the table).
Just add the following selector to your CSS code:
.top-right-aligned {
position:absolute;
top:0;
right:0;
}
and change your PHP line to look like this
echo '<table cellpadding="0" cellspacing="0" class="db-table right-aligned">';
If you can't make changes to the table's parent containers which potentially have defined positioning you could also use fixed positioning but that approach might also come with some side effects.
.top-right-aligned {
position:fixed;
top:0;
right:0;
}
i want to remove the link from my header using CSS so that only the text "my inner yoga" shows, but it is not a hyperlink. i tried to do
#post-28 .site-title.a {display:none;}
but it didnt work. i know it has to do with the site-title because i don't know how to say in CSS that i want to only have the "a" tag not working, but only in the site-title div.
also, is it possible to remove the "learn more" text from the right side of my header? i don't know PHP so that part is confusing to me. i dont know if its possible to do with css.
the link is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Can't be done with CSS, but you can just display the site title itself using
<?php echo $bloginfo('name'); ?>
If you only want it removed on one page, use a conditional IF statement to query the page ID or slug and set a version without the site URL attached and an ELSE to set a version with the URL.
To remove the learn more text, add this code to the end of your functions.php file:
function improved_trim_excerpt($text) { // Fakes an excerpt if needed
global $post;
if ( '' == $text ) {
$text = get_the_content('');
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>', $text);
$text = strip_tags($text, '<p>');
$excerpt_length = 100;
$words = explode(' ', $text, $excerpt_length + 1);
if (count($words)> $excerpt_length) {
array_pop($words);
array_push($words, '');
$text = implode(' ', $words);
}
}
return $text;
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');
If I'm correct the theme developer added a custom excerpt ending. Either that or it's just a hardcoded link, in which case go into the header file and use the find function of whatever editor you are using and search for the "learn more" text, then just remove it and the tag around it.
Not sure how you're generating "Learn Now", but if it's just a link you should be able to do something like the following (let's say the post ID is 17).
<?php if (!is_single(17)) { ?>
Learn More
<?php } ?>
Like Corey said above, use <?php echo $bloginfo('name'); ?> to show the name. Remove any <a> tag that might be surrounding it.
Try this..
Modify style.css line 482
#site-title a {
color: #FFFFFF;
cursor: default;
pointer-events: none;
}
In my site template I want to place an image code which re-sizes images with a width larger than 910px down to 910px, but leaves those with a width smaller than 910px. If the image is resized it should offer a show original image option.
I would like to implement something like this http://www.mangareader.net/94-8-3/bleach/chapter-1.html
This is the code I have so far:
HTML:
<img src="http://localhost/manga2anime/upload/Bleach/1/03.png" class="resize">
CSS:
.resize {
max-width: 910px;
max-height : auto;
}
Easiest would be if you also stored the img's width in your database. If that's the case, something like this will do:
<?php
// Connect to DB etc.
$result = mysql_query("SELECT 'img_path', 'width' FROM table");
if(mysql_row_count($result) != 0){
while($row = mysql_fetch_array($result)){
$img = "<img src='" . $row['img_path'] . "'";
if($row['width'] > 910){
$img .= " class='resize'";
// OR
// $img .= " width='910'";
echo "<a onclick='showOriginal()'>Show Original</a>";
}
$img .= " >";
echo $img;
}
}else{
echo "No images found.";
}
?>
If the img is already loaded and your php isn't that handy, you can also adjust it with jQuery:
function adjustImage(){
if($('img#needed_img').width() > 910){
$(this).addClass('resize');
// OR
// $(this).attr('width', '910');
$('#show_original_button').show();
}
}
And just call the above function when the document loads (so not in combination with the jQuery ready function). I dont know what your HTML looks like, so its hard to also come up with a working 'show original' function.. but i think something like a lightbox or modal would be most useful in your case to show the original img, for it wont alter your template and just 'sit on top of it'.