CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Todd
Todd

Reputation: 1

how to make text move below the JQuery slide

I am making a JQuery toggle/slide type menu and would like the text below to move when the JQuery slides down.

As I am new to this, my code will probably be messy. I apologise for this in advance, but it is almost working the way I need it to.

please see the code in action here

Upvotes: 0

Views: 399

Answers (4)

ffffff01
ffffff01

Reputation: 5238

Add a around you content underneath the menus.

Then add a class to the div with the following css:

clear: both;

edit: exactly, after the #sliderright div and before starting the Criminal Charges element, put a 

<div style="clear:both;"></div>

Upvotes: 0

keeg
keeg

Reputation: 3978

You have issues with closing the <ul> element, you reopen it:

This: 

<ul>
    <li>Possession or use of Firearm without Licence Permit</li>
    <li>Unregistered Firearm</li>
    <li>Not keep Firearm Safe</li>
    <li>Discharge Firearm</li>
<ul>

Should be:

<ul>
    <li>Possession or use of Firearm without Licence Permit</li>
    <li>Unregistered Firearm</li>
    <li>Not keep Firearm Safe</li>
    <li>Discharge Firearm</li>
</ul>

Then clear the div floats:

Here is a working example.

Upvotes: 0

Brian O&#39;Neill
Brian O&#39;Neill

Reputation: 5185

That's happening because you're floating the two sliders, taking them out of the normal document flow. You could do this to the content below it: 

<article>
    <h2>Lorem Ipsum</h2>
    <h3>Vestibulum tortor quam</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.  </p>
</article>

And then prevent it from allowing floats around it with CSS: 

article{
    clear: both;
}

Upvotes: 0

Bruno
Bruno

Reputation: 5822

Just place the text in its own div

<div id="textId">
    <!-- text elements here -->
</div>

Then use the following css

#textId {
    float: left;
    position: relative; 
    clear: both;
}

Upvotes: 1

Related Questions