Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Code not Working for HTML Footer or Nav

    I'm brand spanking new to coding and I've run into some troubles. I have the rough layout of a website I'm making finished and I am trying to style it with CSS. I've written the code but the CSS seems to only work when I give it the body command. Looking for some advice to get me past this so I can move on to new struggles.

    <code>
    <html>
    <title>Home | CFNES IT</title>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <h1><img src="images/CFNESIT.png" alt="CFNES IT"></h1>
    </head>
    <hr>
    <nav>
    <ul>
    <li><a href="reportaproblem.html">Report a Problem</a></li>
    <li><a href="Staffcontacts.html">Staff Contacts</a></li>
    <li><a href="FAQs.html">FAQs</a></li>
    </ul>
    </nav>
    <footer>
    Copyright © 2014 CFNES IT
    </footer>
    </html>
    </code>

    And for the CSS side of the house just for an example:

    <code>
    body {
    color: #666666; font-size: 2.5em;
    text-align: left;
    }
    </code>
    I've tried using the footer command and the nav ul li command in CSS but nothing effects the presentation of the webpage aside from using the body command.

    Thanks in advance!

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just realized I ****ed up the code box.... Doh!

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    Croatia
    Posts
    20
    Thanks
    1
    Thanked 1 Time in 1 Post
    I don't recommend using <nav> and <footer> tags when you are starting to write code, it brings unnecessary complications. They are not supported yet across all browsers + you need to define them in css with particular care. Use <div> tags with defined classes. Also pay attention to <body> tag. Insert it after </head> tag and close it before </html> tag.

    Make sure you validate your site on The W3C Markup Validation Service. It is a pretty good tool for pointing out errors in your code.
    Hit me up for cheap but quality html/css conversions/rebuilds. Ok, let me see what you've got

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,210
    Thanks
    23
    Thanked 605 Times in 604 Posts
    And I'd like to add to always use a doctype in your code. Browsers need it to figure out how to render your code. Most can work around it, but IE has a hard time.
    And indent your work so you can easily see dependencies and that you have an end tag for every start tag, one of the big problem areas for beginners and veterans alike.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta charset="UTF-8" />
    	<title>Home | CFNES IT</title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<style type="text/css">
    	body {
    		color: #666666;
    		font-size: 2.5em;
    		text-align: left;
    	}
    	</style>
    </head>
    
    <body>
    	<h1><img src="images/CFNESIT.png" alt="CFNES IT"></h1>
    	<hr>
    	<nav>
    		<ul>
    			<li><a href="reportaproblem.html">Report a Problem</a></li>
    			<li><a href="Staffcontacts.html">Staff Contacts</a></li>
    			<li><a href="FAQs.html">FAQs</a></li>
    		</ul>
    	</nav>
    	<footer>
    		Copyright © 2014 CFNES IT
    	</footer>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello CleverUsername,
    I like the new elements that HTML5 offers and even though the new standard isn't official yet, it does seem widely supported. You should be aware that you may have some things to fix since thing may change a little but that shouldn't stop you from using it.
    A quick example in getting it backward compatible for a few browser versions can be seen here.

    Have a look at one quick example of styling your layout, maybe it'll give you some ideas -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Home | CFNES IT</title>
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    /* HTML5 tags */
    header, section, footer,  aside, nav, article, figure { display: block; }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    	font-size: 1em;
    }
    h1 { text-align: center; }
    	ul#nav {
    		margin: 0;
    		padding: 0;
    		border-bottom: 1px solid #ccc;
    		border-top: 1px solid #ccc;
    		text-align: center;
    	}
    		ul#nav li {
    			display: inline-block;
    			list-style: none;
    		}
    			ul#nav li a {
    				padding: 5px 10px;
    				display: block;
    				color: #333;
    				text-decoration: none;
    			}
    			ul#nav li a:hover { background: #f00; }
    section { padding: 25px; }
    footer {
    	padding: 10px 25px;
    	text-align: right;
    }
    </style>
    <body>
    	<div id="container">
    		<h1><img src="images/CFNESIT.png" alt="CFNES IT"></h1>
    			<ul id="nav">
    				<li><a href="reportaproblem.html">Report a Problem</a></li>
    				<li><a href="Staffcontacts.html">Staff Contacts</a></li>
    				<li><a href="FAQs.html">FAQs</a></li>
    			</ul>
    			<section>
    				<p>
    					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    					aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    					sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
    					duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    				</p>
    				<p>
    					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    					aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    					sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
    					duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    				</p>
    			</section>
    		<footer>Copyright © 2014 CFNES IT</footer>
    	<!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •