I am trying to set the width of some data from a database, so that all data is the same lenght.
I am using (for a test), the following CSS:
style='width: 200px; border: 1px solid black;'
This is within a bold tag, again just for testing.
The result is not what I want.
The bottom text uses the following css:
.pwidth {
width: 200px;
border: 1px solid black;
}
I want the data after PID: to look like the demo ex show.
What am I missing?
<body>
<section>
<div class="jumbotron">
<h1 class="text-center">Index Of Records</h1>
<h2 class="text-center">Add New Record <a href='insert_record.php'>(x)</a><h2>
</div>
<div class="container">
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div><strong>PID:</strong>";
echo "<b style='width: 200px; border: 1px solid black;'>". $row["pid"]. "</span></b>";
}
} else {
echo "No records to view.";
}
$con->close();
?>
<p class="pwidth">demo ex show<p>
</div><!-- container end -->
</section>
Try This One
<section>
<div class="jumbotron">
<h1 class="text-center">Index Of Records</h1>
<h2 class="text-center">Add New Record <a href='insert_record.php'>(x)</a>
<h2>
</div>
<div class="container">
<?php
if ($result->num_rows > 0) {
// output data of each row
while ($row = $result->fetch_assoc()) {
echo "<div><strong>PID:</strong>";
echo "<p style='width: 200px; border: 1px solid black;'>" . $row["pid"] . "</span></p>";
}
} else {
echo "No records to view.";
}
$con->close();
?>
<p class="pwidth">demo ex show</p>
</div>
<!-- container end -->
</section>
What kind of an element is your "pwidth"? You may use an HTML-Block-Element to set a width.
So maybe <p>, <div> or something else.
a <b> tag is not block or inline-block element so it can't have width/padding/margin values.
You can add trigger those bold tags with Class in CSS and make them display: block;
Related
I am getting HTML from an external source and can't change the code, so in order to get the result we need I need to conditionally hide things.
In this example, where I have a level-0 and level-1 I need to set display:none on the h2 (finance in this case).
<section class="level-0">
<h2 id="4001567002">Finance</h2>
<section class="child level-1">
<h2 id="4008036002">Fusion</h2>
<div class="opening" department_id="4001567002,4008036002" office_id="4000758002" data-office-4000758002="true" data-department-4001567002="true" data-department-4008036002="true">
<a data-mapped="true" target="_top" href="google.com">Business Systems Executive</a>
<br>
<span class="location">Sydney</span>
</div>
</section>
It could be that there is no level-1 in which case the level-0 header should be visible:
<section class="level-0">
<h2 id="4008036002">Fusion</h2>
<div class="opening" department_id="4001567002,4008036002" office_id="4000758002" data-office-4000758002="true" data-department-4001567002="true" data-department-4008036002="true">
<a data-mapped="true" target="_top" href="google.com">Business Systems Executive</a>
<br>
<span class="location">Sydney</span>
</div>
The ids are not predictable, so I cannot hide the levels based on that.
Is this possible in pure CSS or should I come up with another solution?
I was not able to do what you want with Pure CSS, and I don't think it is possible as you cannot add conditional statements within CSS.
Please find below a solution with a little bit of jquery:
var count = $(".level-0").length +1;
for (i = 1; i < count; i++) {
if ($(".level-1").parents('.container > .level-0:nth-of-type(' + i + ')').length == 1) {
$( '.level-0:nth-of-type(' + i + ')').addClass( "has-lv1" );
} else {
$( '.level-0:nth-of-type(' + i + ')').addClass( "no-lv1" );
}
}
.container {
border: solid 1px black;
padding: 20px;
background-color: lightblue;
}
.container > h2{
color: green;
}
.has-lv1 > h2 {
display: none;
}
.no-lv1 > h2 {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Example with <strong>Level 1</strong></h2>
<section class="level-0">
<h2 id="4001567002">Finance</h2>
<section class="child level-1">
<h2 id="4008036002">Fusion</h2>
<div class="opening" department_id="4001567002,4008036002" office_id="4000758002" data-office-4000758002="true" data-department-4001567002="true" data-department-4008036002="true">
<a data-mapped="true" target="_top" href="google.com">Business Systems Executive</a>
<br>
<span class="location">Sydney</span>
</div>
</section>
</section>
<hr>
<h2>Example without <strong>Level 1</strong></h2>
<section class="level-0">
<h2 id="4001567002">Finance</h2>
</section>
</div>
I hope this helps
On this screenshot, if you look in the North East corner, you'll find a 20% of the Ajax Load More button.
I have called it using the do_shortcode method in my template file right after I closed the loop to fetch the posts of this category.
<?php if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
$my_query = new WP_Query('cat=2,3&showposts=9');
while ( $my_query->have_posts() ) : $my_query->the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
<?php echo do_shortcode('[ajax_load_more container_type="div" post_type="post" offset="9" images_loaded="true"]'); ?>
How would I go about placing it in a new line?
Live demonstration at -> http://www.technobyte.org/interesting-facts/
Here is how I would mark something like that up. https://jsfiddle.net/sheriffderek/wcoyc0hf
I see that you are using PHP - but the same idea applies since PHP creates HTML.
"Put a border around it" - is the magic way to see that your floating and other styles are breaking the flow of things - and need to be addressed with clearfixes - in the case of floats / or generally just make sure things maintain their shape and that the parents of lists are expanding to hold them properly.
markup
<section class='stuff'>
<ul class='thing-list'>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
</ul>
<div class='get-more'>
<button>more...</button>
</div>
</section>
styles
ul {
list-style: none;
margin: 0;
padding: 0;
}
.image-wrapper img {
display: block;
width: 100%;
height: auto;
}
.thing .link {
display: block; /* link needs to be a block here to have shape */
border: 1px solid red;
}
.thing-list {
overflow: hidden; /* should be a clearfix or use flexbox */
}
.thing-list .thing {
float: left;
max-width: 33%;
}
.get-more {
border: 1px solid blue;
text-align: center;
}
.get-more button {
display: inline-block;
}
I'm making a grid view that looks like this:
http://i.stack.imgur.com/41xxM.png
So in this picture you see, it's always two containers per row, but the float-direction of the inner elements (image/content) changes per row, so I'd need to select the items in one row (Variable: X), skip X items and the select the next X items and so on...
I know it should be possible somehow with nth:children, but I just couldn't get it to work... One helpful ressource was this link I found, but even with this, I couldn't get it done... http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/
I'd really appreciate your help! And if you happen to have a sass-mixin for this, it would be awesome!
Thank you!
EDIT:
That's the HTML of one container:
<article id="post-<?php the_ID(); ?>" <?php post_class('post-object'); ?>>
<div class="post-object-inner">
<div class="object-content">
<a href="<?php echo the_permalink(); ?>">
<div class="half">
<div class="object-content image-part" style="background-image: url(<?php echo $postimage; ?>)"><?php echo $author; ?></div>
</div>
<div class="half">
<div class="object-content content-part">
<span>
<h2><?php echo $author; ?></h2>
<h1><?php echo $trimmed_title; ?></h1>
</span>
</div>
</div>
</a>
</div>
</div>
EDIT 2:
Here's the generated code from the DOM:
<article id="post-28" class="post-object post-28 post type-post status-publish format-standard has-post-thumbnail hentry category-allgemein">
<div class="post-object-inner">
<div class="object-content">
<a href="http://domain.com/die-neue-website-geht-online/">
<div class="half">
<div class="object-content image-part" style="background-image: url(http://domain.com/uploads/2015/07/mittag.jpg)">Lukas Guschlbauer</div>
</div>
<div class="half">
<div class="object-content content-part">
<span>
<h2>Lukas Guschlbauer</h2>
<h1>Die neue Website geht online!</h1>
</span>
</div>
</div>
</a>
</div>
</div>
Okay, I was able to write a Sass-Mixin that handles this behaviour for me!
#mixin nth-rows($rowitems: 3, $totalitems: 10) {
$num: 0;
$totalitems: $totalitems + 1;
#while $num <= $totalitems {
&:nth-of-type(n+#{$num + 1}):nth-of-type(-n+#{$num+$rowitems}) {
#content;
}
$num: $num + ($rowitems*2);
}
}
How I used it:
.post-object {
position: relative;
width: 100%;
float: left;
#include xs() {
#include nth-rows(1,10) {
.half {
float: left;
}
}
}
#include sm($md) {
width: 50%;
#include nth-rows(2,10) {
.half {
float: left;
}
}
}
#include md() {
width: 33.3%;
#include nth-rows(3,10) {
.half {
float: left;
}
}
}
(The xs(), sm() and md() are breakpoint mixins I defined)
What it does:
It selects the first X items (rowitems), skips a row and loops up until a given number of elements (totalitems).
The variable totalitems is the only thing that's not perfect now, because I don't know how many elements there are, so I have to give it a fixed value... But if I know there's gonna be 10 elements, this is great!
Ressources:
I found this website (http://nthmaster.com), where there's an example of so-called "generic child ranges", which look like this:
li:nth-child(n+4):nth-child(-n+8) span {
background-color: #298EB2;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
"Using this nth-child(n+4):nth-child(-n+8) we can select elements
within certain ranges, in this case elements 4-8." (this is the
example from the website)
Why did I use nth-of-type() and not nth-child() ?
Safari didn't interpret the "generic child ranges". So in this Stackoverflow-Thread (https://stackoverflow.com/a/17312173/3754201) I found out that ":nth-of-type()" has better support. (Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.)
<div class="pagination">
<?php if($page->hasPrevVisible()): ?>
<span class="prev">
<em>Previous Article</em>
<?php echo $page->prevVisible()->title() ?>
</span>
<?php endif ?>
<?php if($page->hasNextVisible()): ?>
<span class="next">
<em>Next Article</em>
<?php echo $page->nextVisible()->title() ?>
</span>
<?php endif ?>
</div>
This is what stands in my article view, basically. There's the main div, which won't matter for this case and two spans within. When there's no next our previous article, the option doesn't show up. Now to the CSS:
.pagination em {
font-family: Arvo;
font-size: .8em;
font-style: normal;
text-transform: uppercase;
display: block;
color: #838383;
}
.prev {
width: 49%;
display: inline-block;
}
.next {
width: 49%;
text-align: right;
float: right;
}
I've included the .pagination em because it is really important for me to keep that display:block there to drop a line. I can't make .next align with .prev without using float, it goes one line down. So maybe the issue is in the em, but I don't know for sure.
If there is a previous and a next article, it works like a charm. If there is only a previous article it also stands perfectly, however, if there's solely a next article, .next won't align properly.
For a practical example, please take a look at the bottom of this page.
Your problem is that your .pagination class is not clearing with only one floated div in it.
If you simply add overflow: auto; to the .pagination class in your CSS, it should fix the problem.
.pagination {
padding: 1.25em 0px;
font-size: 0.8em;
line-height: 1.2em;
border-bottom: 0.07143em solid rgb(55, 185, 81);
font-family: "Elena Web",Georgia;
overflow: auto;
}
Example: http://cssdesk.com/q2h4U
Hope this helps, and good luck!
float will float the element out of parent's "inner" dimension, which means its size will not be considered when calculating parent's size.
You can use display:inline-block on both sides, and use a dummy span when only one side is present:
http://jsfiddle.net/WR6cy/
<!-- when both sides present -->
<div class="pagination">
<span class="prev">
<em>Previous Article</em>
Previous Title
</span>
<span class="next">
<em>Next Article</em>
Next Title
</span>
</div>
<!-- when only prev side presents -->
<div class="pagination">
<span class="prev">
<em>Previous Article</em>
Previous Title
</span>
</div>
<!-- when only next side presents, use a dummy prev side to "push" the next -->
<div class="pagination">
<span class="prev">
</span>
<span class="next">
<em>Next Article</em>
Next Title
</span>
</div>
.prev {
width: 49%;
display: inline-block;
}
.next {
width: 49%;
text-align: right;
/* float: right;*/
display:inline-block;
}
Edit:
To achieve this with your current PHP, you can slightly modify it to:
<div class="pagination">
<span class="prev">
<?php if($page->hasPrevVisible()): ?>
<em>Previous Article</em>
<?php echo $page->prevVisible()->title() ?>
<?php endif ?>
</span>
<span class="next">
<?php if($page->hasNextVisible()): ?>
<em>Next Article</em>
<?php echo $page->nextVisible()->title() ?>
<?php endif ?>
</span>
</div>
I really dont know what to do.
I made a really simple guestbook, its ok and all, but when showing the comments
the text spills out from the div
I was trying with pre but didnt work
here is the css
.guestbook_content {
width: 100%;
height: 100%;
background: #FFE4E1;
padding: 5px;
font-size: 12px;
margin-bottom: 10px;
}
#box {
width: 628px;
height: 438px;
background: #fefefd ;
overflow-y: scroll;
overflow-x: hidden;
}
the html and php
<div id='box'>
<div id='box_title'></div>
<div id="box_text">
<?php
if(isset($_POST['mehet'])) {
$message= '';
$the_name= mysql_real_escape_string(strip_tags($_POST['nev']));
$comment = mysql_real_escape_string(strip_tags($_POST['comment']));
$date = date('Y.m.d H:i:s');
if(!empty($comment) && !empty($the_name)) {
//mysql_query("INSERT INTO vendeg (name, comment, date) VALUES ('$the_name', $comment', '$date')") or die(mysql_error());
mysql_query(" INSERT INTO guesstb(the_name, comment, date) VALUES ('$the_name', '$comment', '$date') ");
}else {
$message= '<b><font color="darkred">Pleasse fill out all inputs</b></font>';
}
}
?>
<?php echo $message; ?>
<form action='<?php echo the_permalink();?>' method='POST'>
<label for='nev' class='gbl'>Name:</label>
<input type='text' name='the_name' id='the_name' class='gbi'>
<label for='comm' class='gbl'>Comment:</label>
<textarea name='comment' id='comm' rows='5' cols='60' class='gbt'></textarea>
<input type='submit' class='submit' value='Beküld' name='mehet'>
</form>
<?php
$result = mysql_query("SELECT * FROM guesstbORDER BY date DESC");
while($row = mysql_fetch_array($result))
{
?><div class='guestbook_head'><span>sent by:</span> <b><?php echo $row['nev']; ?></b> <span> - date:</span> <?php echo $row['date']; ?> </div><?
?>
<div class='guestbook_content'><?echo $row['comment'];?></div>
<?
}
?>
could please someone could give me hint
.guestbook_content {
width: 100%; <-- drop this rule
height: 100%;
padding: 5px;
}
#box {
width: 628px;
}
You gave child div width: 100% + padding 5px, which makes = 100% of parent div :628px + 5px left padding + 5px right padding so child div is 638px wide. Just drop 100% width on child. All you need is padding.
Here is jsfiddle with your situation: http://jsfiddle.net/crg2U/2/
And here is with droped 100% width on child : http://jsfiddle.net/crg2U/3/