stormsearchers Posted April 8, 2015 Share Posted April 8, 2015 Hi all i have started to create my first html for my stormchasing website. I need help with some coding please my table is not showing up for the hole with of the page width inside the table is my nav_memu i want to create colspam fore each section of my nav like home,forecast,stormchasing,charts,about us,contact us. i have included my code for my help on this <!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="weather,weather data, forecast,weathercharts,social media"><meta http-equiv="refresh" content="30"><meta name="author" content="Michael Wright"><title>EyeCyclones.com</title><link rel="stylesheet" type="text/css" href="eyecyclones.css"></head><body><table align="centre" border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td div align="center"> <ul> <li><a href="index.html">Home</a></li> <li><a href="forecast.php.">Forecast</a></li> <li><a href="charts.asp">Weathercharts</a></li> <li><a href="stormchasing.asp">stormChasing</a></li> <li><a href="about.asp">About Us</a></li> <li><a href="about.asp">Contact Us</a></li> </ul> </td> </tr></table></div><div id="section"><h1 style="text-align:center">Welcome to Our Website</h1><div id="footer">Copyright © 2015 eyecyclones Alrights Reserved.</div></div></body></html> and my css is here also body { background-color: #000000}#table { width: 100%; align: center; border-collapse: collapse; border-spacing: 0;}td, th { border: 1px solid #CCC; }ul { list-style-type: none; margin: 0; padding: 0;}a { display: block; width: 60px;}ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden;}li { float: left;}a:link, a:visited { display: block; width: 120px; font-weight: bold; color: #FFFFFF; background-color: #98bf21; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase;}a:hover, a:active { background-color: #7A991A;}#section { width:350px; float:left; padding:10px; }#footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } Link to comment Share on other sites More sharing options...
tejasamrute Posted April 8, 2015 Share Posted April 8, 2015 (edited) since you r just starting with your project......i would reckon you code it in table less layout.....table style is just too old.. as far as you question is concerned u need to do some modifications body { background-color:#000000; margin:0; /* disable mandatory margin taken by html pages*/ padding:0;} i can also see....your 3rd and 4th link of your navigation is being cut. off a { display:block; padding: 5px; /*or set the width according to your longest word*/} Edited April 8, 2015 by Tezzo Link to comment Share on other sites More sharing options...
tejasamrute Posted April 8, 2015 Share Posted April 8, 2015 you have also messed up a little in your html </table><div id="section"> <h1 style="text-align:center">Welcome to Our Website</h1></div><div id="footer"> Copyright © 2015 eyecyclones Alrights Reserved.</div> Link to comment Share on other sites More sharing options...
stormsearchers Posted April 8, 2015 Author Share Posted April 8, 2015 what i want to do is with the table add color to it with the nav memu can i use colspan and how do i do that Link to comment Share on other sites More sharing options...
tejasamrute Posted April 9, 2015 Share Posted April 9, 2015 why do you need colspan.......set the width of the nav to 100%...you have already used ul & li.... Link to comment Share on other sites More sharing options...
stormsearchers Posted April 9, 2015 Author Share Posted April 9, 2015 is there anythink else i need to fix up with the css body { background-color:#000000; margin:0; /* disable mandatory margin taken by html pages*/ padding:0;}#table { width: 100%; background-color: #98bf21; border-collapse: collapse; border-spacing: 0;}td, th { border: 1px solid #CCC; }ul { list-style-type: none; margin: 0; padding: 0;}a { display: block; width: 60px;}ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden;}li { float: left;}a { display:block; padding: 15px; /*or set the width according to your longest word*/ width: 100%; font-weight: bold; color: #FFFFFF; background-color: #98bf21; text-align: center; text-decoration: none; text-transform: uppercase;}a:hover, a:active { background-color: #7A991A;}#section { width:350px; float:left; padding:10px; }#container { width: 1000px; color:#FFFFFF; text-align:center; margin:auto; font-size:20px; font-weight:bold;}#content { float: left; width: 750px; background-color: #C53234; padding: 10px 0px;}#footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } Link to comment Share on other sites More sharing options...
tejasamrute Posted April 9, 2015 Share Posted April 9, 2015 if you are not going with table format you can delete this.. #table { width: 100%; background-color: #98bf21; border-collapse: collapse; border-spacing: 0;}td, th { border: 1px solid #CCC; }ul { list-style-type: none; margin: 0; padding: 0;}a { display: block; width: 60px;} if you are going with table.....delete 'a' & 'ul' only Link to comment Share on other sites More sharing options...
musakilimanjaro Posted April 9, 2015 Share Posted April 9, 2015 dont use a table for your layout, its a bad way to start learning how to code using tables for layout. read about using divs and css layouts Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now