Highlighted

Linking to Images on another Page?

New Here ,
Jul 30, 2018

Copy link to clipboard

Copied

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

Views

338

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Linking to Images on another Page?

New Here ,
Jul 30, 2018

Copy link to clipboard

Copied

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

Views

339

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 30, 2018 0
Adobe Community Professional ,
Jul 30, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 30, 2018 0
New Here ,
Jul 30, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 30, 2018 0
Adobe Community Professional ,
Jul 30, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 30, 2018 1
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

spacing wont help...the links are specific to the images only.  I tried putting in my own spacers already (<br>'s, narrow white image files)...the images still show as pegged to the top of the page

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
Adobe Community Professional ,
Jul 31, 2018

Copy link to clipboard

Copied

Put your unique IDs above the images and add sufficient margins & padding between them like this.  In Bootstrap 4, m = margins, p = padding.   Adjust values as needed.

<section id="one" class="m-5">

<p class="p-3">IMAGE ONE GOES HERE</p>

</section>

<section id="two" class="m-5">

<p class="p-3">IMAGE TWO GOES HERE</p>

</section>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0
New Here ,
Aug 01, 2018

Copy link to clipboard

Copied

Nancy...

thanx...so you're saying...on the EVENTS Page, replace this:

<div id="image1">

  <div class="text-center">

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

  </div>

</div>

with this:

<section id="one" class="m-5">

<p class="p-3">IMAGE ONE GOES HERE</p>

</section>

correct?

so then, the current link from the home page EVENTS Column, is this:

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

how would that be altered (to correspond to your new section code)?

thanx again,

MF

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 01, 2018 0
Adobe Community Professional ,
Aug 01, 2018

Copy link to clipboard

Copied

Try this:

<a href="events.html#one">Link to section one</a>

<a href="events.html#two">Link to section two</a>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 01, 2018 1
New Here ,
Aug 05, 2018

Copy link to clipboard

Copied

That doesn't work...same deal (defaults to top of image at top of page).  I guess I'll just leave it the way it is...at lease the links get the user to the correct document on the correct page, where they can then scroll on their own to view it fully, or view others.

thanx,

MF

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 05, 2018 0
LEGEND ,
Jul 31, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 1
New Here ,
Jul 31, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 31, 2018 0