Newly Designed Web Page

jlhaslip

Sep 14 2007, 01:48 AM

http://jlhaslip.trap17.com/aef%20features/index.html

A design layout for AEF Forums that I have come up with. Any ideas about how to improve on it?
All comments welcome. Thanks.

Not all the links are set for the correct place yet. It isn't quite finished, just want to know if I am missing anything. Curious how it looks in different Browsers, etc, colours okay? Readable?

Will.Allison

Sep 14 2007, 02:18 AM

I like the overall design but I think there are a few things you can add/change. First of all, I think a shadow on the edges of the main div would make it look a lot better. Also, a different background color that gives it contrast might work better as well.

Play around with the navigation a little bit. See if it looks better below the logo and maybe in a different color than black.

Nice start.

Forbez

Sep 22 2007, 10:53 AM

I say, keep the navigation there. It's nice there and would only spoil the whole design moving it. Save your images .png, as you don't get the lumpy style on the images.

One i'm looking at you have the main nav at the top with a black background, then a second nav. But the seconad nav has been written out twice, change that and only have one. Which hasn't got it's own background colour, but continues with the logo background grandient.

I have no clue what those boxes with the logo are on teh sides, they do nothing to improve the site. I'd say remove that and move the news content ethier more to the right or to the left, then add another column with more features such as latest forums psot and all that.

And I agree, you need to add a outer glow of black around the main content onto the background you have. Make the main content box and logo shorter in width so we can see the background.

Everything else is fine, good work there.

hitmanblood

Sep 27 2007, 06:43 PM

QUOTE(jlhaslip @ Sep 14 2007, 03:48 AM)

I have already noticed that you have forums opened for testing I am just interested whether you wrote this piece of software or not?

Also I would like to know where did you get idea for design that is if you have wrote this tool. And please reply me by PM.

baucutt

Oct 1 2007, 04:30 PM

Yea looks good, think a shadow onto the background color would look good,

It seems as if youve spent hours designing it and then Oh Crap! What about the menu.

And i think it would look alot cleaner if the 2 header gradients matched up.

views perfectly in FireFox 2 @ 1280x1024

Saint_Michael

Oct 2 2007, 02:36 AM

I made some corrections and some idea's to fill in the content area, and as for your repeat image it needs to be 1x95 to fix that gap you have. I would agree with the drop shadow, maybe have the head have that vista style to it as well.

HTML

CODE

<!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=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<!-- removes image tool bar in IE -->
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Keywords" content="AEF Forum software, AEF, Forums, Free Forums, anelectron.com, " />
<meta http-equiv="Description" content="A page listing the Features of AEF Forum Software with links to other pages about the software." />
<meta http-equiv="Reply-to" content="jlhaslip@yahoo.ca" />
<meta http-equiv="author" content="Jim Haslip" />
<meta http-equiv="Reply-to" content="jlhaslip@yahoo.ca" />
<link rel="stylesheet" type="text/css" href="index_files/style.css" />
<title>AEF - Features Page</title>
</head>
<body>
<div id="page_width">
  <div id="masthead">
    <ul id="toplist">
      <li> <a linkindex="0" href="http://www.anelectron/download.php" title="Download from here">Downloads</a> </li>
      <li> <a linkindex="1" href="http://www.jlhaslip.trap17.com/aef_103_demo/index.php?" title="Demo Site from here">Demo Site</a> </li>
      <li> <a linkindex="2" href="http://www.jlhaslip.trap17.com/aef_103_demo/index.php?fid=4" title="Tutorials Found Here">Tutorials</a> </li>
      <li> <a linkindex="3" href="http://www.jlhaslip.trap17.com/aef_103_demo/index.php?fid=5" title="Documentss Found Here">Documents</a> </li>
      <li> <a linkindex="4" href="http://www.jlhaslip.trap17.com/aef_103_demo/index.php?fid=1" title="Install Support Forum Here">Install Support</a> </li>
      <li> <a set="yes" linkindex="5" href="http://www.anelectron.com/board/index.php" title="Mod Support from here">Mod Support</a> </li>
      <li> <a set="yes" linkindex="6" href="http://www.anelectron.com/board/index.php" title="Language Support from here">Language Support</a> </li>
      <li> <a href="#" title="Features Page Here">Features</a> </li>
      <li> <a set="yes" linkindex="7" href="http://jigsaw.w3.org/css-validator/" title="Validate this page's CSS">Validate CSS</a> </li>
      <li class="toplistlast"> <a linkindex="8" href="http://validator.w3.org/check?uri=http%3A%2F%2Fjlhaslip.trap17.com%2Faef%2520features%2Findex.html" title="Validate this page's HTML">Validate HTML</a> </li>
    </ul>
    <div id="leftlist_div">
      <ul id="leftlist">
        <li></li>
      </ul>
    </div>
    <!-- close left_list div here --><br style="clear: both;" />
  </div>
  <!-- close masthead wrapper -->
  <div id="content">
    <h1>AEF Forum Feature List</h1>
    <div id="div1" class="dark">
      <div class="contentheader">
        <h2>Feature Title Here</h2>
        <dl class="epigraph">
          <dt> <q>AEF Forum Software Main Feature Here</q> </dt>
          <dd class="dd_rt"> <a set="yes" linkindex="15" title="Screenshot Here" target="_blank" href="http://jlhaslip.trap17.com/aef%20features/java%20script:void%280%29;">Screen Shot</a> </dd>
        </dl>
      </div>
      <div class="bottom" style="clear: right; margin-left: 200px;">
        <h3>AEF Forum Software Main Feature Description Here</h3>
        <p> this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature. </p>
        <p class="last"> this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature. </p>
      </div>
    </div>
    <!-- close div1.dark -->
    <div id="div2" class="dark clear">
      <div class="contentheader">
        <h2>Feature Title Here</h2>
        <dl class="epigraph">
          <dt> <q>AEF Forum Software Main Feature Here</q> </dt>
          <dd class="dd_rt"> <a linkindex="16" title="Screenshot Here" target="_blank" href="http://jlhaslip.trap17.com/aef%20features/java%20script:void%280%29;">Screen Shot</a> <a title="Top of this Page" href="#">Up to Top</a> </dd>
        </dl>
      </div>
      <div class="bottom" style="clear: right; margin-left: 200px;">
        <h3>AEF Forum Software Main Feature Description Here</h3>
        <p> this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature. </p>
        <h4>Sub-Feature Heading Here</h4>
        <p class="last"> this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature. </p>
      </div>
    </div>
    <!-- close div2.dark -->
    <div id="div3" class="dark clear">
      <div class="contentheader">
        <h2>Feature Title Here</h2>
        <dl class="epigraph">
          <dt> <q>AEF Forum Software Main Feature Here</q> </dt>
          <dd class="dd_rt"> <a linkindex="17" title="Screenshot Here" target="_blank" href="http://jlhaslip.trap17.com/aef%20features/java%20script:void%280%29;">Screen Shot</a> <a title="Top of this Page" href="#">Up to Top</a> </dd>
        </dl>
      </div>
      <div class="bottom" style="clear: right; margin-left: 200px;">
        <h3>AEF Forum Software Main Feature Description Here</h3>
        <h4>Sub-Feature Heading Here</h4>
        <p> this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature. </p>
        <p class="last"> this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature. </p>
      </div>
    </div>
    <!-- close div3.dark -->
    <div id="div4" class="dark clear">
      <div class="contentheader">
        <h2>Feature Title Here</h2>
        <dl class="epigraph">
          <dt> <q>AEF Forum Software Main Feature Here</q> </dt>
          <dd class="dd_rt"> <a linkindex="18" title="Screenshot Here" target="_blank" href="http://jlhaslip.trap17.com/aef%20features/java%20script:void%280%29;">Screen Shot</a> <a title="Top of this Page" href="#">Up to Top</a> </dd>
        </dl>
      </div>
      <div class="bottom" style="clear: right; margin-left: 200px;">
        <h3>AEF Forum Software Main Feature Description Here</h3>
        <h4>Sub-Feature Heading Here</h4>
        <p class="last"> this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature.
          this is text with an explanation of the feature. </p>
      </div>
    </div>
    <!-- close div4.dark -->
    <div id="footer">
      <p class="last"> © 2006 <a linkindex="19" href="http://www.anelectron.com/">Electron Inc.</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a title="Top of this Page" href="#">Up to Top</a> <a linkindex="20" href="http://jigsaw.w3.org/css-validator/"><img style="border: 0pt none ; width: 88px; height: 31px;" src="index_files/vcss.png" alt="Valid CSS!" /></a> </p>
    </div>
    <!-- close footer -->
  </div>
  <!-- close page_width wrapper -->
</div>
<!-- close content wrapper -->
</body>
</html>

CSS

CODE

/* style.css used with aef features layout -- design by jlhaslip@yahoo.ca -- sept/2007 */

        * html {
        margin: 0;
        padding: 0;
        }

        body {
        background-color: #436593;
        padding: 0px;
        width: 1000px;
        margin: 0 auto;
        font-family: Arial,Helvetica,Verdana, Tahoma, Sans-Serif, Georgia, Courier, sans-serif;
        font-size: 90% ;

        }
        h1 { text-align: center; margin: 0 .70em; color: #436593; background-color: transparent; padding-top: .40em; }
        h2 { margin: .55em; color: #436593; background-color: #f3f3f3; }
        h3 { margin: .45em; color: #436593; background-color: #f3f3f3; }
        h4 { margin: .35em; color: #436593; background-color: #f3f3f3; }

        p { text-indent: 3em; margin: .2em;         padding: 0 30px 0 0;
}

        #page_width {

        }

		#content { 
        background-color: #f3f3f3;

		}

        #masthead {
        overflow: hidden;
        background-image: url(../index_files/background.png);
        background-repeat: repeat-x;
        background-position: bottom;
        }

        #masthead img { 
        float: left; 
        }

		#contentheader { 
        }

        ul#toplist, ul#sidelist {
        font:600 11px Arial,Helvetica,sans-serif;
        padding: 0;
        margin: 0;

        }

        ul#toplist {
        width: 100%;
        background-color: #000000;
        background-repeat: repeat-x;
        padding: 2px 0px 2px 0px;
        }

        ul#sidelist { 
        float: right; 
        }


        ul#toplist li, ul#sidelist  li {
        display: inline;
        padding: 1px 0 0 0;
        border-right: 1px solid white;
        }

        ul#toplist li a, 
		ul#toplist li a:visited,
		ul#sidelist  li a,
		ul#sidelist  li a:visited {
        padding: 0 5px;
        color: #ccc;
        text-decoration: none;
        }

        #toplist a:hover,
		#sidelist a:hover {
        color:#999;
        text-decoration:underline;
        }

        ul#toplist li.toplistlast, 
		ul#sidelist  li.sidelistlast {
        border-right: 0;
        }

        #masthead ul#sidelist li.sidelistlast {
        border: none;
        }



        #leftlist_div {
        float:left;
        height: 95px;
        width: 600px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        background-image:url(../index_files/header.png);
        background-repeat: no-repeat;

        }

        ul#leftlist {
        margin:20px 0px 0px 300px;
        padding:0;
        }

        ul#leftlist li {
        margin: 0px 0px 0px 0px;
        display:inline;
        }

        ul#leftlist  li a:link {
        color: #cccccc;
        background-color: transparent;
        padding: 2px ;
        }

        ul#leftlist  li a:hover {
        color: #333333;
        }
        
        #footer {
        margin: 0 auto;
        text-align: center;

        }

        .dark {
        color: #666;
        width: 95%;
        height: auto;
        margin: 0px;
        padding: 0;
        clear:both;
		background-repeat: no-repeat;
        }

        .lhsb { width: 200px; float:left; clear:both; }
        .lhsb img { margin: 10px 30px; text-align:center; }
        .contentheader { margin:0 auto; margin-left: 100px; }
        .epigraph { width: 80%;margin: .25em auto; padding-right: 67px; }
        .dd_rt { float: right; margin: .25em; }
        .last { margin-bottom: 10px;}
        .bottom { 
        background-color: #f3f3f3;
        background-image:url(./images/cbot.png);
        background-position: bottom left;
        background-repeat: no-repeat;
		border: 1px solid #e6e6e6;

		}
.bottom h3  {
        background-image:url(./images/ctop.png);
        background-repeat: no-repeat;
        padding-top: 5px;
        }


        .clear { clear:both; }

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Newly Designed Web Page - Mock-up for review and discussion

Newly Designed Web Page - Mock-up for review and discussion