473,799 Members | 3,147 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Horizontally centering an image WITH a border

5 New Member
"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
2 1511
drhowarddrfine
7,435 Recognized Expert Expert
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:10p x solid black" in the body. Make sure you are using a strict doctype so you aren't in quirks.
Jan 14 '07 #2
texvanwinkle
5 New Member
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:10p x 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

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

Similar topics

9
6256
by: Faz | last post by:
Hi I'm having some real trouble with a header I have created within a container. I have two problems; firstly the menu (a horizontal UL) will not centre within the surrounding header, despite attempts to use the following within the #header declaration: margin-left: auto; margin-right: auto; The image above the list is easily centred using the 'text-align' property,
2
2205
by: Lee K. Seitz | last post by:
I stayed up late working on a CGI script and spent some time formatting my page with CSS. It looked fine in IE, which will be 95% of my audience, so I went to bed. Got up and looked at it in Opera and it's different and not what I wanted. Take a look at <http://home.hiwaay.net/~lkseitz/hhs/rnb/>. I'm concerned with the form and links in the dashed box in the middle of the page. In IE, my "margin: auto" causes the div to center itself...
6
2324
by: Jerry Camel | last post by:
I want to center an image on the screen and have text centered over the image. What's the best way to do this? I've been playing with style tags and I can get the stuff to center automatically OR have the text appear on top of the image. But in the second case, the image and text aren't centered properly. Any help is appreciated... Jerry
2
1995
by: funkiejunkie | last post by:
Hello all, I posted a thread a while ago and was told to include the code so here it is. I still dont really get CSS, everything I have done has been blagged because I cant be bothered to read books to help me understand whats really going on. I would a few more containers within my centered text box in the middle so I dont have to press spacebar to get where I would like it, but have had trouble. I recon im doing a lot wrong so please...
4
3011
by: lister | last post by:
I am trying to center a DIV horizonally, but I want the DIV fluid so that it is just wide enough to encompass its contents. I've tried margin:auto with no joy :( I've set up a demo here: http://www.thebunnyshed.co.uk/centertest.htm ps. google screwed up my first post somehow.
16
4938
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of "background" or "background-image", the positioning only works with specifying pixels. If I specify the vertical position in pixels, the image gets cut-off at the bottom. I don't know what to do and would appreciate anyone's help. Specifically the code...
16
3578
by: Stan The Man | last post by:
I'm a CSS novice trying unsuccessfully to make three thumbnail images display horizontally instead of vertically. I suspect I'm missing something really stupid but I'll take the flak if someone could kindly point me in the right direction (using words that the vicar's wife would understand). The vertical thumbnails can be seen at the bottom of this page: http://www.zen86793.zen.co.uk/gmga2008/index.html ... the first image is in the right...
1
2288
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span rows are centering their data. however, the row with three columns, each with images (myimages1-3) are not centering with the rest of the table. Any idea why? Thanks in advance!
4
5287
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be horizonally and vertically centered within a <TD> </TD> area. No matter what I do the two image just present one above the other, albeit centered, NOT on top of each other. I originally did the entire page layout in TABLES until I found out I.E. 7...
0
9685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9538
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10470
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10214
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9067
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6803
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5459
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4135
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2935
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.