WordPress.org

1. mjjc
   Member
   Posted 1 year ago #
   

   I am using WordPress to create a website for my scout group based on a theme. The website is http://www.lydiatescouts.org.uk and I have added a thin black border around the header which is obscured by the images and logos contained in it. I am a novice at this and would really appreciate some help in getting the border to show fully rather than intermittently as it does now.
   If anyone can look at the code and advise how to position the images inboard both vertically and horizontally from left and right I'd be obliged.

   Thanks.

2. dkotter
   Member
   Posted 1 year ago #
   

   Okay I made three changes to the styling and it made the black border show up 100%.

   #logo {
      width: 748px;
      padding: 1px;
   }

   And then on the merseyside image, I added 1px padding-right on the div.

   And finally on the Scouting in Lydiate image, I added 1px padding-left on the div.

3. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #
   

   Oh cool! I used to live down the road from your scout troop!

   Start by adding margin:2px;
   to:
   

   #logo {
       width: 750px;
   }

   in style.css. Then add margin-left:1px; to the inline CSS on the "Scouting since..." image div. Finally, you need to reduce the width of each of the badge images in the header and add a 1px margin-right to the inline style for each of their div blocks.

4. mjjc
   Member
   Posted 1 year ago #
   

   dkotter, thanks for the reply. I had partial success using your solution. The first part sorted out the top left corner of the header. However, the border is still obscured to the side of the images. I changed the code as below:
   First change:
   #logo {
   width:748px; (was 750px)
   padding:1px; (added)
   }

   The second and third changes didn’t change anything:
   I added the padding statements in header.php. Should I have removed the "float-right" and "float-left" statements? Are these forcing the images to overlap the border?

   <div style="float:right"; padding-right=”1px"; border-left="10px";><a href="http://www.merseysidescouts.com/"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/merseyside-black-yellow.png" alt="" width="70" height="110" /></a></div>
   <div style="float:right"; border-right="10px";><a href="http://www.altsidescouting.org.uk/"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/altside-black-yellow.png" alt="" width="70" height="110" /></a></div>
   <div style="float:right"; border-right="10px";><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/group-black-yellow.png" alt="" width="67" height="110" /></div>
   <div style="float:left"; padding-left="1px"; border-left="50px";><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/scouting-tagline-5.png" alt="" width="278" height="20" /></div>

   [Please post code snippets between backticks or use the code button.]

5. dkotter
   Member
   Posted 1 year ago #
   

   You have a typo in your code, which is probably why it isn't working. It should look like this:

   <div style="float:right; padding-right:1px";><a href="http://www.merseysidescouts.com/"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/merseyside-black-yellow.png" alt="" width="70" height="110" /></a></div>
   <div style="float:right"; border-right="10px";><a href="http://www.altsidescouting.org.uk/"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/altside-black-yellow.png" alt="" width="70" height="110" /></a></div>
   <div style="float:right"; border-right="10px";><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/group-black-yellow.png" alt="" width="67" height="110" /></div>
   <div style="float:left; padding-left:1px;"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/scouting-tagline-5.png" alt="" width="278" height="20" /></div>

   Notice the change of parentheses and the change from = to :

6. oliverchank
   Member
   Posted 1 year ago #
   

   Just wanted to correct a few more typos, be very careful with the double quotes and semi-colons in your inline css style attributes:

   <div style="float:right; padding-right:1px"><a href="http://www.merseysidescouts.com/"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/merseyside-black-yellow.png" alt="" width="70" height="110" /></a></div>
   <div style="float:right; border-right: 10px"><a href="http://www.altsidescouting.org.uk/"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/altside-black-yellow.png" alt="" width="70" height="110" /></a></div>
   <div style="float:right; border-right: 10px"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/group-black-yellow.png" alt="" width="67" height="110" /></div>
   <div style="float:left; padding-left:1px;"><img src="http://www.lydiatescouts.org.uk/wp-content/uploads/scouting-tagline-5.png" alt="" width="278" height="20" /></div>

7. mjjc
   Member
   Posted 1 year ago #
   

   Thanks dkotter. Works fine now. My coding knowledge has plenty of room for improvement!

8. mjjc
   Member
   Posted 1 year ago #
   

   Sorry to go off-message, but thanks esmi for the reply. (dkotter just beat you to it).

   So, you're from Lydiate? It's a small world!

9. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #
   

   So, you're from Lydiate? It's a small world!

   I'll say. Used to live just off Coronation Road a few years back!

Topic Closed

This topic has been closed to new replies.