#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17

    Centering images


    I'm using the following to center images on a page:
    Code:
    .center {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    But they are not quite centered. Or is my monitor f'd up?

    I'd like to have some text directly below the "Faith and Vengeance" image but over the background cross image, and that is a problem to solve. But really, the centering thing is vexing me.

    See here: https://botteronet.com/fandv/
    Last edited by Arty Zifferelli; September 23rd, 2017 at 03:55 AM.
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Arty Zifferelli,

    as your images are presentational rather than contextual, I
    would suggest that you try an entirely different approach...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #000;
        background-image: url(https://botteronet.com/fandv/images/fandv.png), 
                          url(https://botteronet.com/fandv/images/testcross.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 34em auto;
        background-attachment: fixed;
        font: 1em/150% verdana, arial, helvetica, sans-serif;
     }
    @media ( max-width: 40em ) {
    body {
        background-size: 25em auto;
      }
     }
    @media ( max-width: 30em ) {
    body {
        background-size: 18.75em auto;
      }
     }
    @media ( max-width: 20em ) {
    body {
        background-size: 12.5em auto;
      }
     }
    </style>
    
    </head>
    <body> 
    
    </body>
    </html>

    coothead

    Comments on this post

    • Arty Zifferelli agrees : Awsome!
    ~ the original bald headed old fart ~
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17
    That looks very nice.

    Explain to me what's going on with the CSS and how I might add text under fandv.png but over testcross.png?

    Not asking you to do my work, of course, but I'm still grasping the complexity of some of the more complicated layouts in CSS.
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Arty Zifferelli,

    does this help...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    html, body {
        display: table;
        width: 100%;
        height: 100%;
        margin: 0;
      
     }
    
    body {
        display: table-cell;
        vertical-align: middle;
        background-color: #000;
        background-image: url(https://botteronet.com/fandv/images/fandv.png), 
                          url(https://botteronet.com/fandv/images/testcross.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 34em auto;
        background-attachment: fixed;
        font: 1em/150% verdana, arial, helvetica, sans-serif;
     }
    
    h1 {
        padding-top: 7em;
        font-size: 1.3em;
        color: #fff;
        text-align: center;
        text-shadow: 0 0 0.2em #360000;
     }
    
    @media ( max-width: 40em ) {
    body {
        background-size: 25em auto;
      }
    
    h1 {
        padding-top: 6em;
      }
     }
    @media ( max-width: 30em ) {
    body {
        background-size: 18.75em auto;
      }
    
    h1 {
        padding-top: 5em;
      }
     }
    @media ( max-width: 20em ) {
    body {
        background-size: 12.5em auto;
      }
    
    h1 {
        padding-top: 4em;
      }
     }
    </style>
    
    </head>
    <body> 
    
     <h1>This is page information</h1>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17
    OK, I see how that works. Everything is a little off-center to the right, but I'll figure that out... Wow, thanks.
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Arty Zifferelli,

    everything is dead center in my test browsers.

    coothead
    ~ the original bald headed old fart ~
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17
    Well then, my browser need adjustment!
  14. #8
  15. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Arty Zifferelli,

    I have attached an image of the page in Firefox....

    coothead
    Attached Images
    ~ the original bald headed old fart ~
  16. #9
  17. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132


    ...and here is one in Chrome...

    coothead
    Attached Images
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo