Jewel5
Regular poster
Registered: 08-2007
Location: Hooterville USA
Posts: 179
Karma: 14 (+14/-0)
|
Reply | Quote
|
|
Adding A Border
Hello!
How do I go about adding a border to my picture at the top of my page. I added..what I thought was a good plan in the HTML header. When it didn't work, I changed it back the way it was before I could mess it up.
TEST BOARD
Thank you in advance!
Jewel
|
4/25/2011, 2:56 am
|
Link to post
PM Jewel5
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10257
Karma: 272 (+331/-59)
|
Reply | Quote
|
|
Re:
I cannot see the board but I do see a picture of a beach chair and umbrella. Is that the one you want to put a border around?
|
4/25/2011, 3:14 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Jewel5
Regular poster
Registered: 08-2007
Location: Hooterville USA
Posts: 179
Karma: 14 (+14/-0)
|
Reply | Quote
|
|
Re:
Yes, that's the one.
|
4/25/2011, 3:47 am
|
Link to post
PM Jewel5
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26733
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Adding A Border
Hi Jewel,
I see you had this in your HTML header:
<center><img src="http://i52.photobucket.com/albums/g14/Raymond63/beachbrella.jpg" width="400" height="300" border="0"> <align center>
For starters, <align center> doesn't do anything. What I think you were wanting to do there was close off your <center> tag, so I changed <align center> to </center>.
You did the same thing with the BOTM seal at the bottom of your board, so I changed <align center> to </center> there, as well.
That said, you shouldn't be using <center> tags at all, and should be defining that in your CSS. Here is how I would rewrite your HTML header:
<div id="header">
<img src="http://i52.photobucket.com/albums/g14/Raymond63/beachbrella.jpg" alt="Friends and Fun" />
</div>
I added an "alt" attribute there, so it will show the name of your board if your image host ever goes down, and so aural screen readers for the blind will read it out loud for those who can't see it.
Then to center it, put a border around it, and define its dimensions, you would add this to your CSS:
/* CENTER EVERYTHING INSIDE THE "header" DIV */
#header {
text-align: center;
}
/* DEFINE BORDER, WIDTH, AND HEIGHT ON THE BANNER IMAGE (IMG) */
#header img {
border: 2px solid #000000;
width: 400px;
height: 300px;
}
See how the HTML has id="header" and the CSS has #header? The # in the CSS is saying to look for an id in the HTML with the name that follows the #.
Likewise, #header img is looking for an <img> tag inside that ID.
When something is between /* and */ in CSS, this is what's known as a CSS comment. You don't need the stuff in gray above to make the CSS do its job, but can keep it in there to help you know what to edit in the future. Don't use these marks in HTML, though, because those have their own comment marks, <!-- and -->.
I would change your HTML footer and add CSS for that, too, but there are a couple of other problems in your footer that need to be sorted first. After your "Back to top" link, do you want an image there? There is code for an image, but the code you have there doesn't work because there's a space in the URL.
|
4/25/2011, 4:45 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Jewel5
Regular poster
Registered: 08-2007
Location: Hooterville USA
Posts: 179
Karma: 14 (+14/-0)
|
Reply | Quote
|
|
Re:
Hi LG Thank you so much! The pic looks so much better.
As far as the HTML footer, "back to the top"... That code was given to me years ago & I just stuck it in there.
Thanks again! Jewel
|
4/25/2011, 10:32 pm
|
Link to post
PM Jewel5
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26733
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Adding A Border
You're welcome, Jewel.
|
4/25/2011, 10:50 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10257
Karma: 272 (+331/-59)
|
Reply | Quote
|
|
Re:
My apologies Jewel, I had a tornado heading my way and had to shut everything down last night. It missed us but I did suffer some roof damage.
|
4/26/2011, 1:37 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26733
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Adding A Border
I'm sorry to hear about your roof, Rick, but more importantly, I'm glad you're ok.
|
4/26/2011, 2:27 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10257
Karma: 272 (+331/-59)
|
Reply | Quote
|
|
Re:
It's going to be a long Saturday... One of the foundation walls cracked and pushed in far enough to cause a leak in the water pipe so along with the roof it looks like the wife and I had a really close call though not as bad as some of my neighbors. I just finished with tarping over the worst of the roof damage. I am very happy you showed up to help Jewel, I had less than a 10 minute warning and it was kinda scary for a bit.
|
4/26/2011, 3:26 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26733
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Adding A Border
I hope the crack in the foundation wall isn't as bad as it sounds. I'm glad the scary part is over, though, and hope you won't have any more tornadoes coming your way.
Sorry I didn't get here sooner. I must have laid in bed for about 6 hours before finally falling asleep last night, so I should have just taken a break from trying and checked in.
|
4/26/2011, 3:47 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|