SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning question

    Hello, I was wondering if someone could help me figure out how to modify my CSS file in this wordpress theme so that the "Body" section does not move up into the logo and navigation bar when the resolution is less than 1024-768. This design is mobile device responsive and Im not sure if that is what is causing this design flaw. I would really appreciate the help!

    Thanks in Advance!

    -Anthony

    http://juxtapozemedia.com/demosite3

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint, Anthony.

    Sorry I couldn't give your code a through look, am on my way out the door. But i think I see the gist of what is happening here. You have an element which is being vertically centered via a CSS technique. When you make the viewport shorter than the element the element starts to slide up.

    I recommend you add min-height: the mining height of element + menu+ logo area to your html, body . you may need to target another container as well, but let's start with that.

    hope that helps.

  3. #3
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply....I thought that was the case and I added " min-height:800px " to the body CSS tag and I didnt get any change. Maybe Im missing something?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Min-height won't help here because the element is absolutely placed and its top margin is controlled by some javascript to drag it central which results in the element disappearing through the top on small height viewports. (It's not a nice effect and makes me feel a bit queasy the way it wobbles around.)

    You would need to adjust the script to solve that problem which is a question for the JS forum.

    If your site is always a fixed height then you don't need javascript to vertically center it anyway as CSS can do that.

    As an example use css terminal and add the following code to your live site so you can see how it would look with a css version.

    IE8+ only:
    Code:
    body:before{
    content:" ";
    display:block;
    float:left;
    width:100%;
    height:50%;
    margin-top:-256px;
    }
    #content-elements{
    display: block;
    overflow: hidden;
    margin: 34px auto 0;
    position: relative;
    height:512px;
    width:100%;
    clear:both;
    }
    .contBg{
    clear:both;
    left: 0;
    top:0;
    margin:0 auto 0 !important;
    position: relative !important;
    }
    Of course that assumes a fixed height for the layout but it looks like that's what you have anyway.

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you for taking the time and replying. I figured it was something more than the CSS as the culprit. I added a post in the Javascript thread! Thanks again!


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
  •