Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rotating Banner is awkwardly spaced! please help :)

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #161067
    spacemonkey1112
    Participant

    on my website (www.stewartuy.com) you will see a rotating banner & huge amount of space between it and my logo on the left sidebar. I am not 100% sure how to fix the .css but this is what I found on the wordpress template.

    /*
    anythingSlider v1.2

    By Chris Coyier: https://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    

    */

    .anythingSlider { width: 740px; height: 200px; Position: relative; padding-bottom: 20px; margin-left: 230px; }
    .anythingSlider .wrapper { width: 740px; overflow: auto; height: 200px; margin: 0px; position: relative; top: 0; left: 0; margin-left: 230px; }

                                       /* Width below is max for Opera */
    

    .anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; margin: 0; margin-left: 230px; }
    .anythingSlider ul li { display: block; float: left; padding: 0; height: 320px; width: 1000px; margin: 0; position: relative; left: -40px; margin-left: 230px; }

    What must I change in order for me to align the rotating banner with my wide column content? Thanks!

    #161070
    Paulie_D
    Moderator

    Link or working Codepen please.

    #161071
    Gary Pickles
    Participant

    spacemonkey1112, just had a look, Looks fine to me, on PC running Chrome.
    What i would say is, that it took a long time for the page to load with the amount of images, could do with looking at some way of speeding this up.

    #161073
    Paulie_D
    Moderator

    Just found the link (was that there earlier?).

    just had a look, Looks fine to me, on PC running Chrome.

    Ditto.

    Is this an issue in a specific browser?

    Some of the HTML seems little “funky”…you have lots of things in <p> tags where I would expect to see divs but “if it works, it works!”

    That said, your main page is waaaaay long, I scrolled down for a really long time.

    You really should look to move all those extra posts to a separate section.

    #161264
    spacemonkey1112
    Participant

    Thank you everyone for your reply, I spent a few hours on this & some how I found this when playing around with inspecting the elements through my chrome browser.

    .anythingSlider { width: 740px; height: 200px; Position: relative; padding-bottom: 20px; margin-left: 230px; }

    .anythingSlider .wrapper { width: 740px; overflow: auto; height: 200px; margin: 0; position: absolute; top: 0; left: 0; }

    .anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; margin: 0; }

    .anythingSlider ul li { display: block; float: left; padding: 0; height: 320px; width: 1000px; margin: 0; position: relative; left: -40px;

    I’ve cut and pasted this into my CSS editor in wordpress. According to wordpress, anything that I put in this editor will override whatever is currently written the css of the wordpress theme.

    If I remove this coding, the banner will move back over to the right side and the gap will reappear.

    As for the scroll fatigue, thank you for the feedback. Do you suggest I allow the page to load 1 or 2 blog post per page? (currently it is loading 3).

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.