I'm using html form inputs on my page (text, textarea, submit) to create a contact form, and I want to do some custom styling using css.
I've set the width of my inputs to 100%, but somehow the button input(submit) ends up being smaller than the textarea and text inputs. I can't really figure out what's going on here.
How do I get them to be all the same size (I need to use % values, want to make my site responsive)?
Snippet below, missing the main .css file since it's not relevant to the question. Ionicons.css is a custom icons fonts, that I use on other parts of this page, and I've linked normalize.css from a CDN.
Thanks for the help.
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
Most of form elements have default padding and border styles, it may vary depending on different browser and OS. Apply box-sizing:border-box can make them to be truly 100% size.
input, textarea {
width: 100%;
box-sizing: border-box;
}
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
box-sizing: border-box;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
border-left-width: 2px;
border-right-width: 2px;
padding-left: 0px;
padding-right: 0px;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
Set
input, textarea{
box-sizing: border-box;
}
to keep your padding's inside the element. The inputs' and textarea's padding's are pushing the width beyond 100%. Alternatively, set
input, textarea{
width: Calc(100% - 4px); // 4px = cumulated lateral padding
}
input.button{
width: 100%;
}
Related
I want to create this type dashboard enter image description here but not able to work. How can we make this type style.
I try to make this type dashboard page in my code but it's not work. Anybody please help me out. And check my code below.
My js code
return (
<div className="dashboard">
<div className="dashboard__container">
Logged in as
<div>{name}</div>
<div>{user?.email}</div>
<button className="dashboard__btn" onClick={logout}>
Logout
</button>
</div>
</div>
);
}
And my css code
.dashboard {
height: 100vh;
width: 100%;
background: #3e295a40;
}
.dashboard__container {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
background-color: #15b88357;
padding: 1em 20px 1em 20px;
color: white;
font-weight: bold;
}
.dashboard__btn {
margin-top: -5px;
font-size: 18px;
padding: 0.25em 0.5em;
border: none;
color: white;
background-color: #402958;
}
.center { text-align: center; }
Please help me out.
I am using bootstrap for "css only" to design my website generally. Here is how I do it.
/public/index.html
You can see that I have linked to my local bootstrap css file inside head tag.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(window.screen.height < window.screen.width) {
window.stop()
// window.location = "https://google.com"
}
</script>
<script src="init.js" ></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body style="background-color: #efefef">
<div id="root"></div>
</body>
</html>
/src/App.js
I tried to demonstrate how I used css of bootstrap inside my reactjs component. You can also use className. Also take care while adding inline style. It must be object.
const Main = () => {
return(
<div class="d-flex justify-content-center" style={{width:"100vw", height:"100vh"}}>
<div>1</div>
<div class="flex-grow-1">2</div>
<div>
<button class="btn-primary p-2">Abe !</button>
</div>
</div>
)
}
export default Main;
If you get any error. Search for the error and try to resolve with help of google. Those error are common and can be easily fixed. You will learn alot from those errors.
I'm trying to use an external Style Sheet for putting my CSS code, When I put the CSS on the same file It works, but when the CSS code and is in an external sheet It does nothing,
for testing I create a php file with and input field and use the css for background color of page and style of an Input field called "account_name":
This is my code with css code in the same file:
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
<style type="text/css">
body{
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.signup-form {
width: 600px;
margin: 0 auto;
padding: 5px 0;
}
.signup-form form {
color: #9ba5a8;
border-radius: 3px;
margin-bottom: 15px;
background: #F0FFF0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
input#account_name {
border-radius: 10px;
border: 1px solid #73AD21;
padding: 5px;
width: 400px;
height: 35px;
float: left;
color: #0000CD;
background-color : #ffee88;
}
</style>
</head>
<body>
</br>
</br>
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta" >
</div>
</div>
</br>
</br>
</br>
</br>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</form>
</div>
</body>
</html>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data : data,
success: function(data)
{
alert('Account Add');
},
error: function(errorThrown)
{
alert(errorThrown);
}
});
});
</script>
But If I put the css code in a external sheet called: "style.css", the css format makes nothing, these are the php and css file:
php code:
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Load css style file-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
</head>
<body>
</br>
</br>
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta" >
</div>
</div>
</br>
</br>
</br>
</br>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</form>
</div>
</body>
</html>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data : data,
success: function(data)
{
alert('Account Add');
},
error: function(errorThrown)
{
alert(errorThrown);
}
});
});
</script>
The css file style.css:
body{
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.signup-form {
width: 600px;
margin: 0 auto;
padding: 5px 0;
}
.signup-form form {
color: #9ba5a8;
border-radius: 3px;
margin-bottom: 15px;
background: #F0FFF0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
input#account_name {
border-radius: 10px;
border: 1px solid #73AD21;
padding: 5px;
width: 400px;
height: 35px;
float: left;
color: #0000CD;
background-color : #ffee88;
}
Please any Ideas?
The problem is you need to link your CSS file just before the closing head tag ! All because of specificity rule of CSS ! Try this
HTML
<!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">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Add Account</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.6/js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-themes-1.10.3/jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css">
<!-- Alertify Librery-->
<link rel="stylesheet" type="text/css" href="alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="alertify/css/themes/bootstrap.css">
<script src="alertify/alertify.js"></script>
<!-- Modal librery-->
<script type="text/javascript" src="librerias/js/sweetalert2.js"></script>
<script type="text/javascript" src="librerias/js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="librerias/css/sweetalert2.css" type="text/css">
<link rel="stylesheet" href="librerias/css/sweetalert2.min.css" type="text/css">
<!-- Linking external custom CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<br />
<br />
<div class="signup-form">
<form method="post" id="add_form">
<h2>Add Account</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label>Please Enter Account Name</label>
<input type="text" class="form-control" id="account_name" name="account_name" required="required">
<input type="hidden" name="key" value="addcuenta">
</div>
</div>
<br />
<br />
<br />
<br />
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Accept</button>
</div>
</div>
</form>
</div>
<script>
//Send Data to Add
$(document).on('submit', '#add_form', function(e) {
e.preventDefault();
var data = $(this).serialize();
$.ajax({
//Send Data To add
url: 'processAddAccount.php',
type: 'POST',
dataType: 'json',
data: data,
success: function(data) {
alert('Account Add');
},
error: function(errorThrown) {
alert(errorThrown);
}
});
});
</script>
</body>
</html>
Remember : Your style.css file should be in css folder of root directory .
I'm testing, please, Why for example If I change input ID in the HTML code and then I change my CSS to formar the new input ID, the css style doesn't apply to my Input? Do I have to reset something in the browser?
This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 6 years ago.
I have this weird whitespace above the section-one div in the body.
Here it is:
Don't understand why, I've even reset the CSS to default i.e * { margin: 0;}
Html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id='section-one'>
<div id='headline'>
<h1> This is the headline </h1>
<div class='silver-line-break'>
</div>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend>Delivery Fee Calculator</legend>
<span>First name: </span> <input type="text" name="firstname" value="Mickey">
<span>Last name: </span> <input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>
</div>
<div class='silver-break-bar'>
<img id='red-car' src="img/red-car.png" alt="" height="250" width="300">
</div>
</div>
</div>
</body>
</html>
CSS
/* Basic Styles */
* {
margin-top: 0px;
padding: 0;
}
body {
padding: 0px;
margin: 0px;
background-color: pink;
}
#section-one {
background-color: #80be05;
margin: 0px;
padding: 0px;
}
Any ideas why there is space between above the section-one div in the body?
Update: I've added the complete code that asked. Not sure what the problem is? Is the something to do with my chrome browser?
the H1 has a margin of some pixels.
h1 {
margin: 0px
}
Here is a simplified version of my problem:
.select-trigger,
.select-trigger:focus {
min-height: 34px;
line-height: 2.45;
border-color: #ccc;
}
.select-trigger {
border: 1px solid #aaaaaa;
border-radius: 4px;
background-color: #ffffff;
}
/* added rule */
.form-inline .select {
display: inline-block;
min-width: 180px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label>Label 1</label>
<div class="select">
<div class="select-trigger">
</div>
</div>
</div>
<div class="form-group">
<label>Label 2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Label 3</label>
<div class="select">
<div class="select-trigger">
Foo
</div>
</div>
</div>
</form>
</body>
</html>
(maybe Label 2 won't be appear in one line, if the view port is not big enough, so here is a JsBin to see it in full screen:
http://jsbin.com/sobupicire/3/edit?output)
Label 1 is the problem: Label sits at the bottom of the div. It should be in vertical middle of div.select
Label 2 is the desired look
Label 3 is the same as Label 1, but with some text it looks like it should (the label is in vertical middle of div.select
use the "label-control" for all label and "form-control"
http://jsbin.com/calaconidu/1/edit?output
The problem is one input is a select-trigger and the other is a select trigger with content, while the other is an inputbox. Try and keep them consistent and that will solve your problem
I have created two href's which act like buttons, in a comic game. I am following this tutorial . The issue i have is the links are not clickable. They dont respond to touch, nothing happens when clicked.
Here is the project structure:
here is my styles.css:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
and now i'll show you the index.html where the button is not clickable from :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable:
In my opinion,
if you want to move between pages with tau.js library, you need to follow their rule. Here is some reference guide.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU.
It is very simple. Just insert class="ui-page" in root <div> tag.
I tested on my desktop with Tizen IDE. In your index.html,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<<
>>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
And on every other pages(comic/page1.html, page2.html... etc)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
Please try again with above my example.
I checked that project runs well now :)