I am new to actually doing my own CSS I usually design a layout and have someone code it so I knew a few thing but not enough. What I'm trying to do is I have three links. "Home Portfolio About" basically right now they all should be underlines in a different color...and when you hove over them each underlining color should turn to white. I am not sure how to get them to have different colors. Any help is greatly appreciated. basically this is what it SHOULD look like on the HTML page. (the font is Arial 24px. This is probably something easy? This is what Ive got so far.. } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; margin: 0 0.15em; } #nav li a { float: left; color: #322b2a; text-decoration: underline; background-position: bottom; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; line-height: 3em; } Code (markup):
It requires segregating the text within a span (or other appropriate inline element) element. Set the a element to the desired underline color, and set the span to the text color. <ul> <li><a id="home" href="#"><span>Home</span></a></li> <li><a id="portfolio" href="#"><span>Portfolio</span></a></li> <li><a id="contact" href="#"><span>Contact</span></a></li> </ul> ============== #home { color: red; } #portfolio { color: green; } #contact { color: blue; } #home:hover, #portfolio:hover, #contact:hover { color: white; } #home span, #portfolio span, #contact span { color: black; } Code (markup): cheers, gary
To be honest, I think you'd find this easier using border-bottom instead of trying to hack a way with the underline colour. } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; margin: 0 0.15em; } #nav li a { color: #322b2a; text-decoration: none; background-position: bottom; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; line-height: 3em; display:block } #nav li.home a { border-bottom: 4px solid #ff0000; } #nav li.potfolio a { border-bottom: 4px solid #00ff00; } #nav li.contact a { border-bottom: 4px solid #0000ff; } #nav li a:hover { border-bottom: 4px solid #fff; } <ul> <li><a class="home" href="#">Home</a></li> <li><a class="portfolio" href="#">Portfolio</a></li> <li><a class="contact" href="#">Contact</a></li> </ul> Code (markup): Something like that I'd say.
It seems to be functioning oddly...there's no underline under the text and the hove underline works but is pretty far away from the text. This is what I have (for now css is in the html page I will change that later) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Eight84 | Logo Design, Web Design, Graphic Design, Wedding Invitations, Bridal Shower Invitations, Packaging Design, Album Art, DVD Covers </title> <style type="text/css"> <!-- #wrapper { width: 950px; height: 1000px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } body { background-image: url(images/body_bg.jpg); background-repeat: repeat-x; background-color: #FFF; } #logo { background-image: url(images/logo.png); height: 95px; width: 277px; float: left; } #nav { float: right; width: 345px; height: 65px; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; margin: 0 0.15em; } #nav li a { color: #322b2a; text-decoration: none; background-position: bottom; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; line-height: 3em; display:block } #nav li.home a { border-bottom: 4px solid #000000; } #nav li.potfolio a { border-bottom: 4px solid #000000; } #nav li.contact a { border-bottom: 4px solid #000000; } #nav li a:hover { border-bottom: 4px solid #fff; } --> </style> </head> <body> <div id="wrapper"> <div id="logo"></div> <div id="nav"><ul> <ul> <li><a class="home" href="#">Home</a></li> <li><a class="portfolio" href="#">Portfolio</a></li> <li><a class="contact" href="#">Contact</a></li> </ul> </ul></div> </div> </body> </html> Code (markup):
Well the first problem is you are targeting the <a>'s wrong from your CSS, for example: #nav li.home a is going to target all <a>'s within <li>'s which have the class home. You have assigned the class-names to the <a>'s not the <li>'s so instead it should be: #nav li a.home or more simply #nav li .home You also have a typo where you have mis-spelt portfolio in the CSS... So the code would look something like: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Eight84 | Logo Design, Web Design, Graphic Design, Wedding Invitations, Bridal Shower Invitations, Packaging Design, Album Art, DVD Covers </title> <style type="text/css"> <!-- #wrapper{ width: 950px; height: 1000px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; overflow:auto; } body{ background-image: url(images/body_bg.jpg); background-repeat: repeat-x; background-color: #FFF; } #logo{ background-image: url(images/logo.png); height: 95px; width: 277px; float: left; } #nav{ float: right; width: 345px; height: 65px; } #nav ul{ list-style: none; padding: 0; margin: 0; } #nav li{ display:inline; } #nav li a{ float:left; margin: 0 0.15em; color: #322b2a; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; line-height: 3em; } #nav li .home { border-bottom: 4px solid #F03; } #nav li .portfolio { border-bottom: 4px solid #66F; } #nav li .contact{ border-bottom: 4px solid #6C6; } #nav li a:hover { border-bottom: 4px solid #FFF; } --> </style> </head> <body> <div id="wrapper"> <div id="logo"></div> <div id="nav"> <ul> <li><a class="home" href="#">Home</a></li> <li><a class="portfolio" href="#">Portfolio</a></li> <li><a class="contact" href="#">Contact</a></li> </ul> </div> </div> </body> </html> Code (markup): Note: You had two <ul>'s for some reason so I removed one of them, I also added overflow:auto; to your wrapper so that it encloses the floats, and also set the #nav li to display:inline; as it prevents an IE7 step-down bug (I think)... There's also probably no need for the #nav DIV or the #logo DIV as at the moment the #nav isn't really doing anything as you could just style the UL, and if the #logo DIV is only ever going to be used for the background image you could also just add this to the #nav UL
thanks...I think I am starting to get this...my question now is how do I get the underline under the links? It is pretty far away...also put more space between each link?
1. Its because you have set line-height:3em, you can remove this completley really or set it to something else. line-height after all is the height of a single line of text (text will be vertically centered in each line), so you could have 24px font-size and 30px line-height meaning there will be 3px gap above and below the text, and the border will appear underneath the line (so 3px below the text)... 2. Yes you link to an external stylesheet by adding this inside the <head> tags of your document: <link rel="stylesheet" href="style.css" type="text/css" /> Then you will have a file called "style.css" in the same folder as your document which will contain the CSS code blocks (note they do not need to be inside <style> tags... See: http://w3schools.com/css/css_howto.asp and : http://www.tizag.com/cssT/external.php
Awesome...thanks. I took out the line-height but I guess that pushed the text back to the top of the page? What would be the proper way to push it down more? I just put in a <br> like this in the "nav" div. <div id="nav"> <ul> <br> <br /> <li><a class="home" href="#">Home</a></li> <li><a class="portfolio" href="#">Portfolio</a></li> <li><a class="contact" href="#">Contact</a></li> </ul> </div> Code (markup): Which did what I needed but I wasn't sure if it was correct. Do you have any recommendations that are specific for CSS layouts? I have the rest of this page and two more pages and I am unsure how to get the div's to go where I need them to go. they always seem to go everywhere they aren't supposed to. That or do you or anyone you know possible do CSS sessions that I could get live help with CSS? probably charged per hour or half hour...I'm not sure I just know I need to learn this stuff because I don't want to have to keep outsourcing everything I want to put up live.
You don't want to put line breaks in, because it's extra unnessecary markup. Remember CSS controls the presentation of the page so you want to try and use this where possible to control the look/arrangement of things rather than adding in extra HTML. To create the gaps needed you add padding/margin around the elements as required. So in this example you want a bit of a gap above your buttons, so you have tons of options open to you for example: - Add margin-top/padding-top to #nav - Add margin-top/padding-top to #nav ul - Add margin-top/padding-top to #nav ul li - Add margin-top/padding-top to #nav ul li a To learn the basics you can go through a quick step-by-step tutorial which only takes about an hour whilst doing examples: http://www.w3schools.com/css/ http://www.tizag.com/cssT/ This is for the basics, then you should learn some more of the advanced concepts by going through examples/reading articles.. Here is another good site for tutorials and examples: http://www.htmldog.com/ Then you should look up (google) example layouts e.g 2 column 3 column layouts and try to learn how the CSS works for them.. Remember you float DIV's to get them to appear next to each other and then create the gaps needed by using margins/paddings and borders. You are in complete control of where you want your elements to go!
oh okay I get that...would that also be a way to put in a div under both the logo and menu? I could add "margin-top:" to push it under the rest of the content? Then do that for more divs under that? (sorry that I'm asking so many questions and thank you so much for helping me!)
I need some colour code generator sites,please provide links to those sites where if you type in the specific colour codes hexa decimal codes,you can tweak the way in which it looks and its design. Also can someone share me some sites which can identify certain colour codes.