http://iamrogue-gfx.com/IAR2/ If anyone could please tell me how I could CENTER the damn footer, I've tried everything, lol. I tried making the code as clean as possible so you could easily see, and go through it. I'm truly sorry if I'm coming off as an idiot for having 1 post (this one) on this site but I just needed help so I googled "CSS forums" and found this one, anyway I'll probably be active later on lol Thanks in advance! (Sorry if you don't understand me that well, English is not my native language!) Basically what I need help with:: -Removing that light-blue line beneath "iamrogue@iamrogue-gfx.com" and above Home - AC Web. -Centering the footer.
Just change the Footer CSS to this: #footer { background:url("images/footer.png") no-repeat scroll center top #333333; clear:both; color:#333333; font-size:90%; height:100px; margin:0 auto; text-align:center; width:900px; } Code (markup): I just added the line margin: 0 auto; which centers the div!
OMG lol! Thank you, SO much!! I knew it was something extremely simple, lol. Anyway could you tell me why the "hovering" doesn't work? I can't seem to get it to work, thanks again swashata!
Oh, sorry. I should've thougt that one through, basically all the hovering, none of it works. I want to make the hovering work in a way so that when I go over for example the navigation bar (Home - Contact Me - About Me - My Work) so when you go over "Home", "home" and it's background becomes another color, I tried to do it myself but it doesn't work, nothing happens when I hover over it. Also, I wanted to change the color of the footer text hovering so when I go over the link "Design by: (LINK) iamrogue-gfx (LINK)" it changes to black or something like that. ,0
hmm... That has to be done using CSS pseudo selector! Don't be afraid its simple! See, nothing will happen if you hover over a link... Whatever you see in other websites are coded! Here is the code: For your Navigation Menu Links #menu ul li a:hover { color: #fff; /*Use whatevr color u want */ text-decoration: underline; /* Delete this line if you don't want */ /*Other CSS properties!*/ } Code (markup): Footer links: #footer a:hover { color: #333; /* or what ever you like! I just randomly entered some color */ /*Other CSS Properties */ } Code (markup): General link hovering: a:hover { /*CSS properties */ } Code (markup): Hope it helps! If you face any problem feel free to ask! Also, about your light blue line, try these code... Add them to your CSS file a, a:visited { text-decoration: none; } a img { border: 0px none; } Code (markup): Is it clear now?
Wow, thank you so much, again! what do you mean by nothing happens when I hover over a link? But with the codes you're giving me it should actually work, right?
by default, unless you put those code, nothing will change on hover. Consider hover as a state and a:hover gives the property to the a tag at hover state! Just put in those code and see the changes yourself
I don't want to come up as very stupid, but, nothing happens even when I put those codes up, I added those into the css_styles.css file. Would I have to aswell, add some sort of a text into the index.html file?
Hey, you didn followed exactly the code I showed you! There are some error... You have used a: hover ... Note that there are NO SPACE it should be a:hover... It should work now! Anyways, for your ease here is the complete code /* HTML ELEMENTS */ * { margin: 0; padding: 0 outline: 0; } body { background-color: #333; background-image: url(images/bg.png); background-repeat: repeat; color: #FFF; margin: 15px 0; font-family: Verdana, Tahoma, arial, sans-serif; font-size: 70%; line-height: 1.5em; } /* WEBSITE LAYOUT */ #wrap { width: 900px; background: #333333 url(images/content.png) repeat-y center top; margin: 0 auto; text-align: left; } #content-wrap { clear: both; width: 900px; margin: 5px auto; padding: 0; } #header { position: relative; height: 176px; background: #333333 url(images/header.png) no-repeat center top; padding: 0; } /* WEBSITE NAVIGATION */ #menu { clear: both; margin: 0 auto; padding: 0 3px; background: #333333 url(images/menu.png) no-repeat; height: 33px; width: 900px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 40px; } #menu ul{ float: left; list-style: none; margin: 0; padding: 0 0 0 20px; } #menu ul li { display: inline; } #menu ul li a { display: block; float: left; padding: 0 20px; color: #000; text-decoration: none; } #menu ul li a:hover { color: #fff; } /* MAIN COLUMN */ #main { float: right; width: 555px; margin: 0; padding: 20px 0 0 0; display: inline; } #main h2 { padding: 0; margin-bottom: 0; color: #FFF; font-family: FrizQuadrata; font-size: 330%; font-style: normal; } #main h2 a{ color: #2666c3; text-decoration: none; } #main p, #main h1, #main h2, #main h3, #main ol, #main ul, #main blockquote, #main table, #main form { margin-left: 25px; margin-right: 20px; } /* SIDEBAR */ #sidebar { background-image: url(images/content.png); float: left; width: 300px; padding: 0; color: #000000; margin-top: 5px; margin-right: 0; margin-bottom: 0; margin-left: 0; } #sidebar h2 { margin-left: 65px; font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif; color: #FFFFFF; } #sidebar p { margin-left: 45px; margin-right: 75px; } #sidebar ul.sidemenu{ list-style: none; text-align: left; margin-left: 30px; margin-right: 85px; padding: 0; text-decoration: none; border-top: 3px solid #333; } #sidebar ul.sidemenu li { list-style: none; padding: 4px 0 4px 5px; margin: 0 2px; color: #000000; border-bottom: 1px solid #D2E8F7; } * html body #sidebar ul.sidemenu li { height: 1%; } #sidebar ul.sidemenu li a { text-decoration: none; color: #FFFFFF; } #sidebar ul.sidemenu li a:visited { color: #000; text-decoration: none; } #sidebar ul.sidemenu li a:hover { color: #00F; /* blue */ text-decoration: none; /* kind of redundant wth a{} declaration */ } #sidebar ul.sidemenu ul {margin: 0 0 0 5px; padding: 0; } #sidebar ul.sidemenu ul li { border: none; } /* FOOTER */ #footer { background:url("images/footer.png") no-repeat scroll center top #333333; clear:both; color:#333333; font-size:90%; height:100px; margin:0 auto; text-align:center; width:900px; } #footer p { padding: 10px 0; margin: 0; } #footer a { color: #F00; text-decoration: none; } #footer a:hover { color: #F00; text-decoration: underline; /* alignment classes */ .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } /* display and additional classes */ .clear { clear: both; } /*WEBSITE LINKS */ a, a:visited { text-decoration: none; background: inherit; color: #C00; } a:hover { text-decoration: underline; background: inherit; color: #FFF; } /* WEBSITE TEXT HEADERS */ h1, h2, h3 {font-family: 'FrizQuadrata', Trebuchet MS, Tahoma, Sans-serif; } h1{ font-size: 180%; font-weight: normal; color: #ffffff; } h2{ font-size: 160%; color: #FFFFFF; font-weight: normal; } h3{ font-size: 135%; color: #ffffff; } /* WEBSITE IMAGES */ img.float-right { margin: 5px 0px 10px 10px; } img.float-left { margin: 5px 10px 10px 0px; } h1, h2,h3, p { margin: 10px 15px; padding: 0; } ul, ol { margin: 5px 15px; padding: 0 25px; } Code (markup):