Skip navigation
babinfisheter
Currently Being Moderated

how to make logo overlapping the slideshow with fluid layout?

Dec 2, 2013 8:56 AM

Hi,

I'm trying to make my logo to overlapping the slideshow, menu bar will beside the logo.

when I got everything done(before insert the script for slideshow), the page looks right to me and the logo did overlapping the image.  However, after I insert the script, the slideshow get alive but the logo became underneat the slide show.

does anyone can give me a help?  below image is show how I would like my site will be.

I did insert a table for the logo and menu bar, and then I changed the image margin to get the position up a little bit.  Is it the good way to make it?  anyother solution can make it easier?MOCK-UP_4.jpg

sorry for the long image.

Thanks!

 
Replies
  • Currently Being Moderated
    Dec 2, 2013 9:32 AM   in reply to babinfisheter

    Without seeing your code, it's all guesswork.

     

    I would guess you're having issue with the z-index in the css of your slideshow and logo image.

     

    If you are not using z-index, that would be one way to fix the problem (higher z-index numbers are closer to the top of the view "stack").

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 2, 2013 11:19 AM   in reply to babinfisheter

    I'm sorry, that doesn't give me much to go off of I'm afraid.

     

    Could you upload the files (.js, .css, .html and .jpgs) and post a link to the malfunctioning page here?

     

    If you haven't uploaded it yet due to this issue, could post it to a temporary location on your server?

     

    I suggest creating a folder called TEST within your site, then do a Save As to put the trouble pages and their resource files into that folder. Then just upload the TEST folder and post the address here.

     

    Once the problem is found you can delete TEST from your server and all of its contents.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 2, 2013 3:14 PM   in reply to babinfisheter

    There's nothing we can access at the URL.

     

    Better to upload the test page & supporting files to a web server space you control.

    http://example.com

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 6:46 AM   in reply to babinfisheter

    FTP addresses require usernames and passwords (DO NOT GIVE THOSE HERE).

     

    We also don't know the page name if we assume we can try viewing your page at a www address like...

     

    www.ppqcafe.com/test/

     

    Since your page isn't named default.html, index.html or one of the other server defaults, we would need to know the name of it to finish the URL after the test folder.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2013 11:16 AM   in reply to babinfisheter

    If I go to http://ppqcafe.com  all I see is a Lunarpages placholder page. 

    If I type in http://ppqcafe.com/test/  I get a 404 Not Found error.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2013 6:33 AM   in reply to babinfisheter

    babinfisheter wrote:

     

    could you go to ftp://ppqcafe.com?  the problem files are locationg on the folder named 'test'.

     

    Thanks!

     

    Sure, we can click the link, but we do not have the ftp username or passwords to view any of the files. Could you please post the appropriate www. address so we can take a look at your page from our browsers?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2013 7:24 AM   in reply to babinfisheter

    This can be a bit tricky BUT it is to do with z-index as has been suggested.

     

    What I would do is give the slideshow container <div>  a minus z-index number.

     

    You would include this in the <div> containers css selector like:

     

    #slideshow {

    z-index: -1;

    }

     

    That alone should work BUT if it doesn't then give the container <div> your logo is in a positive z-index.

     

    #logo {

    z-index: 1;

    }

     

    Failing that please upload your page so someone can look at the code and advise you further.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2013 10:45 AM   in reply to babinfisheter

    We can't access your FTP folder. 

    Go to the link below and view source in your browser to see the code.

    http://alt-web.com/sandbox/Cycle2-with-Logo.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 6, 2013 10:39 AM   in reply to babinfisheter

    Look again.  The slideshow is position:relative not static. 

    The logo image is position:absolute & relative to the parent container (slideshow).   The stacking order or z-index of the logo is 1000 (top most layer).  The z-index of the slideshow is 1 (bottom most layer).

     

    Z-Index guide

    http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a- comprehensive-look/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 8, 2013 10:43 AM   in reply to babinfisheter

    That URL is nothing but a placeholder page on Lunarpages.  You need to save your page as index.html and upload it to your domain.  Or give us the actual URL with your page name.

    http://yourdomain/pagename.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 8, 2013 2:40 PM   in reply to babinfisheter

    Positioned elements don't work well in Responsive Layouts because they are removed from the normal document flow.  As an example, if you resize viewport with this test page, the logo looks silly.

    http://alt-web.com/FluidGrid/Fluid2.html

     

    A possible workaround is to hide the logo from mobile devices with a CSS Media Query.

     

    /*slideshow*/

    .cycle-slideshow {

        position:relative;

        z-index:1;

    }

     

    #logo {

    width:40%;

    margin:-55px 0;

    position:relative;

    z-index:1000;

    top:55px;

    left:10px;

    }

     

    /* Special Rules for Mobiles. */

    @media only screen and (max-width: 480px) {

        #logo { display:none}

    }

     

     

    Best of luck with your project!

     

    ❄  ☃  ❄

    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