I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?
This is the php code.
Thanks for the help.
<h3>Details</h3>
<ul>
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
<li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
<?php endforeach; ?>
</ul>
Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.
If you have access to the CSS stylesheet, you could use several methods:
Inline-block
ul {
font-size: 0;
/*makes inline-block method work, as " " in your DOM have a font-size,
and we want to eliminate those
*/
}
ul li {
font-size: 18px; //or however large you would like
display: inline-block;
width: calc(100% / X); //where X is number of li
}
Float
ul {
}
ul li {
font-size: 18px; //or however large you would like
float: left;
margin-left: X; //where X is the gap you want between elements
}
Flexbox
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
}
I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.
Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp
Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.
Thanks a lot Guys,
This is the code works for me:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: #e8f3ff;
width: 1px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 30px;
}
</style>
</head>
<body>
<h4>Details</h4>
<div class="flex-container">
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name =>
$custom_quote_field_value) : ?>
<?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>
<?php endforeach; ?>
</div>
</body>
Related
I'm not sure where I'm going wrong with my CSS.. any help would be appreciated..
the CSS
#commentbox {
float: left;
margin-top: 10px;
background-color: #FFFFF0;
display: block;
width: 450px;
border: 1px solid #999999;
padding: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
text-align: left;
}
#commentbox .commenter_name {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
color: #660000;
float: left;
padding-left: 5px;
display: block;
}
#commentbox .comment_content {
display: block;
float: left;
clear: both;
white-space: pre-wrap;
}
This is my Form Textarea
<textarea name="vt_comment" cols="50" rows="5" wrap="hard" class="nontextarea" ></textarea>
This is the code that displays the Comment
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name">
<?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?> commented
</div>
<!--Show Comment -->
<div class="comment_content">
<?php echo $row_cmnts_disp['vt_comment']; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
This is how it gets stored in the DB
1st Line of the Comment
2nd Line of the Comment with just a Line break
Double Line Break
and this is how it is displayed on the site (with spaces in the front of the 1st line)
Swami Donanandha commented
hello
hello
hello
hello
as displayed online
whatever changes I try, I'm not able to remove the spaces before the 1st line of the comment, unless I remove the white-space:pre-wrap setting in the CSS...and if i do that the line breaks vanish displaying just one long sentence....
Swami Donanandha commented
1st Line of the Comment 2nd Line of the Comment with just a Line break Double Line Break
Have you tried removing the white-space: pre-wrap attribute and echo'ing a HTML break tag at the end of each comment?
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name"><?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?>
commented
</div>
<!--Show Comment: Added Break Tag Below-->
<div class="comment_content">
<?php echo "<p class='comment'>" + $row_cmnts_disp['vt_comment'] + "</p><br>"; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
The reason your comments concatenate into one long string after removing the white-space attribute is because of the float: left attribute in the .comment_content class. Updating the class to the following should fix the long string problem you have;
#commentbox .comment_content {
display: block;
}
I sorted it out... by adding the nl2br clause before the DB insert
$vt_comment = nl2br($_POST['vt_comment']);
and removing the white-space:pre-wrap from the CSS
Though I still don't have a clue why the extra spaces were getting added earlier :-)
I am using WordPress and ACF to display some photographs from custom post types on my page.
I would like the images to all be the full height of the container but they may have different widths (context photography gallery) and I would like them to scroll horizontally
the images are currently contained as list items in an unordered list.
Im unsure how to accomplish this with CSS. so far I have them scrolling, but they are all different heights.
i could make sure the images are all just uploaded with a fixed height but that doesn't solve the problem of them not resizing with the browser.
JS Fiddle:
https://jsfiddle.net/svone2zq/9/
Live url: http://www.mattwilkinson.co.uk/beta/
HTML CODE
if( $posts ): ?>
<ul class="photolistul">
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<li class="photolistli">
<!-- need the right info here -->
<div class="photocontainer1">
<span><?php the_field('single_image_title'); ?></span>
<img class="img-responsive photo" src="<?php the_field('single_add_image') ?>" alt="<?php echo $image['alt']; ?>" />
</div>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
</div>
CSS
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
height: 80vh;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: inherit;
max-height: 100%;
max-width: 100%;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 img {
position: relative;
float: left;
max-height: 100% !important;
max-width: auto;
}
it looks like you want to create a carousel, if so I think the best solution would be Owl Carousel 2 here.
I have a solution for you too
http://codepen.io/Nikolaus91/pen/EKwJXw
I didn't have a better idea to set .stage width other way than using jQuery. Maybe you will came up with a better solution when you will see mine.
var sumwidth=0;
$(".stage").children('.carousel-image-container').each(function() {
var child = $(this);
sumwidth+=child.outerWidth();
});
$(".stage").css({
'min-width' : sumwidth + 25 + 'px'
});
P.S. 25 value is random, don't know why this 25px is missing when outerWidth value is sumarized. Maybe it's because of codepen...
P.S. -2 If you are making website based on images (majority of the content) remeber to compress images using for example (my favourite) kraken.io. If you are uploading images using media library in wordpress install WP Smush by wpmu dev it will compress images when uploaded - no need to remeber about compressing images.
The last important thing (in my opinion) is to use some kind of lazy loading solution, downloading multiple images at once when only minority is visible is bad approach, try BjLazy for wordpress. Might suit your needs.
Working with the css in you jsfiddle I came up with this which seems to do the trick.
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.img-resposnive {
height: 100%;
width: 100%;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
height: 400px;
max-height: 600px;
min-height: 200px;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: relative;
float: left;
}
Good Day,
I am working on a table that will display data from MySQL using PHP which is pretty much working. My goal is to display this as a simple Identification Card using the data I have from MySQL.
I would consider myself a rookie when it comes to CSS and I need to understand why my display is not going as I wanted.
I did some research online and found this
http://jsfiddle.net/gajjuthechamp/cbEDJ/1/
It is working and I got the display that I wanted but for some reason the first column is shrinking. I tried changing the row width to 50% unfortunately it is doing the same thing. Kindly see image and my code below.
CSS Display Table Row Side by Side
<style>
table {
width: 100%;
}
table tr {
display: inline
}
table tr:nth-child(odd) {
position: relative;
}
table tr:nth-child(odd) td {
position: absolute;
top: 100%;
left: 0;
}
table tr:nth-child(even) {
display: block;
width: 50%;
margin-left: 50%;
}
</style>
I also tried changing the values from top, left, margin-left, and width but first still shrinks. Could no wrap also cause this issue? Any info or suggestion is highly appreciated.
#EdCottrell
I finally got it working thanks a lot for the advised. I use div and it automatically work as I wanted it to be.
CSS for div
<style>
body {
margin: 0;
}
div#card:nth-child(odd) {
width: 50%;
background: lightblue;
display: inline-block;
}
div#card:nth-child(even) {
width: 50%;
background: orange;
display: inline-block;
float: left;
}
.parent {
font-size: 0;
margin: 0;
}
.font {
font-size: 16px;
}
</style>
HTML for div
<div id="card">
<center><b>EMPLOYEE INFORMATION CARD</b></center>
<br><b>Name: <?php echo $row ['EMPLOYEE_NAME']; ?></b>
<br><b>Address:</b> <?php echo $row ['EMPLOYEE_ADDRESS']; ?>
<br><b>Date of Birth:</b> <?php echo $row ['BIRTHDATE']; ?>
<br><b>Polling Place:</b> <?php echo $row ['POLLING_PLACE']; ?>
<br><b>Precint No:</b> <?php echo $row ['PRECINT_NUMBER']; ?>
<br><b>Cluster No:</b> <?php echo $row ['CLUSTER_NUMBER']; ?>
</div>
I have this code to show my images from a folder, but the problem is that it shows the images vertically (there are 9000 images) so the scrolling is ending.
I would like to know if it's possible to make the images horizontally?
The code I use:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Show images in folder</title>
<style type="text/css">
body {
margin: 0 auto 20px;
padding: 0;
background: #acacac;
text-align: center;
}
td {
padding: 0 0 50px;
text-align: center;
font: 9px sans-serif;
}
table {
width: 100%;
}
img {
display: block;
margin: 20px auto 10px;
max-width: 900px;
outline: none;
}
img:active {
max-width: 100%;
}
a:focus {
outline: none;
}
</style>
</head>
<body>
<?php
$folder = 'album1584/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$count = count($files);
$sortedArray = array();
for ($i=0; $i<count($files); $i++) {
$sortedArray[date ('YmdHis', filemtime($files[$i]))] = $files[$i];
}
krsort($sortedArray);
echo '<table>';
foreach ($sortedArray as &$filename) {
#echo '<br>' . $filename;
echo '<tr><td>';
echo '<a name="'.$filename.'" href="#'.$filename.'"><img src="'.$filename.'" /></a>';
echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder));
echo '</td></tr>';
}
echo '</table>';
?>
</body>
</html>
Images are listed vertically because they are contained in individual rows of the table. Also, in your CSS you set them to display as a block.
Remove display: block for images and don't put them in a table.
Also, don't display 9000 images at once. Use pagination.
try changing display: block; to display: inline-block; by styles for img tag.
EDIT:
Ok i think I know where the problem may be. You put each image in a separate table row so try to put more in one row or do not use table for that but simple container with the css change I gave you.
here's my website http://www.saraandcompany.ca/
I would like the navigation under the image to also be centred.
I've tried all sorts of ways of doing it but I have no idea how.
here's the header.php file.
<center><img src="http://www.saraandcompany.ca/wp-content/uploads/2014/03/weblogo.png" style="PADDING-BOTTOM:15px"></center>
<h1 id="main-title"><?php bloginfo('name'); ?></h1>
<nav>
<?php $args = array(
'show_home' => Work,
'sort_column' => 'menu_order, post_title'
); ?>
<?php wp_page_menu( $args ); ?>
</nav>
<div class="clearfix"></div>
</header>
thank you so much in advance.
You need to change a few lines in the CSS:
nav {
float: right; /* Remove */
}
.menu {
display: inline-block; /* Keep */
margin-left: 20px; /* Remove */
}
nav li {
display: inline;
margin-left: 20px; /* Remove */
margin: 0 10px; /* Add */
}