..Kyles Design..: March 2014

UPDATE!
I have changed the background and also alot of fonts. The layout is how i want it now and I have a problem getting the slideshow to work. Need to align title and search bar and add login/shop/phone.

Some HTML:
<!DOCTYPE html>



 <html class="no-js"> 
    <head>

        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>

        

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/skeleton.css">
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/layout.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>


    <link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>


    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />

    <img id="mybg" src="img/newback2.png" />

    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }

    #container{
        margin-top:0px;
        margin-left: 100px;
    }
    .menu{
        list-style: none;

    }
    .menu li{
        display:block;
        height:50px;
        width:230px;
        float:left; padding-right: 1px; position: relative;

            background: rbackground: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
    background:-webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr'#f6f6f6', GradientType=0);

    line-height: 50px;
    text-align: center;
    border-right:1px solid #000;
    font-family: 'francois One', sans-serif;

    }

    </style>
<A HREF="#top">Top</A>

    <style type="text/css">


    p.pos_fixedd{
    position:fixed;
    top:200px;
    right:200px;
}

@font-face {

    font-family: "Champagne & Limousines";
    src: url(Champagne & Limousines ) format("truetype");
}
p.customfont {
    font-family: "Champagne & Limousines", Verdana, Tahoma;
}
</style>
<form>
<font size="20" color="white">
<div id="mainContent">
<p class="pos_fixedd">
<div class="container">

<img id="newlogoo"src = "img/newlogo.png" >

</div>
</div>
</div>
<br>
</form>
</p>
</font>

<form>
    <div id="mainContent">

    <p class="pos_fixed"> <input placeholder="Search here.." type="text">

    <br>
    </div>

    </form>
    </p>

    <center>

<ul id="menuu">
<li>

        <div id="menspage">

        <a herf="index.html">     Home    |</a>

        </div>
    </li>
    <li>

        <a href="menspage.html">Men's   |</a>



    </li>
    <li><a href="ladiespage.html">Ladies    |</a>


    </li>
    <li><a href="jewelpage.html">Jewelry & Accessories         |</a>


    </li>
    <li><a href="kids.html">Kids Section      |</a>


    <li>
        <a href="Designerpage.html">Designers</a>

    </li>


</ul>
</center>

<style>

.searchbar{
    width:200px;
    height:50px;
    padding-right:100px;
    padding-left:200px;
    float:left;
}

.containter{
    width: 1000px;
    height: 50px;
}
.containter div{
    width: 150px;
    height: 50px;
    float: left;

}

.curve{
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}
.curve1{
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.menu li:hover{
    background:background: #ffffff;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-radial(radial,center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%, #e5e5e5));
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
    background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
    background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
    background: radial-gradient(ellipse at center, #ffffff 0%, #e5e5e5 100%);
    filter: progid:DXImageTransform,Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=1);
    color:rgba(15,16,47,1);

}

.sub{
    visibility:hidden;

}

.menu li:hover .sub{
    visibility:visible;
}

.sub li{
    border-top:10px soild rgba(0,0,0,1);
    -moz-transition:all .ls ease 0s;
    -ms-transition:all .ls ease 0s;
    -o-transition:all .ls ease 0s;
    -webkit-transition:all .ls ease 0s;
    transition:all .ls ease 0s;

}

.fold{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

.sub li:hover{
        background:background: #f7fbfc;
    background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 0%,#d9edf2 40%, #add9e4 100%);
    background: -webkit-radial(radial,center center, 0px, center center, 100%, color-stop(40%,#d9edf2), color-stop(100%, #add9e4));
    background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%);
    background: -o-radial-gradient(center, ellipse cover, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%);
    background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%);
    background: radial-gradient(ellipse at center, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%);
    filter: progid:DXImageTransform,Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#add9e4', GradientType=1);
    width:250px;
}

p.pos_fixed{
    position:fixed;
    top:100px;
    right:150px;
}

</style>

<style>
p.ex1 {margin-bottom:2cm}

img.ex2
{
position:relative;
bottom:-100px;
width:100%;
}

</style>

    <script language="JavaScript1.1">

var slideimages=new Array()

function slideshowimages()
{
    for (i=0;i<slideshowimages.arguments.length;i++)
    {
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
}

function gotoshow()
{
    if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
    else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}

</script>

</head>

<body>

<div class="container">
<div class="nineteen columns">

<a href="javascript:gotoshow()"><img id="myslide" src="img/slide1.jpg" name="slide" border=0 ></a>

<script>

slideshowimages ("img/slide1.jpg","img/slide2.jpg","img/slide3.jpg","img/slide4.jpg","img/slide5.jpg", "img/slide6.jpg", "img/slide7.jpg")

var slideshowspeed=5000
var whichimage=0

function slideit()
{
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

</script>

<div class="container2">
<div class="fifthteen columns">


    <div class="six columns">
    <a href="img/t-shirts.png" class="highlightit" >
    <img id="myimg" src = "img/smallerbox2.jpg" >

    </a>
    </div>
<div class="six columns">
    <a href="img/sale.png" class="highlightit" >
    <img id="myimg" src = "img/smallerbox3.jpg" >

    </a>
    </div>
<div class="six columns">
    <a href="img/denim.png" class="highlightit" >
    <img id="myimg2" src = "img/smallerbox.jpg" >

    </a>
     </div>
     </div>

         <div class="container2">
         <div class="fifthteen columns">
         <div class="fifthteen columns">

    <a href="img/newclothes.png" class="highlightit" >
    <img id ="whatnew" src = "img/whatsnew.jpg" >

    </a>



     </div>
     </div>
     </div>



<div class = "container2">
    <div class="sixteen columns">

    <font size="5" color="white">
    <img id ="dedicatedsmall"src="img/dedicated.png">
    <div class="three columns">
    <p> </p>
    </font>
    </div>
    <font size="4" color="white">
    <div class="sixteen columns">
    <h6 >
    <font size="4" color="white">
    <center>
    Customer Service - 1.877.551.7257 - Email - Live Chat - Personal Stylist

    </center>
      </font>
      </h6>
      <div class="four columns">
    <p> </p>

     </font>

    </div>


<div class="sixteen columns">
<div class="six columns">
<p class="ex1"><center>    </center></p>

</div>
</div>

<div class = "container2">
<div class="fifthteen column">

<div class="four columns">
<font size="5" color="white">
Shipping & Returns</h4>
</font>
<font size="3" color="white">
        <p> -Domestic </p>
        <p> -International </p>
        <p> -Order status & Tracking </p>
        </font>
</div>

<div class="four columns">
<font size="5" color="white">
SaksFirst Card</h4>
</font>
<font size="3" color="white">
        <p> -SaksFirst </p>
        <p> -Pay Bills & Manage </p>
        <p> -Apply </p>
        <p> -Upgrade to Saks MasterCard </p>
        </font>
        </div>
</div>

<div class="four columns">
<font size="5" color="white"
>Shop Saks</h4>
</font>
<font size="3" color="white">
<p>
    <p> -Edition</p>
    <p> -The Trendcaster</p>
    <p> -Spring Fashion: A Designer Series</p>
    <p> -Catalogs</p>
    <p> -Gift Cards</p>
    </p>
    </font>

    </div>
    </div>

<div class="three columns">

<font size="5" color="white" word-spacing:100px;>

    Stores & Corporate</h4>
    </font>
    <font size="3" color="white">
        <p> -Store locations & Events</p>
        <p> -Bridal Trunk Shows</p>
        <p> -About us</p>
        <p> -Careers </p>
        <p> -Policies </p>
        </font>

        </div>
        </div>
        </font>
        </font>
        </div>
        </div>
        </div>



<div class="container4">
<div class="fourteen columns">
<center>
<img class="ex2" id= "trythis"src="img/line.png" width:100%>
<a href="https://www.facebook.com/" target="_blank" class="highlightit">
    <img id="mylogo"src="img/facebook.png">
    </a>
    <a href="https://www.google.co.nz/#q=pov" target="_blank" class="highlightit">
    <img id="mylogo" src="img/pov.png">
    </a>
    <a href="http://www.pinterest.com/" target="_blank" class="highlightit">
    <img id="mylogo" src="img/pinterest.png">
    </a>
    <a href="https://www.tumblr.com/" target="_blank" class="highlightit">
    <img id="mylogo" src="img/tumblr.png">
    </a>
    <a href="https://twitter.com/" target="_blank" class="highlightit">
    <img id="mylogo" src="img/twitter.png">
    </a>
    <a href="http://instagram.com/#" target="_blank" class="highlightit">
    <img id="mylogo" src="img/instagram.png">
    </a>
    </center>

</div>



</body>

</html>

Some CSS for the website:

/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
    #Site Styles
    #Page Styles
    #Media Queries
    #Font-Face */

/* #Site Styles
================================================== */
input[type=text]{
    width:295px;
    padding:5px;
    outline:none;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: #FBFBFB;
    box-shadow: 0px 0px 25px -2px #333;

}

        <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>

/*Initialize*/
ul#menuu, ul#menuu ul.sub-menu {
    padding:0;
    margin: 0;
    width:100%;

}
ul#menuu li, ul#menuu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;

}
/*Link Appearance*/
ul#menuu li a, ul#menuu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;

    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menuu li {
    position: relative;
    font-size: 25px;
}
/*sub menu*/
ul#menuu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;

}

ul#menuu li:hover ul.sub-menu {
    display:block;
}

img{
    max-width:100%;
}

#mylogo{

    padding-right: 50px;

}

body { font-family: "new century schoolbook"; }

.tabs a{
cursor: pointer;
padding: 5px;
background: #fff;
color: #000;
border: 1px solid #666;
border-bottom: 0;
overflow:hidden;

}
.tabs a:hover, .tabs a.active{
background: #666;
color: #fff;
overflow:hidden;
}

.tabContent{
border: 1px solid #aaa;
margin: 4px 0;
padding: 5px;
float:left;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-attachment: scroll | fixed
}

html{


}

.container5{
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 150px;

}
.container {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 150px;
}
.container2 {
    margin-top: 50px;
    width:100%;
    margin:0;
    padding-left:0px;

}

.container3 {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 10px;
}

.container4 {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 200px;
}

#nav {
    margin: 13px 0 0 0;
    overflow:hidden;
}

#nav ul li {
    display: inline;
    margin: 0 20px 0 0;
    margin-bottom: 130px;
    float:left;
}

#nav a {
    text-decoration: none;
    float:left;

}

#nav a:hover {

    text-decoration: underline;
}

/* #Page Styles
================================================== */

.highlightit img{

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.highlightit:hover img{
    border:1px solid #FFFFFF;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;

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

}
#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; padding: .2em 1em;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

img#newlogoo2{
margin-top: 10px;
    width:30%;
    margin:0;
    padding-left:500px;
}

img#mybg {

    position: fixed; //image will always be top: 0 left: 0 by default.
    display: block; //make it a block for width to work.
    width: 100%; //set default width
    height: 100%; //set default height
    z-index: -999999; //set z-index so it won't overlap any other element.

    margin: 0px;
    background-attachment: scroll | fixed
    position:relative;
    background: url(img/newback2.png) no-repeat center scroll;
}

body{

    width: 100%;
    display: table;
     background:url(img/newback2.png) repeat-x 0 0px;
    margin:0px auto;
    background-attachment: scroll | fixed
}

/* #Media Queries
================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {

img#mybg{
   width: 100%;
   height: 100%;
   background-repeat: repeat-y;
   background-repeat: repeat-x;

       display: table;
     background:url(img/newback2.png) repeat-x 0 0px;
    margin:0px auto;
    background-attachment: scroll | fixed

}

img#myslide{

     width: 80%;
   height: auto;
   padding-left: 250px;

}

img#myimg{

   width: 70%;
   height: auto;
   padding-left: 0px;

}

img#myimg2{

   width: 70%;
   height: auto;
   padding-left: 0px;

}

img#dedicatedsmall{
width: 60%;
   height: auto;
   padding-left: 10px;
}

img#whatnew{
width:91%;
   height: auto;
padding-left: 0px;
}

.container {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 220px;
}

img#mybg{
   width: 100%;
   height: 100%;

}

img#newlogoo{
margin-top: 10px;
    width:20%;
    margin:0;
    padding-left:50px;
    }

}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
img#mybg{
   width: 100%;
   height: 100%;
   background-repeat: repeat-y;
    background-repeat: repeat-x;
   background-attachment: scroll | fixed

}

.container {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 0px;
}

img#myslide{

     width: 100%;
   height: auto;
   padding-left: 70px;

}

img#myimg{

   width: 100%;
   height: auto;
   padding-left: 30%


}

img#myimg2{

   width: 0%;
   height: auto;
   padding-right: 0%


}

img#dedicatedsmall{
width: 100%;
   height: auto;
   padding-left: 40px;
}

img#whatnew{
width:100%;
   height: auto;
padding-left: 80px;
}

.container {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 80px;
}

img#mybg{
   width: 100%;
   height: 100%;

}

img#newlogoo{
margin-top: 10px;
    width:10%;
    margin:0;
    padding:0px;

}
.container4{
    padding-left: 250px;
    width:100%;

}
img#mylogo{
padding-left: 10px;
width:5%;

}

img#trythis{
    width:0%;
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

img#mybg{
   width: 100%;
   height: 100%;
   background-repeat: repeat-y;
    background-repeat: repeat-x;
   background-attachment: scroll | fixed

}

img#myslide{

   width: 70%;
   height: auto;
   padding-left: 70px;

}

img#myimg{

   width: 100%;
   height: auto;
   padding-left: 50px;


}

img#myimg2{

   width: 0%;
   height: auto;
   padding-left: 0px;


}

img#dedicatedsmall{
width: 50%;
   height: auto;
   padding-left: 40px;
}

img#whatnew{
width:70%;
   height: auto;
padding-left: 50px;
}

.container {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 0px;
}

img#mybg{
   width: 100%;
   height: 100%;

}

img#newlogoo{
margin-top: 10px;
    width:30%;
    margin:0;
    padding:0px;

}
.container4{
padding-left: 20px;
width:100%;

}
img#mylogo{
padding-left: 10px;
width:5%;

}

img#trythis{
width:0%;
}
.pos_fixed{
width:0%;
height:0%;
padding:5000px;
}

}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {

img#mybg{
   width: 100%;
   height: 100%;
     background-repeat: repeat-y;
    background-repeat: repeat-x;
   background-attachment: scroll | fixed

}

img#myslide{

     width: 100%;
   height: auto;
   padding-left: 70px;

}

img#myimg{

   width: 100%;
   height: auto;
   padding-left: 30%


}

img#myimg2{

   width: 0%;
   height: auto;
   padding-right: 0%


}

img#dedicatedsmall{
width: 100%;
   height: auto;
   padding-left: 40px;
}

img#whatnew{
width:100%;
   height: auto;
padding-left: 80px;
}

.container {
    margin-top: 10px;
    width:100%;
    margin:0;
    padding:25px;
    padding-left: 80px;
}

img#mybg{
   width: 100%;
   height: 100%;

}

img#newlogoo{
margin-top: 10px;
    width:10%;
    margin:0;
    padding:0px;

}
.container4{
    padding-left: 250px;
    width:100%;

}
img#mylogo{
padding-left: 10px;
width:5%;

}

img#trythis{
    width:0%;

}
}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
        img#mybg{

   width: 100%;
   height: 100%;
      background-repeat: repeat-y;
    background-repeat: repeat-x;
   background-attachment: scroll | fixed

}

.menuu{
max-width: 20px;
}

img#dedicatedsmall{
width: 60%;
   height: auto;
   padding-left: 20px;
}

img#newlogoo{
margin-top: 10px;
    width:40%;
    margin:0;
    padding:0px;

}
h6{
width: 70%;
}

img#myslide{

     max-width: 0%;
   height: auto;

}

img#whatnew{
width: 40%;
   height: auto;
   padding-right: 20px;

}

input[type=text]{
        width:0px;
        height: 0px;
    padding:0px;
    outline:none;
    border: 0px solid #000;
    border-radius: 0px;
    background-color: #FBFBFB;

}

ul#menuu, ul#menuu ul.sub-menu {
    padding:0;
    margin: 0;
    width:50%;
    padding-right: 400px;

}
ul#menuu li, ul#menuu ul.sub-menu li {
    list-style-type: none;
    display: inline;

}
/*Link Appearance*/
ul#menuu li a, ul#menuu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;

    padding: 5px;
    display:inline;
}
/*Make the parent of sub-menu relative*/
ul#menuu li {
    position: relative;
    font-size: 12px;
}
/*sub menu*/
ul#menuu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;

}

ul#menuu li:hover ul.sub-menu {
    display:block;
}

.container {
    margin-top: 10px;
    width:70%;
    margin:0;
    padding:0px;
    padding-left: 30px;
}

img#mybg{
   width: 100%;
   height: 100%;

}


    }

body{

    width: 100%;
    display: table;
     background:url(img/newback2.png) repeat-x 0 0px;
    margin:0px auto;
}

/* #Font-Face
================================================== */
/*     This is the proper syntax for an @font-face file
        Just create a "fonts" folder at the root,
        copy your FontName into code below and remove
        comment brackets */

/*    @font-face {
        font-family: 'FontName';
        src: url('../fonts/FontName.eot');
        src: url('../fonts/FontName.eot?iefix') format('eot'),
             url('../fonts/FontName.woff') format('woff'),
             url('../fonts/FontName.ttf') format('truetype'),
             url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
        font-weight: normal;
        font-style: normal; }
*/