Jump to content

Website problems.


Recommended Posts

Hello people I am currentley building a clan website while i learn html and css. I have read all the tut`s on this site many times but have encountered a problem. i have copied the tut exact for divs, and when i view it in a webbrowser the margin only runs about a quarter of the way down the page of my website, I cant see what the problem is.this is the code as w3schools taught me:

<html><head><style type="text/css">h1  {text-align: center}td  {text-align: center}div.container{width:1024px;margin:0px;border:1px solid gray;line-height:150%;}div.header,div.footer{padding:0.5em;color:blue;background-color:gray;clear:left;}h1.header{padding:0;margin:0;}div.left{float:left;width:160px;margin:5;padding:1em;}div.content{margin-left:190px;border-left:5px solid gray;padding:1em;}</style><title>EN-TRANCE<title></head><body><div class="container"><div class="header"><h1>EN-TRANCE</h1><table border="1" align="center"><tr>  <td><a href="forum.html">Forum</a>  </td>  <td><a href="results.html">Results</a>  </td>  <td><a href="news.html">News</a>  </td>  <td><a href="biographys.html">Bios</a>  </td>  <td><a href="game_guides.html">Guides</a>  </td>  <td><a href="recommendations.html">Recommended</a>  </td>  <td><a href="sponsors.html">Sponsors</a>  </td>  <td><a href="gametrader.html">Gametrader</a>  </td>  <td><a href="online_shop.html">Store</a>  </td></tr></table><h1 class="header"></h1></div><div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p><form action="MAILTO:"sam.barnes@hotmail.com" method="post" enctype="text/plain"><h3>If you do not wish to join the community you can still sign up for our newsletter, or leave us comments on the site.</h3>Name:<br><input type="text" name="name"value="yourname" size="20"><br>Mail:<br><input type="text" name="mail"value="yourmail" size="20"><br>Comment:<br><input type="text" name="comment"value="yourcomment" size="20"><br><br><input type="submit" value="Send"><input type="reset" value="Reset"></form> </div><div class="content"><h2>Free Web Building Tutorials</h2><p>At W3Schools you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p><p>W3Schools - The Largest Web Developers Site On The Net!</p><p><a href"http//www.w3schools.com>To learn how to build your own website click this link.</a> </p></div><p> <img src ="homepage_picture_1.jpg" alt="your picture"align ="left" width="200" height="200"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p><br/><p><img src ="homepage_picture_2.jpg" alt="your picture"align ="right" width="200" height="200"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.  </p><br/><p><img src ="homepage_picture_3.jpg" alt="your picture"align ="left" width="200" height="200"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.  </p><br/><p><img src ="homepage_picture_4.jpg" alt="your picture"align ="right" width="200" height="200"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.  </p><br/><p>Samuel i have been working hard on this design for over four hours now and it is like 11pm on sunday.  All this text will be replaceable by your own text. there is only one thing that i need to fix on this page and that would be the vertical line u can see, i cant get it to go all the way down the page at the minute, which is doing my head in.  When it does go all the way down this text will all be in the right column, so keeping the look tidy.  All colours can be changed to suit needs, as can picture sizes. i hope u like this design.  And incase u have not noticed, look you got ur horizontal links in the end, see it pays to be an ag`.Pls dont even bother critisizing the design unless u have a better idfea and i can actrually do it, consrtuctive criticism only pls.as soon as u have this and have seen it phone me for a chat.  </p><br/><p>  </p><br/><p>  </p><br/><p>  </p><br/><div class="footer"><table border="1" align="center"><tr>  <td><a href="forum.html">Forum</a>  </td>  <td><a href="results.html">Results</a>  </td>  <td><a href="news.html">News</a>  </td>  <td><a href="biographys.html">Bios</a>  </td>  <td><a href="game_guides.html">Guides</a>  </td>  <td><a href="recommendations.html">Recommended</a>  </td>  <td><a href="sponsors.html">Sponsors</a>  </td>  <td><a href="gametrader.html">Gametrader</a>  </td>  <td><a href="online_shop.html">Store</a>  </td>  </tr></table></div></body></html>

I cant seem to upload a picture which may be because i dont have my site online yet, so any help would be appreciated, it may be an html issue but I reasoned it to be a css issue, many thanx in advance. I have edited this post to include all my code incase it is not a css issue.

Link to post
Share on other sites
  • 2 weeks later...

Remove the </div> at the end of this line and it will work:

<p>W3Schools - The Largest Web Developers Site On The Net!</p><p><a href"http//www.w3schools.com>To learn how to build your own website click this link.</a> </p></div>

change to

<p>W3Schools - The Largest Web Developers Site On The Net!</p><p><a href"http//www.w3schools.com>To learn how to build your own website click this link.</a> </p>

Link to post
Share on other sites
<p>[A block of text]</p><br/><p> </p><br/><p> </p><br/><p> </p><br/>

What's with all these empty <p>s and <br /> tags?You know, you should use margins and padding instead. It's a bad practice to use paragraphs for line breaks, and it's also bad practise to use line breaks just to add vertical space to your document.Why not do this? (Styles are inline for the example, preferrably use CSS classes)

<p style="margin-bottom: 8em;">[A block of text]</p>

Link to post
Share on other sites

Have you seen your page in IE6 and IE7?... I haven't :) (For the visitors of this forum, just copy and paste the entire code in a new page in Dreamweaver (or whatever it is you use) and try to see it in IE6/7).Your HTML code is very badly constructed, I suggest you start from zero, with a clean HTML and CSS codes.Here are some free CSS based layouts you can start with:

Hope this helps.Bytes,

Link to post
Share on other sites
Have you seen your page in IE6 and IE7?... I haven't :) (For the visitors of this forum, just copy and paste the entire code in a new page in Dreamweaver (or whatever it is you use) and try to see it in IE6/7).Your HTML code is very badly constructed, I suggest you start from zero, with a clean HTML and CSS codes.Here are some free CSS based layouts you can start with:

Hope this helps.Bytes,

I could not understand why it would not load in explorer as it is fine in firefox, my default browser, So u think i should start again then?
Link to post
Share on other sites

Your HTML code must be broken somewhere, not even IE that's so forgiving with badly structured HTML can render it.Yes, I suggest you start with the right foot: clean HTML and CSS code.Believe me, you'll be VERY relieved. Besides, you will learn more since you have those templates with proper HTML and CSS.Let us know how it goes.Bytes,EDIT-- I Almost forgot. In this link you will learn everything you need to know about list items, EVERYTHING: http://css.maxdesign.com.au/index.htmList items can be used to make not only lists (doh! :) ) but navigation menus, vertical and horizontal.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...