Photo Galleries


#142

I just noticed on my iPhone 8+. That the page stays to the right and that’s there’s space on the left.


#143

the current url is????


#144

My fault at my end. Sorry. Working now


#145

@conquer2

I think we need to make a couple of minor changes to the h1 tag in your header.

In the current html structure I had set the... "A Division of Charisma Communications" text up in the h1 as a <small> tag.

That really needs to be pulled out of the h1 since it appears to be more of aside content.

Here is how I think it should really be, now that I thought about it some more.

      <div class="header">
        <div class="logo"></div>
        <div class="heading">
          <h1>
            <span>1 Finger Trigger</span>
            <br>
            <span>photographer</span>
          </h1>
          <p class="small">A Division of Charisma Communications</p>
        </div>
      </div><!--Header Ends -->

Here's the new CSS that accommodates those changes and leaves it looking the same as it is now.

screen-2.css (3.3 KB)


#146

Would you please post the URL to the page that you are actively updating so we can see the progress?

(The last URL that I have is from post #110 and it returns "File not found".)


#147

http://www.charismacommunications.ca/rebuild2/index.html


#148

Have not done cas yet, just woke up


#149

I just loaded the new CSS. Is there away to make just a little space between the image in the banner and the words?

http://www.charismacommunications.ca/rebuild2/gallery.html


#150

Hi, you did not update the html. That's why the CSS has the spacing wrong.

Reread post #145 and copy/paste that html into your page.


#151

Thank you. I'm off to a meeting but when I get back. I'll update the other HTML pages.


#152

I added an image and I plan to add a pharagraph around it, but first working on image. The image is 358x323. but it is massive. why would that be?

http://www.charismacommunications.ca/rebuild2/equipment.html

<img src="images/LouisGaudry.jpg" alt="Nature" class="selfie">

.selfie {
     width: 100%;
    height: auto;
}

#153

If you are expecting it to scale like your gallery images then it needs to follow the same html format as the others.

Currently you just have an <img> tag with no divs around it. A parent div around the image is what scales it when you set your image at 100% width and height auto.

Lets's look back at your gallery html...

<div class="responsive">
          <div class="gallery">
            <a href="photo-01.html">
              <img src="thumbnails/photo-01.jpg" alt="Eastern Phoebe Series #1" width="395" height="296">
            </a>
            <div class="desc">Eastern Phoebe Series #1</div>
          </div>
        </div>

And also, remember that all those .responsive divs get nested in the .main div

Are you saying that it will just be one image on that page with several paragraphs around the image?
That would require a different set-up than what was done on the gallery page.


#154

Yes. A picture of me with a little bio.


#155

In that case we can use the .main div to handle the scaling.

Let me see if I can get an example headed in the right direction.


#156

Okay let's start with the new html for that page...

      <div class="main bio">
        <div class="bio-image">
          <img src="images/LouisGaudry.jpg" alt="My Bio Photo" width="358" height="323">
        </div>
        <p>Lorem ipsum dolor sit amet consectetuer leo Quisque lacinia habitant nibh. Vestibulum lobortis ligula lorem tellus magna vitae Donec eleifend felis fringilla. Habitant leo Integer Sed at et lacinia feugiat egestas Nulla ipsum. Porttitor nibh dolor semper justo in vitae habitasse pretium Nulla.</p>
        <p>Vivamus Lorem vitae lobortis eleifend cursus risus turpis auctor neque sed. Lorem turpis interdum augue Integer gravida vel vitae Phasellus Nunc ut. Elit Ut tempus id suscipit elit vel tempor tellus semper elit. Ligula at elit lorem Nam eget dictumst rutrum sollicitudin aliquet Sed. Ridiculus Curabitur nibh sed vitae at nunc ante Cras eu ac. Convallis nulla.</p>
        <p>A Cum ut wisi In nibh sapien cursus et laoreet Nullam. Convallis egestas ut sapien lacus hendrerit ipsum pretium pede justo wisi. Risus quis sodales enim Donec vel Phasellus adipiscing sociis nec in. Nam consequat volutpat nibh laoreet at cursus aliquam orci dolor augue. </p>
        <p>Nunc laoreet Nulla nibh purus orci nibh dui dictum mollis laoreet. Sed Aliquam pede libero senectus urna ullamcorper facilisi nec Nulla justo. Tincidunt dui Nam vitae id eu consequat convallis orci vitae suscipit. Laoreet urna justo lacus ligula pretium.</p>
      </div><!-- .Main Content Ends -->

First off you will notice I added another class to the main div, we now have <div class="main bio"> . Were going to go ahead and put it in there should we need any additional styling in the main section on that page. I'll explain more about that later.

Then you will see I have wrapped a div around your image, and removed the class from the image as it won't be needed now. The <img> tag is an inline element by default and a <p> tag is a block. It is best practice not to have inline elements as siblings with blocks. That is the reason for the new div around the image.

The <div class="bio-image"> will get floated left and it will also control the scaling of the image. By floating it your p tag text will wrap around the image, as that was the original intention of floats.

Floats can be tricky though, they are removed from the page flow so the parent needs to be told to contain it's floats. We will do that by setting display:table on the .main div in the CSS. That will create a new block formatting context which will contain the floats.

/*--- Main Content Styles ---*/
.main {
  display: table; /*contain floats when they exist*/
  margin: 0 0 .75em 0;
  /*text-align: center;  moved below*/
}
.main.photo-gallery { /*new selector added for gallery page*/
  text-align: center;
}
h2 {
  font-size: 1.3em;
  text-align: center;
}
p {
  margin: .75em;
}

You will notice a new .photo-gallery class concatenated with the .main class. That says "when these two classes are found together then follow the rules below". The gallery page needed text-align center but this bio page does not.

I also adjusted the margin on the p tag so it has side margins too.


Now for the styles on the new divs and classes for this bio page, I located these right above your media queries.

/*--- equipment/bio page ---*/
.bio-image {
  float: left;
  width: 35%;
  min-width: 180px;
  max-width: 400px;
  margin:1em;
}
.bio-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/*--- Media Queries ---*/

You can see above that I can target the image without a class, and any special styles for that image just go to the .bio-image img selector.

We need to go back to the gallery page and make the adjustments for the new class I added to it above.

      <div class="main photo-gallery">
        <h2>Photo Gallery</h2>

See the new class in it now, that controls the text-align center for the gallery page.

Here is your screen css with all changes mentioned and the new html.

screen.css (3.8 KB)
equipment.html (2.7 KB)


#157

I noticed under gallery the first photo does not have a outline around it.

http://www.charismacommunications.ca/rebuild2/gallery.html


#158

It looks like you slipped the new class in the wrong spot
Here's what you have...

      <!-- .Main Content Starts -->
      <div class="main">
        <h2>Photo Gallery</h2>

        <div class="responsive">
          <div class="main photo-gallery">
            <a href="photo-01.html">
              <img src="thumbnails/photo-01.jpg" alt="Eastern Phoebe Series #1" width="395" height="296">
            </a>
            <div class="desc">Eastern Phoebe Series #1</div>
          </div>
        </div>

Here's what it needed...

      <!-- .Main Content Starts -->
      <div class="main photo-gallery">
        <h2>Photo Gallery</h2>

        <div class="responsive">
          <div class="gallery">
            <a href="photo-01.html">
              <img src="thumbnails/photo-01.jpg" alt="Eastern Phoebe Series #1" width="395" height="296">
            </a>
            <div class="desc">Eastern Phoebe Series #1</div>
          </div>
        </div>

I've found some other things we can clean up on that gallery page. I'm going to make some more adjustments so just hang on before you make any more progress on it.

I'll post back in a little while


#159

Is that Photography Equipment page going to be as the name suggests, or will it be your bio page?

I want to set up naming conventions that refer to the relative pages. It will make it easier to manage the CSS.


#160

Both


#161

Ok conquer2,
I've made some beneficial changes to your html/css. Let me start with the gallery page.

You will notice that you had a .current class on your menu items. So you know that was for page specific styling, and it is also important to locate that class according to each page.

I've also changed the menu ul to a classname rather than an ID to lighten up on the specificity of the css.

      <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="equipment.html">Photography Equipment</a></li>
        <li><a href="gallery.html" class="current">Gallery</a></li>
        <li><a href="speaker.html">Speaker</a></li>
        <li><a href="accessibility.html">Web accessibility</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul><!-- Menu Ends -->

      <div class="main gallery">
        <h2>Photo Gallery</h2>

        <div class="thumbs">
          <a href="photo-01.html">
            <img src="thumbnails/photo-01.jpg" alt="Eastern Phoebe Series #1" width="395" height="296">
          </a>
          <div class="desc">Eastern Phoebe Series #1</div>
        </div>

Notice the .current class on the gallery link, likewise I set that new selector up in the css. It allows you to add/remove styles. I have added a bottom border and changed the cursor with it. You can style it as you please, it was just some sample styles to show how it works.

Now what I was really after was cleaning up the thumbnail divs. I was able to remove the inner .gallery divs and I have renamed the wrapping div to .thumbs

With the .gallery classname free again I moved it in with the .main div so now we have...

<div class="main gallery">

Much more descriptive names which will help organize the css. Several divs have been eliminated as well.


Now to the equipment/bio page, pretty much the same formula but with classnames changing and describing themselves.

      <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="equipment.html" class="current">Photography Equipment</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="speaker.html">Speaker</a></li>
        <li><a href="accessibility.html">Web accessibility</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul><!-- Menu Ends -->

      <div class="main equipment">
        <h2>Photography Equipment &amp; Bio</h2>
        <div class="bio-image">
          <img src="images/LouisGaudry.jpg" alt="My Bio Photo" width="358" height="323">
        </div>
        <p>Lorem ipsum dolor sit amet consectetuer leo Quisque lacinia habitant nibh. Vestibulum lobortis ligula lorem tellus magna vitae Donec eleifend felis fringilla. Habitant leo Integer Sed at et lacinia feugiat egestas Nulla ipsum. Porttitor nibh dolor semper justo in vitae habitasse pretium Nulla.</p>
        <p>Vivamus Lorem vitae lobortis eleifend cursus risus turpis auctor neque sed. Lorem turpis interdum augue Integer gravida vel vitae Phasellus Nunc ut. Elit Ut tempus id suscipit elit vel tempor tellus semper elit. Ligula at elit lorem Nam eget dictumst rutrum sollicitudin aliquet Sed. Ridiculus Curabitur nibh sed vitae at nunc ante Cras eu ac. Convallis nulla.</p>
        <p>A Cum ut wisi In nibh sapien cursus et laoreet Nullam. Convallis egestas ut sapien lacus hendrerit ipsum pretium pede justo wisi. Risus quis sodales enim Donec vel Phasellus adipiscing sociis nec in. Nam consequat volutpat nibh laoreet at cursus aliquam orci dolor augue. </p>
        <p>Nunc laoreet Nulla nibh purus orci nibh dui dictum mollis laoreet. Sed Aliquam pede libero senectus urna ullamcorper facilisi nec Nulla justo. Tincidunt dui Nam vitae id eu consequat convallis orci vitae suscipit. Laoreet urna justo lacus ligula pretium.</p>
      </div><!-- .Main Content Ends -->

I made all the adjustments to the CSS and media queries, for those HTML changes.

body {
  background: #ffffff;
  font: 100%/1.2 tahoma, helvetica, sans-serif;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
  border: 1px solid black;
  border-radius: 20px;
  max-width: 72em;
  margin: 0 auto;
}
#footer {
  text-align: center;
  border-top: 1px solid #000;
}
img { /* this targets all images on the site!, could cause issues later on*/
  border-radius: 19px;
  display: block;
  width: 100%;
  height: auto;
}

/*--- Header Styles ---*/
.header {
  display: flex;
  flex-flow: row nowrap;
  border-radius: 20px 20px 0 0;
}
  .logo {
    flex: 0 0 50%;
    border-radius: 19px 0 0 0;
    background: url(../images/logo.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .heading {
    flex: 1 1 50%;
    padding: 0 .8em 0 0;
    font-size: 2em;
    text-align: right;
  }
    .heading h1 {
      margin: .65em 0 0;
      font-size: inherit;
      line-height: 1.1;
    }
    h1 span {
      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;
    }
    p.small {
      display: inline-block;
      margin: 1.5em 0;
      font-size: .45em;
      font-family: sans-serif;
      font-weight: 700;
    }

/*--- Menu Styles ---*/
.menu {
  list-style: none;
  text-align: center;
  padding: 0.25em 0 0;
  margin: 0 auto;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.menu li {
  display: inline-block;
}
.menu a {
  display: block;
  padding: 0.25em 0;
  margin: 0 1em .6em;
  text-decoration: none;
  font-size: .85em;
  font-weight: bold;
  color: #000;
}
.menu a:hover {
  color: #0000EE;
}
.menu a.current {  /*this is the current page anchor styles*/
  cursor: default;
  border-bottom: 1px solid;
}
.menu a.current:hover {
  color: #000;
}
/*--- Main Content Styles ---*/
.main {
  padding: 1px 0; /*uncollapse margins*/
}
.main:after,
.contain:after { /*to contain floats when they exist, just add a .contain class*/
  content: "";
  display: block;
  clear: both;
}
h2 {
  font-size: 1.3em;
  margin: .75em;
  text-align: center;
}
p {
  margin: .75em;
}

/*--- Gallery Styles ---*/
.main.gallery { /*this allows for page specific styling*/
  text-align: center; /* center the inline-block thumbs*/
}
.thumbs {
  display:inline-block;
  vertical-align:top;
  width: 23%;
  margin: 0 .25em .75em;/* added .25em side margins*/
  /*padding: 0 6px; /*removed padding*/
  border: 1px solid #ccc;
  border-radius: 20px;
}
.thumbs:hover {
  border: 1px solid #777;
}
div.desc {
  padding: 15px;
  text-align: center;
}

/*--- Single Large Image Page Styles --*/
.img-wrap {
  width: 90%;
  margin: auto;
  text-align: center;
}
.index {
  display: table;
  width: 100%;
  margin: .75em 0;
  line-height: 1.1;
}
.index a {
  display: table-cell;
  width: 33.33%;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}
.index a:first-child {
  text-align: left;
}
.index a:last-child {
  text-align: right;
}
.img-wrap h1 {
  font-size: 1.5em;
  margin: .75em 0;
}
.img-wrap img {/*leave this selector here for future styles*/
  margin: auto; /* margin:auto is already on img styles*/
}

/*--- Equipment & Bio page ---*/
.main.equipment { /*this allows for page specific styling*/
  background: #eee; /*example background color, could be a background image*/
}
.bio-image {
  float: left;
  width: 50%;
  min-width: 200px;
  max-width: 400px;
  margin: 0 .75em .75em;
}
.bio-image img { /*leave this selector here for future styles*/
  margin: auto; /* margin:auto is already on img styles*/
}

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

@media only screen and (max-width: 500px) {
  .thumbs {
  	width: 95%;
  }
  .header {
    background: url(../images/logo.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .logo {
    display:none;
  }
  .heading {
    font-size: 1.5em;
    padding: 0 .5em;
  }
  .heading h1 span, p.small {
    background: #fff;
    padding: .25em;
    opacity: .8;
    border-radius: .25em;
  }
  .bio-image {
    float: none;
    display: block;
    width: 95%;
    margin: .75em auto;
  }
}

Here is a zip with those files that should plug in to your folder.
Once again, make backups of your files just in case.
This will be an improvement in the html structure though.

EDIT:
File updated with page title corrections and templates for other pages
photo-gallery.zip (6.9 KB)