Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 9, 2016 at 9:10 pm #580574
    creatingartsco

    Ok I figured out how to add margin to the top of the page, issue now is that the overflow when you scroll is not hidden. I have tried using overflow: hidden; and its not working any suggestions. I want to use the background for advertising but the page is scrolling out the top of the #wrap_all) container. Any suggestions.

    Been using this:
    .boxed#top {
    margin: 40px auto;
    overflow: hidden; <—- this is not working
    }

    Thanks in advance for your help. Buying the person that figures this out a 6 pack of beer.
    Todd

    February 9, 2016 at 9:55 pm #580600
    Basilis

    Hi creatingartsco!

    .boxed#top {
margin: 40px auto;
overflow: hidden !important
z-index: 999;
position: relative;
}

    Please try it like that, let me know if it works

    Cheers!
    Basilis

    February 10, 2016 at 12:33 am #580670
    creatingartsco

    Ok I think I am confusing myself. I just used this:

    .boxed #wrap_all {
    overflow: hidden !important;
    }
    #wrap_all {
    margin-top: 40px;
    overflow: hidden !important;
    position: relative;
    width: 100%;
    z-index: 999;
    }
    This was able to achieve the margin at the top. But still its not hidden when scrolling.

    The URL is http://www.cacstudios.com, I left the changed code it so you can see whats going on.

    Thanks I owe you one.

    NOT:
    #top.boxed {
    margin-top: 40px auto;
    overflow: hidden
    }
    Which did nothing….

    February 10, 2016 at 6:08 pm #581279
    creatingartsco

    I have also been tweaking in Fire Bug as well and no matter what I change its not working. CSS is not my strong suit. Thanks again for the help.

    February 10, 2016 at 6:30 pm #581301
    Yigit

    Hey!

    Please try adding following code to Quick CSS

    #header {
    top: 0;
}
#header.av_header_transparency {
    top: auto;
}

    Best regards,
    Yigit

    February 10, 2016 at 6:44 pm #581308
    creatingartsco

    Yigit, thanks for the help but that did not work. What I am trying to achieve is a 60px margin at the top (so I can have ads above) Just like this: http://www.imdb.com/. But what happens when I add margin like this..

    .boxed #wrap_all {
    overflow: hidden !important;
    }
    #wrap_all {
    margin-top: 60px;
    overflow: hidden !important;
    position: relative;
    width: 100%;
    z-index: 999;
    }
    I get the margin but the overflow still does not hide and the page scrolls through the margin area.. Not sure what I am missing.
    And when in responsive I want the margin to go away…

    Still have that 6 pack of beer on the table….LOL

    February 11, 2016 at 8:38 pm #581854
    creatingartsco

    Anyone can help me with this. I have a new client that want to banner advertise at the top. See above.

    February 14, 2016 at 7:04 am #582842
    Ismael

    Hi!

    I checked the imdb site but I don’t see any ads on top of the page. Could you please provide a screenshot of the layout? Use imgur or dropbox.

    Best regards,
    Ismael

    February 15, 2016 at 12:05 am #583040
    creatingartsco

    Ismael,

    Thanks so much for your help. I am not actually putting in a banner ad I want to use the background as advertising.

    So what I need to do is add a 60px margin at the top top expose the background when I have tried doing it the content scrolls through the margin area when scroll down the page. IMBD has margin at the top to expose the background.

    Here are links to the images Margin1 image shows where the margin exposes the background, margin2 image shows that the background when scrolling is not hidden it scrolls through the margin area. Note these are photoshop image to show you an example of issues I had while trying to figure this out.

    http://www.cacstudios.com/wp-content/uploads/2016/02/margin1.png
    http://www.cacstudios.com/wp-content/uploads/2016/02/margin2.png

    I have no idea how to accomplish this and everything I have tried has not worked.

    Thanks for your help.

    Todd

    February 15, 2016 at 1:53 pm #583392
    Yigit

    Hey Todd!

    Can you please check if that workaround works for you – https://kriesi.at/support/topic/boxed-layout-and-margin-on-top/#post-582571?

    Cheers!
    Yigit

    February 15, 2016 at 8:09 pm #583739
    creatingartsco

    Yigit,

    That did not work either, is there a way to accomplish this with CSS, when I put the code in it messed with with the navigation.

    Its weird you would think its a matter of just adding the margin and hiding the overflow but nothing I have tried has worked.

    Thanks again for all your help.

    February 16, 2016 at 9:11 am #583969
    Ismael

    Hi!

    This is not going to work with a sticky header because the header position is relative to the browser window instead of the wrap_all or body container. You will have to create a custom jQuery script for it or just disable the sticky header.

    Regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.