jlhaslip 4 Report post Posted September 14, 2007 http://forums.xisto.com/no_longer_exists/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? Share this post Link to post Share on other sites
Will.Allison 0 Report post Posted September 14, 2007 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. Share this post Link to post Share on other sites
Forbez 0 Report post Posted September 22, 2007 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. Share this post Link to post Share on other sites
hitmanblood 0 Report post Posted September 27, 2007 http://forums.xisto.com/no_longer_exists/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? 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. Share this post Link to post Share on other sites
baucutt 0 Report post Posted October 1, 2007 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 Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted October 2, 2007 (edited) 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ 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://forums.xisto.com/no_longer_exists/; title="Download from here">Downloads</a> </li> <li> <a linkindex="1" href="http://forums.xisto.com/no_longer_exists/; title="Demo Site from here">Demo Site</a> </li> <li> <a linkindex="2" href="http://forums.xisto.com/no_longer_exists/?fid=4; title="Tutorials Found Here">Tutorials</a> </li> <li> <a linkindex="3" href="http://forums.xisto.com/no_longer_exists/?fid=5; title="Documentss Found Here">Documents</a> </li> <li> <a linkindex="4" href="http://forums.xisto.com/no_longer_exists/?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://forums.xisto.com/no_longer_exists/ 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://forums.xisto.com/no_longer_exists/ 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://forums.xisto.com/no_longer_exists/ 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://forums.xisto.com/no_longer_exists/ 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/ Inc.</a> | <a title="Top of this Page" href="#">Up to Top</a> <a linkindex="20" href="http://jigsaw.w3.org/css-validator/ 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 /* 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; } Edited October 2, 2007 by Saint_Michael (see edit history) Share this post Link to post Share on other sites
