October 6, 201213 yr hi i have a class project and i want to change the background colour t0 grey and the banner to green and someone tell me where im going wrong? Edited October 6, 201213 yr by MikeChipshop
October 6, 201213 yr Attachments removed, please either link to a live version or post the code between code <> tags. Cheers, it's easier for all of us.
October 6, 201213 yr Author <html> <head> <center> <h1>Feltwell <img src="sign2.GIF" alt="Cannont display" width="304" height="228"> Utd Fc</h1></center> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> <title> Feltwell Utd Fc </title> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-714624-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script></head> <body> <!-- container for positioning the banner --> <div id="navigation_container"> <!-- the left side of the fork effect --> <div class="l-triangle-top"> </div> <div class="l-triangle-bottom"> </div> <!-- the ribbon body --> <div class="rectangle"> <!-- the navigation links --> <ul id="navigation"> <li> <a href="#"> ✭ Home</a> </li> <li> <a href="#">✭ About</a> </li> <li> <a href="#">✭ Services</a> </li> <li> <a href="#">✭ Contact</a> </li> </ul> <!-- end the ribbon body --> </div> <!-- the right side of the fork effect --> <div class="r-triangle-top"> </div> <div class="r-triangle-bottom"> </div> <!-- end container --> </div> </body> </html> Edited October 6, 201213 yr by MikeChipshop
October 6, 201213 yr Author html { background: #08A12C; } #navigation_container { margin: 0 auto; width: 900px; } #navigation li { list-style: none; display: block; float: left; margin: 1em 0.8em; } #navigation li a { text-shadow: 0 2px 1px rgba(0,0,0,0.5); display: block; text-decoration: none; color: #00FF00; font-size: 1.6em; margin: 0; line-height: 28px; } #navigation li.active a:hover, #navigation li a:hover { margin-top: 2px; } #navigation li.active { font-style: italic; } #navigation li.active a { } .rectangle { background: #08A12C; height: 62px; position: relative; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; z-index: 500; /* the stack order: foreground */ margin: 3em 0; } .l-triangle-top { border-color: #08A12C transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: 1px; left: -50px; } .l-triangle-bottom { border-color: transparent transparent #08A12C; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: left; top: -40px; left: -150px; } .r-triangle-top { border-color: #08A12C transparent transparent; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; right: -45px; top: -107px; } .r-triangle-bottom { border-color: transparent transparent #08A12C; border-style:solid; border-width:50px; height:0px; width:0px; position: relative; float: right; top: -149px; right: -145px; } Edited October 6, 201213 yr by MikeChipshop
October 6, 201213 yr Above posts edited to use code tags. In future please enclose all code within code tags (the button that looks like <>)for readability. It's going to be far easier if you can post up a live link as the codes not all that. Also you've got som funky stuff going on within your head tags which isn't needed.
October 6, 201213 yr Author The information between the end title tag and end head tag shouldn't be there. I'm still working on it but I just need to change the colours. Someone help?
October 6, 201213 yr First things first: write valid markup. If you write valid markup, any weirdness you see is likely already documented somewhere. If you don't, any problems are unique to your own tag soup, because there are only standards for how a browser should display correct markup - error handling is a crapshoot. Start your document with a document type declaration: <!DOCTYPE html> <center> is deprecated, don't use it. <h1> doesn't belong in the <head>. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Feltwell Utd Fc </title> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> </head> <body> <!-- container for positioning the banner --> <div id="navigation_container"> <!-- the left side of the fork effect --> <div class="l-triangle-top"> </div> <div class="l-triangle-bottom"> </div> <!-- the ribbon body --> <div class="rectangle"> <!-- the navigation links --> <ul id="navigation"> <li> <a href="#"> ✭ Home</a> </li> <li> <a href="#">✭ About</a> </li> <li> <a href="#">✭ Services</a> </li> <li> <a href="#">✭ Contact</a> </li> </ul> <!-- end the ribbon body --> </div> <!-- the right side of the fork effect --> <div class="r-triangle-top"> </div> <div class="r-triangle-bottom"> </div> <!-- end container --> </div> </body> </html>
October 6, 201213 yr The information between the end title tag and end head tag shouldn't be there. I'm still working on it but I just need to change the colours. Someone help? Please see reply about posting a live link.
Create an account or sign in to comment