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>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<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>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<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; }
*/
No comments:
Post a Comment