By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

Horizontally centering an image WITH a border

P: 5
"WITH a border" being the defining issue.

Here's the deal: I'm new to CSS, but I've managed so far to center a single line of links at the top of my home page and center an image on the bottom of the browser window, such that the image will always stay glued to the bottom of the browser window no matter how big it is. Cool.

But here's the catch. I'd really like to have a solid, 10px, black border around the whole affair -- you know, hugging the edges of the browser window -- and for the life of me I can't figure out how to do it. I thought merely adding a border declaration in my CSS body tag would do it, but it don't. It only surrounds the line of text at the top. I assumed this was because the image was on the background, but even if I do bring it to the foreground in the body, a) I can't figure out how to simultaneously center it and glue it to the bottom of the browser window, and b) add the border.

My code so far is obviously brutally simple:

In my css file:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.  
  3.     color: black;
  4.     background: white url('images/hisandhers_home_cropped.jpg') no-repeat fixed bottom;
  5.     text-align:center;
  6.     margin:0px 0px;
  7.     padding:0px;
  8.     font: 14pt "Lucida Sans Unicode", "Lucida Sans";
  9.  
  10.         }
  11.  
  12. .homelinks {
  13.  
  14.     margin-top: 20px;
  15.     text-align: center;
  16.  
  17.     }
  18.  
And in my index file:

Expand|Select|Wrap|Line Numbers
  1. <body>
  2.  
  3. <div class="homelinks">
  4. Creative Consultants | Photography | Photo Editing | Slideshows | Video | Writing
  5. </div>
  6.  
  7. </body>
  8.  
Thanks in advance.

Signed,

Vexed and curious in Dallas (a.k.a. Clint)
Jan 14 '07 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Take a look at this because I just drank something on an empty stomach and am really feeling woozy right now. :)

Then this for the border: "border:10px solid black" in the body. Make sure you are using a strict doctype so you aren't in quirks.
Jan 14 '07 #2

P: 5
Take a look at this because I just drank something on an empty stomach and am really feeling woozy right now. :)

Then this for the border: "border:10px solid black" in the body. Make sure you are using a strict doctype so you aren't in quirks.
Sorry for not replying sooner; I never received an e-mail notice that anyone had replied to my post.

Thanks much for directing me to that. That might actually do the trick. (I haven't the time to try it tonight.) I ended up just putting it on the background layer without a border and going with that, but I'd still like to do the border if possible. We'll see what happens. Thanks again.

CH
Jan 26 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.