Skip navigation
thefortunecookieguy
Currently Being Moderated

moving divs around

Mar 21, 2013 2:12 PM

my site is coloredfortunecookies.com

 

to the right hand side there is quickorderguide div. i would like to move this div down a bit and fit another div above it. by doing this, at the bottom of the page i am wanting the quick order guide wrapper to be in line with the specials i have at the bottom of the page, so it is basically lined up for my footer.

 

the question i have is when i add a div to fill this space and align it to the right it just moves the quick order guide to the middle, i want this div to be on top of the quicker order guide wrapper div.  how do i do this?

 

instead of emailing me code can you explain how this would be done using dw?

 
Replies
  • Currently Being Moderated
    Mar 21, 2013 2:28 PM   in reply to thefortunecookieguy

    Switch to Code View.  Design View is not 100% reliable and should not be trusted.  Being able to work with code is an essential skill in DW. 

     

    On line 15 you have this:

    <div id="quickordertrad">

     

    add this below it.

            <p>INSERT YOUR TEXT OR DIVISIONS HERE...</p>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 2:32 PM   in reply to Nancy O.

    Correction, that code and the insertion belongs on line 23 & 24 in code view.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 2:41 PM   in reply to thefortunecookieguy

    If you put it any higher than this div

    <div id="quickorderguidewrapper">

     

    It won't be in your 3rd-column.  Work with the structure you have.  Don't over complicate things.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 2:59 PM   in reply to thefortunecookieguy
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 3:14 PM   in reply to thefortunecookieguy

    Download the Cycle Plugin from malsup.

    If you want to use the CSS code in my example, add it to your own external style sheet.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 4:06 PM   in reply to thefortunecookieguy

    In DW, go to File > New > JavaScript page.

    Copy & Paste the Cycle code into your new .js page.  Save it as jQuery-cycle-all.js in your Scripts folder.

     

    Add a link in the top of your HTML document to the newly created .js file.

    Insert > Script > Script > browse to the folder & file location.  Hit OK.

     

    It should look something like this:

     

    <!--jQuery Cycle-->

    <script type="text/javascript" src="Scripts/jQuery-cycle-all.js"></script>

     

    Also add a link to the jQuery core library like this:

     

    <!--jQuery latest core library from CDN-->

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

    </script>

     

    Next, add this to the <body> of your page where you want the slideshow to appear.

     

    <!--begin slideshow-->

    <div id="slideshow">

    <div>

    <h3>This is slide one</h3>

    <p> &#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis.&#8221;
    </p> </div>


    <div>

    <h3>This is slide two</h3>

    <p> &#8220;Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. &#8221; </p> </div>


    <div>

    <h3>This is slide three</h3>

    <p>&#8220;Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.&#8221;</p> </div>


    <div>

    <h3>This is slide four</h3>

    <p>&#8220;Vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. &#8221;</p> </div>


    <!--end slideshow--></div>

     

    Finally, add this function code just before the closing </body> tag.

     

    <!--Cycle Function Code-->

    <script type="text/javascript">

    $(document).ready(function() {
        $('#slideshow').cycle({
         fx: 'fade',
    speed: 500 //speed in miliseconds
       });
    });
    </script>

     

     

    Save and preview in browsers.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 4:29 PM   in reply to thefortunecookieguy

    What's the URL?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 4:36 PM   in reply to thefortunecookieguy

    Nevermind.  I see it. 

     

    Problem #1 You pasted slideshow div code into Design View.  You must not do that!  Use Code View.

     

    Problem #2 you have no link to the jQuery core library.  Plugins can't run without it.

     

    <!--jQuery latest core library from CDN-->

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

    </script>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 5:27 PM   in reply to thefortunecookieguy

    You have a stray <br/> tag in your head section.

    In code view Line 6, replace this:

     

    <link href="!-css-styles-tankinznew1.css" rel="stylesheet" type="text/css" /><br />

     

    with this:

     

    <link href="!-css-styles-tankinznew1.css" rel="stylesheet" type="text/css" />

     

     

    On Line 23 in code view, replace this:

     

    <div id="testimonialnew">Content for  id "testimonialnew" Goes Here</div>

     

    with this:

     

    <div id="slideshow">

    <div>Content for slideshow1 Goes Here</div>

    <div>Content for slideshow2 Goes Here</div>

    <div>Content for slideshow3 Goes Here</div>

    <div>Content for slideshow4 Goes Here</div>

    <!--end slideshow-->

    </div>

     

     

    Nancy O.


     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 21, 2013 11:12 PM   in reply to thefortunecookieguy

    Add this to your CSS:

     

    #slideshow{

    min-height: 165px;

    }

     

    This will make the minimum height of your slideshow DIV to be at 165px. This will also align the quickorderguidewrapper div in line with the main content on left at the bottom perfectly.

     

    Do take note that if your content within Slideshow div exceeds 165px, the min-height tag will let your DIV resize its height automatically. But the reason that tag is there to define a bearest minimum height - irrespective if there is that much content or not.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 22, 2013 11:10 AM   in reply to thefortunecookieguy

    You should add <img> tags with the image you want to cycle within the slideshow div, not individual divs itself.

     

    Here's a very basic implementation that you could look at: http://www.malsup.com/jquery/cycle/basic.html

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 11:30 AM   in reply to thefortunecookieguy

    Ignore Sudarshan's advice about <img> tags because you're not making an image slideshow.  You're making a text slideshow.  Text will be your testimonial phrases.

     

    Also validate your code.  You still have some errors that need fixing.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcoloredfortun ecookies.com%2F

     

    Bookmark this link:

    http://validator.w3.org/

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 11:46 AM   in reply to thefortunecookieguy

    That's the difference between tag syntax in XHTML and HTML. It's not a significant difference. You can eliminate it by using DW's File > Convert, and selecting a doctype.  If you are doing any hand coding at all, you should choose a doctype that is consistent with your coding ability. If you have no idea, just choose HTML5.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 22, 2013 11:47 AM   in reply to Nancy O.

    My bad. Didn't see that you were going to use this for testimonials.

     

    Re-order your script tags in <head> section:

     

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript" src="scripts/jQuery-cycle-all.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

        $('#slideshow').cycle({

         fx: 'fade',

    speed: 500 //speed in miliseconds

       });

    });

    </script>

     

    Notice I've moved the script that you currently have at the very end, to the top. Try this and preview your file.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 11:59 AM   in reply to thefortunecookieguy

    With CSS.

     

    #slideshow {

    font-size: 125%;
    color: #555;
    font-style: oblique;
    }
    #slideshow h3 {
    color: #639;
    font-size: 135%;
    margin-top: 0;
    }
    #slideshow div {
    text-align: center;
    padding: 20px;
    margin: 0;
    width: 400px;
    min-height: 165px;
    border: 1px solid silver;
    }

    /**alternate background-colors**/
    #slideshow div:nth-child(even) { background-color: #CCE6FF; }
    #slideshow div:nth-child(odd) { background-color: #CAFF95; }

     

     

    Nancy O.


     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 12:02 PM   in reply to thefortunecookieguy

    Sure. It'll work fine.

    thefortunecookieguy wrote:

     

    so switch to HTML5?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 12:44 PM   in reply to thefortunecookieguy

    Use the exact same set-up on other pages.  The only difference would be your testimonial text or images if you like.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 12:53 PM   in reply to thefortunecookieguy

    On other pages you need everything.  Unless you're using a DW Template or Server-side Includes that populate that info to other pages automatically.

     

    If used on the same page, change #slideshow ID to .slideshow class which is re-usable.  IDs can be used only one time per page.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points