The code below is not applying the CSS rule clearfix: after I have never used a CSS rule with a colon in the middle so I don't know why it is not working, any help.
I have the following code in my SCSS file
.clearfix { zoom: 1;}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
and the following is my html:
<div id="sidebar1" class="sidebar fourcol first clearfix:after" role="complementary">
<?php if ( is_active_sidebar( 'sidebar1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar1' ); ?>
<?php else : ?>
<!-- This content shows up if there are no widgets defined in the backend. -->
<div class="alert help">
<p><?php _e("Please activate some Widgets.", "bonestheme"); ?></p>
</div>
<?php endif; ?>
</div>
Remove :after from the class attribute in your HTML:
<div id="sidebar1" class="sidebar fourcol first clearfix" role="complementary">
P.S. Your SCSS is OK, but here's a more convenient way of accomplishing the same thing:
.clearfix {
zoom: 1;
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
Related
I have implemented some collapsible block of text with CSS line-clamp and it is working just fine, except for one simple detail that is actually bugging me as I can't come up with a solution.
Right now, I have this:
HTML
<div class="description-row">
<article>
<?php
$features = $property->get_features();
if (!empty($features)) : ?>
<p class="text-collapse"><?php the_excerpt(); ?></p>
<?php else : ?>
<p class="text-collapse no-features"><?php the_excerpt(); ?></p>
<?php endif; ?>
</article>
See full description
</div>
SCSS (SASS)
.text-collapse {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
position: relative;
line-height: 1.69;
letter-spacing: 0.32px;
&.no-features {
-webkit-line-clamp: 16;
}
&.active {
-webkit-line-clamp: unset;
}
}
.see-full-desc-btn {
&:after {
padding-left: 1rem;
content: url('/chevron-down-solid.svg');
}
&.open:after {
content: "";
padding-left: 0;
}
#include respond(tab-port) {
margin-bottom: 2.5rem;
}
}
jQuery
jQuery(document).ready(function ($) {
$(".see-full-desc-btn").click(function () {
$(".text-collapse").toggleClass("active");
$(".see-full-desc-btn").toggleClass("open");
if ($(".see-full-desc-btn").hasClass("open")) {
$(".see-full-desc-btn").html("Close Description");
} else {
$(".see-full-desc-btn").html("See full description");
}
});
});
Basically I get this block of text, then the code will clamp the lines depending on the size of the text and it will show a button that opens / closes that text block.
The thing is that when the text is big (specially on mobile) you scroll down to read, and when you click the close button, you are left in the worng scroll position.
What I need is to somehow automatically scroll back to the initial position once the "Close" button is clicked.
Any hints?
Thank you very much!
Regards,
T
So I want to put the two divs next to each other and the one below in the code gets put into the one above and I have no idea why.
HTML:
<body>
<div id="links">
<h1 id="title">Webcam</h1>
<?php
$dateinamen = 'pictures/Live.jpg';
$timestamp = filemtime($dateinamen);
$time = time();
$diff = $time -$timestamp;
// Wenn Bild jünger als 10sec
if ($diff < 10){
echo "<img src='pictures/Live.jpg'";
}
else {
echo "<img src='pictures/oops.jpg'";
}
?>
</div>
<div id="rechts">
<h2>Ping</h2>
<?php
$host1="192.168.1.1";
exec("ping -c 1 -w 1 " . $host1, $output1, $result1);
if ($result1 == 0) {
echo "<h3 id='sw1'style='background-color: green';>Router</h3></br>";
}else {
echo "<h3 id='sw1'style='background-color: red';>Router</h3></br>";
}
?>
</div>
</body>
CSS:
#links{
float: left;
width: 50%;
}
#rechts{
float: right;
width: 50%;
margin-top: 7%;
}
Haven't found any cases like these so I don't know if it's a problem with xampp or something else.
EDIT
Photo in inspection mode in Google Chrome
You didn't close the img tag used in the PHP code.
use <img src='pictures/Live.jpg'>
Try to check by removing margin-top:7%; form this class
#rechts {
float: right;
width: 50%;
// margin-top: 7%; remove this line
}
Try using flexbox instead.
#container {
display: flex;
}
#links{
flex: 1;
background-color: blue;
height: 500px;
}
#rechts{
flex: 1;
background-color: red;
height: 500px;
}
<body>
<div id="container">
<div id="links">
<h1 id="title">Webcam</h1>
</div>
<div id="rechts">
<h2>Ping</h2>
</div>
</div>
</body>
Seems like I just got trolled...
I just switched the two divs around (using the Flexbox solution proposed by Michał Drabik) and it worked...
For example, my CSS looks like this:
.page-number:after { counter-increment: page; }
When show as content, for example 6 pages:
.page-number:after {
content: 'Page ' counter(page) ' of';
}
I want to store the last counter -which is 6 - and print it out after each item. Is that possible to do that?
ul {
list-style: none;
counter-reset: page;
padding: 0;
}
.page-number {
counter-increment: page;
}
.page-number:before {
content: 'Page ' counter(page) ' of'
}
<p>I want to use counters to print '6' after each item. eg. page 1 of 6 </p>
<ul>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
</ul>
My .page-number is with position fixed, which will be display for all of the pages printed.
updated:
#media print {
body { margin: 0; }
thead { counter-reset: pages; }
.page-number:before { counter-increment: pages; content: " "; }
.page-number:after { counter-increment: page; }
.page-number:after { content: "Page " counter(page) " of " counter(pages); }
}
https://codepen.io/anon/pen/OQNreQ
I think you want something like this:
body {
counter-reset: page;
}
.page-number:after {
counter-increment: page;
content: counter(page);
visibility: hidden;
}
.page-number:last-child:after {
visibility: visible;
}
<div id="wrap">
<div class="page-number">test</div>
<div class="page-number">test</div>
<div class="page-number">test</div>
<div class="page-number">test</div>
<div class="page-number">test</div>
<div class="page-number">test</div>
</div>
You have to print the counter otherwise it would not increment. So I changed the visibility.
If you want to shown your html as below;
1. Test
2. Test
3. Test
you can do so:
<div class="test">
<h3>List Item</h3>
<h3>List Item</h3>
<h3>List Item</h3>
</div>
.test {
counter-reset: page;
}
.test h3:before {
counter-increment: page;
content: page". ";
}
Here is a proof of concept to show that this can be done with pure CSS:
1) Add one element after the page-list which stores the total amount of pages.
2) Make use of the CSS element() function - Currently a draft in the Images Module Level 4 spec - but supported by firefox since version 4 - to copy it's contents as a background to the other items.
From MDN:
The element() CSS function defines an value generated from an
arbitrary HTML element. This image is live, meaning that if the HTML
element is changed, the CSS properties using the resulting value are
automatically updated.
Demo snippet (View in firefox)
ul {
list-style: none;
counter-reset: page;
}
.page-number {
counter-increment: page;
padding-right: 0.3em;
float: left;
clear: left;
}
.page-number:before {
content: 'Page ' counter(page) ' of'
}
.page-number ~ .page-number {
background:-moz-element(#counterTotal) no-repeat right center;
padding-right: 0.8em;
}
.copy:before {
content: counter(page);
}
<ul>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
<li class="page-number"></li>
</ul>
<span id="counterTotal" class="copy"></span>
NB: I'm posting this answer as a proof of concept to show that theoretically this can actually be done with pure CSS (with the cost of adding one extra element). That being said, I would certainly recommend using a javascript solution here.
Try this
.page-number:after
{
counter-increment: page;
content: counter(page) "/" counter(pages);
}
I've had to build something similar recently.
I found a brute-force solution.
Using SASS:
.page {
counter-increment: page;
#for $i from 1 through 100 {
&:nth-last-child(#{$i})::after,
&:nth-last-child(#{$i}) ~ &::after {
content: "Page " counter(page) " of #{$i}.";
}
}
}
As you can imagine, it outputs quite a lot of CSS:
.page {
counter-increment: page;
}
.page:nth-last-child(1)::after, .page:nth-last-child(1) ~ .page::after {
content: "Page " counter(page) " of 1.";
}
.page:nth-last-child(2)::after, .page:nth-last-child(2) ~ .page::after {
content: "Page " counter(page) " of 2.";
}
.page:nth-last-child(3)::after, .page:nth-last-child(3) ~ .page::after {
content: "Page " counter(page) " of 3.";
}
/* etc… */
You can work with "CSS Counters"
For example
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>
Source
https://www.w3schools.com/css/css_counters.asp
I am using PHP to loop through an array and return results, each result is being displayed along with some html code. Right now, to achieve the indent I am using a DIV tag and setting the margin like so:
For output 1:
<div style='height: 20px;margin-left: 60px;'>
For output 2:
<div style='height: 20px;margin-left: 110px;'>
The issue with this method of setting the margin for each output is it relies on the criteria to always match but sometimes the criteria doesnt match and the indentation is ruined.
So basically is there another way using CSS or some other way to increase the indent for each output rather than having to specify a fixed one ?
Apologies if I am not being clear enough but hoping you can understand what I am asking, otherwise let me know and I will try clarify some more.
Here is a sample code:
foreach ($data[0] as $data) {
if ($data == a) {
echo "<div style='margin-left: 0px; '><img src='img/server_s.png' style='float: left;'></div>";
} elseif ($data == b) {
echo "<div style='margin-left: 60px;'><img src='img/link.png' style='clear: left;'></div>";
} elseif ($data == c) {
echo "<div style='margin-left: 110px;'><img src='img/link.png' style='clear: left;'></div>";
}
}
You can achieve it through simple list tags of HTML.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul li {
list-style: none;
margin: 15px 0px;
}
span {
border: 1px solid #000;
padding: 5px;
}
</style>
</head>
<body>
<h2>A Nested List</h2>
<ul>
<li><span>Milk</span>
<ul>
<li><span>Tea</span></li>
<ul>
<li><span>Black Tea</span></li>
</ul>
</ul>
</li>
</ul>
</body>
</html>
Reference URL for sample: http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_lists_nested
Thanks & Regards,
Vivek
hope this work for you
$a=0;
foreach ($data[0] as $data) {
if ($data == a) {
echo "<div style='margin-left: ".$a."px; '><img src='img/server_s.png' style='float: left;'></div>";
} elseif ($data == b) {
echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
} elseif ($data == c) {
echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
}
$a=$a+60;
}
In my custom template file, which i made for youtube videos-creating problem with my sidebar, it is showing the sidebar at bottom, below is the code i am using..
Can anyone help me, it should stick at right, as it..
<?php
/**
Template Name: gallery
*/
get_header();
?>
<style>
/* some basic styling */
h1 {font-size:20px; line-height:95%;}
#galvidcontainer {
width:1100px;
margin-left:50px;
height:1250px;
}
.galvidpre {
width:300px;
height:300px;
float:left;
margin:5px;
background-color:#00A0DA;
}
.galvidprevid {
width:300px;
}
.galvidpretext {
width:280px;
padding-top:2px;
margin-top:2px;
}
</style>
<div id="galvidcontainer">
<h1>Videos</h1>
<?php /* Loop the stuff from the videos post type */
$args = array( 'post_type' => 'videos', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();?>
<div class="galvidpre">
<div class="galvidprevid">
<?php
/* Set variables and create if stament */
$videosite = get_post_meta($post->ID, 'Video Site', single);
$videoid = get_post_meta($post->ID, "Video ID", single);
if ($videosite == vimeo) {
echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
} else if ($videosite == youtube) {
echo '<iframe width="300" height="190" src="http://www.youtube.com/embed/'.$videoid.'" frameborder="0" allowfullscreen></iframe>';
} else {
echo 'Please Select Video Site Via the CMS';
}
?>
</div>
<div class="galvidpretext">
<h1><?php the_title() ?></h1>
<p>
<?php /* this is just a limit on characters displayed */
$words = explode(" ",strip_tags(get_the_content()));
$content = implode(" ",array_splice($words,0,20));
echo $content; ?>
</p>
</div>
</div>
<?php endwhile;?>
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>
The thing happening with the sidebar>>http://i.imgur.com/wm82twJ.png
Looks like you have to clear the floats. Use clearfix or clear:both
<div id="container" class="clearfix"></div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}