Box and image alignment

Forum|Forum|5 years ago
November 6, 2020
3 replies
475 views

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

This topic has been closed for replies.

O

osgood_

Legend

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.

R

racephotomanAuthor

Participating Frequently

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