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
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.
catlover30 wrote:I am used
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
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!!!!
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; }
Quote:Please post ALL your
Please post ALL your code - Both CSS & HTML
I highlighted the key word
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; }
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.
please read my sig
please read my sig
rude
you are rude! I am leaving this forum. you may want to think twice: some peoples have issues with language or be dyslexic.
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.
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!
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.
Don't let the door hit you
Don't let the door hit you in the ass on your way out.
lgtaylor wrote:I was looking
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...
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.
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
Any further problems are to be brought to the attention of one of the moderator team or admin.
Hugo.
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