forums Computer Tutorials Computer Help and Spyware Removal File DatabaseUninstall Database Windows Startup Programs Database Computer Resources Computer Glossary Forums Computer Help and Spyware Removal
 

Welcome Guest ( Log In | Click here to Register a free account now! )



Register a free account to unlock additional features at BleepingComputer.com
Welcome to Bleeping Computer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.
Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

 
Reply to this topicStart new topic
> Help With My Very First Css...navigation Hover Buttons, need to remove most of the border
mischievous
post May 13 2008, 07:47 PM
Post #1


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
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
Go to the top of the page
 
+Quote Post
groovicus
post May 13 2008, 09:20 PM
Post #2


Hail Groovicus!
******

Group: Site Admin
Posts: 5,673
Joined: 5-June 04
From: Vermillion, SD
Member No.: 689
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;


--------------------
Never argue with Stupid People....
Go to the top of the page
 
+Quote Post
mischievous
post May 14 2008, 02:04 AM
Post #3


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
QUOTE(groovicus @ May 14 2008, 03:20 AM) *
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. clapping.gif thumbup.gif There just isn't enough smilies to show my appreciation thumbup2.gif

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

This post has been edited by mischievous: May 14 2008, 03:23 AM
Go to the top of the page
 
+Quote Post
mischievous
post May 14 2008, 05:02 AM
Post #4


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
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 hysterical.gif

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
Go to the top of the page
 
+Quote Post
groovicus
post May 14 2008, 08:35 AM
Post #5


Hail Groovicus!
******

Group: Site Admin
Posts: 5,673
Joined: 5-June 04
From: Vermillion, SD
Member No.: 689
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.


--------------------
Never argue with Stupid People....
Go to the top of the page
 
+Quote Post
mischievous
post May 14 2008, 11:02 AM
Post #6


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
QUOTE(groovicus @ May 14 2008, 02:35 PM) *
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.....
Go to the top of the page
 
+Quote Post
groovicus
post May 14 2008, 11:50 AM
Post #7


Hail Groovicus!
******

Group: Site Admin
Posts: 5,673
Joined: 5-June 04
From: Vermillion, SD
Member No.: 689
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.


--------------------
Never argue with Stupid People....
Go to the top of the page
 
+Quote Post
mischievous
post May 14 2008, 03:22 PM
Post #8


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
QUOTE(groovicus @ May 14 2008, 05:50 PM) *
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
Go to the top of the page
 
+Quote Post
lhamil64
post May 14 2008, 04:25 PM
Post #9


Member
**

Group: Members
Posts: 90
Joined: 18-November 07
Member No.: 170,627
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.
Go to the top of the page
 
+Quote Post
mischievous
post May 14 2008, 04:41 PM
Post #10


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
QUOTE(lhamil64 @ May 14 2008, 10:25 PM) *
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 thumbup2.gif
Go to the top of the page
 
+Quote Post
groovicus
post May 14 2008, 05:00 PM
Post #11


Hail Groovicus!
******

Group: Site Admin
Posts: 5,673
Joined: 5-June 04
From: Vermillion, SD
Member No.: 689
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.


--------------------
Never argue with Stupid People....
Go to the top of the page
 
+Quote Post
mischievous
post May 14 2008, 05:09 PM
Post #12


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
QUOTE(groovicus @ May 14 2008, 11:00 PM) *
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. sad.gif
Go to the top of the page
 
+Quote Post
groovicus
post May 14 2008, 06:23 PM
Post #13


Hail Groovicus!
******

Group: Site Admin
Posts: 5,673
Joined: 5-June 04
From: Vermillion, SD
Member No.: 689
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.


--------------------
Never argue with Stupid People....
Go to the top of the page
 
+Quote Post
mischievous
post May 14 2008, 06:35 PM
Post #14


Member
**

Group: Members
Posts: 52
Joined: 16-February 07
From: Glasgow,Scotland,United Kingdom
Member No.: 112,022
QUOTE(groovicus @ May 15 2008, 12:23 AM) *
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
smile.gif

This post has been edited by mischievous: May 14 2008, 06:39 PM
Go to the top of the page
 
+Quote Post
« Next Oldest · Web Site Development · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 6th July 2008 - 09:02 AM


Advertise   |   About Us   |   Terms of Use   |   Privacy Policy   |   Contact Us   |   Site Map   |   Chat   |   Tutorials   |   Uninstall List
Discussion Forums   |   The Computer Glossary   |   Resources   |   RSS Feeds   |   Startups   |   The File Database   |   Malware Removal Guides

© 2003-2008 All Rights Reserved Bleeping Computer LLC.

Powered By IP.Board © 2008  IPS, Inc.