I think my question is the simplest question on this site. Nevertheless i couldn't solve it.
Now, i have a html like bottom. Elements have to be shown side by side. However output is like in picture below. Also, I did not get where the underscore come up from.
How can i do what i want?
<div class="ilgiliclass">
<?php
echo '<ul>';
if(...)
{
foreach(...)
{
if(...)
{
?>
<li>
<img src="img/arrow.gif">
<div class="si">
...
</div>
-
<div class="so">
...
</div>
<br />
</li>
<?php
}
}
}
?>
</ul>
You have a dash in your markup between the si and so elements. I imagine that's the 'underscore' you are talking about. Both .si and .so could be set to display:inline;, which should put everything on one line.
JS Fiddle Example: http://jsfiddle.net/TYsN6/
Related
.multiplecolonnes {
width:250px;
-moz-column-width:300px;
-webkit-column-width:300px;
column-width:300px;
height:45em;
}
.multiplecolonnes {
padding:-1000;
counter-reset:lis;
}
.multiplecolonnes {
counter-increment:lis;
content:' ' counter(lis);
}
<div class="panel-body panel-body-non-repetitive">
<div id="previewHtml" class="multiplecolonnes" style="font-size: <?php echo ($taille_police);?>;">
<?php echo (html_entity_decode($str));?>
</div>
</div>
https://jsfiddle.net/kn05cy1p/
I have this code that allows me to display my text on several columns
The height of which is predefined. However, when there are more than 3 three columns, I would like to go back to the line. Because currently here is the result
Multiple Columns
I've tried a lot of things but I can't make a line break. How can I do that?
Thank you for your help.
I want to do something not very hard but I don't know how to do.
Now here I have the version for mobile how it looks now.
Mobile version it looks like this:
And here it's how I want to looks:
Here I have the code.
$query = "SELECT * FROM my_table";
$res = mysqli_query($con, $query);
$i = 0;
while ($row = mysqli_fetch_assoc($res))
{
if($i%2==0)
{
echo "<div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6' style='padding:0;''>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
<div class='col-md-6 find-content' style='margin-top:8%;'>
<img src='images/my_img/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
</div><!--/row -->";
}
else
{
echo " <div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6 find-content' style='margin-top:10%;'>
<img src='img/descopera/icons/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text-descopera'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
<div class='col-md-6' style='padding:0;'>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
</div><!--/row--> ";
}
$i++;
}
I copied again the code and I used class of bootstrap named 'visible'
I don't believe there is a simple CSS solution for changing the order of DOM elements. You need Javascript for that.
Revising my answer.. I would do it by writing out element 3 two times - before and after element 2. And then toggle display of the duplicate elements depending on breakpoint. (this answer only applies if the elements are fairly simple as duplicate markup is less than desirable).
(A side note: I would really recommend that you look in to some templating instead of echoing out the markup like that, Twig for instance)
I'm trying to do something with my Bootstrap .post-title class.
I want to put an element.style background on my post titles, which calls as a background, to the post featured image, for each post. I've already achieve this, but something went wrong and now isnt working. the only thing i know is must look something like this.
<div class="post-featured" style="background-image:url('upload/<?php the_post_thumbnail( 'wpbs-featured' ); ?>')">
but something in the syntax there is wrong, because it render this characters on HTML. whats going on?
')">
live example: WP Featured post image, as a div background
the_post_thumbnail returns an IMG html tag. So the generated code is
<div class="post-featured" style="background-image:url('upload/<img src="path/to/file.png">')">
Definitely not something that could work... You want the url only, so you should do this:
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'wpbs-featured', true);
<div class="post-featured" style="background-image:url('<?= $thumb_url[0] ?>')">
this is the actual html snippet working.
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postfeatured" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
<div class="page-header"><h1 class="single-title" itemprop="headline"><?php the_title(); ?></h1>
<h4>
<?php $mykey_values = get_post_custom_values('_aioseop_description');
foreach ( $mykey_values as $key => $value ) {
echo substr("$value",0 ,300); //This will display the first 150 symbols
}?>
</h4>
<hr>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
<hr>
</div>
</div>
live example: Design Thinking. Blog de Diseño Gráfico. Picoboero
My wordpress theme (Anglepane) is creating a second (unwanted) post at the bottom of my page.
I have used Firefox page inspector and isolated the problem with the div tag "nocolsidepost", and I have gone through the 20+ theme files (css etc) and deleted this tag whereever I find it, but the second posts still remain!! - I can delete it on the fly with Firefox page inspector, but not in the actual code
Could anyone please explain how to solve this
Website is http://historyofliverpool.com and the section I want to remove it the bottom block with the previous / next links on it
I don't know the structure of the code in the theme but it can be in multiple parts of the code.
TwentyThirteen and TwentyFourteen themes (the ones bundled with Wordpress) use a separate function to show the pagination or the Prev/Next buttons. If your theme has this function (usually in function.php file) you will have to search for it and delete/modify all the lines that print something. For example, here is the function from TwentyThirteen theme:
function twentythirteen_paging_nav() {
global $wp_query;
// Don't print empty markup if there's only one page.
if ( $wp_query->max_num_pages < 2 )
return;
?>
<nav class="navigation paging-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'twentythirteen' ); ?></h1>
<div class="nav-links">
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
</div><!-- .nav-links -->
</nav><!-- .navigation -->
<?php
}
On the other side, the theme can easily implement the corresponding code directly in the archive.php, index.php and other category.php/tag.php files. It is similar to the function used above, the only difference is the function wrapper (the first is a function, the second not).
Or, simpler (but less proper) way to achieve this is to add a display:none; to the element above. But, to achieve this, you will have to find the code that generates it, to add there an id, and in the CSS use the id like this:
#your-id-here{
display:none;
}
I've build a custom facebook sidebar of my facebook page, which displays the messages in LI tags, inside a UL.
I do not want this UL box to become any longer than the other content of the page, so I made it display the first 5 messages.
Lately, I've started to post longer messages and therefore the 5 messages became longer than the other content. It is now possible to decrease the 5 messages, to let's say: 3 messages.
This however, requires manual tweaking weekly which is not optimal.
Now I've made my ul have the following css properties:
.facebooklist{
height:800px;
overflow:hidden
}
This however, cuts off the last message.
I would like to display as many li items containing my page messages, until the box reaches 800px or more in height.
Is this possible? And if so, how?
For reference, check my page here:
Image
The sidebar is located at the right.
The code:
<div class = "fbheader"><img class = "flogo" src = "img/f_logo.png"/><a class = "ftext" href="https://www.facebook.com/WIEWIE4life">WIEWIE</a><iframe class ="fiframe" src="//www.facebook.com/plugins/like?href=http%3A%2F%2Fwww.facebook.com%2FWIEWIE4life&send=false&layout=standard&width=10&show_faces=false&font&colorscheme=light&action=like&height=35&appId=520187094675923&locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:25px; float:right;" allowTransparency="true"></iframe></div>
<ul class = "facebooklist">
<?php
$page = file_get_contents('https://graph.facebook.com/WIEWIE4life/feed?access_token=520187094675923|OcGraoxcC7OH7gurPtx9Rqb8KnA');
$data = json_decode($page);
$x = 0;
foreach ($data->data as $news ) {
$StatusID = explode("_", $news->id);
if (!empty($news->message) && !($temp > 5)){
$temp = $temp + 1;
?>
<li class = "bericht">
<?php
$x = new DateTime($news->updated_time);
$x->setTimezone(new DateTimeZone('Europe/Amsterdam'));
$time = $x->format(DATE_ATOM);
$x = explode("T",$time);
$x[1] = substr($x[1],0,-9);
echo "<h6 class = 'date'>". $news->from->name . " - " . $x[0]. " ".$x[1]."</h6>";
?>
<?php
echo "<p class = 'message'>" . $news->message . "</p>";
?>
</li>
<?php
}
}
?>
</ul>
</div>
Thanks in advance!
Consider putting overflow: auto; and spare yourself the pain.
You can't measure text in HTML before it's displayed. As #Zim84 said, JS is your only solution but it's only a visual thing. The HTML will still be in your page, just that you'll remove it from the DOM tree.
Solutions that rely solely on PHP will probably fail, since you cannot really know how long the content will be on which screen resolution and under those 10'000's of possible browser configurations.
Therefore I'd go with JS.
Method one: hold your data in an array and append those <li> as long as the height of the <ul> does not exceed the height of your main content.
Method two: print your <li> normally with php as you did already and remove the last <li>-element with JS as long as the <ul> is bigger than the content.