Top Navigation Bar Border

[claudiathompson]

I would like to be able to change the top Navigation Border around the links to be just flat colored without the 'butttonized' look, like the buttons on the left side of the template.

 

On the navigation bar code it goes like this:

 

rightX = 0;

function Menu()

{

this.bgColor = menucolor;

if (ie) this.menuFont = "small Arial";

if (n) this.menuFont = "small Arial";

this.fontColor = "white";

 

this.addItem = addItem;

this.addSubItem = addSubItem;

this.showMenu = showMenu;

this.mainPaneBorder = 1;

this.subMenuPaneBorder = 0;

 

I dont have a clue how I would change that, or if I even could change it. I sent an email to the guy who created the code but it came back undeliverable.

 

I dont know whether to insert an image or a link so I guess I will just put the link to the template so you can see what I mean. If you look at the top border its like two different colors of a border. I would like to be able to tell it to be the same exact color as the buttons on the left and also just one solid color.

 

The address of the template is:

http://www.countrymanordesigns.com/WebDesigner/FrontPorch.htm

 

(I hope its ok to post the link, its my first time here)

[claudiathompson]

by the way, if I manage to do anything right, its purely accidental LOL!

 

Also, the reason why I want to know how to do this is because I am planning on creating jillions of templates with this same layout, to make it easy for myself for awhile to create some new templates.

 

And so I would like it if I could be able to fix the top the way that I want it to be, before I go making a whole lot of other templates like this then having to go back and change them all later.

[falkencreative]

That border is caused by "border='1'" on the table that surrounds the navigation:

 

<table width="100%" border="1" bgcolor="#252525">

 

Changing that to "0" will remove the border, and then you can use CSS to make whatever style changes you need.

[claudiathompson]

That border is caused by "border='1'" on the table that surrounds the navigation:

 

<table width="100%" border="1" bgcolor="#252525">

 

Changing that to "0" will remove the border, and then you can use CSS to make whatever style changes you need.

 

 

Ben,

 

Okay but exactly how would I go about doing that?

 

..I mean to actually show up on a navigation bar?

[falkencreative]

I was taking another look at this thread, and it looks like you've solved the problem you were having?

 

...Just so you are aware, the code you are using has some significant problems... it's full of inline CSS (and no external CSS), nested table after nested table, depreciated (out of date) tags, etc. Actually using that or trying to edit it and change some of the styles would be a nightmare. I'm also not sure why you have a "no right click" script in place. Getting around that is incredibly easy, and does little to actually "protect" the template.

[claudiathompson]

I was taking another look at this thread, and it looks like you've solved the problem you were having?

 

...Just so you are aware, the code you are using has some significant problems... it's full of inline CSS (and no external CSS), nested table after nested table, depreciated (out of date) tags, etc. Actually using that or trying to edit it and change some of the styles would be a nightmare. I'm also not sure why you have a "no right click" script in place. Getting around that is incredibly easy, and does little to actually "protect" the template.

 

 

What are the depreciated out of date tags that you are referring to?

 

Also I thought you were supposed to use nested tables? I dont understand the problem with that.

 

Why does it matter if the CSS stuff is internal or external?

 

I never took any courses on any of this so I dont know.

 

I guess that the thing is that I never had any problems with using it, and never had anyone ever tell me that they had any problems with using any of my templates.

 

So you would have to be more specific.

 

Alot of people tell other people this and that but they dont really say how to solve it or what they would do or how to do it.

 

And to be really honest, thats all I ever get on any of these forums, they always talk above you, and expect you should know what they are talking about. But if the person actually knew what they were talking about, then they wouldnt be doing things the way that they are doing it. (If you can understand what I mean).

 

Also, for whatever reason, lately, if I try to put one table on top of each other, it kicks the second table over to the right of the first one....

[claudiathompson]

Well I was clicking around the site and sort of accidentally came across this page:

 

http://www.csstutorial.net/

 

and so as long as its free and doesnt cost anything, I will go through it and try to learn the proper way to use CSS.

 

I just started out making web sets, like people do out there, as a hobby. And really hadnt ever intended on doing web design stuff. But now it has gotten to where I have to, in order to make extra money.

 

When I started it was just Background Sets, like a main picture, Divider, Home, Email, Back and Next Buttons. And that was about it.... and it has just evolved into something different.

 

I havent a clue where to begin to learn anything more advanced. And when people talk to you, on these Web Design Forums they usually say alot of things, that I dont have a clue what they are talking about... like I went to another place the other day and they were using terms like Drupal and Ajax and Joomla and so on and Im thinking to myself What the heck is THAT? And if you try to ask anyone, they act like they look down upon you ... etc.

 

Its very frustrating.

 

I just liked putting colors together and making the page look nice LOL!

 

Thats another thing, isnt it just to where all you have to do is make it end up looking ok in any screen resolution?

 

Because most people, all they do, is substitute my information I have typed in with their own instead. Then change the titles on the heading graphic and the buttons and thats about all there is to it. So I guess those are the kinds of people I have ever dealt with, just sort of little housewives who are trying to make a personal website or maybe to sell a few things online.

 

I would like to be able to do more, but dont know where to start. Plus at the moment, I dont know if I'd really have the time to sit down and learn a whole lot more, because all I am trying to do right now is ot get enough money together to be able to get a couple of airplane tickets and a Visa and a few other things. But I know eventually I am going to have to learn all of this.

 

Actually, I have experimented a couple of times by taking a CSS page I found online and just putting the link thing on a template page and then changing the color numbers and so on... and it seemed to have worked, but I dont know how to start from zero and do it. Also I have some sort of thing on my computer somewhere, a program where you are supposed to just fill in the stuff to make a CSS page but I cant even remember what its called and dont have a clue how to use it. Something Lite... cant remember the name of it.I just went and looked on my Start/Programs and its called TopStyleLite. But I just dont have a clue how you are supposed to use it.

 

Just as a side note, I have been using CuteHtml for my Editor. Its all I ever use. I do have a Dreamweaver Program that I got a long time ago when I signed up for the Thompson Education Direct Course, but to be honest, it really didnt tell you much... and I had gotten used to just using the CuteHtml Editor for everything. This WYSIWYG things seem more trouble to me than just using the CuteHtml Editor. But I guess I am going to have to force myself to get used to using DreamWeaver. Does that have a CSS thing on it? I cant remember, its been so long ago when I took that course. I also bought a FrontPage Editor and Book but I hate that program. With the Child and Parent and all of that. Its more trouble than just using the CuteHtml...

 

I forgot to say that the reason I removed that Navigation Pane from the top of that Template was because I was planning on just having it be an 8 page template people could buy. And if the top Navigation Pane was there with all the drop down menu links it wouldnt work out that way, being only 8 Pages worth of work for me to do.

[falkencreative]

Responses to your first post:

 

What are the depreciated out of date tags that you are referring to?

A couple of deprecated tags/attributes:

-- Use of <font> tags (and the "face"/"color" attributes)

-- Use of uppercase tags ("<TABLE") See the bottom of http://www.w3schools.com/Html/html_elements.asp for more info on this.

-- Use of "align"

-- Use of "bgcolor"/"background" within tables

 

See http://www.codehelp.co.uk/html/deprecated.html for more info about tags/attributes that have been depreciated by the W3C. All of these things are supposed to be done using CSS (and, as a general rule, CSS makes them easier to work with/easier to change.)

 

Also I thought you were supposed to use nested tables? I dont understand the problem with that.

Tables are intended for tabular data -- complicated numbers or figures -- data that need to be displayed in a table. While it was common five to ten years ago to use tables, that is generally frowned upon now, and CSS is used instead. See http://www.hotdesign.com/seybold/everything.html and http://webdesign.about.com/od/layout/a/aa111102a.htm for more information. CSS is significantly more flexible and easier to work with if you need to make changes to the layout.

 

Why does it matter if the CSS stuff is internal or external?

It matters because internal CSS or inline styles are difficult to change easily. Say someone wanted to change your template and use a font other than Helvetica (realistically, most people don't have Helvetica on their computer, and won't see that font anyway.) That would mean they would need to go through every page manually and find every instance where you have used Helvetica within a <font> tag or within an inline style (a "style=''" added to a tag) and manually change it. With an external stylesheet, you can share the same CSS page with multiple pages within the website, and one change within the CSS style sheet can affect multiple pages.

 

I guess that the thing is that I never had any problems with using it, and never had anyone ever tell me that they had any problems with using any of my templates.

I'm not necessarily saying that you can't code the site the way you are currently. Technically, it works. But the way it is coded is significantly out of date, and that sort of stuff matters if you are trying to get web designers to buy/resell your work. They will be looking to see the quality of the code and how easy it will be to adapt/change to meet their needs.

 

I'll follow up on the second post in a bit when I have the chance.

[claudiathompson]

Ben

 

Is that link you gave me about using CSS instead of tables, does that have everything in it I need to know?

 

Geesh Im used to just sort of picturing a "Table" in my mind and where evrything will go, as if Im looking at blocks on my desk and rearranging them, but now Ive got to re- think the way that I do everything now.

 

But I appreciate you giving me this information.

 

I know this is a dumb question but does the CSS page you gave me tell how to start and end the CSS page? Like I said, I can take a page someone already did and figure out how to change everything. But I dont have a clue how to start creating one from scratch.

[claudiathompson]

Ben

 

One more question, what does the html page end up looking like if there arent any tables on it?

 

Is it just the graphics there like <img src="image" width=100 height=250>

 

or is there even an html page left? LOL!

[claudiathompson]

I watched the first short video so far on CSS and got to the beginning of the Part 2 of the Intro.

 

Before going any further, if you get a chance could you tell me what this means?

 

<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">

 

...the rel=""

 

whats rel stand for?

[claudiathompson]

okay so far, I created the FrontPorch.css file separately, and I put this on it:

 

BODY {

SCROLLBAR-FACE-COLOR: #222222; SCROLLBAR-HIGHLIGHT-COLOR: #fdfbf3; SCROLLBAR-SHADOW-COLOR: #fdfbf3; SCROLLBAR-3DLIGHT-COLOR: #fdfbf3; SCROLLBAR-ARROW-COLOR: #c3b39f; SCROLLBAR-TRACK-COLOR: #DDDED5; SCROLLBAR-DARKSHADOW-COLOR: #eedbc8

}

 

.header {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #202020;}

 

 

 

and I put this on the top <HEAD> part of the html page:

 

<link href="FrontPorch.css" rel="stylesheet" type="text/css">

 

so it made the words 'Home Page' turn different-looking and made it to where I didnt have to put the scroll bar on the html page:

 

http://www.countrymanordesigns.com/WebDesigner/FrontPorch.htm

 

 

 

I figured since it said BODY on one of these .css files I was looking at on someone else's temp;ate that that's what I needed to do.

 

ANYWAY I will have to read some more on that .css tutorial tomorrow and see how well I can do with this.

 

Claudia

 

Oh darn! it made underlines under all my links! Because I took of the top code on my html page telling it not to underline the links. I guess there must be a .css code for that that goes on the .css page?

Edited May 8, 2011 by claudiathompson

[falkencreative]

I know this is a dumb question but does the CSS page you gave me tell how to start and end the CSS page? Like I said, I can take a page someone already did and figure out how to change everything. But I dont have a clue how to start creating one from scratch.

You just create a blank text file with a ".css" ending, and use a <link> tag within the <head> section of your HTML file to link the CSS file to the HTML. Sounds like you have gotten that portion figured out.

 

One more question, what does the html page end up looking like if there arent any tables on it?

You would use <div> elements that have classes or ids applied to them, and CSS would be used to style those divs. See http://www.csstutorial.net/2010/04/3-column-layout/ for a simple example layout.

 

whats rel stand for?

I believe the "rel" stands for "relationship." It indicates the link's relationship with the main HTML document. http://www.last-child.com/rel-attribute-display/ You really don't need to know what it does exactly, other than it needs to be set to "stylesheet."

 

okay so far, I created the FrontPorch.css file separately, and I put this on it:

I would suggest keeping everything lowercase. So use "body" rather than "BODY" etc. Also, keep in mind that the scrollbar styling that you are doing only works in Internet Explorer, and won't work in Firefox/Chrome/Safari/etc (which represent about 75% of the browser market. Only about 25% of people are still using IE, according to recent statistics http://www.w3schools.com/browsers/browsers_stats.asp)

 

it made underlines under all my links! Because I took of the top code on my html page telling it not to underline the links. I guess there must be a .css code for that that goes on the .css page?

Here's an article on styling links: http://www.csstutorial.net/2010/03/styling-different-links-differently-with-css/. You would use "text-decoration:none;" to remove the underline.

[falkencreative]

But I guess I am going to have to force myself to get used to using DreamWeaver. Does that have a CSS thing on it? I cant remember, its been so long ago when I took that course. I also bought a FrontPage Editor and Book but I hate that program. With the Child and Parent and all of that. Its more trouble than just using the CuteHtml...

You don't have to use Dreamweaver -- CSS is just plain text, just like HTML. You can use any basic editor. I personally don't use Dreamweaver myself, since I find it's a bit too slow and has too many unnecessary features that I don't use.

[claudiathompson]

Ben,

 

 

I changed it to this on the .css file:

 

body {scrollbar-face-color: #222222; scrollbar-highlight-color: #fdfbf3; scrollbar-shadow-color: #fdfbf3; scrollbar-3Dlight-color: #fdfbf3; scrollbar-arrow-color: #c3b39f; scrollbar-track-color #DDDED5; scrollbar-darkshadow-color: #eedbc8}

 

.header {font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; color: #202020;}

 

a:link {text-decoration: none}

a:visited {text-decoration: none}

a:active {text-decoration: none}

 

 

...I changed to all lower case, to start with, then I just put the same identical code for making links not have an underline under it... but put it on the .css file instead and it seems to work.

 

Is this the 'correct' way to do it?

 

Also, I notice you have to have the <body> tag to start with on the whole thing... there isnt supposed to be a <head> tag on the .css file is there?

 

I am asking because I tried doing that and putting the links not underline code on there but it didnt work.

 

I am going to go ahead and keep the scrollbar thing there for people who do use IE... it wont hurt anything keeping it there, right? Just that it wont show up on other browsers?

 

Another question, alot of people who use my background sets- they like the little moving Cursor trail things like here: http://www.countrymanordesigns.com/holidaytemplates/santassleigh_extras.htm

 

or the 'floaters'... etc.. http://www.countrymanordesigns.com/victoriantemplates/vicumbrella_extras.htm

 

where do I stick those codes at? on the .css files or just on the html page like I have them now? Also the sparkly thingys but I guess its all the same, a java script code?

 

I have decided that what I am going to do is completely re-do my whole website. Keeping the same main picture and colors etc but just straightening everything all out, including re-doing every single template into the correct and proper .css codes. I am also going to re-do the templates themselves, because way back then when I first started, I didnt know much about graphics. Plus I want all the templates to have 8 pages, products page, photos page et, so that I can use that as one of my 'selling points'. Plus then it will make less work for me when I have to design someones site using the templates. I am no longer going to offer them all as a package either, not going to have a membership fee either. I will sell them all individually. I havent decided on what price to charge for the templates though, yet.

 

So this is a question I have for you then I probably wont bug you anymore, at least for now, but I might come back later on and start a new thread about CSS if I have any difficulties.

 

... my question is this... if I were to get this entire 'Front Porch' template all done correctly, changing everything into the proper .css code, would I actually be able to use that file as an over-all file I use over and over again for other templates? and just change the color numbers and all of that?

 

And if so, like what if there are things like a code for HR (h rule) or maybe <H2> size headings or whatever, on the original file... but I dont have any <HR> in a new template... can I leave that all still on the file?

 

What I mean is do I have to go delete everything that isnt actually in the new template? or do the browsers and search engines not care about that?

 

Its just that I would like to go through and get one done properly then not have to keep doing and doing it with each template. If possible.

[claudiathompson]

A QUESTION

 

I "borrowed" a .css file from a template I had bought long ago for my religious website and never used.... and put some of the .css file stuff on my Front Porch template so that I could learn how to do this... and change things to see what happened.

 

Anyway, here is the HR information on the .css file, but it doesnt seem to be making it colored black on my tempate:

 

HR { color: #000000;

height: 1px;

width: 100%; }

 

...then on the Template html pg I just put <HR>

 

but it looks like a normal colored Hrule.

 

What am I doing wrong?

 

 

Here is the template, see under the heading "Home Page"?

http://www.countrymanordesigns.com/WebDesigner/FrontPorch.htm

 

It didnt make it turn black.

 

I DID manage to make all the links do like I wanted them to do EXCEPT for the line thing in between them that goes like this:

 

Home | About Us |

 

I had to just use a white colored font tag for those... I cant do anything about that in the .css file, right?

 

at the bottom of the page too it has those along where the links are.

Edited May 9, 2011 by claudiathompson

[Andrea]

I just took a quick look at the source code on your side. If you are trying to 'convert' this to proper coding with CSS and positioning with CSS, I'd recommend to just start over. That would be so much easier than trying to correct what you have now. It starts with the missing doctype and charset, on the the tables, all the inline styling, incorrect use of non-breaking spaces to create space, deprecated tags, nesting issues, etc.

 

We can definitely help you along.

[claudiathompson]

I just took a quick look at the source code on your side. If you are trying to 'convert' this to proper coding with CSS and positioning with CSS, I'd recommend to just start over. That would be so much easier than trying to correct what you have now. It starts with the missing doctype and charset, on the the tables, all the inline styling, incorrect use of non-breaking spaces to create space, deprecated tags, nesting issues, etc.

 

We can definitely help you along.

 

 

Hi Andrea, that would be great if you all could help me.

 

But how do I start if I wanted to start over?

 

Like with the Template I was trying to make, I mean?

 

I dont understand about the Tables... how would you go about trying to envision what you want the whole thing to look like and then not have tables? Or do they mean that you put the Table tags there but tell the tables what to do in the .css files?

 

Like TABLE { align:left } --or something like that in the .css file then on the html page you'd go

 

<TABLE><TR><TD>

whatever in between

</TD></TR></TABLE>

 

 

....and then it would just tell it in the .css file that you want the tables all to align to the left?

 

is that what they mean when they say not to use tables?

 

Where would I actually start?

 

Actually that was another question I was going to ask... about what you are supposed to put at the top of the html document. All this time I just kept copying and pasting this at the top:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

 

<HEAD>

 

 

and with this too:

 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 

I dont have a clue what charset means or if you are supposed to be changing that with every page

 

So anyway where do I start if I wanted to have the same template -looking the same at the end of creating it, but starting over and doing it all correctly?

 

I really do want to know how to do this and do all my templates the correct and proper way.

[claudiathompson]

I have decided since I am going to start all over from scratch, to use one of these Template Sets on which Ive already created most all of the different pages....

 

http://www.countrymanordesigns.com/WebDesigner/RaggedyDolls_Home.htm

 

I am going to use this one to learn how to do the .css on because this is the type of a Template Im going to be making for all the new ones, which are going to have 8 or 9 pages ... already pre-made.

 

That way I can make sure I know how to do all the coding for it, and how it will change all the pages if you change the code.

 

But anyway I will start a new thread/post here called "Raggedy Dolls CSS" probably tommorrow, andthat way we can start all over again with this.

I had bought over the last couple of years over 400 of these little Graphic Sets to use to create templates with. So thats why Im wanting to do this. Plus I want to change all my already-made templates and make the codes right on those too.

 

I figure if I can do it right on this 9-page template then I ought to be able to do it on all the rest of them too.

Edited May 9, 2011 by claudiathompson

[Andrea]

You'll find a bunch of tutorials on Stef's http://how-to-build-websites.com/ and http://www.csstutorial.net/ that should help you get the idea.