Results 1 to 4 of 4

Thread: Absolute positioned image in liquid layout problem

  1. #1
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Absolute positioned image in liquid layout problem

    Site URL

    Alright I'm trying to position THIS inside the main layout div, 152px from the top and 65px from the right (or 397px from left). I put this wrapper div:

    Code:
    <img src="nav.jpg" style="position:absolute;top:152px;left:397px;">
    However, whenever I resize the browser, the image moved left and right. It doesn't move up and down if I resize. Just left and right. But I need the image to stay static 397px from the left of that layout, not the page.

    I never had this problem before because I never worked with liquid layouts before.

    How can I make the image stay in one exact spot even if I resize my browser?

    CSS
    Code:
    body,
    html {
        margin:0;
        padding:0;
        background:#000000;
        color:#000;
        }
    body {
        min-width:750px;
        }
    #wrap {
        background-image:url(http://fauxism.org/bg.jpg);
        margin:0 auto;
        width:750px;
        font-family: arial narrow;
        font-size: 13px;
        line-height: 25px;
        text-align: justify;
        }
    #header {
        height: 231px;
        background-image:url(http://i42.tinypic.com/x1j2fo.jpg);
        }
    #header h1 {
        padding:0px;
        margin:0;
        }
    #nav {
        display: none;
        background-image:url(http://fauxism.org/bg.jpg);
        padding:5px;
        }
    #nav ul{
        margin:0;
        padding:0;
        list-style:none;
        }
    #nav li{
        display:inline;
        margin:0;
        padding:0;
        }
    #main {
        background-image:url(http://fauxism.org/bg.jpg);
        float:left;
        width:450px;
        }
    #main h2, #main h3, #main p {
        padding:0 10px;
        }
    #sidebar {
        background-image:url(http://fauxism.org/bg.jpg);
        float:right;
        width:240px;
        }
    #sidebar ul {
        margin-bottom:0;
        }
    #sidebar h3, #sidebar p {
        padding:0 10px 0 0;
        }
    #footer {
        height: 225px;
        background-image: url(http://i43.tinypic.com/28cmy53.jpg);
        clear:both;
        }
    #footer p {
        padding:0px;
        margin:0;
        }
    textarea {
        background-color:#EAEAE2;
        border-top: #F3F3ED;
        border-left: #F3F3ED;
        border-right: #B7B3A7;
        border-bottom: #B7B3A7;
        border-style: solid;
        border-width: thin;
        padding: 5px;
        font-family: arial narrow;
        font-size: 13px;
        line-height: 25px;
        width:100%;
    }
    input {
        background-color:#EAEAE2;
        border-top: #F3F3ED;
        border-left: #F3F3ED;
        border-right: #B7B3A7;
        border-bottom: #B7B3A7;
        border-style: solid;
        border-width: thin;
        font-family: arial narrow;
        font-size: 13px;
    }
    HTML Code:
    <html>
    <head>
    <LINK href="http://fauxism.org/style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id="wrap">
    <img src="nav.jpg" style="position:absolute;top:152px;left:397px;">
        <div id="header"><h1></h1></div>
        <div id="nav">
            <ul>
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                ...
            </ul>
        </div>
        <div id="main">
    Main text here
        </div>
        <div id="sidebar">
            <h3>Column 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                ...
            </ul>
        </div>
        <div id="footer">
            <p></p>
        </div>
    </div>
    
    
    </body>
    </html>
    Thanks in advance.
    Last edited by Snookerman; 04-22-2009 at 08:23 AM. Reason: added [html] tags and “Resolved” prefix

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You need to position the wrapping div:
    Code:
    #wrap {
    background-image:url(http://fauxism.org/bg.jpg);
    font-family:arial narrow;
    font-size:13px;
    line-height:25px;
    margin:0 auto;
    text-align:justify;
    width:750px;
    position: relative;
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Funny, I had tried that earlier and it didn't work. But now it does. Thank you

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome, glad to help! You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

    Good luck with your site!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Tags for this Thread

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
  •