SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Content re-align

    So i'm stuck on how to move the content of the div down further with CSS. I could just move the div down in the HTML page, except this page is supposed to re-align when below 480 pixels wide. You hopefully will see a box wrapped in a <div> that represent drinks, how can I move that box down in the flow? Feel free to suggest some code.

    troubleshooting.zip

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Feel free to show some code.

  3. #3
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Polyhedral,

    Why do you want the first div to move down further? Generally the only thing that will push an element down is when either another element is on top of it or you use the margin property in CSS.

    So, if you are going to do that with CSS the code would be

    #elixers
    {
    margin-top: amount of pixels you want to push the div down;
    }

    Alternatively you could use position relative. Your CSS might look something like this,

    body #elixers
    {
    position: relative;
    top: 100px;

    }

    Perhaps you can find more info here,

    http://askthecssguy.com/articles/nud...tion-relative/

    Best,

    Shawn

  4. #4
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks for the refresher on how position absolute/ relative works. The reason I want to move the div is so I can see what's possible for mobile web design.

    1) The code is in the .zip
    2) Here what i'm visualizing
    example_trouble.png

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    polyhedra, a little wrinkle. Your code seems to be using media queries at 480px to change the layout. At my default font sizes 600px is the width of the window when the elixirs div begins to flow offscreen and trigger a scrollbar (long before 480px is reached). You might consider allowing the logo image to scale a little smaller at narrower widths to reduce the total width of the two elements. Just a thought.

    PS: the attachments in your latest post are still pending approval.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Give this a look. I modified your stylesheets and the HTML, including the media queries. This is not meant to be a polished product... just a demo that shows how the combined with of the two divs is wider than the media query shift point. The page WILL shift at 480px, but the "elixirs" div will overflow the right edge of the window before that occurs.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Head First Lounge</title>
        <link rel="stylesheet" type="text/css" href="lounge-mobile.css">
        <link rel="stylesheet" type="text/css" href="lounge.css" media="screen and (min-width:481px)">
    </head>
    <body>
        <div id="content">
            <p><a href="#" title="home"><img src="media/logo.gif" alt="Head First Lounge"></a></p>
            <h1>Welcome to the Head First Lounge</h1>
            <p>
                The Head First Lounge is, no doubt, the biggest trendsetter in Webville.
                Stop in to sample the eclectic offering of elixirs, teas, and coffees,
                or, stay a bit longer and enjoy the multicultural culinary menu that
                combines a harmony of taste, texture, and color with the best in fresh
                and healthy ingredients.
            </p>
        </div>
        <div id="elixirs">
            <h2>Weekly Elixir Specials</h2>
            <p class="specialIMG">
                <img src="media/yellow.gif" alt="Lemon Breeze Elixir">
            </p>
            <h3>Lemon Breeze</h3>
            <p>
                The ultimate healthy drink, this elixir combines
                herbal botanicals, minerals, and vitamins with
                a twist of lemon into a smooth citrus wonder
                that will keep your immune system going all
                day and all night.
            </p>
        </div>
    </body>
    </html>
    Code:
    /* lounge-mobile stylesheet */
    body {}
    h1 {
        font-size:300%;
        line-height:1;
    }
    h1, h2 {color:#007e7e;}
    #content {
        float:left;
    }
    #elixirs {
        border:1px solid #007e7e;
        padding:20px;
        text-align:center;
        line-height:1;
        float:right;
    }
    Code:
    /* lounge stylesheet */
    #content {
        margin-right:242px;
    }
    #elixirs {
        width:200px;
        margin-left:-242px;
    }
    #elixirs h2 {color:black;}
    #elixirs h3 {color:#d12c47;}

  7. #7
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okey I see you moved some html around, in the future I will try write my html in a way that is presentable when I need to mobile. Great solution:P

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ronpat View Post
    The page WILL shift at 480px, but the "elixirs" div will overflow the right edge of the window before that occurs.
    FOLLOW-UP NOTE: The behavior of "overflowing the right edge of the window" seems to be peculiar to Firefox.
    In Chrome and IE9, as the width of the browser window is reduced, the "elixirs" div drops below the "content" div when it bumps against the right edge of the logo image (the widest element in "content")... as expected.


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
  •