/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Why when my website load the slidwhow display on the left bottom and not center ?

I have css style file.
The problem is that my chrome for example chrome is on 100% zoom.
But my brother chrome he is using it with 150% zoom.

And my slideshow position is on left bottom.

What i need it to be and to do is:

  • 1.

    To be in the center of the screen on any zoom.

  • 2.

    If the user zoom in more then if needed to add bar on the right so the user can scroll up down.
    Now there is no scroll bar on the right at all.

  • This is screenshot of how the page look like at 100% zoom:

    [URL=”http://postimg.org/image/7rr13ahmr/”]http://postimg.org/image/7rr13ahmr/[/URL]

    And this is the css style file code:

    [CODE]/* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dd,dt,dl,
    table,tr,td,th,p,img {
    margin:0;
    padding:0;
    }

    img,fieldset {
    border:none;
    }

    hr {
    display:none;
    /*
    HR in my code are for semantic breaks in topic/section, NOT
    style/presenation, so hide them from screen.css users
    */
    }

    @media (max-width:600px) {
    * {
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    }
    }

    body {
    font:normal 85%/150% “segoe ui”,helvetica,sans-serif;
    background-image: url(“CB1.html”);
    position:fixed; //(relative, absolute, static*)
    top: 120px;
    left: 120px;
    bottom: 120px;
    }

    .ss_scripted img {
    display:none;
    }

    .ss_scripted .ss_show {
    display: block;
    }

    #slideShow img {
    margin:0 auto;
    }

    #slideCounter {
    text-align:center;
    padding:0.25em 1em;
    font:bold 200%/120% consolas,courier,monospace;
    color:#C00;
    }

    #slideControls {
    width:512px;
    padding:0.5em 0;
    margin:0 auto;
    }

    #slideControls a {
    float:left;
    padding:0.25em 0.6em;
    text-decoration:none;
    color:#000;
    background:#EEE;
    border:2px solid #666;
    -webkit-border-radius:1em;
    -moz-border-radius:1em;
    border-radius:1em;
    -webkit-box-shadow:
    inset 0 -0.5em 1em rgba(0,0,0,0.3),
    0 0 1px #000;
    -moz-box-shadow:
    inset 0 -0.5em 1em rgba(0,0,0,0.3),
    0 0 1px #000;
    box-shadow:
    inset 0 -0.5em 1em rgba(0,0,0,0.3),
    0 0 1px #000;
    }

    #slideControls a:active,
    #slideControls a:focus,
    #slideControls a:hover {
    background:#FFF;
    }

    #slideControls .next {
    float:right;
    } [/CODE]

    to post a comment
    JavaScript

    1 Comments(s)

    Copy linkTweet thisAlerts:
    @ChocoladeauthorNov 20.2014 — And this is a link to my website to see how it looks like live on 100% zoom: http://newsxpressmedia.com/SlideShow.php
    ×

    Success!

    Help @Chocolade spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.4,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...