Hello everyone,
I just started learing Kotlin and Ktor for Web Development. I started creating a Template and everything worked perfectly but now I want to add an image to my Templates. In the Kotlin Docs they created a static route but it doesn't work:
Template:
<#macro layout>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Document -->
<title>${pageName.name} | Test</title>
<meta name="description" content="This is the official website of. ">
<meta name="keywords" content="web, ...">
<meta name="author" content="">
<link rel="shortcut icon" href="img/favicon.ico"/>
<!-- Document -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="main-picture">
<div class="header">
<div class="img">
<img alt="Logo" width="60px" height="auto" src="image/logo.png">
</div>
<div class="toggle-button">
<span class="bar-1"></span>
<span class="bar-2"></span>
<span class="bar-3"></span>
</div>
<nav class="navbar">
<ul>
<li>Home</li> <!-- Home -->
<li>Concept</li> <!-- Concept -->
<li>Offers</li> <!-- Offers -->
<li>About Us</li> <!-- AboutUS -->
</ul>
</nav>
</div>
</div>
</header>
<main>
<#nested>
</main>
<footer>
<div class="footer-gen">
<div class="footer">
Imprint <!-- Imprint -->
Privacy Policy <!-- Privacy -->
Conditions <!-- Conditions -->
</div>
<div class="footer-name">
<p>© 2022 - vision2success</p>
</div>
</div>
</footer>
</body>
</#macro>
Routing
import io.ktor.http.*
import io.ktor.server.application.*
import io.ktor.server.freemarker.*
import io.ktor.server.response.*
import io.ktor.server.routing.*
fun Application.imgRouting() {
routing {
get("/") {
call.respondRedirect("images")
}
route("images") {
get("/favicon.ico") {
call.respond(
FreeMarkerContent(
"img/favicon.ico",
model = null,
contentType = ContentType.Image.Any
)
)
}
get("/logo.png") {
call.respond(
FreeMarkerContent(
"logo.png",
model = null,
contentType = ContentType.Image.PNG
)
)
}
}
}
}
Error:
The http://localhost:8080/images/logo.png graphic cannot be displayed because it contains errors.
NK
Related
bookdown::tufte_html_book does not place citation in margin for csl with note. For example:
bookdown::render_book(input = "index.rmd",
output_format = "bookdown::tufte_html_book")
with csl from: https://raw.githubusercontent.com/citation-style-language/styles/master/chicago-fullnote-bibliography-short-title-subsequent.csl
For file index.rmd:
---
title: "Test title"
output:
bookdown::tufte_html_book
link-citations: yes
bibliography: [test.bib]
csl: chicago-fullnote-bibliography-short-title-subsequent.csl
---
# First section
The citation for this[#edwinabbottFlatlandRomanceMany2018] should show up in the margin.
and bibliography test.bib:
#book{edwinabbottFlatlandRomanceMany2018,
title = {Flatland: {{A Romance}} of {{Many Dimensions}}},
shorttitle = {Flatland},
author = {{Edwin Abbott}},
year = {2018},
publisher = {{CreateSpace Independent Publishing Platform}},
file = {/Users/ssp3nc3r/Zotero/storage/NZBIJ84R/Edwin Abbott - 2018 - Flatland A Romance of Many Dimensions.pdf},
isbn = {978-1-5239-6216-7}
}
results in this html:
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Test title" />
<meta property="og:type" content="book" />
<meta name="description" content="Test title">
<title>Test title</title>
<link href="libs/tufte-css-2015.12.29/tufte-fonts.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-background.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-italics.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div id="TOC">
<ul>
<li><span class="toc-section-number">1</span> First section</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="header">
<h1 class="title">Test title</h1>
</div>
<div id="first-section" class="section level1">
<h1><span class="header-section-number">1</span> First section</h1>
<p>The citation for this<span class="citation"><sup>1</sup></span> should show up in the margin.</p>
<div id="refs" class="references">
<div>
<p>Edwin Abbott. <em>Flatland: A Romance of Many Dimensions</em>. CreateSpace Independent Publishing Platform, 2018.</p>
</div>
</div>
</div>
<p style="text-align: center;">
</p>
</div>
</div>
</body>
</html>
This was due to a bug in the tufte package, which has been fixed. You may install.packages('tufte') and the problem should be gone.
I am trying to make a website (just for learning). What I want is "follow us" h2 and two icon youtube and twitter at a side(right).
and if web page shrinks or if I open the website in the mobile device. it needs to be under the menu.
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="container">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="container">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
my website looks
This should do what you want it to. :)
.headerContainer{
display : inline-block;
float : left;
width : 200px;
}
/* small screens and mobile */
#media screen and (max-width:767px) {
.headerContainer{
display : block;
float : left;
clear : both;
}
}
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="headerContainer">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="headerContainer">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
header {
display: flex;
flex-direction: column;
}
#media (min-width: 480px) {
header {
flex-direction: row;
}
}
You could try this CSS. Hope it will solve your problem.
Try:
position:absolute, bottom:0px
I am not sure what am I doing wrong. Is the image in the header or something else ? Tried inspecting and not able to come up with fix for the error. Help would be appreciated
<head>
<!-- Meta tags -->
<meta charset="utf-8" />
<meta name="description" content="Creating Web Applications" />
<meta name="keywords" content="party equipment" />
<meta name="author" content="Zaid Shakil" />
<!--CSS Style File Link -->
<link rel="stylesheet" href="styles/style.css" />
<!-- Title of the page -->
<title>Party Equipment</title>
<!-- Navigation bar -->
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Enquiry</li>
<li>About</li>
</ul>
</nav>
<img id="homepic" src="images/partyhome.png" alt="Party" />
</head>
Please go through with this, avoiding-common-html5-mistakes
<head>
<!-- Meta tags -->
<meta charset="utf-8" />
<meta name="description" content="Creating Web Applications" />
<meta name="keywords" content="party equipment" />
<meta name="author" content="Zaid Shakil" />
<!--CSS Style File Link -->
<link rel="stylesheet" href="styles/style.css" />
<!-- Title of the page -->
<title>Party Equipment</title>
<!-- Navigation bar -->
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Product</li>
<li>Enquiry</li>
<li>About</li>
</ul>
</nav>
<img id="homepic" src="images/partyhome.png" alt="Party" />
</body>
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
I have this (using the Twitter bootstrap css sheet):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body style='padding-top:40px;'>
<div class='topbar'>
<div class='fill'>
<a class='brand' href='index.php'>BrandTest</a>
</div>
</div>
</body>
</html>
It's not showing the black bar at the top at the top.
Any ideas?
Some parts of the HTML is missing, it should look like this : http://jsfiddle.net/KajxK/
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="index.php">BrandTest</a>
</div>
</div>
</div>