I've been trying to make a section of a background image clickable with an external link. I've tried a few suggestions using 'imagemap' tag from archived inquires here but had no luck. I'm guessing this is due to the fact that the background image is set in CSS and the nature of the website.
I have only basic coding knowledge, so it's a trial and error approach for me which is very time consuming and I've run out of trials now.
Below is the image of the page. The area 'HERE' (under 'Book Now') should be the clickable area.
Screenshot background image
CSS
body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url(../images/bg_2019_2.jpg) center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
</div>
</footer>
</div>
</section>
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
</style>
</head>
<body>
<img src="https://i.stack.imgur.com/Y5nhJ.jpg" width="1646px" height="auto" usemap="#image-map">
<map name="image-map">
<area target="_self" alt="Book Now" title="Book Now" href="www.athleticum.co.uk" coords="1544,1241,2032,1393" shape="rect">
</map>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
</div>
</footer>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
.booknow{
background-color:green; /* remove this property once you set the position and uncomment below to make it transparent*/
/*background-color:transperant;*/
position:relative;
left:200px;
top:250px;
width:180px;
height:65px;
display:inline-block;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
<span class="booknow" onclick="location.href='www.athleticum.co.uk'">Book now</span>
</div>
</footer>
</div>
</section>
Related
I created a PWA with a display "fullscreen" specified in the manifest. However, the body doesn't take 100% of the height of its HTML parent. The body is scrollable and doesn't take the whole height
Here the basic CSS
html,
body,
#root {
background: green;
padding: 0;
margin: 0;
}
The HTML opened by the PWA
<!DOCTYPE html>
<html translate="no" class="notranslate" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1; viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<title>Test</title>
<meta name="google" content="notranslate" />
<meta name="description" content="Flink HubOne App" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="mask-icon" href="/mask-icon.png" color="#FFFFFF" />
<meta name="theme-color" content="#000000" />
</head>
<body>
<div style="background-color: red; flex: 1; padding: 0; margin: 0;">
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
</div>
</body>
</html>
Here the configuration used for my PWA
manifest: {
id: "/",
name: "Test App",
short_name: "Test",
description: "Test",
theme_color: "#ffffff",
display: "fullscreen",
scope: "/",
start_url: "/",
},
Can't figure out how to set this animated canvas as the website background of my portfolio page.
any help would be appreciated. or how do I place the div with text over the canvas?
so it sits nice and flush....................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="icon" type="image/x-icon" href="image/favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" crossorigin="anonymous"></script>
<nav>
<!-- De checkbox -->
<input type="checkbox" id="check">
<label for="check" id="checkbox">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<!-- logo en de Buttons in de nav bar -->
<img src="image/logo.png" alt="logo">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
</head>
<body>
<div id="particles-js">
<script>
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.json loaded ...');
});
</script>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hey, I'm makkerheineken.</div>
<div class="text-2">Front-End & Back-end Develeper.</div>
</div>
</div>
</section>
</div>
</body>
</html>
You could give the canvas the same size as the screen, add a div with the same size but positioned absolutely, and then put the rest of your elements inside this div.
I would like to let the modal keep open if there are errors,but the modal will not auto open when there are errors
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="//unpkg.com/alpinejs" defer></script>
<script src="{{ url('/js/jquery.min.js') }}"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
#if($errors->any())
<script type="text/javascript">
$(document).ready(function(){
$('#modal-title').modal('show');
});
</script>
#endif
modal
<form action="/employee" class="action" method="POST">
#csrf
<div class="fixed z-10 inset-0 overflow-y-scroll" aria-labelledby="modal-title" id="modal-title" role="dialog" aria-modal="true"
x-show="open">
I am working on a Spring MVC application that use FreeMarker for my views.
I am absolutly new in FreeMarker and I have the following problem: in my projct I have 3 files that have to be assemblet togheter into a single page.
So I have:
1) header.ftl representing the header of all my pages, somthing like:
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js is-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registrazione - MY WEBSITE</title>
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="resources/css/webfont.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="resources/plugins/bs-select/bootstrap-select.min.css">
<link rel="stylesheet" href="resources/plugins/bs-dialog/bootstrap-dialog.min.css">
<link rel="stylesheet" href="resources/css/style.css" />
</head>
<body id="main">
<!-- versione per popup. non prendere in considerazione -->
<!--
<div class="container page-header">
<h1>MY WEBSITE</h1>
</div>
2) footer.ftl representing the footer of all my pages:
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bs-select/bootstrap-select.min.js"></script>
<script src="assets/plugins/bs-select/i18n/defaults-it_IT.min.js"></script>
<script src="assets/plugins/bs-dialog/bootstrap-dialog.min.js"></script>
<script src="assets/plugins/jq-form-validation/jquery.validation.js"></script>
<script src="assets/js/functions.lib.js"></script>
<script src="assets/js/form-validation.js"></script>
</body>
</html>
3) Then I have my specific page (named myPage.ftl that represent only the content, something like this:
<h1>This is the content</h1>
<p>Some inforamation</p>
The header.ftl and the footer.ftl are into this directory **\WEB-INF\freemarker\layout** of my project.
So my problem is: how can I import the header.ftl content above the content of the myPage.ftl and the footer.ftl under the content of myPage.ftl page?
I did this using user-defined macros for page layouts, e.g. let's call your layout standardPage.ftl:
<#macro standardPage title="">
<!DOCTYPE html>
<html lang="en">
<head>
<title>${title}</title>
</head>
<body>
<#include "/include/header.ftl">
<#nested/>
<#include "/include/footer.ftl">
</body>
</html>
</#macro>
Then you can call this macro in each of your pages, e.g. homePage.ftl:
<#include "/pages/standardPage.ftl" />
<#standardPage title="Home">
<h1>Home Page</h1>
<p>This bit replaces the nested tag in the layout</p>
</#standardPage>
Recently I was migrating a web page from joomla 1.5 -> joomla 3.2.
The template itself works great.
The content is not displayed because of the tag.
The written code I have in my index is as:
<?php
defined('_JEXEC') or die('Restricted access'); // no direct access
JHtml::_('behavior.framework',true);
require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'functions.php';
$document = null;
if (isset($this))
$document = & $this;
$baseUrl = $this->baseurl;
$templateUrl = $baseUrl . '/templates/' . $this->template;
artxComponentWrapper($document);
?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>"
xmlns:jdoc="http://www.w3.org/1999/XSL/Transform">
<head>
<jdoc:include type="head" name="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" href="<?php echo $this->baseUrl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseUrl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />
<!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
</head>
...
</html>
And this renders as:
<html xml:lang="sl-si" lang="sl-si" xmlns:jdoc="http://www.w3.org/1999/XSL/Transform" class="chrome win">
<head>
<style type="text/css"></style>
</head>
<body>
<jdoc:include type="head" name="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css">
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/TKMS/templates/tkms_theme/css/template.css" media="screen">
<!--[if IE 7]><link rel="stylesheet" href="/TKMS/templates/tkms_theme/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="/TKMS/templates/tkms_theme/script.js"></script>
<!--CONTENT-->..
</jdoc:include>
Why does this happen? How can I fix this? I read that this happens because of BOM, but I could not fix it.
try to move the
<jdoc:include type="head" name="all">
tag into the head-tags, right (You have it in the body). That's at least where it's supposed to be. Not sure if it will actually render, though...
The problem is that the theme is an Artisteer theme. To solve this issue simply open the .artx theme and export for other joomla version.
If you don't have the .artx file then I cannot help you because I deemed the problem unsolvable.