Jump to content

html coding


stormsearchers

Recommended Posts

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

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 by Tezzo
Link to comment
Share on other sites

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...