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> <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>
</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