5
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
- body {
- color: black;
- background: white url('images/hisandhers_home_cropped.jpg') no-repeat fixed bottom;
- text-align:center;
- margin:0px 0px;
- padding:0px;
- font: 14pt "Lucida Sans Unicode", "Lucida Sans";
- }
- .homelinks {
- margin-top: 20px;
- text-align: center;
- }
Expand|Select|Wrap|Line Numbers
- <body>
- <div class="homelinks">
- Creative Consultants | Photography | Photo Editing | Slideshows | Video | Writing
- </div>
- </body>
Signed,
Vexed and curious in Dallas (a.k.a. Clint)
