Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New to Css - Missing scrollbar.

    Hi, I'm new to web design.

    when I view my webpage in firefox I dont have a scrollbar.

    I have a feeling it is to do with the
    position; fixed
    tags I have in my CSS coding.

    When i remove all of these tags, sure my scrollbar is there, but all my content is all over the place!

    I'll quite happily move my content back into its correct place, but then i hit another problem, the text and image moves when i scale web browsers sizes (part of the whole reason why I added position; fixed)

    A little help for a confused newbie,


    many thanks


    [code]




    body {background-color: #eeedee;
    font-family:"avenir";


    }

    @font-face {
    font-family: 'AvenirLTCom45Book';
    src: url('avenirltcom-book-webfont.eot');
    src: url('avenirltcom-book-webfont.eot?#iefix') format('embedded-opentype'),
    url('avenirltcom-book-webfont.woff') format('woff'),
    url('avenirltcom-book-webfont.ttf') format('truetype'),
    url('avenirltcom-book-webfont.svg#AvenirLTCom45Book') format('svg');
    font-weight: normal;
    font-style: normal;

    }


    #laptop{ position:fixed;
    top:220px;
    left:250px;
    }




    h4{
    position:fixed;
    top:190px;
    left:65px;
    z-index:10;
    font-size:12px;
    font-weight:100;





    }

    h3{
    position:fixed;
    top:240px;
    left:135px;
    z-index:10;
    font-size:14px;
    font-weight:600;
    line-height:1.5em;


    }


    h2{
    position:fixed;
    top:145px;
    left:65px;
    font-weight:100;
    z-index:10;
    font-size:12px;

    }


    h1{
    position:fixed;
    top:110px;
    left:65px;
    line-height:9em;
    z-index:10;
    font-size:14px;
    font-weight:500;
    line-height:1em;



    }


    a:link {
    color:#171717;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color:#171717;
    }
    a:hover {
    text-decoration: none;
    color:#171717;
    }
    a:active {
    text-decoration: none;
    color:#171717;
    }

    <style type="text/css">
    a:link {
    color:#60605B;
    text-decoration:none;
    }
    a:hover {
    color:#F7B50C;
    text-decoration:none;
    }


    #images {
    top:25px;
    left:210px;
    width: 400px;
    height: 250px;

    position:fixed;

    margin: 20px auto;
    }
    #images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
    }
    #images img:first-child {
    left: 0;
    }
    #slider a {
    top:40px;
    left:210px;
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
    }
    #slider a:hover {
    background: #C6E4F2;
    }

    transition: transition-property transition-duration transition-timing-function transition-delay;


    #images img {
    z-index: 1;
    opacity: 0;

    transition: all linear 1s;
    -o-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -webkit-transition: all linear 1s;
    }
    #images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
    }


    #images {
    width: 800px;
    height: 500px;

    position: relative;

    margin: 20px auto;
    }
    #images img {

    width: 700px;
    height: 450px;

    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
    }
    #images img:target {
    left: 100;
    z-index: 9;
    opacity: 1;
    }
    #images img:first-child {
    left: 0;
    }
    #slider a {
    top:200px;
    left:210px;
    text-decoration: none;
    background:#F60;
    border: none;
    padding: 4px 6px;
    color: #222;
    }
    #slider a:hover {
    background:#eeedee;
    }
    #number{
    position:fixed;
    top:180px;
    left:580px;
    }


    h8{
    position:fixed;
    top:190px;
    left:945px;
    z-index:20;
    font-size:12px;
    font-weight:600;
    }

    div {
    overflow: visible;

    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    A little help for a confused newbie,
    It's not a good practice to have absolute/fixed positions everywhere. Perhaps, you need to drop most of them and allow the elements to be in normal flow. Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, the position tags where just an answer to everything being fixed on the page.

    sure, http://www.claire-munro.com/

    bearing in mind it is still very much work in progress.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •