Highlighted

Box and image alignment

New Here ,
Nov 06, 2020

Copy link to clipboard

Copied

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

Views

74

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Box and image alignment

New Here ,
Nov 06, 2020

Copy link to clipboard

Copied

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

Views

75

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 06, 2020 0
Most Valuable Participant ,
Nov 06, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2020 0
Adobe Community Professional ,
Nov 06, 2020

Copy link to clipboard

Copied

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.]

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2020 0
LEGEND ,
Nov 06, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2020 0
New Here ,
Nov 09, 2020

Copy link to clipboard

Copied

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

 

   

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2020 0
Adobe Community Professional ,
Nov 09, 2020

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2020 0
osgood_ LATEST
LEGEND ,
Nov 09, 2020

Copy link to clipboard

Copied

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;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2020 0