Hi I have tried to build a website for my friend well this is the second one i've tried but I keep the first one very hush hush it is such a mess....anyway, this second one is slightly better but in the program I have (frontpage) if you use their hover buttons then the text is aligned centre. I wanted the text to be left aligned so had to make my own buttons in photo shop. I also wanted the line to extend the full length of the button and not just under the text. so made my own button with lines drawn on them . When I inserted them into the website I notice they can stick sometimes and are also slightly slow to load. I've heard of CSS but really felt I'd never understand them but today I watched a tutorial and tried and was so happy when it turned out right...well almost right.

The problem is that the code puts a border around all sides of the buttons and I want only the line on the bottom of each button. To explain better what I mean I will post these links firstly to the site I've done with the sticky buttons, though this shows the look I want. The site is

website

This second link shows the CSS I did today and the way the border is too much for my need and I'd really like to know if it's possible to change it

Visit My Website

Further I will enclose the code I have in said CSS and hope it may help

body {
background-color: #140C3A;
}

a:link, a:active {
/*color: #92A92D;*/
/*color: #002A6C;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C41427;
text-decoration: none;
}

a:visited {
/*color: #92A92D;*/
/*color: #002A6C;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C41427;
text-decoration: none;
}

a:hover {
/*color: #CD689D;*/
color: #C41427;
/*font-weight: bold;*/
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#LHS a {
margin-left: 12px;
margin-bottom: 2px;
border : solid 2px #FFFFFF;
background-color: #140C3A;
color: #FFFFFF;
font-variant: small-caps;
font-weight: normal;
width: 180px;
padding : 5px;
padding-top: 3px;
padding-bottom: 3px;
display: block;
}


#LHS a:hover {
background-color: #C41427;
color: #; FFFFFF
text-decoration: none;
}


Well, that's it folks. I'll await any reply but remember, I'm only starting on this so please try not to be too technical (smile)

Thanks in advance
Mischievous

You created a border all the way around the button with this line:
border : solid 2px #FFFFFF;

If you only want a border on the bottom, try this:
border-bottom : solid 2px #FFFFFF;

Oh my God...what a beautiful start to my day....Thank You, Thank You, Thank You....it WORKED A TREAT. It is now exactly as I want it.

Now all I have to fugure out is how to get it into the webpage instead of those sticky buttons. I'm so glad Pandy from BC chat told me to come post my problem in the forum, I'd have been trying all sorts all day and probably got nowhere.

You're great. There just isn't enough smilies to show my appreciation

Oh Oh !! I'm back with an edit. I've just been sitting looking at how wonderful the new CSS looks now that the border is fixed the way I want it but now realize I have no idea how to get it into the website instead of the sticky buttons that are already there. Yesterday as I was searching for help I saw something about placement. Maybe something like putting in a code like "float-left" and using the x and y......I need the CSS to be on the left side sure, but it has to be further down so as not to collide with my heading pictures and also there is more stuff underneath so it can't be to far down either.

Could you advise me on how to insert my new CSS or maybe point me in the direction of a tutorial.

Thanks

Ok, it's me again..just to update the above post. I tried to insert the CSS file as normal just placing into the html by placing the cursor where I want the text and it worked out fine. I only hope that in other browsers it doesn't end up half way down/up/across the page

If this is an ok way to have added the CSS I'd appreciate the nod from one of you more experienced forumers.

Thanks in advance

I was going to look at your source code to see how it was structured, but your server must be off-line at the moment.

It's on now if you'd like to look.
I put the LINK part up at the <head> placed my curcor in the document where I thought the rest should be placed, went into the html again and paster the other part of the code with the part about the border you helped me change today.

So far it looks ok but that is me seeing it only with Internet Explorer. If this all works out ok I can see why everyone thinks the CSS are good. I'd like to add to the navigation one to include headers in each of the pages too...learning some of that should keep me busy or demented.....

I am still unable to access the page, but your styles should be placed in between the head tags. It is much better to have all of the styles in one place than it is to have css scattered around the html (although you will often see this done). It is poor design though.

This is very strange, I have been in and out of the site all day today. I am adding the link again and will try it myself from here.

Re about you saying all the code should go up at the head...well at first I did that but then my navigation bar was right up above my heading pictures. I really really want you to see the site now so you can see what I've done,

here is the link again
Visit My Website

The website works for me. I've read the entire thread so far but I am kind of wondering what you want to fix? Or have you already fixed it because the site looks fine for me, I'm using firefox version 2.0.0.14

Also, I like to have all the main CSS code in a completely different (.css) file. This way, if you need to make a small (or big) change to the css only, you can just change that one file and upload that instead of having to go to every html page and change each one individually.

Thank you for checking the site. Well to clarify, when I first posted the nav buttons had a complete border around them which I didn't want. grooviecus sorted that problem out for me. Then I wasn't sure how to insert the stuff into the website. Now the tutorial I used had me first make a page and save in as a html page, this contained the LINK and the href's both these parts I inserted into each page of the website. The second page the tutorial had me make was the .css .This is not inserted anywhere in the website but is uploaded to the server, this contains all the a. link visited hover etc.

So I think that's called an external CSS...hehe I'll probably get you all as mixed up as I am myself...hope not. Anyway, I'm glad to know at least the site is online though I wonder why groovicus can't get it...

It's a lot to learn with the CSS stuff but if as you say, eventually I could make just some changes to the page that is on the server (the CSS one) not the stuff I put into the pages of the site, then if it changes all the pages together, then it will all be worth it


Thanks again for letting me know the site is online

It works now...

Let me clarify. The code for the buttons goes wherever in the HTML that you want the buttons to go. The CSS (should) go up in the head.

But I didn't put the code for the buttons into the pages. See my post above. I put that CSS page up to the server. I didn't insert any of it into the website.

Yes. External style sheets are one way to do it. I was responding to what I thought you said that you had done initially, which was "I tried to insert the CSS file as normal just placing into the html by placing the cursor where I want the text and it worked out fine." My translation was that you put the CSS code right in with the HTML, and that was what I was responding to.

Yeah I'm sorry about that groovicus, I'd confuse Confusus. The main thing is your answer this morning did the trick and I'm as happy as larry with the outcome. HEHEHE, this thread has practically turned into a novel....better leave it now...

Till next time
Hail Groovicus