Could someone please help me? I think my coding is absolutely messed up!

Discussion in 'CSS' started by iamrogue, May 15, 2010.

  1. #1
    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.
     
    iamrogue, May 15, 2010 IP
  2. extremephp

    extremephp Peon

    Messages:
    1,290
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, Am On to it...! :)

    Sure will do the work.. And make it as you want.

    Thanks.
     
    extremephp, May 15, 2010 IP
  3. iamrogue

    iamrogue Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry, I cannot pay whoever helps me with anything but thanks and gratitude!
     
    iamrogue, May 15, 2010 IP
  4. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    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!
     
    swashata, May 15, 2010 IP
  5. iamrogue

    iamrogue Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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!
     
    iamrogue, May 15, 2010 IP
  6. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #6
    Which hovering?? You mean changing color on hovering or what! Please be a little precise!
     
    swashata, May 15, 2010 IP
  7. iamrogue

    iamrogue Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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
     
    iamrogue, May 15, 2010 IP
  8. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #8
    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?
     
    swashata, May 15, 2010 IP
  9. iamrogue

    iamrogue Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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?
     
    iamrogue, May 15, 2010 IP
  10. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #10
    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 ;)
     
    swashata, May 15, 2010 IP
  11. iamrogue

    iamrogue Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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?
     
    Last edited: May 15, 2010
    iamrogue, May 15, 2010 IP
  12. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #12
    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):
     
    swashata, May 15, 2010 IP
  13. iamrogue

    iamrogue Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Ah, I see. Once again, thank you, SO MUCH! :D
     
    iamrogue, May 15, 2010 IP