I floated it right. but I need it at the top.is that a float setting as well.
No, there is no float top.
You would need to bring your floats first in the html source.
That is the anchor would need to come before the h1 in the html.
Let me see if I can find a better way to do it without floats.
1 Like
I think it would be better to set up three index links across the top like so…
< previous gallery next >
Image Title
Any thoughts on that ?
That seems to be the accepted way of doing gallery links.
Edit:
Updated files with those changes (minus images)
photo-gallery-2.zip (3.6 KB)
This works great. I noticed that my banner is missing. What did you say about that.
Oh I just forgot to pull it down from your files earlier.
If you slip your banner image back into my images folder it should show up again.
I had said it would be better to set your banner image as a background image in the CSS. Since it is decoration and not actual page content.
Let me see if I can get that straightened out for you.
I’ve gone through your page and made several changes. Most importantly I set up an <h1> tag in your header. It’s important for search engines to see that your page has proper document outline. The <h2> lower in your page is a sub-heading of your h1.
Now, it will not scale like your banner image did because this is live text. So you will need to come to terms with that and understand that the benefits of a semantic structure will outweigh eye appeal. You can also do some more work to make things scale better and media queries can make changes too.
The header is split in 50% width divisions, just like your image was. We now have a .logo div that contains your background image (which had the text cut out) and an <h1> that contains that actual text.
<div class="wrap">
<div class="header">
<div class="logo"></div>
<h1>1 Finger trigger <span>photographer</span><small>A Division of Charisma Communications</small></h1>
</div><!--Header Ends -->
First you will see that I renamed your page wrapper to .wrap
Then you will notice a span and a small tag in your h1, that is to style the text similar to the way it was in your image. It will need some more work styling the text in the CSS but it is a starting point for now. If you can serve the same font you used in your image you will be able to style it very close.
Below is the complete html with the changes, I have also removed your <hr> tags and used borders in their place in the CSS.
The empty clearfix div was removed and another float containment method was used on your main content for the floated gallery images.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/screen.css">
<title>Home - 1 Finger Trigger Photographer</title>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"></div>
<h1>1 Finger trigger <span>photographer</span><small>A Division of Charisma Communications</small></h1>
</div><!--Header Ends -->
<ul id="mainMenu">
<li><a href="index.html" class="current">Home</a></li>
<li><a href="photography.html">Photography</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">
<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>
<div class="responsive">
<div class="gallery">
<a href="photo-02.html">
<img src="thumbnails/photo-02.jpg" alt="Eastern Phoebe Series #2" width="395" height="296">
</a>
<div class="desc">Eastern Phoebe Series #2</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="photo-03.html">
<img src="thumbnails/photo-03.jpg" alt="Eastern Phoebe Series #3" width="395" height="296">
</a>
<div class="desc">Eastern Phoebe Series #3</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="photo-04.html">
<img src="thumbnails/photo-04.jpg" alt="Manitoba red squirrel" width="395" height="296">
</a>
<div class="desc">Manitoba red squirrel</div>
</div>
</div>
</div><!-- .Main Content Ends -->
<div id="footer">
<p> © 2018 1 Finger Trigger Photographer. Division of Charisma Communications All rights reserved</p>
</div>
</div><!-- Wrap Ends -->
</body>
</html>
Here is the revised CSS to go with it…
body {
background: #ffffff none repeat scroll 0 0;
font: 87.5%/150% tahoma, helvetica, sans-serif;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.wrap {
border: 0.125em solid black;
border-radius: 1.5625em;
max-width: 72em;
margin: 0 auto;
}
/*--- Header Styles ---*/
.header {
display: flex;
flex-flow: row nowrap;
border-bottom: 0.125em solid #000;
}
.logo {
flex: 0 0 50%;
border-radius: 1.5625em 0 0 0;
background: url(../images/logo.jpg) no-repeat 50% 50%;
background-size: cover;
}
.header h1 {
flex: 1 1 50%;
padding: 0 1em;
text-align: center;
font-size: 2rem;
font-family: Segoe Script;
line-height: 1.2;
}
h1 span {
display: block;
margin: .25em 0 0;
text-align: right;
font-size: .6em;
font-family: tahoma;
font-weight: 500;
}
h1 small {
display: block;
margin: 2em 0 0;
text-align: right;
font-size: .45em;
font-family: sans-serif;
}
/*--- Menu Styles ---*/
#mainMenu {
list-style: none;
text-align: center;
padding: 0.25em 0 0;
margin: 0 auto;
}
#mainMenu li {
display: inline;
}
#mainMenu a {
display: inline-block;
padding: 0.25em 1em;
margin-bottom: 0.5em;
text-decoration: none;
font: bold 125%/150% tahoma, helvetica, sans-serif;
color: #000;
}
/*--- Main Content Styles ---*/
.main {
display: table;/*contain floats*/
width: 100%;
margin: 0 0 .75em 0;
border-top: 0.125em solid #000;
}
h2 {
text-align: center
}
img {
border-radius: 1.25em;
display: block;
height: auto;
width: 100%;
}
/* Gallery Starts Here */
div.gallery {
border: 1px solid #ccc;
border-radius: 1.25em;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#footer {
text-align: center;
border-top: 0.125em solid #000;
}
/*--- Single 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-weight: bold;
}
.index a:first-child {
text-align: left;
}
.index a:last-child {
text-align: right;
}
.img-wrap h1 {
margin: .75em 0;
line-height: 1.1;
}
.img-wrap img {
margin: auto;
}
/*--- Media Queries ---*/
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
.logo {
flex: 0 0 40%;
}
.header h1 {
padding: 0 .5em;
}
}
And the new logo image and all other files are in this revised zip file.
For now you might want to save it as version-3 or something so you can keep a copy of your old files.
photo-gallery-3.zip (1.2 MB)
It will need some more work but we can help you with it.
Following up on what I mentioned above. I was in a bit of a rush yesterday and left the header a little sloppy.
So using some media queries, and reworking the html structure in the h1 a bit more, I came up with a header that scales better.
<div class="header">
<div class="logo"></div>
<h1>
<span>1 Finger trigger</span><br>
<span>photographer</span><br>
<small>A Division of Charisma Communications</small>
</h1>
</div>
Now there is a span or small tag around all the text in the h1, that gets it set up for what will happen on mobiles.
I was using display:block on the span to drop it down to a new line, now I’m using inline-block so I can get a shrink to fit container. Now the <br> tags will take care of them dropping to a new line. Inline block will also help since we can use text-align right on the h1 to shift them all to the right.
When the smallest media query kicks in I am removing the logo div and shift the background image to the header itself. That’s where those inline-block spans allow me to set a background color on the text only so it’s readable on top the image, with some opacity to help the bg image show through.
So if you were to locate the font you used for your banner image you could plug it in to the CSS and get pretty close.
The logo.jpg image I’m using is in the zip file from my last post.
I’ve also changed the body font-size back to 100% in this example, as I see no advantage in the 87.5% font-size conversion.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=" ">
<title>Home - 1 Finger Trigger Photographer</title>
<style>
body {
background: #ffffff;
font: 100%/1.2 tahoma, helvetica, sans-serif;
}
.wrap {
border: 1px solid black;
border-radius: 20px;
max-width: 1000px;
margin: 0 auto;
min-height: 300px;/*for testing with header only*/
}
/*--- Header Styles ---*/
.header {
display: flex;
flex-flow: row nowrap;
border-bottom: 1px solid #000;
border-radius: 20px 20px 0 0;
}
.logo {
flex: 0 0 50%;
border-radius: 20px 0 0 0;
background: url(images/logo.jpg) no-repeat 50% 50%;
background-size: cover;
}
.header h1 {
flex: 1 1 50%;
padding: 0 1em;
text-align: right;
font-size: 2em;
font-family: Segoe Script;
line-height: 1;
}
.header h1 * {
display: inline-block;
}
h1 span:nth-of-type(2) {
margin: .25em 0 0;
text-align: right;
font-size: .7em;
font-family: tahoma;
font-weight: 500;
}
h1 small {
margin: 2em 0 0;
font-size: .45em;
font-family: sans-serif;
}
@media only screen and (max-width: 700px) {
.header h1 {
font-size: 1.7em;
}
.logo {
flex: 0 0 40%;
}
}
@media only screen and (max-width: 500px) {
.header {
background: url(images/logo.jpg) no-repeat 50% 50%;
background-size: cover;
}
.logo {
display:none;
}
.header h1 {
font-size: 1.5em;
padding: 0 .5em;
}
.header h1 * {
background: #fff;
padding: .25em;
opacity: .8;
border-radius: .25em;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"></div>
<h1>
<span>1 Finger trigger</span><br>
<span>photographer</span><br>
<small>A Division of Charisma Communications</small>
</h1>
</div>
</div>
</body>
</html>
2 Likes
@conquer2, What are the names of the fonts used in your original header image? Did you find them on the web? If so, a URL to the fonts would be very helpful. OR, are they proprietary?
Thank you
EDIT:
Don’t know why I missed the font families, but I did 
. We will have to find web fonts that looks similar, otherwise, everyone except Mac users will miss the script “look”; OR you could choose to add Microsoft and Linux fallback fonts. That should cover most devices.
Pristina for the first line and papyrus for the second line. I got it t of photoshop
Looks like I was off-base anyway. I thought they were Mac fonts. 
PhotoShop is an Adobe product so the font families are likely Adobe’s. Unless you want to buy Adobe’s font, you will need to find a web font that has a similar or otherwise suitable “look” that you can send to the user when your site is accessed so everyone will see the same thing AND so em, rem, and line-heights are consistent.
I’ll look around later tonight, but no promises. 
Whats there now. is that ok?
Hey , for the time being and for the sake of setting up a working test case.
Why don’t you just pick out an open source font @ google fonts to substitute for the two adobe fonts.
https://fonts.google.com/?category=Handwriting
Then it can be linked to in the head tag
ok. will get on it now.
1 Like
I’'m going to stay with font-family: Segoe Script; I like it.
1 Like
Do you have your web page on a test site so we can see your updates in action?
Yes. I’ll be doing some now then more tomorrow. I’ll send a link soon.
1 Like
You can follow here. I’m now working on the big picture pages now.
http://www.charismacommunications.ca/rebuild2/photography.html
I see your still using my first (sloppy) header.
Did you miss my adjustments from post #68 ?
I’ve got it all merged into the screen.css file with adjustments made to the html too.
I didn’t want to keep slamming zip files in here but if you want I can upload the current code.
let me look now lol.
Now as I mentioned above, I’ve done away with the 85%/150% font-size and line-height on the body. Likewise I made changes everywhere else to get things back on an even keel.
But you can still make adjustments as you please.
photo-gallery-4.zip (1.2 MB)