18 replies [Last post]
catlover30
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-05-21
Posts: 5
Points: 0

Thanks. I am creating a nav bar, using UL and LI tags. I will have 5 links for now, and I want them to act as roll-over buttons. I am used to creating with tables, and inserting images for links, but now I need to use DIV tags and CSS for this. My design is simple: top header, below that 2 columns where on left side is the nav bar and right side is content. Initially, I want the link button to have gray background color (width is 180px, heoght is 40px). Then when user hovers, I want bg to change to purple. When click and get to that link, it should stay purple, but if click on other link, should get back to gray bg. Any help with code and CSS is appreciated!

I also am trying to get a border around the navigation and content part only, excluding the header part.
Thanks

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

can you please show the code

can you please show the code you have come up with so far?
you give a little, we give a little. We don't mind holding your hand as you venture into the realm of css, but we aren't going to do it all for you.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 1 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

catlover30 wrote:I am used

catlover30 wrote:
I am used to creating with tables, and inserting images for links, but now I need to use DIV tags

http://www.csscreator.com/divs-do-not-replace-tables

Wink

Verschwindende wrote:
  • CSS doesn't make pies

catlover30
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-05-21
Posts: 5
Points: 0

CODE for html and css

Sure! Here is the code for the html page I have in Dreamweaver:
/* code in html file





My Content


*/

Here is the CSS for the navigation part:

#navbar {position: relative;float:left;width:20%;height:100%;background-color:#ccc;}

#navbar ul {list-style-type: none;padding:0;text-indent: 20px;font-family: verdana,arial,sans-serif;display: block;text-decoration: none;}

#navbar a{text-decoration: none;display: block; width: 180px; height: 40px;background-color:#ccc;}

#navbar ul li a:hover {text-decoration: none;display: block; width: 180px; height: 40px; border-top: 1px solid white; background-color:#660099;}

#navbar ul li {background-image: none; padding: 0px; background-color:#ccc;}

#content {float:right;background-color:#ddd;width:74%;height:100%;}

Please note that I do not have a style for the border that I want around the navigation and content part since I have no clue how to do it!

THANKS!!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 1 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Code pls

Verschwindende wrote:
  • CSS doesn't make pies

catlover30
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-05-21
Posts: 5
Points: 0

Sorry, was not aware that

Sorry, was not aware that the html was showing up ass a web page!
Here is the html code:

My Content

TESTING CONTENT LINK

Here is the CSS code:

#navbar {position: relative;width:20%;height:100%;z-index: 100; float:left;padding-top: 0px; margin-top: -3px; border-top: none;background-color:#ccc;font-family: verdana,arial,sans-serif;font-weight:bold;}

#navbar a{display: block; text-decoration: none;width: 180px; height: 40px;background-color:#ccc;}

#navbar ul li a:hover {border: none; border-top: 1px solid white;background-color:#AB4500;}

#navbar li {background-image: none; padding: 0px;}

#navbar ul {list-style-type: none;padding:0;text-indent: 20px;display: block;border : 1px solid;border-width : 0 1px;text-decoration: none;background-color:#ccc;}

#navbar ul li {float : left;border : 1px solid;position : relative;list-style-type: none;background-image: none; padding: 0px; background-color:#ccc;}

#content {float:right;background-color:#ddd;width:70%;height:100%;}

#content a {color: #AB4500; padding-left: 0px; text-decoration:none;}

#content a:hover {text-decoration: underline; background-color: transparent; color: #AB4500; padding-left: 0px; }

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 1 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Quote:Please post ALL your

Quote:
Please post ALL your code - Both CSS & HTML

I highlighted the key word Wink

Verschwindende wrote:
  • CSS doesn't make pies

catlover30
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-05-21
Posts: 5
Points: 0

Html code and CSS

Hi,
I am not sure what you eman, but I assume I should put code tag around the css as well? Anyhow, here is the html code:

My Content

TESTING CONTENT LINK

And here is the CSS code:

#navbar {position: relative;width:20%;height:100%;z-index: 100; float:left;padding-top: 0px; margin-top: -3px; border-top: none;background-color:#ccc;font-family: verdana,arial,sans-serif;font-weight:bold;}

#navbar a{display: block; text-decoration: none;width: 180px; height: 40px;background-color:#ccc;}

#navbar ul li a:hover {border: none; border-top: 1px solid white;background-color:#AB4500;}

#navbar li {background-image: none; padding: 0px;}

#navbar ul {list-style-type: none;padding:0;text-indent: 20px;display: block;border : 1px solid;border-width : 0 1px;text-decoration: none;background-color:#ccc;}

#navbar ul li {float : left;border : 1px solid;position : relative;list-style-type: none;background-image: none; padding: 0px; background-color:#ccc;}

#content {float:right;background-color:#ddd;width:70%;height:100%;}

#content a {color: #AB4500; padding-left: 0px; text-decoration:none;}

#content a:hover {text-decoration: underline; background-color: transparent; color: #AB4500; padding-left: 0px; }

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 1 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

No, I mean please post all

No, I mean please post all your HTML and CSS code, from the doctype right down to the </html> tag.

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

please read my sig

please read my sig

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

catlover30
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-05-21
Posts: 5
Points: 0

rude

you are rude! I am leaving this forum. you may want to think twice: some peoples have issues with language or be dyslexic.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 1 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

What, you didn't see the

What, you didn't see the messages at the top of every forum that say "PLEASE POST ALL YOUR CODE"?

Not reading forum guidelines is also very rude.

Verschwindende wrote:
  • CSS doesn't make pies

lgtaylor
Offline
newbie
Washington
Last seen: 14 years 18 weeks ago
Washington
Joined: 2007-07-21
Posts: 2
Points: 0

What an awesome forum!

I was looking for some CSS answers of my own, and I found this place. Unbelievable! Well, you were no help at all. What an ass (please see definition below in my post to thepineapplehead) - posting the dictionary definition of "all". So this is what you do under the pretext of "trying to help someone"? And guess what!? You drove someone from the forum. Good job! In fact, maybe you can be such a smart ass in a forum that is supposed to help others, that no one will ask questions! No, no, I have an idea: go to all the forums that you belong to and do this! Sweet. It'll be fun. You can feel smart and put others down at the same time. Brilliant!

Have a nice day - I will tell others about the kind of help you offer here!

lgtaylor
Offline
newbie
Washington
Last seen: 14 years 18 weeks ago
Washington
Joined: 2007-07-21
Posts: 2
Points: 0

The elevator doesn't go to the top floor...

You're a moderator thepineapplehead - and what's your problem? Are you compensating for other inadaquacies by pulling this superior attitude?

ass: –noun 1. a long-eared, slow, patient, sure-footed domesticated mammal, Equus asinus, related to the horse, used chiefly as a beast of burden.

I know that the whole definition doesn't suit you (you're not patient), feel free to feel good about the fact that you are "sure-footed". The rest, you're gonna need to work on.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 18 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Don't let the door hit you

Don't let the door hit you in the ass on your way out.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 15 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

lgtaylor wrote:I was looking

lgtaylor wrote:
I was looking for some CSS answers of my own, and I found this place. Unbelievable! Well, you were no help at all. What an ass (please see definition below in my post to thepineapplehead) - posting the dictionary definition of "all". So this is what you do under the pretext of "trying to help someone"? And guess what!? You drove someone from the forum. Good job! In fact, maybe you can be such a smart ass in a forum that is supposed to help others, that no one will ask questions! No, no, I have an idea: go to all the forums that you belong to and do this! Sweet. It'll be fun. You can feel smart and put others down at the same time. Brilliant!

Have a nice day - I will tell others about the kind of help you offer here!
Whoa now.... if you're looking for CSS answers this is THE place to look. However, there are certain things required when asking for help. Reading the forum stickies is a MUST, as it is in all forums; IF you want the people in those forums to provide any help at all.

I seldom reply to these types of posts, but they are becoming increasingly prevalent... and I find that disturbing. Help cannot be given if the person asking for help doesn't provide ALL code or a link to the page in question, and if that code isn't valid html.
I've received more help from this forum than I can even list... but getting help DOES require some consideration by the person asking for help.

Would you call a mechanic and say "my windshield wipers don't work, can you fix it?" "OBTW, I can't bring the car in but I can bring the spare tire to you, would that help?"

OK... enough of my ranting...

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I even used the word

I even used the word "please"
It wasn't like I said "You are an utter douche, how about reading my signature and learning what the definition of "ALL" is."

And, wow! Insulting me via private message?

DING DING DING!!! We've got a winner!
A winner of the Special Olympics.

FYI, you're still retarded.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think that this thread has

I think that this thread has now run it's course.

@ lgtaylor I am slightly unsettled by your action in making your first post one that has somewhat driven and inflamed a thread, It really would have been more appropriate for you to have kept your opinions to yourself on this matter, and to then use the forum PM system to continue a personal dialogue with a member in what appears to be the same vein as your posts here is most definitely not appropriate at all and I would ask that you refrain from doing that again otherwise your account will be suspended, I would also advice against replies to any such PMs.

The comments in this thread are now closed, lets put this one to bed please Smile

Any further problems are to be brought to the attention of one of the moderator team or admin.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 1 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Why on earth would you bump

Why on earth would you bump a month-old thread just to inform me of how rude I am?

This thread was finished a month ago, the OP left, it was done and dusted.

And I was pretty restrained and patient, I replied numerous times asking for all the code.

LGTaylor, please PM me your reasons for the attack Wink

Verschwindende wrote:
  • CSS doesn't make pies