August 22, 201313 yr Hi , i am completely new to web design (I started a few days ago) and i was wondering if anybody could throw me a bone and help me with a problem,I've been using jquery, css and html and really just trying to get my teeth into my first webdesign but ,in my latest attempt to include a jquery plugin for a touchscreen gallery,The gallery is fixed at the top and has pushed the css menu to the bottom i attempted <div align="right"> to both html frameworks but it didn't do the trick , again i am completely greenhorn in this ,Any help would be really appreciated ,This is the html coding ; <html> <head> <meta charset="utf-8" /> <meta name="author" content=""> <meta name="description" content=""> <script>document.documentElement.className = 'js';</script> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5"> <!-- Force latest IE rendering engine & Chrome Frame --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Make IE recognise HTML5 elements for styling --> <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <link rel="icon" type="image/png" href="images/favicon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.min.css" /> <link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.theme.min.css" /> <link rel="stylesheet" type="text/css" href="http://stephband.github.com/css/site.layout.css" /> <link rel="stylesheet" type="text/css" href="http://stephband.github.com/css/docs.classes.css" /> <link rel="stylesheet" type="text/css" href="http://stephband.github.com/css/site.highlight.light.css" /> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="http://stephband.github.com/template/css/template.ie.css" /><![endif]--> <!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://stephband.github.com/template/css/template.ie8.css" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" type="text/css" href="http://stephband.github.com/template/css/template.ie7.css" /><![endif]--> <style> .site_wrap > .slides_wrap { margin-bottom: 1em; margin-left: -8px; margin-right: -8px; } .img_slides_wrap { width: 784px; border: 8px solid #333333; background-color: #444444; overflow: hidden; } .img_slide { padding: 0; } .js .img_slide { /* Overide template's height transitions. */ width: 100%; height: auto; } .slide_buttons_index { text-align: center; } .notransition, .notransition .slide { -webkit-transition-duration: 0 !important; -moz-transition-duration: 0 !important; -ms-transition-duration: 0 !important; transition-duration: 0 !important; -webkit-transition-delay: 0 !important; -moz-transition-delay: 0 !important; -ms-transition-delay: 0 !important; transition-delay: 0 !important; } @media screen and (max-width: 640px) { .img_slides_wrap { width: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } } </style> </head> <body> <div align="bottom"> <div class="img_slides_wrap slides_wrap wrap"> <img class="img_slide slide active" id="slide1" src="https://lh5.googleusercontent.com/-MShhyv4lWuM/T4Si18g0XsI/AAAAAAAAANU/Nnnxh68myRA/s768/Norway_201241.png" /><img class="img_slide slide" id="slide2" src="https://lh6.googleusercontent.com/-BED5h574s1Q/T4Sji7_hmOI/AAAAAAAAAO8/JMChDngsCDk/s768/Norway_201284.png" /><img class="img_slide slide" id="slide3" src="https://lh6.googleusercontent.com/-n31QkVB4M9c/T4SjckZM1TI/AAAAAAAAAOs/H26JyEo9970/s768/Norway_201276.png" /><img class="img_slide slide" id="slide4" src="https://lh6.googleusercontent.com/-jti_dD8mDiQ/T4ShY14T5HI/AAAAAAAAAKE/-jF6OT_zmb4/s768/Norway_2012102.png" /> </div> <ul class="horizontal slide_buttons_index buttons_index index"> <li><a class="slide_button button" href="#slide1">1</a></li> <li><a class="slide_button button" href="#slide2">2</a></li> <li><a class="slide_button button" href="#slide3">3</a></li> <li><a class="slide_button button" href="#slide4">4</a></li> </ul> </div> <//----!background html ----//> <body vlink="#808080" text="#C0C0C0" link="#FF0000" bgcolor="#000000" background="http://i1287.photobucket.com/albums/a633/ManchesterFightersAcademy/metal_zpsf4f06796.jpg" alink="#0000FF" data-twttr-rendered="true" bgproperties="FIXED"> <//--! Menu html and css--//> <div align="top"> <menu> <div id="cssmenu"> <ul> <li class="active"><a href="http://94.136.40.14/~mfatoday.co.uk/"><span>Home</span></a></li> <li class="has-sub"><a href="http://94.136.40.14/~mfatoday.co.uk/"><span>About us</span></a> <ul> <li class="has-sub"><a href="http://94.136.40.14/~mfatoday.co.uk/muaythai.htm"><span>Muay Thai</span></a> <ul> <li><a href="http://94.136.40.14/~mfatoday.co.uk/fighters.htm"><span>Fighters</span></a></li> <li class="last"><a href="http://94.136.40.14/~mfatoday.co.uk/instructors.htm"><span>Instructors</span></a></li> </ul> </li> <li class="has-sub"><a href="http://94.136.40.14/~mfatoday.co.uk/2tone.htm"><span>2Tone</span></a> <ul> <li><a href="http://94.136.40.14/~mfatoday.co.uk/ethos.htm"><span>Ethos</span></a></li> <li class="last"><a href="http://94.136.40.14/~mfatoday.co.uk/2toneinstructors.htm"><span>Instructors</span></a></li> </ul> </li> </ul> </li> <li><a href="http://94.136.40.14/~mfatoday.co.uk/prices.htm"><span>Prices</span></a></li> <li><a href="http://94.136.40.14/~mfatoday.co.uk/contacts.htm"><span>Contact</span></a></li> <li><a href="http://94.136.40.14/~mfatoday.co.uk/events.htm"><span>Events</span></a></li> <li class="last"><a href="http://94.136.40.14/~mfatoday.co.uk/friends.htm"><span>Friends of MFA</span></a></li> </ul> </div> <style media="screen" type="text/css"> #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; position: relative; } #cssmenu { height: 49px; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0)); background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: linear-gradient(top, #fefefe 0%, #eee9f0 100%); border-bottom: 2px solid #db000b; width: auto; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu a { background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec)); background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%); background: linear-gradient(top, #fefefe 0%, #ececec 100%); color: #000; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; } #cssmenu ul { list-style: none; } #cssmenu > ul { float: left; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li > a { color: #000; font-size: 12px; } #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #db000b; margin-left: -10px; } #cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #cssmenu > ul > li.active:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #db000b; margin-left: -10px; } #cssmenu > ul > li.active > a { -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); background: #ececec; background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); } #cssmenu > ul > li:hover > a { background: #ececec; background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); } #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover > ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li a { background: #db000b; border-bottom: 1px dotted #ff0f1b; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #cssmenu .has-sub ul li:hover a { background: #a80008; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li a { background: #a80008; border-bottom: 1px dotted #ff0f1b; } #cssmenu .has-sub .has-sub ul li a:hover { background: #8f0007; } </style> </div> <//!---gallery rules and options---//> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script> <script src="js/jquery.event.swipe.js"></script> <script> (function(jQuery, undefined) { jQuery(document).ready(function() { var wrap = jQuery('.slides_wrap'), slides = wrap.find('.img_slide'), active = slides.filter('.active'), i = slides.index(active), width = wrap.width(); // Listen for swipe events on slides, and use a custom 'activate' // event to add and remove the class 'active' to the previous // or next slide, and to keep the index up-to-date. The class // 'active' uses CSS transitions to make the slide move. slides .on('swipeleft', function(e) { if (i === slides.length - 1) { return; } slides.eq(i + 1).trigger('activate'); }) .on('swiperight', function(e) { if (i === 0) { return; } slides.eq(i - 1).trigger('activate'); }) .on('activate', function(e) { slides.eq(i).removeClass('active'); jQuery(e.target).addClass('active'); // Update the active slide index i = slides.index(e.target); }) // The code below handles what happens before any swipe event is triggered. // It makes the slides demo on this page work nicely, but really doesn't // have much to do with demonstrating the swipe events themselves. For more // on move events see: // // http://stephband.info/jquery.event.move .on('movestart', function(e) { // If the movestart heads off in a upwards or downwards // direction, prevent it so that the browser scrolls normally. if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) { e.preventDefault(); return; } // To allow the slide to keep step with the finger, // temporarily disable transitions. wrap.addClass('notransition'); }) .on('move', function(e) { var left = 100 * e.distX / width; // Move slides with the finger if (e.distX < 0) { if (slides[i+1]) { slides[i].style.left = left + '%'; slides[i+1].style.left = (left+100)+'%'; } else { slides[i].style.left = left/4 + '%'; } } if (e.distX > 0) { if (slides[i-1]) { slides[i].style.left = left + '%'; slides[i-1].style.left = (left-100)+'%'; } else { slides[i].style.left = left/5 + '%'; } } }) .on('moveend', function(e) { wrap.removeClass('notransition'); slides[i].style.left = ''; if (slides[i+1]) { slides[i+1].style.left = ''; } if (slides[i-1]) { slides[i-1].style.left = ''; } }); // Make the buttons work, too. Hijack the id stored in the href and use // it to activate the slide. jQuery(document) .on('click', '.slide_button', function(e) { var href = e.currentTarget.hash; jQuery(href).trigger('activate'); e.preventDefault(); }); }); })(jQuery); </script> </body> </html> Edited August 22, 201313 yr by teodora wrapped code
August 22, 201313 yr Author Not to sound ignorant, just my first attempt at anything like this,Any help appreciated , thanks guys
August 22, 201313 yr Hi, welcome to the forum Not sure what you need to achieve here, do you need the menu on top? If so, just move the html for the menu before he html for the gallery (hope that makes sense). Like: menu first code.... gallery second code... <menu> is not a valid tag, it would be <nav> <div align="top"> is not correct, too, you better use CSS for positioning, margins and paddings. Hope that helps a bit
August 24, 201313 yr Author thankyou very much, that really helped,Not to be rude but if i can pick your brain alittle more i'm reading about wrapping the menu with css to have it right at the top again (it is now like half an inch from the topis there an example code you can give me?This is just a one time thing for me and i'm trying to make it as presentable as possible, it is quite abit of fun though (I must admit harder and more laborious that i though)Thanks again
August 24, 201313 yr Author Also if anyone can help my jquery plugin is supposed to be touch screen and it all seems to be working fine accept ,When you touch it in an ipad ect it does move , but swiping doesn't take it to the next picture in the gallery ,www.mfatoday.co.uk ,This is just the starting page, any help would be really appreciated ,I am a profesional fighter and gym owner so this is mostly greek to me lol
August 24, 201313 yr You need to remove the body top padding. You have top padding in both http://stephband.info/css/docs.classes.css and http://stephband.info/css/site.layout.css body { padding-top: 7.1429em; } and body { /* Top padding makes room for the header bar */ padding-top: 120px; /* Set as position parent */ position: relative; color: #444444; } Just remove padding-top:120px; and padding-top:7.1429em; Then your menu goes right to the top. If you need a bit of space, you can add top margin to your div #cssmenu #cssmenu{ margin-top:20px; /*Replace the number to suit*/ }
August 24, 201313 yr Author thankyou very much I really appreciate the help addicted ,I shall continue this confusing journey lol
Create an account or sign in to comment