Jump to content

My website is messy.. Any ideas?


cs.punk

Recommended Posts

I am really not trying to get any free traffic and to make you certain of that I uploaded a screenshot of a page... (the blurs are some contact informations and stuff)...

 

Theres a 'roll over effect' (notice the 'discussion board' block)...

 

It just feels so hard to get a design from your head into HTML or CSS.

The green and blue looks the best, as if i use other colours it starts to look so uhm 'plankifull' an

 

What should I do? I was thinking of using images to show out the design but I don't want it to become heavy and slow...

 

It's www.metrader.co.cc

 

Heres the code if anyone wants:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Me Trader - Asus Radeon HD4670 512mb</title> <link href="files/css.css" rel="stylesheet" type="text/css" />
<script src="files/OnOffButton.js" language="javascript" type="text/javascript">
</script>
</head>

<body bgcolor="#004A7F">

<table width="100%">
<tr>
  <td colspan="2"><p class="heading" align="center">Me Trader </p>
  </td>
</tr>
<tr bgcolor="#02FF13">
  <td bgcolor="#004A7F">
   
    <a href='index.php'
                onmouseover="chgImg('home','_on')"
                onmouseout="chgImg('home','')">
               <img src='images/home.jpg' border='0' name='home' /></a>
		   <a href="choose_ad_cat.php"
               onmouseover="chgImg('post_ad','_on')"
               onmouseout="chgImg('post_ad','')">
              <img src="images/post_ad.jpg" border="0" name="post_ad" /></a>
		  <a href="discussion_board/board.php"
            	onmouseover="chgImg('discussion_board','_on')"
             	onmouseout="chgImg('discussion_board','')">
               <img src="images/discussion_board.jpg" border="0" name="discussion_board" /></a>
		   <a href="logout.php"
                onmouseover="chgImg('logout','_on')"
                onmouseout="chgImg('logout','')">
              <img src="images/logout.jpg" border="0" name="logout" /></a>  </td>
</tr>
</table>

<p align="center" class="mediumheading">Asus Radeon HD4670 512mb</p>
        <p align="center" class="smallheading">Price: R750</p>
	<p align="right" class="smallheading">Date submitted: 11:52 am 18/05/09
	Submited by: <a href='user.php?userid='></a></p>
        <br/>
    <p align="center" class="paragraph">Bought for R1200. Has the big cooler on which they say is 15'C cooler than the normal one. DDR3 ram, x2 DVI outputs. and a HDMI connector too i think. if thats *******</p>
	<hr />
	<p align="center" class="mediumheading">Notes:</p><p class="paragraph">Your note has been added!</p><form name='noteform' method='post' action='ads.php?adid=4'>
        <p class='smallheading'>
         Message: <textarea name='message' cols='64' rows='4' maxlength='1024'></textarea>
        <br />
        <br />
        <input name='add_note' type='submit' value='Submit'/>
        </form>
	<br/>
	<hr/>
	<hr/><p class="smallheading">Note Submitted By: <a href='user.php?userid=5'>ellof</a>
      <br/>Date submitted: 02:28 am 19/05/09</p>
      <p align="center" class="paragraph">I'll pay you******************************************</p>
	  <hr /><p class=page>Page:  [<b>1</b>] </p><hr/>
<p align='center' class='copyright'>Copyright © Me Trader 2009</p>
</body>

</html>

 

It's abit messy as I use PHP...

Link to comment
Share on other sites

To get you started, you should look at how other sites are designed.  Look for common elements like header images, navigation menus, content columns, and other things of that nature.  Observe how they add a sense of structure to the page - by using headings, or borders to separate sections, etc.  The positioning of elements is key.

 

IMO, the first step should be to build the general layout.  Fiddle around with the raw HTML (or, even better, use a graphics editor) to see where elements should go.  Once you're happy with that, then you can go on to colors and font.

 

With your site, in particular, I'm not a fan of the blue and green combo.  It puts a bit of strain on my eyes.  A simpler color combination with more contrast may work better.  In fact, I think a three or four color design would work best.  Black and white for the text, so it's easy to read (see: CNN, Amazon, ESPN, IGN, etc), and the other, more exciting colors to give your site personality and visible 'oomph'.

 

Hope this helps a bit.

Link to comment
Share on other sites

But I really can't think of anything practical... I am so bad at this... Could anyone spare a thought to think of something I can actually do?... All I can think of is a 'ribbon bar' insted of the 'block buttons'...

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.