...

View Full Version : I need a basic site layout



JAVAEOC
04-21-2004, 02:11 AM
Well I just would like someboyd to come up with a site lay out for me, and the colors, then i will write the code

Im not very artistic :(

thanks

bradyj
04-21-2004, 03:48 AM
Personal? Business?

JAVAEOC
04-21-2004, 03:52 AM
Ohh, doesnt matter, you can even draw a basic design in NotePad and ill do the html, i just cant come up with a lay out :(

thanks

oracleguy
04-21-2004, 04:23 AM
Try to find examples of stuff you like. So say on this site x, I like this and on site y I like this. It will help give someone an idea what you want. Additionally saying what the site is going to be about is important to.

mindlessLemming
04-21-2004, 04:56 AM
.. draw a basic design in NotePad...

Drawing in Notepad? Now that's going to require some serious skills! :D

Seriously though, I'll through my skills in the ring once you give us some idea what you're after
:thumbsup:

bradyj
04-21-2004, 05:46 AM
Seriously though, I'll through my skills in the ring once you give us some idea what you're after
:thumbsup:

I agree -- I'd be a good learning tool for you, and a challenge. But, like oracleguy said, we need a starting point.

ionsurge
04-21-2004, 07:39 AM
What direction do you want one to go in? You've not mentioned the nature of the project.

JAVAEOC
04-21-2004, 01:19 PM
Ok, thanks for all your help so far, The webpage design shold be look proffecional, easy to follow, and clean (it should not be based on dark colors), It should be liquid, meaning that it will fit any resolution....

For example i like the Moz nomepage: www.mozilla.org

It has a space for the logo, a clear menu at the top, and two seperations for the body, one for the main content and one for a bunch of links


and thats about it...


thanks again.....

thunderbox
04-21-2004, 03:12 PM
so like u wan tjust the layout, not the images or anything

bradyj
04-21-2004, 07:34 PM
Maybe it would be best if you type up the code that you want, and we can offer some designs for you (maybe a basic jpeg file from photoshop or GIMP for you open sourcers out there). This would be simliar to http://www.csszengarden.com/

I can design anything, but I need a subject, is where I'm getting at - what if I do a nice pink layout with easter bunnies for a Pantera Fan page? :thumbsup:

JAVAEOC
04-21-2004, 11:13 PM
See, the thing is, If i could come up with the colors and the layout, as you want me to supply, then i wouldnt need to post this....

My truble is That i cant come up with creative webcolors, or layouts....
And yes, If you could come up with a logo, and name, that would be even better (a banner is nice too), cause i cant do anything related to graphics, ohter then Paint :D

but a theme i like alot is brothercake's:

Maybe somebody can come up to a design similar to his homepage, and or his udm page:

http://www.brothercake.com/

and

www.udm4.com

thanks alot again....

bradyj
04-21-2004, 11:45 PM
I don't need colors, that's not what I asked -- just give me some basic code that you have as a site idea, then I can do design work for that, and you can build the CSS off my design, like:


<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>.:: bobby's world ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<h1>Welcome to bobby's world!!</h1>
<h3>This site is best viewed in a modern browser</h3>

I'll do all the look design -- color, layout, images -- but you do all the code. I don't want to start with a design that would be too difficult to accomplish, and I don't know what to design for. Your personal webpage? Monkeys? Wal-Mart?

JAVAEOC
04-23-2004, 03:56 AM
Ok, if you could also design a banner that would be great, ok...(even though I was hoping for a NEW layout, a complete make over of my layout would be even better, THANKS ALOT [soo cool]) the layout is as follows:

Template Code:


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Your Title</title>
<link type="text/css" rel="stylesheet" id="CSS" href="JS-CSS/CSS.css" />
<script type="text/javascript" src="JS-CSS/JS.js"></script>
</head>
<body>
<div id="container">
<div id="top">
<form style="float:right; position: relative; top: .6em" method="get" action="http://www.google.com/search">
<div>
<input class="google" type="text" name="q" size="31" maxlength="255" />
<input class="google" type="submit" name="btng" value="google search" />
<input type="hidden" name="domains" value="your domain name" />
<input type="hidden" name="sitesearch" value="your domain name" checked="checked" />
</div>
</form>
Welcome to My site
</div>
<div id="leftnav">
<div id="navcontainer">
<ul>
<li id="li0" onmouseover="li0.stopFD()" onmouseout="li0.stopFU()"><a href="#"><img src="Graphics/right.gif" alt="=>" />Milk</a></li>
<li id="li1" onmouseover="li1.stopFD()" onmouseout="li1.stopFU()"><a href="#" id="li1"><img src="Graphics/right.gif" alt="=>" />Eggs</a></li>
<li id="li2" onmouseover="li2.stopFD()" onmouseout="li2.stopFU()"><a href="#" id="li2"><img src="Graphics/right.gif" alt="=>" />Cheese</a></li>
<li id="li3" onmouseover="li3.stopFD()" onmouseout="li3.stopFU()"><a href="#" id="li3"><img src="Graphics/right.gif" alt="=>" />Vegetables</a></li>
<li id="li4" onmouseover="li4.stopFD()" onmouseout="li4.stopFU()"><a href="#" id="li4"><img src="Graphics/right.gif" alt="=>" />Fruit</a></li>
</ul>
</div>
<hr style="margin: 1em 1em 1em 1em" />
<div id="Custom" onmouseover="Custom.stopFD()" onmouseout="Custom.stopFU()">
<fieldset>
<legend style="font-size: 15px; width: 2em">Customization:</legend>
<select id="CustomOpt">
<option id="V1" value="CSS">Default Duble Border</option>
<option id="V2" value="CSS0">Default No Duble Border</option>
<option id="V3" value="CSS1">Default No Menu Border</option>
<option id="V4" value="CSS2">ColorLess</option>
</select>
<div style="margin-top: .5em; border: 0px">
Text Size:
<input type="text" id="size" value="16" /> px
</div>
<div style="margin-top: .5em; border: 0px">
Text Style:
<select id="style">
<option value="Arial">Arial</option>
<option value="Times New Roman">Times New Roman</option>
</select>
</div>
<div id="button">
<button onclick="Default()">Default</button>&nbsp;&nbsp;&nbsp;<button onclick="Change()">Change</button>
</div>
</fieldset>
</div>
</div>
<div id="content">
<div id="contentSub" style="min-height: 23em">
</div>
</div>
<div id="footer">
<div id="adress">www.MyFirm.com</div><span id="time"></span>&nbsp;
</div>
</div>
</body>
</html>


Current CSS (which you will change... I think :D)


#container{
background-color: #ffeedd;
color: #333;
border: 1px solid #0000ff;
line-height: 130%;
font-family: Arial;
}


#top{
padding: .3em;
background-color: #ddddee;
border-bottom: 1px solid #0000ff;
font-size: 30px;
line-height: 100%;
}

#leftnav{
float: left;
width: 11em;
margin: 0em;
padding: .5em;
border: 0px;
}

#content{
margin-left: 12em;
border-left: 1px solid #0000ff;
padding: 1em;
background-color: #ffffff;
font-family: Arial;
font-size: 16px;
}

#footer{
margin: 0;
padding: .5em;
color: #333;
background-color: #ddf;
border-top: 1px solid #0000ff;
}

#time{
float: right;
}

#adress{
float: left;
}

#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li{
margin: 0em;
width: 11em;
position: relative;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
}

#navcontainer a{
display: block;
color: #333;
border: 0px;
margin: .2em;
padding: .2em .8em;
text-decoration: none;
background-color: #ffeedd;
}

#navcontainer a:hover{
background-color: #ddddee;
color: #333;
}

#navcontainer img{
margin-top: .3em;
border: 0px;
float: right;
}

.google{
background: #ddddee;
border: 1px solid #0000ff;
text-size: 13px;
}

.google:focus{
background: #ffffff;
}

.google:hover{
background: #ffffff;
}

#custom{
padding: .2em;
margin: .2em;
width: 10.2em;
border: 0px;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
}

#CustomOpt{
background-color: #ffeedd;
width: 100%;
}

#size{
display: inline;
width: 2.9em;
}

#style{
display: inline;
width: 4em;
height: 1.5em;
}

#button{
margin-top: .5em;
border: 0px;
text-align: center;
}

#button button{
background: #ffeedd;
border: 1px solid #ddccbb;
font-size: 15px;
width: 4em;
}


the js, for a few basic functions:


var SpeedUp=.1;
var SpeedDown=.01;
var Custom=new fade('Custom');
var li0=new fade('li0')
var li1=new fade('li1')
var li2=new fade('li2')
var li3=new fade('li3')
var li4=new fade('li4')
var IE = document.all?true:false;
var SRC="";
var STYLE="";
var SIZE="";

//////Time
function start(){
var date=new Date();
document.getElementById('time').innerHTML = date.toLocaleTimeString() + " " + date.toLocaleDateString();
setTimeout(start,1000)
}
//////EndTime

//////Cookies
function cookie(name,value)
{ this.name = name;
this.value = value;
this.attributes = new Array();
this.expiresIn = function (days)
{ expiration = new Date();
expiration.setTime(expiration.getTime() + (days*86400000));
this.attributes["expires"] = expiration.toGMTString();
};
this.set = function ()
{ var cookiestr = this.name + "=" + escape(this.value);
for(attr in this.attributes)
{ cookiestr += "; " + attr
if(this.attributes[attr].length > 0)
cookiestr += "=" + this.attributes[attr];
}
document.cookie=cookiestr;
};
this.erase = function()
{ this.expiresIn(-1);
this.set();
delete cookies[this.name];
};
}

function cookieContainer(){
this.add=function (name,value){ this[name]=new cookie(name,value);
};
this.get=function (name)
{ for(o in this)
if(o == name)
return this[o];
return null;
}
var cstr=document.cookie;
var spaces=/\s/gi;
cstr=cstr.replace(spaces,'');
while(cstr.length>0)


{ cequal=cstr.indexOf("=");
if(cequal==-1) cequal=cstr.length;
var name=cstr.substring(0,cequal);
cstr=cstr.substring(cequal+1,cstr.length);
cend=cstr.indexOf(";");
if(cend==-1) cend=cstr.length;
var value=unescape(cstr.substring(0,cend));
cstr=cstr.substring(cend+1,cstr.length);
this.add(name,value);
}
}

var cookies = new cookieContainer();

function AddMyCookie(AName, AValue){
cookies.add(AName, AValue);
cookies[AName].expiresIn(300000);
cookies[AName].set();
}
/////End cookies

//////Change Style
function Change(){
SRC=document.getElementById('CustomOpt').value
SIZE=document.getElementById('size').value
STYLE=document.getElementById('style').value
document.getElementById('CSS').href='JS-CSS/'+SRC+'.css';
document.getElementById('contentSub').style.fontFamily=STYLE;
document.getElementById('contentSub').style.fontSize=SIZE+"px";
Custom.stopFU();
save();
}

function change(){////onload change
document.getElementById('CSS').href='JS-CSS/'+SRC+'.css';
document.getElementById('contentSub').style.fontFamily=STYLE;
document.getElementById('contentSub').style.fontSize=SIZE+"px";
}

function save(){
AddMyCookie('SRC', SRC);
AddMyCookie('SIZE', SIZE);
AddMyCookie('STYLE', STYLE);
}
//////End Style

//////fader OOP
function fade(imgID){
var me=this;
this.i=.3
this.stopFU=function(){me.UD=0;me.fadeDown()}
this.stopFD=function(){me.UD=1;me.fadeUp()}
this.imgId=imgID;

this.fadeUp=function(){
if(me.i<=(.99-SpeedUp) && me.UD==1){
me.i+=SpeedUp
document.getElementById(me.imgId).style.MozOpacity=me.i;
document.getElementById(me.imgId).style.filter='alpha(opacity='+me.i*100+')';
setTimeout(me.fadeUp, 10)
}
else{me.stopFU}
}

this.fadeDown=function(){
if(me.i>=.3 && me.UD==0){
me.i-=SpeedDown;
document.getElementById(me.imgId).style.MozOpacity=me.i;
document.getElementById(me.imgId).style.filter='alpha(opacity='+me.i*100+')';
setTimeout(me.fadeDown, 10);
}
else{me.UD=1}
}
}
/////Stop Fader


/////Function for all onload statements
window.onload=function(){
start();
if(cookies.get('SRC')){SRC=cookies['SRC'].value}
if(cookies.get('SIZE')){SIZE=cookies['SIZE'].value}
if(cookies.get('STYLE')){STYLE=cookies['STYLE'].value}
if(cookies.get('SRC')){change()}
Custom.stopFU();
}


A few things about the layout, IT works best in Mozilla, works fine in IE only that the min hight doesnt work so it looks bad if you have little content, it almost works good in NS, only that the <hr> tag is messed up and the hover menu behaves weird....

A few more things about the target audience, This webpage should be my future WebSite, this site should look profesional, It should be something where I might be able to sell webpages from (I'am trying to start a tiny buisiness like that, but it probalby will only start in two or three years :D)

Thank you alot....

I was hoping for a basic desing, but what you are offering is much more, and I greatly apreciate that. I do not have a Company Name (Cause i am not creative enought to come up with one other then "MyCompany" :D, and I do not have a logo and or optional banner.... If you could come up with a color scheme, logo, and company name, It would be very very nice, and much much more then i expected from this thread....

Thanks again.....

The zip file contains my whole project, included is a folder called experiments, you can look into it but all there is in it are incomplete JavaScript's...

Thanks alot :D

bradyj
04-23-2004, 04:33 AM
You got it, should be a fun little project -- it'd be nice to get back to just straight designing -- I'll fuss around with it this weekend when I have time, but I can't garauntee I'll be done by this weekend -- probably a week from today will give me enough time. Just a cushion, i've got work as well :thumbsup:

JAVAEOC
04-23-2004, 06:32 PM
Thanks alotbutThanks alot, but you really dont have to worry, about getting it finished, cause idont mind if you have it done in a month, I am just glad that you actally will doit, thanks alot :D

Graft-Creative
08-19-2004, 11:08 PM
Drawing in Notepad? Now that's going to require some serious skills! :D


Tsk! Has everyone forgotten the once noble craft of ASCII Art. Or is it just me, getting on a bit in years?
:D

JAVAEOC
04-07-2005, 12:16 AM
** ** ** ** ** ******** ******* ******
/** **** /** /** **** /**///// **/////** **////**
/** **//** /** /** **//** /** ** //** ** //
/** ** //** //** ** ** //** /******* /** /**/**
/** ********** //** ** **********/**//// /** /**/**
** /**/**//////** //**** /**//////**/** //** ** //** **
//***** /** /** //** /** /**/******** //******* //******
///// // // // // // //////// /////// //////



is that good to start :P

mckenzie
04-07-2005, 06:28 AM
I emailed you a few examples that I can throw togather for you...

I want everyone to know about this site. It has to be the greatest help in the world. Im not sure what Language its in - but you dont need to know it to use the site.
http://madcorp.biz/colormapper/

All you do is pick your base color - enter the HEX code the hit the button beside it. It matches all the colors for you :thumbsup:

To get the HEX for a color you want to use just mouse over it. and it shows in the lower left corner of your screen - also shows the RGB....

Anyway just thought I would share the site with everone..... Have Fun :D

Heath Mckenzie



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum