What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Adding border around home page -- How?


D

Delphi123

Active Member
Messages
27
Likes
0
Dear friends:

How do I add a border around the entire home page, please?

My URL is:

http://www.immortalgems.com

Please note that this site also uses an external CSS style sheet:

http://www.immortalgems.com/sft.css

This CSS style sheet is part of the original 5-page site template. I am actually using only the first page of this template (with various sections from the other pages incorporated into this home page). Does the CSS style sheet actually apply also to this 1-page modified template?

Thank you so much.

Benjamin
 
Benjamin,

Yes, that stylesheet is linked to your home page, as indicated by this line in the head part of your html document:

Code: 
<link href="sft.css" rel="stylesheet" type="text/css">

Every page with this line will link to the stylesheet.

I'm not sure what kind of border you want; if it's just a plain border, add the following to your stylesheet (it can be edited in a plain text editor):

Code: 
body
{
border: 1px solid  #000; 
}
This will give you a solid black border 1 pixel in width. You can change th properties easily. You can also have a double border, or a dashed or dotted one.

For a good intro to css, check out w3schools. It's a great resource for learning CSS, HTML and many other web-based things.

If you want a graphical border, that's a much more complex subject.
 
Dear AppleCider:

Thanks so much for the code for the border, but it looks like your code puts a border around the entire screen. What I am looking for is a rectangular border around just the home page itself.

Or have I misunderstood something?

Thanks again.

Benjamin
 
Benjamin,

I may have misunderstood. Techically, your "home page" includes what's called a "canvas," which is the entire browser window, including the white space around your table. The table is the text, graphics, etc. that's shown, minus the white background. Do you want a border around just what is shown, minus the white space? That's a bit more complex if you don't know a lot about css, but certainly not impossible. (Although, the way the css in this case is written, makes it needlessly hard.)

To clarify, see the graphic below. The browser canvass is the white color around your main table, or div.

Also, do you want this on every page, or just the home page?

Let me know, and I'll try to help you without rewriting the entire css file, which is way beyond the purpose of this forum :)
 
Dear AppleCider and friends:

Yes, yes, that's precisely it. I would like a rectangular border around the table on each page, that is, to encase the entire page minus the white margins. As you can see, the open spaces on the right and left of the table (I don't mean the white margins but the open spaces that are part of the template design) cry out for a border to encase them. They are needed to define the table clearly so the contents don't look like they are about to fall out.

I don't mind just adding code to each page, if that's easier. There is no need to use CSS if it's too complicated. Shouldn't it be easy to add a boder to the table by using table properties in Dreamweaver?

Thanks to all of you.

Looking forward.

Benjamin
 
Brief answer for now...it's late, more later.

No, CSS is much easier. I don't have Dreamweaver, and although I know DW has css capabilities, I don't know enough about it to tell you how to do that through the app. Table properties, through HTML won't give you what you want. More later, and I'll send you a PM.
 
Hey Julie- thanks for that link, I have been wanting to find a place to learn to understand CSS for a while. I know it's not new but it is fairly new to me.
I know this is a PS board :B but a quick question if you don't mind.

Can you use CSS to set Nav menu properties, so that you can change the menu ( just a simple text menu) on a style sheet and have those changes reflect throughout the entire site?
 
Hey, Rick :)

Not sure what you mean about changing a menu...do you mean a different menu on different pages (or sections) of your site?

Sure, you can. That's the "cascade" part of cascading stylesheets. Say you want the menu, and only the menu, to change. Assuming you're linking to an external stylesheet which has the global site styles, you'd put the changes in either an internal stylesheet, below the external link in your html, or link to a separate external sheet, again listed below the main one. Like this:
Code: 
<head>
<link href="yoursheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
#nav {
color: #0f0;
background-color: #000;
}
</style>
</head>
The linked sheet would have the global styles that will show on this page too, except for the changes you made in the internal stylesheet, which "cascade" down and overrule the first sheet.
 
Here is a screenshot of what I mean Julie

Notice the nav menu on the left side. There are quite a few pages on the site and they all have the same menu, If I want to make changes I have to change every page. So could CSS help here so I would only need to change one page and have it reflect on all?
 
Rick, sure, that's the beauty of using CSS. Just be sure all your pages have a link to the same stylesheet, and format your menu in that stylesheet. When you change and reupload the sheet, all pages will change.

This goes for all non-graphic elements on your pages. No more font tags to change! You can format the a-links with the font, text size, decoration, background, and declare the colors and/or backgrounds for the link, active, hover and visited states.

It's beyond a simple explanation to show exactly how it's done, but it can be done, and quite easily. :)
 
Julie is correct CSS is a dream! What I do for nav bars is make a css command of

.nav {
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
background-color: #fafafa;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
}

Then in your html code you would refer to the above with something like td class="nav" so it will pic up the style.

You can go much deeper in what you want to do with CSS. That way I can update one page and wham they all update. You may want to look at server side as well or shtml files. If you are just starting out I would suggest digging into CSS as the possibilities are endless!

As for borders you can achieve this with the boarder command in your table code:
border="1" or change the numbers if you want a thicker border around the table. Just make sure you use the main table code for the border command. Another option is to make the main table 2 or 3 px larger and give it a background code of #000000 so it will form the border.
 
Back
Top