Skip to main content
M
markf26988182
Known Participant
July 30, 2018
Question

Linking to Images on another Page?

  • July 30, 2018
  • 2 replies
  • 801 views

hello again...

New site very near complete (thanx to some good people here)...one minor detail left:

On my home page, in the EVENTS Column (far right, light blue), I'm listing upcoming events already having flyers on the EVENTS Page.  I needed to have the link from the Column (titled 'CLICK HERE FOR FLYER') lead to the appropriate image on the EVENTS Page; & have that image be centered vertically on the page.

So...even tho it's bootstrap, the images on the EVENTS Page are in a div, the 1st of which looked like this:

<div class="text-center">

  <img src="BCANA001.jpg" width="704" height="937" alt=""/>

</div>

so I just wrapped that w/ a div ID, to look like this:

<div id="image1">

  <div class="text-center">

    <img src="BCANA001.jpg" width="704" height="937" alt=""/>

  </div>

</div>

& then linked to it (from the home page EVENTS Column) like so:

<a href="events.html#image1">CLICK HERE FOR FLYER</a>

now...that works...but for all 3 images (posted thusfar)...the very top of the image is positioned at the very top of the page (making some of the top portion of the image hidden by the top nav bar/banner).

Is there a way to have the images be centered exact vertically?

(or...at least have the very top appear just below the top nav bar?)

[Updated Site is here: Burlington County Area of NA / Home page ]

thanx,

MF

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    July 31, 2018

    The problem is the event images are too big to fit the screen comfortably. Why dont you just link to pdf files, that open in seperate windows or maybe open the images in a modal window which overlays the page? You can still keep the events page as is.

    M
    markf26988182Author
    Known Participant
    July 31, 2018

    osgood...

    because...once the users have gone to the linked event images...I want them to then be able to scroll up & down to other events.

    thanx,

    MF

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 30, 2018

    For vertical and horizontal centering, use this code for each Event Flyer page. 

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Centering with CSS Flexbox</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    body, html {

        margin: 0;

        padding: 0;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    main {

        padding: 2%;

        text-align: center;

    }

    </style>

    </head>

    <body>

    <main>

    <img class="img-fluid" src="https://dummyimage.com/500x400" alt="my image">

    </main>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    M
    markf26988182Author
    Known Participant
    July 30, 2018

    Nancy...

    I'm confused...the event flyer images aren't on separate pages...they're all on the same page...the EVENTS Page.  Not sure how to use your code, that being the case.

    thanx,

    MF

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 30, 2018

    You asked for a horizontally and vertically centered image, right?  Well that's the code I gave you.  But it can only vertically center 1 image per page.   See screenshot.

    Maybe what you really want is some extra margins and padding between your images.   See this link for details on Bootstrap Spacing.

    https://getbootstrap.com/docs/4.1/utilities/spacing/

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices