Box and image alignment

[racephotoman]

I have several boxes with text and images on my page.  One box is actually the lower border of an image, and it or the image itself won't align looking like a few pixels off. 

for both the boxes and images I coded: 

width: 1200px;      (images are 1200px wide)
height: 85px;         (height code missing for the image setup)
margin-left: auto;
margin-right: auto;
background-color: #BDBDBD;
vertical-align: middle;

problem can be seen at:

http://www.september8th.com/travelpictorials.html

Any help would be appreciated.

Walter

[John T Smith]

Please post the exact name of the Adobe program you use so a Moderator may move this message to that forum
When you ask a question you need to provide some basic information
-Forum quick start https://community.adobe.com/t5/Community-Help/ASK-Forum-Success-Guide-Efficiently-using-the-forums/t...
-https://community.adobe.com/t5/Get-Started/Questions-you-need-to-answer-to-receive-better-help/td-p/...
-https://community.adobe.com/t5/get-started/how-to-post-and-get-your-issue-resolved-or-what-do-you-ne...

[Nancy OShea]

Judging by the document type (XHTML strict), this looks like an older website that was built with Dreamweaver or some other code editor.

Your first line of defense against muddled rendering is to validate your code and fix reported errors.  See link below for details.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.september8th.com%2Ftravelpictorials.htm...

BTW, you really should update your site to modern HTML5.  Since 2014, HTML5 has been the current web standard.

- https://www.w3schools.com/html/

[Moderator moved from Creative Cloud Services to Dreamweaver.]

[osgood_]

You dont need that complex set up. Keep it simple -

You can remove the 'linkbuttonnational' <div> completely so the html is like below:

<div class ="photoalignzero">
<a href="travel-baja1.html"><img src="images/homepages/travel-homepage-masthead-bajax.jpg" alt="PCH" /></a>
<div class="photoborder">
<a href="http://www.nationalgeographic.com/expeditions">A National Geographic&#47;Lindblad Expedition</a>
</div>
<!-- end photoborder -->
</div>	
<!-- end photoalignzero -->

Then amend your css selectors as below: (Note '.photoalignzero img' AND '.photoborder a:hover' are additional css selectors to those that you currently have).

.photoalignzero {
width: 1200px;
margin: 0 auto 40px auto;
}
.photoalignzero img {
display: block;
}
.photoborder { 
width: 1200px;
background-color:#FFFFFF;
padding: 15px 45px;
box-sizing: border-box;
}
a {
font-family: Verdana, Arial, Helvetica;
font-size: 16px;
font-weight: 400;
color: #000000;
text-decoration: none;
}
.photoborder a:hover { 
color: red;
}

You'll then have perfect alignment.

[racephotoman]

Thank you - did the changes.  I just need to update the TOP of PAGE code to ID.  The only minor problem I still see is the space between the images and white box below it.  the 2nd,3rd and 4th images shoes the space.  Again thank you for your help.  

http://www.september8th.com/travelpictorialsxx.html

[Nancy OShea]

Add some CSS padding-top to your .copyright class.

[racephotoman]

Thank you for your help - all looks good now.  Maybe you can also answer my other little issue?

I created a practice page to test links to PayPal and wanted to place a smaller image on the page, and have it enlarge while HOVER over.  It works, but the larger HOVER image isn't as sharp as it should be? 

If you check 

www.september8th.com/store-test.html 

The top image is the 1200px image, and the bottom one is also 1200px but retricted to 500px space, hence displaying smaller.  When HOVER over it indeeds grows to the 1200px size as wanted, but comparing it to the top image (same size) you can see it is not as sharp.  Any reason for this?  

Thanks again -Walter

[osgood_]

Just use your large image for both images. Currently you are using a smaller image for your hover image 'homepage-masthead-travelx-small.jpg' which will obviously distort if it grows bigger than itself. You have instructed the  thumbnail (which will be the large image) to be 500px in your css  and grow to 1200px (its  original size) on hover, so no distortion will occur.

Just add a smoother transition effect (see in red below). No background is needed.

.thumbnail {
width: 500px;
height: auto;
transition: width 500ms ease;
}

.thumbnail:hover {
width: 1200px;
height: auto;
}

Please note that hover will not work on mobile devices and setting the image to a specific width will also not work very satisfactory on mobile devices as 1200px and 500px will be too wide for mobile screens.

[racephotoman]

Thanks Again!

[osgood_]

See if adding the css selector below to your css styles solves the issue:

.photoalignzero a:first-child {
padding: 0;
display: block
}

Really no need for the extra divs to create  the vertical space between the boxes:

<div class="photoalignx">
<br>
<br>
	</div>

You can create the vertical space by adding 40px bottom margin to the css selector below:

.photoalignzero {
width: 1200px;
margin: 0 auto 40px auto;
}