SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Slider in right column not working correctly

    From a previous post, I have taken Ralph's suggestion of creating 2 columns for the main area of my new site. Left column holds the logo and the nav and the right column holds the slider and the content.

    I have placed the slider at the top of the right column but the nav below it is all the way at the bottom of the page below the text. I also need about 10 to 20 px at the top as a margin. I am not sure what went wrong. I have tried placing an overflow: hidden, but that didn't work. I do have a set height and width. I don't now if that is messing things up. I am using images from a client's site for my slider just to test it.

    The site is up at http://foxdencreations.com/new_site/index.html.

    It should look similar to the prototype below.

    newsite2013_1.jpg

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your list elements inside .slides are floated so you need to contain them within .slides.

    e.g.
    Code:
    .slides{overflow:hidden;zoom:1.0}
    /* or use your preferred float containing technique*/
    The slide navigation should now slide up underneath the slides although you may have to move it into exact position as required.

    e.g.

    Code:
    .slides{
    overflow:hidden;
    zoom:1.0;
    }
    
    .flexslider{
    padding:20px 0 50px;
    margin:0 auto;
    }
    
    .flex-control-nav {
       margin: 105px 0 0;
    }
    .content{margin-top:0}

    Why is the header an empty div?

    You could simply have made space with padding unless of course you are putting some content into that fixed height header later on.

    The height on the left column is a bad move and you very rarely would put height on columns like that as you never know how high the right column is going to be and it will vary from browser to browsers and user text preference sizes etc. To make the columns equal simply wrap a div around both left and right floated columns (remember to contain the floats) and then repeat the left background on this new container and it will always match the height of the columns. In fact you need to amalgamate your right column image and the left column image into one single repeatable image and then repeat it on that new container so that it paints both columns at the same time.

    Your right column image is 2177px high and weights in at a massive 1957k!! That's more than the total of most small sites whole code. That image should be optimised down to about 20k - 30k. It doesn't need to be 2177px tall as you can make it repeat at a much smaller height and then optimise it down as low as possible.

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your response, Paul. I will add padding to the header as I want there to be space between the top of the page and where the left and right columns start.

    The reason I went for a fixed height on both columns was I wanted the backgrounds to match up as in the Fireworks prototype instead of staggered as I am experiencing when content is added.

    I will work with your suggestions and see if I can make this more user-friendly. First drafts are almost always rough and you have to work through the problems to get the best possible results.

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK I am struggling with the background for the nav and content. The content area is transparent and has a 1px border so png has to be used. The nav area has to be matched exactly so there isn't a noticeable difference in the graphic. I tried "slicing" the top middle and bottom. The top comes in at 24.9 kb, the middle comes in at 772 kb and the bottom comes in at 19.5 kb. The middle seems to be the problem or maybe all three. The pattern is different on the striped nav area and must match exactly with the footer divider. Any ideas what I can do here? I will upload the images that I am using so maybe others can play around and see what they can do.

    http://foxdencreations.com/new_site/...content_bg.png

    http://foxdencreations.com/new_site/...k_68561788.jpg

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I've been away today but I'll try and have a look at this tomorrow (unless someone else wants to jump in).

    772k is still far to unreasonable a size to use so you will need to re-think this through a little and compromises will need to be made. The stock answer is that although you can draw it in photoshop it doesn't means its viable on the web. The web needs to work with fluid mediums and avoid trying to match fixed height images to content so more subtle approaches need to be made to make a more robust layout.

    Not all things are possible but with a few compromises you should be able to get close but will involve reducing and slicing the images carefully and indeed repeating the same image over some nested elements to get the effect you want. I;ll try and fins some time tomorrow to give a better answer

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    I'm diddling with the images a bit. I think I can come up with something that will work without requiring gargantuan images. Will let you know.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    The demo page shows the content area longer than the left menu. What should the page look like if there is not enough content to reach that length? Is the brown content box supposed to always end at the bottom of the menu or lower? or not?

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    The image with the greatest byte-size (85K) is currently the Shutterstock image with the green columns. Interestingly, it is probably the least visible. Would you consider making a repeatable image out of a shorter slice (or compressing the image vertically) instead of using the entire full-sized image?

  9. #9
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi ronpat - I don't use the entire image. I had compressed it to the left to get narrower columns. It has to match the bottom divider on the left so it looks seamless. Hope that helps.

    Also left and right columns should be same height as far as backgrounds are concerned.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Let me rephrase my question... which behavior do you wish?

    A. The content area background is only as tall as the contents.

    B. The content area background is always at least as tall as the menu list.

    C. In either A or B, the content area will extend if taller than the menu list. The green background is always properly matched left and right.


    A: Jewelry3c-2.jpg AC: Jewelry3c-4.jpg B: Jewelry5b-2.jpg BC: Jewelry5b-4.jpg

  11. #11
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi ronpat.

    From your choices above, I am leaning towards C. Some of my pages will have more content (images of jewelry I have made in the past as examples of what I can do for custom orders). The order form on the special request page will be the "shortest" content area. Now how do I achieve that with the background images? Do I make a background image that includes both menu background and content background or are they going to be separate? Thanks for your help with this. BTW, the slider will only be on the home page.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cgacfox View Post
    Hi ronpat.

    From your choices above, I am leaning towards C.
    I should NEVER write poll questionnaires

    A, B, and C above are descriptions.

    A and B are the choices and describe the way the bottom of the content area behaves when the content is shorter than the menu.

    C simply shows that both A and B will extend longer than the menu if needed, and that the bottom of the green image beneath the content is matched to the green image beneath the menu using either method A or method B.

    You can have it either way, A or B. With both, you get C. However the code and images for A and B are different, so that is why the question... the choice is between A and B.

  13. #13
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry I misunderstood. Then B is my choice.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Here's my version of your objective (as I understand it). I started from scratch so the code is all new as are some of the images.

    (1) *** To see how blocks are laid out, enable the "TEST Outlines" in CSS. ***

    (2) The brown content background area is always as long as the main menu or longer; never shorter.

    (3) You can change the number of items in the left column menu and the design will adapt.

    (4) The 1px border appears at the top and right edges only.

    (5) Probably reduced almost 300 KB of image size; but the total is still ~1500 KB. The .png menu sprites are ~650 KB.

    (6) You will have to reposition the slider dots.

    (7) This version has been tested with IE8+, Opera, FF & Chrome.

    All files are in this folder:

    https://www.dropbox.com/sh/g6ntwdqhi7wbb7l/JDgfMSU818


    Please let me know after you have downloaded it, and especially if you find any problems.

    (This can be run on your PC before loading anything on the server.)

    Hope it is useful,
    Cheers

  15. #15
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much, ronpat. This is incredible. My CSS skills have improved over the years of being on this site but still greatly lacking compared to yours. This is exactly what I was looking for. Thank you for adding the comments as well so I can see what is happening in each section and learn from my mistakes.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    cgacfox, I have no idea whether or not there were "mistakes" in your code. I am simply not comfortable floating so many things left, so I chose a different strategy. The leftcolumn and rightcolumn are the only two objects that are floated... left floats left, right floats right. The logo is the only object that is positioned[absolute]. Everything else goes with the flow... even the slider.

    If you need help tweaking any of the content dimensions, feel free to ask. (I don't think I commented them very well.)

    It was fun. Glad it works the way you want!

    Take care.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Good work Ron - looks much better now

    You could still optimise some of those images down. For example the menu item down the side only needs the one main background and then just add the different text images which could all be contained in one sprite. Then instead of having 10 images of 65k you would have one image of 32k (or a jpg of abut 11k with only a slight loss of quality) and then a sprite for the text and hover effect which would run in at under 30k. That would change that left menu from 650k down to about 30k - 60k in total. You would of course need the psd to grab the separate text images.

    For the 260k slider image you could slice it into three which will give you 45k for the top and 45 for the bottom and then the middle could be a jpg of about 20k saving about 160k again. There may be a slight mismatch between jpg and png so it would be a matter of trying and seeing what it looks like.

    The 2 above methods would reduce 1000k down to about 150k which is far more manageable on the web. Of course there may some compromise in quality but speed must be the first concern as users have been shown time and time again to click away from sites that don't load quickly.

  18. #18
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. I will look into doing as you suggested.

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    @Paul O'B ,

    Thanks for examining my code. Your admonition about the size of the images inspired me to give them another look.

    First, let me say that I intentionally did not try to modify the .pngs because Mr. fox had not responded to several suggestions to do so. The transparency in the menu sprites did not lend them to becoming .jpgs and likewise the transparency in the slider background... so I left them alone... didn't explore other options.

    Now to my revisit.

    A new strategy...! The menu images have been reduced from 10 individual .pngs to 2, menupad.png and menusprites.png. The byte count went down from approx 650 KB to 102 KB (and of course the image count went down by 8). The advantage here is that the images remain .pngs and keep their transparency! This design is indistinguishable from the original. The new sprites are applied by adding a pair of span tags within each menu anchor.

    The other image that I revisited is the slider_bg.png. 261 KB seemed excessive, but I couldn't turn it into a .jpg without sacrificing its transparency. Today I made a screen capture with the slider turned off and saved it as a medium quality jpg, slider_bg.jpg. Because it is a screen capture, it retains the appearance of transparency and reduces the byte size to 35 KB. Only under magnification is the .jpg artifact noticable. The size reduction is very significant and was easy enough to accomplish.

    The image related byte count is now ~343 KB + the slide show at ~377 KB = ~720 KB. Still hefty, but much better than the previous 1500 KB and SO much better than the full blown Wordpress' bloat.


    images: slider_bg.jpg, menupad.png, menusprites.png

    slider_bg.jpg menupad.png menusprites.png


    @cgacfox ,

    To add slide_bg.jpg and save 226 KB, drop the new image into your images directory and change the suffix from .png to .jpg in your CSS (CSS shown below). Easy.

    To replace the menu sprites, drop the 2 new images into your images directory and replace the all of the menu code:

    Code:
    /* -------------------------------------------- *\
       Main Menu
    \* -------------------------------------------- */
    
    .menu {
        list-style-type:none;
        padding:0;
        margin:0;
    }
    .menu li {
        width:161px;
        height:162px;
        margin-top:20px;
        margin-left:15px;
    }
    .menu li a {
        display:block;
        width:161px;
        height:162px;
        position:relative;
        background-image:url(../images/menupad.png);
        font:0/0 a;    /*use the next 3 lines instead of text-indent: -9999px*/
        text-shadow:none;
        color:transparent;
    }
    .menu li a span {
        position:absolute;
        top:71px;
        left:46px;
        width:106px;
        height:50px;
        background-image:url(../images/menusprites.png);
    }
    .menu li.home a span {
        background-position:0 0;
    }
    .menu li.home a:hover span {
        background-position:106px 0px;
    }
    .menu li.about a span {
        background-position:0 50px;
    }
    .menu li.about a:hover span {
        background-position:106px 50px;
    }
    .menu li.necklaces a span {
        background-position:0 100px;
    }
    .menu li.necklaces a:hover span {
        background-position:106px 100px;
    }
    .menu li.bracelets a span {
        background-position:0 150px;
    }
    .menu li.bracelets a:hover span {
        background-position:106px 150px;
    }
    .menu li.earrings a span {
        background-position:0 200px;
    }
    .menu li.earrings a:hover span {
        background-position:106px 200px;
    }
    .menu li.lanyards a span {
        background-position:0 250px;
    }
    .menu li.lanyards a:hover span {
        background-position:106px 250px;
    }
    .menu li.bookmarks a span {
        background-position:0 300px;
    }
    .menu li.bookmarks a:hover span {
        background-position:106px 300px;
    }
    .menu li.request a span {
        background-position:0 350px;
    }
    .menu li.request a:hover span {
        background-position:106px 350px;
    }
    .menu li.available a span {
        background-position:0 400px;
    }
    .menu li.available a:hover span {
        background-position:106px 400px;
    }
    .menu li.testimonials a span {
        background-position:0 450px;
    }
    .menu li.testimonials a:hover span {
        background-position:106px 450px;
    }
    
    /* -------------------------------------------- *\
       flexslider
    \* -------------------------------------------- */
    
    .flexslider {
    /*    outline:1px solid white;    /* TEST Outline (compare outline to border) */
        height:420px;
        background:url(../images/slider_bg.jpg) no-repeat 50% 0;
        padding:0;
        margin:0 auto;
    }
    Add <span></span> tags to the menu items:
    Code:
                        <li class="home"><a href="index.html"><span></span>Home</a></li>
                        <li class="about"><a href="about.html"><span></span>About Me</a></li>
                        <li class="necklaces"><a href="necklaces.html"><span></span>Necklaces</a></li>
                        <li class="bracelets"><a href="bracelets.html"><span></span>Bracelets</a></li>
                        <li class="earrings"><a href="earrings.html"><span></span>Earrings</a></li>
                        <li class="lanyards"><a href="lanyards.html"><span></span>Lanyards</a></li>
                        <li class="bookmarks"><a href="bookmarks.html"><span></span>Bookmarks</a></li>
                        <li class="request"><a href="request.html"><span></span>By Special Request</a></li>
                        <li class="available"><a href="available.html"><span></span>Available Now</a></li>
                        <li class="testimonials"><a href="testimonials.html"><span></span>Testimonials</a></li>
    The complete demo can be found here:
    https://www.dropbox.com/sh/2prcojgkcp8rid0/qZ7e_MzmZ3

    After testing successfully, delete the unused menu images. I suggest keeping the slider_bg.png. Should you reposition the slider on the page, you may need to make another .jpg and will need the .png to do so.


    Tested in FF, Chrome, Opera, IE8, IE10

    Cheers!

  20. #20
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks ronpat. That is actually Ms. Fox! I have accidently left off a page in the menu that needs to be added under lanyards. It will be eyeglass Chains. How easily can I add that menu item?

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Hi, cgacfox,

    Sorry about the Mr/Ms blooper. I would swear that I read your profile but apparently not very well. Your designs convinced me that you were a Ms, but something unexplainably altered that conviction. Must have confused you with someone else. Chalk it up to cerebral malfunction. Seems to happen more and more. <sigh>

    I made menusprites.png by copying a precise 106 x 50 portion from the original sprites and pasting it into the menusprites.png file.

    You are probably quite good with graphics, so you can probably make another sprite in the conventional way, then open up a 50px high spot in the menusprites.png file, then carefully copy and paste a the 106 x 50 portion in. After doing that once, you'll probably come up with a better method such as making a 106 x 50 template. 106 x 50 is exactly 1px from the center vertical and horizontal text/edges... the max text area within your menu image.

    In the CSS, you will also have to alter the vertical positions of all sprites that appear below the one that you add. Fortunately, the numbers are multiples of 50 so it's pretty easy.

    If you have any problem, just make a conventional "sprite" and post it in the forum. I'll download it and copy it to "menusprites.png" and make screenshots showing how it's done.

    The image program that I use is GIMP, but the process would be the same in PhotoShop.

  22. #22
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I sort of understand how you did this but the missing page needs to go between lanyards and bookmarks. I will have to redo the entire sprite in order to insert the missing page link. Working on redoing the sprite now. BTW, I use Fireworks as my preferred graphics app. I know that Adobe has decided to drop it and it makes me sad. I have always used Fireworks from when it was still part of Macromedia. I am trying to get comfortable with Photoshop but that app has a high learning curve in my opinion and it was originally created for photo manipulation! But I digress!

  23. #23
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't know if it is just my laptop or what but I am testing in Chrome, FF, and IE9 and the menu is backwards. This is using what you sent me before adding the new sprite that I created with the new button.

    menu_image.jpg

    Edit - just tested on my PC and I am getting the same problem. I uploaded everything to http://foxdencreations.com/new_site/...s-index6b.html.

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,576
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cgacfox View Post
    I don't know if it is just my laptop or what but I am testing in Chrome, FF, and IE9 and the menu is backwards.
    Which proves conclusively that lightning can indeed strike twice in the same place! Another "oops", I'm afraid . Each of the vertical offset vaues in the menu CSS should have been preceeded by a minus sign. Adding the minus sign will correct the error. Sorry.

    I created/revised 4 files:

    foxdencreations6c.html (adds a menupad after "lanyards")
    foxdencreations6c.css (fixes vertical offset and adds blank sprite after "lanyards")
    menusprites.png (adds a blank sprite after "lanyards")
    menuspriteblank.png (new; a blank menu sprite template/master, if desired)

    The files are located here:
    https://www.dropbox.com/sh/wd5i57jowaezw2t/1jEbNPhxdo

    There is probably no need to re-download the other images.

    PS: FYI only... the screen shot that you posted is reduced in size... details are too small to be useful and side-by-side screen comparisons are not possible. The link to your web site was perfect, though .

  25. #25
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks again ronpat. Got it to work properly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •