Photo Galleries

HTML & CSS
102

If I pick a font for the web. will that be ok?

103

Did you mean from the web?

Here is a screenshot of a free font called Yesteryear from google fonts.

104

Maybe off-topic. This article is near ten years old, so I wonder if font stacks are pretty much moot these days? If not, wouldn’t something like
my preferred font - next best font - ok font - whatever font
be something to consider?

105

Or just pay for a licence and serve your first choice font as a web font.

106

I added Yesteryear font and looked at it on IE, Google Chrome, and Firefox. looks good.

107

I liked this one too, it is similar to the Pristina font in your banner image.

Kaushan Script

It’s not as bold as the Yesteryear, I also toned it down with font-weight

108

How did you tone down the font weight?

109

Actually I made some other changes in the h1 styles. I set up a selector for the first span that contains the “1 Finger Trigger” text. By doing that I was able to get specific styles there without having to overwrite anything that inherited to the other spans.

  .header h1 {
    flex: 1 1 50%;
    padding: 0 .8em 0 0;
    text-align: right;
    font-size: 2em;
    line-height: 1;
  }
    .header h1 * {
      display: inline-block;
    }
    h1 span:nth-of-type(1) {
      font-size: 1.4em;
      font-family: 'Kaushan Script', cursive;
      font-weight: 500;
    }
    h1 span:nth-of-type(2) {
      margin: .25em 0 0;
      font-size: .75em;
      font-family: tahoma;
      font-weight: 500;
    }
    h1 small {
      margin: 2em 0 0;
      font-size: .45em;
      font-family: sans-serif;
    }

/*--- Media Queries ---*/
@media only screen and (max-width: 700px) {
  .responsive {
    width: 48%;
  }
  .header h1 {
    font-size: 1.6em;
  }
  .logo {
    flex: 0 0 40%;
  }
}

There’s subtle changes throughout those styles. Those changes helped keep the text from wrapping to new lines.


  .header h1 {
    flex: 1 1 50%;
    padding: 0 .8em 0 0;
    text-align: right;
    font-size: 2em;
    line-height: 1;
  }

You can control all the span font-sizes now by changing the font-size: 2em; on the h1.

110

that looks cleaner.
http://www.charismacommunications.ca/rebuild2/photography.html

111

It looks like you missed the new selector I was talking about.

    h1 span:nth-of-type(1) {
      font-size: 1.4em;
      font-family: 'Kaushan Script', cursive;
      font-weight: 500;
    }

Here is the complete CSS file if you want to lay it in your CSS folder
screen.css (3.1 KB)

Then get the font link corrected in your html head

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
  <link rel="stylesheet" href="css/screen.css">
  <title>Home - 1 Finger Trigger Photographer</title>
</head>
112

Your right. Thanks.

113

I see the CSS corrections now but you still have the wrong font link in the head.

I’ve been clearing my cache too.

See my last post and copy/paste the head section into your html

114

Fixed CSS. I’m making more pages for the big images. but I’m a little confused by a part of the code. What changes do I have to make here?

  <div class="index">
   <a href="photo-02.html">Previous</a>
   <a href="photography.html">Gallery</a>
   <a href="photo-04.html">Next</a>
  </div>
115

Header looks much better now. :slight_smile:

Just one little thing, you need to capitalize Trigger.

<span>1 Finger Trigger</span>

Do you mean how to get them to keep indexing through the new pages you add?

116

Yes.

117

Okay let’s look at photo-01.html that I set up, notice the “next” link points to photo-02.html

You will also see there is no “previous” link as it points back to the gallery


  <div class="index">
    <a href="photography.html">Gallery</a>
    <a href="photo-02.html">Next</a>
  </div>

Then photo-02 will point back to photo-01 in the “previous” link and it will point to photo-03 in the “next” link


  <div class="index">
    <a href="photo-01.html">Previous</a>
    <a href="photography.html">Gallery</a>
    <a href="photo-03.html">Next</a>
  </div>

So it is quite simple, previous always points to the page of a lower number and next points to the page of a greater number than the page you are editing.

Then in reverse fashion of the first page, the last page always points back to the gallery in place of the “next” link.

So if you had 30 pages, your last page would point back to photo-29 as your “previous” link and point back to gallery in place of “next”

  <div class="index">
    <a href="photo-29.html">Previous</a>
    <a href="photography.html">Gallery</a>
  </div>
118

Thank you.

1 Like
119

Before you take off and start building those pages let me show you how to optimize your large images.

Do you have IrfanView installed on your machine?

EDIT:

And while your building those pages you need to correct the width and height attributes in the <img> tag to reflect the now smaller sizes.

1500 x 1125

<div class="img-wrap">
  <div class="index">
    <a href="photo-03.html">Previous</a>
    <a href="photography.html">Gallery</a>
  </div>
  <h1>Manitoba red squirrel</h1>
  <img src="images/photo-04.jpg" width="1500" height="1125" alt="Manitoba red squirrel Photo">
</div>
120

No. But give me a minute and I will.

121

ready.