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.
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.
Thread Starter
mjjc
(@mjjc)
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.]
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 :
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>
Thread Starter
mjjc
(@mjjc)
Thanks dkotter. Works fine now. My coding knowledge has plenty of room for improvement!
Thread Starter
mjjc
(@mjjc)
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!
So, you’re from Lydiate? It’s a small world!
I’ll say. Used to live just off Coronation Road a few years back!
