SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Relative Positioning of Taskbar

    I have a taskbar that kind of floats over a photo. I need to position it so the bottom of the taskbar is always about 20% away from the bottom of the browser window in all different browser sizes. I know this can be done with percentages and relative positioning (the taskbar is inside another larger div) but I can't figure out how to do it. Any help would be appreciated!

    Here is the page...

    http://www.jameswebdevelopment.com/c...zzenga/bio.php

    And here is the css...

    Code:
    body, html {margin : 0 auto; padding : 0; color : #000; background : url("../pics/background_main.gif") repeat top left fixed;}
    body {min-width : 800px;}
    .clearfix:after {content : "."; display : block; height : 0; clear : both; visibility : hidden;}
    .clearfix {display : inline;}
    /* mac hide \*/
    * html .clearfix {height : 1%;}
    .clearfix {display : block;}
    /* End hide */
    /* Layout */
    #container {position : absolute; top : 0; left : 0; width : 900px; margin : 0; padding : 0; color : #000;}
    #leftcontainer {float : left; width : 350px; background : url("../pics/background.png") no-repeat top left; min-height : 100%; position : fixed; border : 1px solid #000;}
    #navbar {width : 120px; margin-left : 160px; padding : 5px; text-align : left; background-color : #3D59AB; border : 1px solid #000; z-index : 999;}
    #navbar ul {list-style : none; padding : 5px; margin : 0; border : 1px solid #000;}
    #navbar ul li {padding : 0; margin : 0;}
    #navbarHome { width : 100px; height : 32px;}
    #navbarHome a {display : block; width : 100px; height : 32px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_home.gif"); }
    #navbarHome a:hover, #navbarHome a.focus {background : url("../pics/navbar/navbar_home_over.gif") no-repeat 0 0;}
    #navbarBio {width : 60px; height : 36px;}
    #navbarBio a {display : block; width : 60px; height : 36px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_bio.gif");}
    #navbarBio a:hover, #navbarBio a.focus {background : url("../pics/navbar/navbar_bio_over.gif") no-repeat 0 0;}
    #navbarPortfolio {width : 100px; height : 37px;}
    #navbarPortfolio a {display : block; width : 100px; height : 37px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_portfolio.gif");}
    #navbarPortfolio a:hover, #navbarPortfolio a.focus {background : url("../pics/navbar/navbar_portfolio_over.gif") no-repeat 0 0;}
    #navbarNews {width : 100px; height : 30px;}
    #navbarNews a {display : block; width : 100px; height : 30px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_news.gif");}
    #navbarNews a:hover, #navbarNews a.focus {background : url("../pics/navbar/navbar_news_over.gif") no-repeat 0 0;}
    #navbarResume {width : 100px; height : 35px;}
    #navbarResume a {display : block; width : 100px; height : 35px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_resume.gif");}
    #navbarResume a:hover, #navbarResume a.focus {background : url("../pics/navbar/navbar_resume_over.gif") no-repeat 0 0;}
    #navbarContact {width : 100px; height : 34px;}
    #navbarContact a {display : block; width : 100px; height : 34px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_contact.gif");}
    #navbarContact a:hover, #navbarContact a.focus {background : url("../pics/navbar/navbar_contact_over.gif") no-repeat 0 0;}
    #rightcontainer {float : right; width : 550px;}
    #header {text-align : center; margin : 10px 0; padding : 0; background-color : #EFEFEF; border : 1px solid #BFBFBF;}
    #header img {border : 0;}
    #content {font-family : Arial, Verdana, Georgia, sans-serif; font-size : 12px; color : #000; padding : 5px; background-color : #EFEFEF; border : 1px solid #BFBFBF;} 
    #content a {color : #000;}
    #content a:hover, #content a:visited {color : #4B4B4B;}
    #content.resumemain ul li {padding : 5px 0;}
    #content.resumemain ul li a {font-size : 14px;}
    #content.resume ul {list-style : none; padding : 5px 0; margin : 0;}
    #content.legit h2, #content.legit h3, #content.legit p, #content.legit ul.stats {text-align : center;}
    #content.resume ul.stats li {display : inline; padding : 0 10px;}
    #content.resume ul.navbar2 {list-style : none; padding : 5px 0; margin : 0; text-align : center; background-color : #DFDFDF;}
    #content.resume ul.navbar2 li {display : inline; padding : 0 10px;}
    #content.resume ul li ul {width : 538px;}
    #content.resume ul li ul.alternate, #content.resume ul.navbar2 li {background-color : #DFDFDF;}
    #content.resume ul li ul li {display : table-cell; width : 125px; padding-right : 10px; text-align : left;}
    #content.resume ul li ul li.show {font-weight : bold;}
    #content #contact div.row {clear : both; padding : 2px 0;}
    #content #contact label {float : left; width : 100px;}
    #content #contact label.required {font-weight : bold;}
    #content #contact input {float : left;}
    div.spacer {clear : both;}	
    #footer {background-color : #EFEFEF; text-align : center; font-family : Verdana, Arial, Georgia, sans-serif; font-size : 11px; color : #000; padding : 10px 0; border : 1px solid #BFBFBF; margin : 5px 0;}
    #footer ul {list-style-type : none; padding : 0; margin : 0;}
    #footer ul li {display : inline;}
    #footer a {color : #000;}
    #footer a:hover {color : #4B4B4B;}
    img {border : 0;}
    h1 {font-size : 30px;}
    h2 {font-size : 24px;}
    h3 {font-size : 14px;}
    span.error {color : #FF0000; font-weight : bold;}
    /* Portfolio Slideshow */
    #portfolio {position:relative; width:536px; background:#EFEFEF; margin:0;}
    a.gallery, a.gallery:visited {display:inline; left : 5px; color:#000; text-decoration:none; border:1px solid #000; width:60px; height:60px; float:left; margin:2px; position:relative; cursor:default;}
    a.slidea {background:url("../pics/portfolio/blackdress02_small.gif");}
    a.slideb {background:url("../pics/portfolio/brownrain02_small.gif");}
    a.slidec {background:url("../pics/portfolio/purpleroof01_small.gif");}
    a.slided {background:url("../pics/portfolio/yellowcoat02_small.gif");}
    a.slidee {background:url("../pics/portfolio/White_Skirt_larger_small.gif");}
    a.slidef {background:url("../pics/portfolio/BWPeterBrownCloseup_small.gif");}
    a.slideg {background:url("../pics/portfolio/BWPeterBrownMature_small.gif");}
    a.slideh {background:url("../pics/portfolio/CurlyBWCloseup_small.gif");}
    a.slidei {background:url("../pics/portfolio/DreBlueCloseup_small.gif");}
    a.slidej {background:url("../pics/portfolio/DreBlueHeadTilt_small.gif");}
    a.slidek {background:url("../pics/portfolio/DreBWFront_small.gif");}
    a.slidel {background:url("../pics/portfolio/DreBWSide_small.gif");}
    a.slidem {background:url("../pics/portfolio/Dre1_00285_small.gif");}
    a.sliden {background:url("../pics/portfolio/Dre1_00403_small.gif");}
    a.slideo {background:url("../pics/portfolio/Dre1_00407_small.gif");}
    a.slidep {background:url("../pics/portfolio/Dre2_00125_small.gif");}
    a.slideq {background:url("../pics/portfolio/Dre2_00163_small.gif");}
    a.slider {background:url("../pics/portfolio/drebus_small.gif");}
    a.slides {background:url("../pics/portfolio/drebuslaptop_small.gif");}
    a.slidet {background:url("../pics/portfolio/Dre_cab_smile_small.gif");}
    a.slideu {background:url("../pics/portfolio/Dre_Matrix_BW_small.gif");}
    a.slidev {background:url("../pics/portfolio/DreFullLength_small.gif");}
    a.slidew {background:url("../pics/portfolio/dregreen44k_small.gif");}
    a.slidex {background:url("../pics/portfolio/dylanscandy_small.gif");}
    a.slidey {background:url("../pics/portfolio/shiranpink_small.gif");}
    a.slidez {background:url("../pics/portfolio/watermelon_small.gif");}
    a.slideaa {background:url("../pics/portfolio/espn_small.gif");}
    a.slidebb {background:url("../pics/portfolio/jane_small.gif");}
    a.slidecc {background:url("../pics/portfolio/NYTimes121105_small.gif");}
    a.slidedd {background:url("../pics/portfolio/trader_small.gif");}
    a.gallery span {visibility:hidden; display:block; position:absolute; height:450px; color:#000; text-align:center; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}
    a.slidea span {left: 0px; top:47px;}
    a.slideb span {left: 4px; top:47px;}
    a.slidec span {left: 8px; top:47px;}
    a.slided span {left: 12px; top:47px;}
    a.slidee span {right: 12px; top:47px;}
    a.slidef span {right: 8px; top:47px;}
    a.slideg span {right: 4px; top:47px;}
    a.slideh span {right: 0px; top:47px;}
    a.slidei span {left: 0px; top:0px;}
    a.slidej span {left: 4px; top:0px;}
    a.slidek span {left: 8px; top:0px;}
    a.slidel span {left: 12px; top:0px;}
    a.slidem span {right: 83px; top:-20px;}
    a.sliden span {right: 90px; top:-20px;}
    a.slideo span {right: 90px; top:-20px;}
    a.slidep span {right: 148px; top:-20px;}
    a.slideq span {left: 74px; top:-60px;}
    a.slider span {left: 70px; top:-60px;}
    a.slides span {left: 70px; top:-60px;}
    a.slidet span {left: 70px; top:-60px;}
    a.slideu span {right: 79px; top:-60px;}
    a.slidev span {right: 17px; top:-60px;}
    a.slidew span {right: 62px; top:-60px;}
    a.slidex span {right: 82px; top:-60px;}
    a.slidey span {left: 82px; top:-120px;}
    a.slidez span {left: 110px; top:-120px;}
    a.slideaa span {left: 70px; top:-120px;}
    a.slidebb span {left: 70px; top:-120px;}
    a.slidecc span {right: 79px; top:-120px;}
    a.slidedd span {right: 17px; top:-120px;}
    a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}
    a.gallery:hover span {visibility:visible; z-index:100;}
    a.gallery:hover span img {border:1px solid #000; position:relative; z-index:100;}
    a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}
    a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
    a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; z-index:10;}

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Something like this maybe..
    Code:
    #leftcontainer {float : left; width : 350px; background : url("../pics/background.png") no-repeat top left; border : 1px solid #000; position: absolute; bottom: 20px; }

  3. #3
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, only that just moved everything, including the photo in the background, up 20px. I want the photo to remain fixed, taking up 100% of the screen. I only want the taskbar itself to be 20% from the bottom, not the photo as well.

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

    If you only want the navbar to move then just fix it at 20% from the bottom.
    Code:
    #navbar {width : 120px; margin-left : 160px; padding : 5px; text-align : left; background-color : #3D59AB; border : 1px solid #000; z-index : 999;position : fixed;bottom:20%}
    However it won't look very nice because mozilla can't redraw the 2 fixed elements very quickly and they will wobble.

    Of course it won't work in IE and IE seems to be a bit of a mess at the moment

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    This should get a similar effect in IE.

    Code:
    <!--[if lte IE 6 ]>
    <style type="text/css">
       html, body {overflow : hidden; height : 100&#37;;}
       #container {height : 100%; width : 100%; overflow : auto;}
       #leftcontainer {position : absolute; left : 0; top : 0;height:100%;
     z-index : 999;overflow:auto}
       #navbar{position:absolute;}
                #rightcontainer {float : left; width : 450px; margin-left : 345px; display : inline;}
    </style>
    <![endif]-->

  6. #6
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Thank you Paul! A lot of this has worked, but there are a few little bugs now. I know this is not a for sure fix, but I want to get it as nice as I can.
    • In IE7, Opera everything looks good except that the navbar buttons aren't rolling over anymore.

    • In IE6, the taskbar now lined up at the top of the page and the photo on the left is completely cut off.

    • In Opera, the photo on the left is completely gone now!


    I don't think I am ever going to do a fixed layout again! Would it be better to just place the photo on the left and the checks in the background as a large background image for the site, and then float the taskbar overtop of the whole thing? I could fix the body background image so it doesn't move.

    Any more advice on these issues would be greatly appreciated!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I gave you the fix above for ie already but you haven't implemented it. You need the height:100&#37; in the ie styles for the leftcontainer.

    Code:
    #leftcontainer {position : absolute; left : 0; top : 0;
    height:100%;
     z-index : 999;overflow:auto}
    For opera you need to set html,body to 100% also to have something to base the height on. Then add a z-index as follows.

    Code:
    html,body{height:100%}
    #leftcontainer {float : left; width : 350px; background : url("http://www.jameswebdevelopment.com/clients/dremazzenga/pics/background.png") no-repeat top left; min-height : 100%; position : fixed; border : 1px solid #000;z-index:999;}

    That should fix all issues.

  8. #8
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks so much for your patience and your help. You are very knowledgable, I couldn't have figured this out by myself.

    Everything looks great, there is just one more thing. The taskbar in IE7, FF and Opera looks great and is positioned perfectly. The only issue now is in "lte IE 6."

    Here is my code that I added to the header...

    Code:
    <!--[if lte IE 6 ]>
    <style type="text/css">
       html, body {overflow : hidden; height : 100%;}
       #container {height : 100%; width : 100%; overflow : auto;}
       #leftcontainer {position : absolute; left : 0; top : 0; z-index : 999; height : 100%; overflow : auto;}
       #navbar {position : absolute; z-index : 999;}
       #rightcontainer {float : left; width : 450px; margin-left : 345px; display : inline;}
    </style>
    <![endif]-->
    The only thing that is different from your code that you gave me is the z-index that I added on the navbar div in order to make the taskbar buttons work. I tried adding "bottom : 15%;" to the navbar div, but this did nothing. I just need the taskbar to be 15% from the bottom in earlier versions of IE and then I will be all set. Any ideas?

    Thanks again!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I'm not seeing any changes online. You still have the old code in there even after re-freshing.

    This is the old code copied form your page:
    Code:
    <!--[if lte IE 6 ]>
    <style type="text/css">
       html, body {overflow : hidden; height : 100&#37;;}
       #container {height : 100%; width : 100%; overflow : auto;}
       #leftcontainer {position : absolute; left : 0; top : 0; z-index : 999;}
       #rightcontainer {float : left; width : 450px; margin-left : 345px; display : inline;}
    </style>
    <![endif]-->
    If you upload the latest version I'll take a look

  10. #10
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I have uploaded the new code in there and just checked it, and it is the latest code. The site works great in all browsers except IE 5.x and IE 6.

    In both IE 5.x and IE 6, the taskbar is at the top of the page, and I need it to float 15% from the bottom of the browser window no matter what size browser.

    In IE 6 only, the taskbar buttons are still not rolling over and are non-clickable. Also on the bio page, half of her bio is actually cut off. Not sure why that is.

    Any help would be appreciated.

    The page: http://www.thatgirldre.com/bio.php

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I'm not seeing any of the issues you are describing and the layout is working both in ie5.5 and 6. The links are clickable in bith browsers and I see no cut off of the content either.

    I assume you have addressed these issues already


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
  •