I am converting an HTML & CSS with bits of JS into a WordPress theme. Just a newbie with this practice. I watched and read tutorials. I followed their way. But in this code, the CSS of the WordPress theme doesn't function. I don't know the problem. I used 'inspect element' to see the problem. But it doesn't read the CSS file so that's the problem. But I already included the style.css in the header. What seems to be the problem here?
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php bloginfo('title'); ?></title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
<link rel="icon" href="images/favicon.ico" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/grid.css">-->
<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/style.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/owl.carousel.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/wow/wow.js"></script>
<script>
$(document).ready(function () {
if ($('html').hasClass('desktop')) {
new WOW().init();
}
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
<script>
$(document).ready(function () {
$("#owl").owlCarousel({
items : 1, //10 items above 1000px browser width
itemsDesktop : [995,1], //5 items between 1000px and 901px
itemsDesktopSmall : [767, 1], // betweem 900px and 601px
itemsTablet: [700, 1], //2 items between 600 and 0
itemsMobile : [479, 1], // itemsMobile disabled - inherit from itemsTablet option
navigation : true,
pagination : false
});
});
</script>
<?php wp_head(); ?>
</head>
<body class="page1" id="top">
<div class="main">
<!--==============================
header
=================================-->
<header class="">
<!--==============================
Stuck menu
=================================-->
<section id="stuck_container">
<div class="container">
<div class="row">
<div class="grid_10">
<h1>
<img src="images/logo.png" alt="Logo alt">
</h1>
<div class="navigation">
<nav>
<ul class="sf-menu">
<li class="current">Home</li>
<li>About
<ul>
<li>About</li>
<li>Services</li>
<li>Projects
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
</ul>
</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</li>
<li>Services</li>
<li>Projects</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</section>
</header>
Styles should be enqueued in the functions.php file.
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
Like JeremyE said, the "WordPress-way" to include JavaScript and CSS assets in a theme is using the wp_enqueue_style and wp_enqueue_script functions. WPBeginner has a great tutorial on how to do it.
But, the issue with your code is this line:
<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/style.css" />
get_template_directory_uri returns the template URL, but does not echo it. Update the line to this to make it work:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />
Related
I'm having a lot of trouble stopping my header from going transparent whilst scrolling down the page. I'm not sure what is causing it (I used a template), but you can view the code here:
https://github.com/IF-Apps/IF-Charts
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IF-Charts - Charts and Plates for Flight Simulation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" href="css/etline-font.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">
<div class="header-nav">
<nav>
<ul class="primary-nav">
<li>Home</li>
<li>IF-Charts</li>
<li>Learn More</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<h1>IF-Charts</h1>
<p class="intro">Plan your flight with plates.</p>
</div>
</div>
</div>
</div>
</section>
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>Plan your flight</h3>
<p>Select the airport you would like charts for. Want to learn how to use charts? Check out the tutorial. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p>
<br>
<div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br>
<br>
<div align="center">
<h2>Please choose:</h2>
<br />
<span>
<img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;">
<img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;">
</span>
<p>View all charts here.
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
Licence | <p><p>By Giacomo Lawrance.</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
I think it has to do with the CSS, but I am not sure.
The problem is that when at the top, the menu items cannot be seen. I just want the header to stay black. You can see the problem here:
https://if-charts.000webhostapp.com/
In your scripts.js file there is a function that adds or removes several things on scroll.
/***************** Header BG Scroll ******************/
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$('section.navigation').addClass('fixed');
$('header').css({
"border-bottom": "none",
"padding": "35px 0"
});
$('header .member-actions').css({
"top": "26px",
});
$('header .navicon').css({
"top": "34px",
});
} else {
$('section.navigation').removeClass('fixed');
$('header').css({
"border-bottom": "solid 1px rgba(255, 255, 255, 0.2)",
"padding": "50px 0"
});
$('header .member-actions').css({
"top": "41px",
});
$('header .navicon').css({
"top": "48px",
});
}
});
});
Remove this function entirely.
Change
<section class="navigation">
To
<section class="navigation fixed">
If you want to use the other properties as well add them to the following classes in the CSS file.
header {
border-bottom: none;
padding: 35px 0;
}
header .member-actions {
top: 26px;
}
header .navicon {
top: 34px;
}
You need to add a background color to the navigation.
.navigation {
background: #232731;
}
So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>
In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)
i am trying to make a slidehsow using HTML+ CSS
but when using chrome or mozzila sometimes when refreshing the page all the images get stacked
works fine on IE.
enter code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.R.Grada</title>
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/inscricaos.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_page.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/inscricaos.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/slideShow.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="b/G7IFct+anugyX+DeDZhI5xYSzmREjC2Y2uPXx7HHA=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
Associação Recreativa de Grada
<nav>
<ul class="nav navbar-nav pull-right">
<li>Pagina inicial</li>
<li>Mapa</li>
<li>xxx</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="center jumbotron">
<div id="slideShowImages" class="slideshow">
<img alt="1" src="/assets/1.jpg" />
<img alt="2" src="/assets/2.jpg" />
<img alt="3" src="/assets/3.jpg" />
<img alt="4" src="/assets/4.jpg" />
<img alt="5" src="/assets/5.jpg" />
<img alt="6" src="/assets/6.jpg" />
</div>
<script src="slideShow.js"></script>
</h2>
|Inscrição |
| Lista incritos|
</div>
<div class="logo">
</h1>
<img alt="xxx_logo" src="/assets/logo.png" />
</div>
<footer class="footer">
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
CSS code:
.slideshow
{
background-colour:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box- shadow:0 0 22px #111;
}
The images become stacked on above anothe. to resolve the issue i must press CTRL F5.
i can not upload a imge so i try to explain with this:
it look like that:
image1
image2
image3
image4
it should look like that
image1
wait 1 sec
image2
...
Try to hide the images using CSS first. The page must not have been loaded fully for the script to run.
UPDATE: By locally when I preview my work in the browser. My files are stored in the same folder structure on one of our severs.
UPDATE: Which jpeg reference do you mean? Is this before I try your way of doing it?
UPDATE: this page doesn't load comments or answers so I'll be posting my answers here.
UPDATE: the console does say that the files are missing, but they're not. The site files in their entirety have been uploaded several times. I can provide a screenshot of the folder within the sever if need be.
I have a background video inserted into my index page but it doesn't play once the site is live. I believe it uses the image fallback. It works fine locally but having problems with absolute urls. I downloaded this from github and the update for this problem is below but the package I downloaded was a newer version anyways. Test link is below the github link.
https://github.com/VodkaBears/Vide/archive/0.1.1.zip#
http://bit.ly/1xLpFiu
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Pragma" content="no_cache" />
<title>M&T Printing Group</title>
<link rel=”author” href=”https://plus.google.com/+MTPrintingGroupKitchener“/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/font.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/default.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/component.css" />
<script src="QuotesRotator/js/modernizr.custom.js" type="text/javascript"></script>
<!-- github.com/scottjehl/Respond - for IE 8, 7.... -->
<script src="Respond-master/dest/respond.min.js" type="text/javascript"></script>
<!--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".subnav").prev().mouseover(function(){
var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
$(this).next().css({'position':'relative','bottom':sub_menu_shift});
});
});
</script>-->
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="Vide-0.1.2/examples/video/videoMain">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>window.jQuery || document.write('<script src="Vide-0.1.2/libs/jquery/jquery-1.11.1.min.js"><\/script>')</script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>
// $(document).ready(function () {
// $(document.body).vide("Vide-0.1.2/examples/video/videoMain"); // Non declarative initialization
//
// var instance = $(document.body).data("vide"); // Get instance
// var video = instance.getVideoObject(); // Get video object
// instance.destroy(); // Destroy instance
// });
</script>
<div id="indexBG">
<div id="colour-bar-black"></div> <!-- colour-bar-black -->
<div id="nav-wrap">
<ul>
<li id="link-one" class="orange">
<span>Printing</span>
<div class="subnav" id="subnav">
<ul>
<li>Digital Printing</li>
<li>Offset Printing</li>
<li>Business Cards & Stationery</li>
<li>Manuals, Reports & Catalogues</li>
<li>Bindery Services</li>
<li>Canada Post</li>
<li>Graphic Design & Typesetting</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="red"><span class="doubleLine">Promotional Products</span>
<div class="subnav">
<ul>
<li>Awards & Mounting</li>
<li>Binders</li>
<li>Clothing & Apparel</li>
<li>Bags</li>
<li>Drinkware</li>
<li>Lanyards</li>
<li>Magnets</li>
<li>Pens & Writing Instruments</li>
<li>Presentation Folders</li>
<li>USB Flash Drives</li>
<li>Umbrellas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="pink"><span class="doubleLine">Banners & Signage</span>
<div class="subnav">
<ul>
<li>Drafting & CAD services</li>
<li>Coroplast & FoamCore</li>
<li>Retractable Banners</li>
<li>Posters & Banners</li>
<li>Wraps & PVC</li>
<li>Displays & Canvas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="purple"><span>POOL</span></li>
<li class="blue"><span>Volumes</span></li>
<li class="green"><span>Contact</span>
<div class="subnav">
<ul>
<li>Locations</li>
<li>Media</li>
<li>Digital Link</li>
<li>FTP site</li>
<li>Client Login</li>
<li>Estimate Request</li>
<li>Submit A File</li>
<li>Recognition</li>
<li>Graphics Factory</li>
<li>Careers</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="yellow-facebook"><span></span></li>
</ul>
</div> <!-- nav-wrap -->
<div id="logo"><img src="images/logo-main.png" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo -->
<!-- used for mobile -->
<div id="logo-mobile"><img src="images/M&T-Printing-Group-Logo-moble.jpg" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo-mobile -->
<h1>“Your Partners In Print”</h1>
<div id="footer">
<ul class="footer-left">
<li>M&T Printing Group - © 2014</li>
</ul>
<ul class="footer-right">
<li>Client Login</li>
<li>Locations</li>
<li>Pool</li>
</ul>
</div> <!-- footer -->
</div> <!-- indexBG -->
</body>
</html>
I would just do something like this, using jquery. You can have the videoURL go to whichever you like and it will load right up. I have done this in the past for several websites and it works wonderfully. The below is just html and JQUERY. Your issue seems to me seems to be were you have the video stored. You said it works fine "locally" Well where are you hosting your webpage? Your video should be stored in the same venue.
<section class="content-section video-section">
<div class="pattern-overlay">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=sd4bqmP_460',containment:'', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
</div>
</section>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
I see the edit you added. Remove the jpeg or reference the mp4 file.
--Sorry for editing your comment but it's the only way I can respond.Which jpeg reference do you mean?
I have a mobile web site used with MVC 4.0 Razor Mobile version and HTML 5. When i call a page on browser or submit form page title not shown. Also it comes in view but after 1 second, it is going to null. When clicking a url in page title is coming. How can I stop changing page title to empty?
My layout page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Html.Raw(ViewBag.Title)</title>
<meta name="description" #Html.Raw("content=\"" + ViewBag.Description + "\"") />
<meta name="keywords" #Html.Raw("content=\"" + ViewBag.Keywords + "\"") />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/Content/jquery.mobile-1.4.0.min.css" />
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
#RenderSection("scripts", required: false)
<script src="~/Scripts/myjs.js" type="text/javascript"></script>
<link href="/Content/mycss.css" rel="stylesheet"/>
</head>
<body>
<div data-role="page" data-theme="a" id="layout-page">
<div data-role="header" >
<h1>
<a style="background:none;border:none;" href="http://m.sozcukcevir.com"><img style="height:40px;border:0" src="/Content/images/logo-mobile.png" alt="sözcük çevir" /></a> </h1>
Menu
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a">
<ul data-role="listview" data-inset="true">
<li>Kelime Çeviri</li>
<li>Metin Çeviri</li>
<li data-icon="audio">Okunuşu Dinle</li>
<li data-icon="gear">Ayarlar</li>
<li data-icon="delete">Kapat</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar" data-theme="c">
<ul data-theme="c">
<li data-theme="c">Sözlük</li>
<li data-theme="c">Metin Çeviri</li>
<li data-theme="c">Dinle</li>
</ul>
</div>
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<!-- analytics --><!-- analytics -->
</body>
</html>
Page : http://m.sozcukcevir.com