This is very weird. I am getting end closing </p> tag after HTML element like <span> or <strong>. No opening tag.
Below is sample HTML code I write in classic editor
<div class="blck>
<div class="col-1">
<strong>Heading 1</strong>
<ul>
<li>list......</li>
<li>list......</li>
</ul>
</div>
<div class="col-1">
<strong>Heading 2</strong>
<ul>
<li>list......</li>
</ul>
</div>
</div>
And this is the output i get
<div class="blck>
<div class="col-1">
<strong>Heading 1</strong></p>
<ul>
<li>list......</li>
<li>list......</li>
</ul>
</div>
<div class="col-1">
<strong>Heading 2</strong></p>
<ul>
<li>list......</li>
</ul>
</div>
</div>
Note the </p> after </strong>
Same thing is happening for <span> element.
One solution is that I remove the WordPress filter wpautop. But then I have to manually add p tags for paragraphs. Which is very cumbersome problem because we I have lots of content to edit.
Any solution for this ?
You can just add a new line in between those html element
For example
<div class="col-1">
<strong>Heading 1</strong>
<ul>
<li>List here</li>
<li>List here</li>
</ul>
</div>
Related
<section class="services-section" id="services">
<video src="services.mp4" autoplay loop muted></video>
<div class="container section-padding services-d-content">
<h3 class="left-liner">Services</h3>
<p>List of my services</p>
<div class="row">
<div class="col-md-6">
<div class="service-content">
<h3 class="bottom-liner">Here is my services</h3>
<div class="row">
<div class="col-md-6">
<ul>
<li>sliders</li>
<li>max 10 section per page</li>
<li>carousels</li>
<li>image gallery</li>
<li>awesome background particles!</li>
<li>Countdown (Realtime server side)</li>
<li>contact form</li>
<li>Pixel Perfect Design</li>
<li>All code is hand coded</li>
<li>W3C Validated</li>
<li>Quickly Converted PSD to Html</li>
<li>Highly Professional code!</li>
<li>Cross-Browser Compatibility</li>
<li>jQuery effects</li>
<li>animated content in On scroll</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>Highly Professional Design</li>
<li>100% Unlimited revisions</li>
<li>Mobile-Friendly websites</li>
<li>E-commerce with various payment methods</li>
<li>Websites for All professions</li>
<li>Secure Websites</li>
<li>Custom Designing(if you say)</li>
<li>User-friendly and attractive layout</li>
<li>Opt in form (MY SQL DATABSE)</li>
<li>Meta description</li>
<li>maps</li>
<li>Free 3Month support</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 ">
<img src="img/services.png" class="img-fluid Services-scale-up" alt="">
</div>
</div>
</div>
</section>
**css
#services:hover > .Services-scale-up{
transform: scale(1.1);
}**
Heading ##i want to scale up the image when #services hover i have
used ~ this sign Also! can anyone tell me how to scale up a image
when i hover the parent section i have tried both ~ and > sign i dont
know more sign to hover parent element
========================================================================
Hi there i am trying to put handsomtable in materialize collapsible divs but they render all completely wrong like so
As you can see the tables are over lapped. But when i click into the tables they fix them self's like so .
Here is where i load the tables
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="global"><i class="material-icons">filter_drama</i>Global What Ifs</div>
<div class="collapsible-body">
{{>GlobalWhatIf}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Vat Details</div>
<div class="collapsible-body">
{{>Vat}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Bank</div>
<div class="collapsible-body">
{{>Bank}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Dividends</div>
<div class="collapsible-body">
{{>Dividends tName="Dividends"}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Corporation Tax</div>
<div class="collapsible-body">
{{>Dividends tName="CorpTax"}}
</div>
</li>
</ul>
I was thinking of loading the table templates within each drop down div and rendering them when the header is active but i can get seem to get that working either any idea why this happens thanks
i'm trying to get my wordpress site to do the animate scroll to id, by using the scroll to id by malihu
I can't get it to work. When i click the link it just jump down to the page.
it´s a one page site..
<div class="wrapper">
<nav>
<ul>
<li><a href="#et" rel='m_PageScroll2id'>Et</a></li>
<li><a href="#to" rel='m_PageScroll2id'>To</a></li>
<li><a href="#tre" rel='m_PageScroll2id'>Tre</a></li>
<li><a href="#fire" rel='m_PageScroll2id'>Fire</a></li>
</ul>
</nav>
<div class="side" id="et">
<h1 id="section-1">Et</h1>
</div>
<div class="side" id="to">
<h1 id="section-2">to</h1>
</div>
<div class="side" id="tre">
<h1 id="section-3">tre</h1>
</div>
<div class="side" id="fire">
<h1 id="section-4">fire</h1>
<h2 id="scrollto">Heading 2</h2>
</div>
If you are ok with an alternate method, take a look at this demo http://codepen.io/mattsince87/pen/exByn.
I have a page developed using twitter bootstrap version 2. I have a row that is divided into span8 and span4. Span8 has some image slider (built with jquery) and span4 has just some links. When the page loads, all the links in the span 4 is displayed first and then when the image loads, the text gets pushed to right. Is there a way to prevent this shift/jump effect?
<div class="row-fluid">
<div class="span8" id="imgDiv">
<!-- Image slider goes here -->
</div>
<div class="span4" id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>
I have devised the following solution. Here's a JSFiddle: http://jsfiddle.net/sJq6y/
HTML
<div class="container">
<div class="row-fluid">
<div class="span8">
<div class="imgDiv">
<h1> Image slider goes here </h1>
</div>
</div>
<div class="span4 linksDiv">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Duo
</li>
</ul>
</div>
</div>
</div>
CSS
.linksDiv ul {
list-style:none;
background-color:lightgrey;
width:90px;
height:90px;
padding:10px;
}
.imgDiv h1 {
text-align:center;
color:tomato;
}
Images
Probably due to styling coming from #imgDiv and #linksDiv.
Would this option work for you?
<div class="row-fluid">
<div class="span8">
<div id="imgDiv">
<!-- Image slider goes here -->
</div> <!-- end #imgDiv -->
</div>
<div class="span4">
<div id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div> <!-- end #linksDiv -->
</div>
</div>
Good luck!
I'm updating the page for my company site. The footer here: applebees.com works correctly, but I ported the code to my WHMCS template and it's positioning the sitemap incorrectly. Any ideas what's going on? http://applebees.com/clients
<footer class="row1">
<div class="container1">
<div class="row1">
<div class="span2">
<h3>Sitemap</h3>
<ul>
<li>Home</li>
<li>Pricing</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Reseller</li>
<li>Dedicated</li>
<li>Support</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Terms Of Service</li>
<li>Privacy Policy</li>
<!--<li>#</li>-->
</ul>
</div>
<div class="span4">
<h3>Contact</h3>
<address>
<strong>applebees, LLC</strong><br>
San Francisco, CA<br>
Los Angeles, CA<br>
sales#applebees.com<br>
</address>
</div>
</div> <!-- /row -->
</div> <!-- /container -->
</footer>
CSS file for above page here: site/clients/templates/default/css/whmcs.css
The index.html page CSS (can't post hyperlinks): site/assets/css/style.min.css
I'm confused because I ported the code correctly, I think the divs are messing it up somehow?
In your case, the "noise" class gives some height of your div in armorshark.com. When you ported the region, you did not get the "noise" classed div. You can solve the with add the height: attribute on row1 class.