As my title says I have no clue why the CSS will work on everything but the label tag.
Here is my code for file register:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<center> <b> Registration Page </b> </center>
</head>
<br>
<body>
<img src = "website_demo_pic_1.jpg" />
<ul class = "SiteMap">
<li> <a href = "index.html" >Home Page</a>
<br>
<li><a href = "register.html" >Register</a>
<br>
<li><a href = "login.html" >Log In</a>
<br>
</ul>
<form id = "Form1" action = "submit.php" method = "post">
<p class="whitetext"><label for = "username">Username :</label>
<input type = "text" name = "Username" id="username"></p>
<p class="whitetext"><label for = "password">Password :</label>
<input type = "password" name = "Password" id="password"></p>
</form>
</body>
</html>
Here is my code for login:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<center> <b> Log In Page </b> </center>
</head>
<br>
<body>
<img src = "website_demo_pic_1.jpg" />
<ul class = "SiteMap">
<li> <a href = "index.html" >Home Page</a>
<br>
<li><a href = "register.html" >Register</a>
<br>
<li><a href = "login.html" >Log In</a>
<br>
</ul>
<form id = "Form2" action = "submit.php" method = "post">
<label for = "username2">Username :</label>
<input type = "text" name = "Username" id="username2">
<br>
<label for = "password2">Password :</label>
<input type = "password" name = "Password" id="password2">
<br>
</form>
</body>
</html>
Here is my CSS file:
img
{
width: 100%;
}
body
{
background-color: black;
}
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
p.whitetext
{
color: white;
}
ul.SiteMap
{
float: left;
}
As far as I can tell the code is right yet the text boxes wont line up meaning that something weird is going on with label.
Here's a jsFiddle with your code, slightly modified: http://jsfiddle.net/MzsWH/
<img src = "website_demo_pic_1.jpg" />
<ul class = "SiteMap">
<li> <a href = "index.html" >Home Page</a>
<br>
<li><a href = "register.html" >Register</a>
<br>
<li><a href = "login.html" >Log In</a>
<br>
</ul>
<form id = "Form2" action = "submit.php" method = "post">
<label for = "username2">Username :</label>
<input type = "text" name = "Username" id="username2">
<br>
<label for = "password2">Password :</label>
<input type = "password" name = "Password" id="password2">
<br>
</form>
<STYLE>
img{
width: 100%;
border:1px solid #333;
height:40px;
}
body{
background-color: #CCC;
}
label {
/*width: 4em;*/
width:6em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
p.whitetext{
color: white;
}
ul.SiteMap{
float: left;
border:1px solid #666;
}
</STYLE>
The only thing I see regarding your LABEL attribute is that your width for the labels are too small. The text inside the label is longer the width, which is causing it to wrap, and make everything look weird.
All I did was change the width from 4em to 6em.
Second of all, your HTML has some issues. There's a CENTER tag in your HEAD tag, did you mean TITLE? Also, there are line break BR tags between list element (LI) tags. I would recommend as Shaquin said in his comment, run your page through the W3C validator so you can help update your HTML.
I hope that helps!
Cheers!
Related
This question already has answers here:
Put icon inside input element in a form
(21 answers)
Closed 2 years ago.
I would like to replicate Google's front-end for practice purposes. I am struggling with including the 'search icon' in the Google search bar.
On other articles, I read about the background-image property, which I have included. However, my image is quite big in pixels. I have included an addition '5px' to emphasize that the icon should be smaller. However, I can't see the icon when I do this.
Could someone explain how I would go about doing this?
input[type=text] {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png) 5px;
outline: none;
width: 40%;
padding: 8px 25px;
border: 1px solid #DDD;
border-radius: 25px;
margin: 20px;
}
<div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="image.html">Image Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="advanced.html">Advanced Search</a>
</li>
</ul>
</div>
<container>
<div class="image-box">
<center>
<img alt="Google" height="92" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png">
</center>
</div>
<div>
<center>
<form action="https://google.com/search">
<input type="text" name="q"><br>
<input type="submit" value="Google Search">
<input type="submit" value="I'm Feeling Lucky">
</form>
</center>
</div>
</container>
Thanks in advance!
Adding a background size like this doesn't work. The reason why is that the background-image property does not support putting background sizes. It just supports links to images, and gradients themselves.
However, there's an entire property waiting there for you - it's called background-size.
You basically specify the width and the height of the background size in this property. You can also use the cover and contain keywords here also.
So in your case you need:
background-size: 5px 5px;
However, you might notice a problem - there are lots of search icons. I would expect that you don't want this to happen. Just add this:
background-repeat: no-repeat;
You can also position it like this (adjust to your liking)
background-position: 10% 10%;
If you want to put all this in the same property, you could look up the shorthand background property for all these values, but some would argue this makes it much harder to read the code.
input[type=text] {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
background-size: 5px 5px;
background-repeat: no-repeat;
background-position: 10% 10%;
outline: none;
width: 40%;
padding: 8px 25px;
border: 1px solid #DDD;
border-radius: 25px;
margin: 20px;
}
added background-size, background-position & background-repeat
input[type=text] {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
background-size: 20px;
outline: none;
width: 40%;
padding: 8px 25px 8px 40px;
border: 1px solid #DDD;
border-radius: 25px;
margin: 20px;
background-repeat: no-repeat;
background-position: 10px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Search!</title>
<link rel = "stylesheet" href = "style.css">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div>
<ul class = "nav justify-content-end">
<li class = "nav-item">
<a class= "nav-link" href = "image.html">Image Search</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "advanced.html">Advanced Search</a>
</li>
</ul>
</div>
<container>
<div class = "image-box">
<center>
<img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png">
</center>
</div>
<div>
<center>
<form action = "https://google.com/search">
<input type = "text" name = "q"><br>
<input type = "submit" value = "Google Search">
<input type = "submit" value = "I'm Feeling Lucky">
</form>
</center>
</div>
</container>
</body>
</html>
I've made some adjustments to your code.
Here are the added properties that you can adjust to your liking:
EDIT: Linked docs for added CSS properties.
background-repeat: no-repeat;
background-size: 12px;
background-position:3% 50%;
Run the snippet below and let me know if this works for you.
input[type=text] {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/1200px-Vector_search_icon.svg.png);
background-repeat: no-repeat;
background-size: 12px;
background-position:3% 50%;
outline: none;
width: 40%;
padding: 8px 25px;
border: 1px solid #DDD;
border-radius: 25px;
margin: 20px;
}
<div>
<ul class = "nav justify-content-end">
<li class = "nav-item">
<a class= "nav-link" href = "image.html">Image Search</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "advanced.html">Advanced Search</a>
</li>
</ul>
</div>
<container>
<div class = "image-box">
<center>
<img alt = "Google" height = "92" src = "https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png">
</center>
</div>
<div>
<center>
<form action = "https://google.com/search">
<input type = "text" name = "q"><br>
<input type = "submit" value = "Google Search">
<input type = "submit" value = "I'm Feeling Lucky">
</form>
</center>
</div>
</container>
I've set the pixel size in my CSS to 50px but in the browser when expand my navigation menu the it sets the px size to 55.15.. etc. This same problem affects the Log Action, View Action and Keysystem pages. It doesn't affect the facilities info page. There is a gap below the first link on the drop down menu as well. I image the pixel size of the text is causing this because, again, it doesn't happen on my main index page.
I've tried changing the px to an rem value that will scale it to 50px from the page default of 38px. It also doesn't solve the problem.
CSS is as follows. .nav_main a is where I have set the px size to 50px.
* {
font-family: Arial;
margin: 0px;
}
html,body
{
height: 100%;
margin: 0px;
padding: 0px;
font-size: 38px;
overflow: visible;
}
h1 {
display: block;
}
.nav_main {
display: block;
position: relative;
width: 100%;
background-color: #282828;
overflow: auto;
}
.nav_main a {
width: 100%;
text-decoration: none;
padding-top: 32px;
padding-bottom: 32px;
margin: 0;
text-align: center;
font-size: 50px;
color: #fff;
}
.nav_main .icon {
display: inline;
float: right;
width: auto;
padding: 27.5px;
}
.nav_main .icon_clicked {
position: absolute;
right: 0px;
top: 0px;
width: auto;
padding: 27.5px
}
This is the log action page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilities Portal - Log Action</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" class="activeNav" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<form action="#" id="logActionForm">
<p>Your Name: </p><input type="text" name="FullName" placeholder="Type your name here...">
<p>Email: </p><input type="email" name="EmailAddress" placeholder="Type your email here...">
<p>Issue: </p>
<select>
<option value"" disabled selected hidden>Please choose...</option>
<option value="hnf">Health and Safety</option>
<option value="comfort">Comfort</option>
<option value="other">Other</option>
</select>
<p>Description: </p><input type="text" name="Desc" placeholder="Brief description of issue...">
<p>Details: </p><input type="text" name="Details" placeholder="Extra details here...">
<p>Upload Picture</p><input type="file" name="pic" accept="image/*">
<button type="submit" form="logActionForm" value="submit">Submit</button>
<button type="reset" value="reset">Clear</button>
<button type="button" value="viewPrevActions">View Previous Actions</button>
</form>
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script src="js/common.js"></script>
</body>
</html>
This is the index page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilites Portal Main</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" class="activeNav" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<img class="portal-img" src="images/spanners-tools.jpg" alt="Log Action Img">
<img class="portal-img" src="images/clipboard.jpg" alt="View Actions Img">
<img class="portal-img" src="images/batch-books.jpg" alt="Facilities Infomation Img">
<img class="portal-img" src="images/close-up-keys.jpg" alt="Key System Img">
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
Browser picture for log action page (the error is on this page). Highlighted yellow is the problem. This occurs on the log action, view action and key system pages.
https://imgur.com/qDvZj8T
Browser picture for index page (it works correctly)
https://imgur.com/e9jVCSg
I would like for the browser to follow the CSS i've set like on the index page. The other pages don't follow suit for some reason.
I'm making a blog. I have couple of pages on it:
-Home
-New post
etc.
So i want titles to be different size on those pages. To be specific i want "Home" font-size to be 45 and "New post" font-size to be 24 if the page is "index" and if the page is "new" i want it to be reverse. How to do that? Maybe specify somehow in "base" file? Or i have to somehow alter it in "new" file?
Pictures of the web-site:
Here's the code:
__base.html
$def with (page)
<html>
<head>
<title>S. Gera | Vision</title>
<style>
#menu {
width: 200px;
float: right;
}
</style>
</head>
<body>
<ul id="menu">
<li><a style="font-size: 45; text-decoration: none" href="/">Home</a></li>
<li><a style="font-size: 24; text-decoration: none" href="/new">New Post</a></li>
</ul>
$:page
</body>
</html>
__index.html
$def with (posts)
<html>
<h1 style="color: Grey; font-family: Georgia; text-align: Left">Blog posts</h1>
<ul>
$for post in posts:
<li>
<strong> <a style="color: Black; text-decoration: none; font-size: 18" href="/view/$post.id">$post.title</a> </strong>
<a style="color: Blue; font-size: 15">| $datestr(post.posted_on)</a>
<a style="color: Red; font-size: 11; font-family: Arial; text-decoration: none" href="/edit/$post.id">(Edit)</a>
</li>
</ul>
</html>
__new.html
$def with (form)
<html>
<h1 style="color: Grey; font-family: Georgia; text-align: Left">New Blog Post</h1>
<form action="" method="post">
$:form.render()
</form>
<html>
__view.html
$def with (post)
<h1>$post.title</h1>
$datestr(post.posted_on)<br/>
$post.content
__edit.html
$def with (post, form)
<html>
<h1>Edit $form.d.title</h1>
<form action="" method="post">
$:form.render()
</form>
<h2>Delete post</h2>
<form action="/delete/$post.id" method="post">
<input type="submit" value="Delete post"/>
</form>
</html>
If you want to use a common base, yet do different things based on which template is being used, you'll want to parameterize base, and set the value you want in the template file & have it used in the base.
For example, consider having base be altered such that each menu item will take a class. If page.selected_menu matches, then it sets the class to active, otherwise, the class is set to "".
=== base.html ===
...
<ul id="menu">
<li>
<a class="$('active' if page.selected_menu == 'home' else '')"
href="/">Home</a></li>
<li>
<a class=$('active' if page.selected_menu == 'new' else '')"
href="/new">New Post</a></li>
</ul>
...
Use css to display ul>li>a.active differently from ul>li>a.
Then, in your templates, set the value for the menu you'd like to be set to "active". For example:
=== new.html ===
$var selected_menu: new
=== home.html ===
$var selected_menu: home
var variables defined in templates are available as attributes within the base template.
so basically, I am creating a booking form for a practice website. I want to validate the date so that the user can only enter a date in 2017, and cannot proceed without entering a date in 2017. They also cannot proceed without entering a valid name and email. An alert message appears if one of these is not satisfied, and the related text boxes are highlighted.
Here is what I have so far in terms of code:
Any help is appreciated, thank you.
HTML
<html>
<head>
<title> Booking </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
function validate{} {
result = true;
contentUsername=booking.username.value;
if (contentUsername=="")
result=false;
}
</script>
<script>
function validate() {
result = true;
contentUsername=booking.username.value;
contentEmail=booking.email.value;
contentDate=booking.date.value;
var email = /^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/;
var username = /^[A-Za-z]+[A-Za-z\s\.'-]+[A-Za-z]$/;
var date = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d).\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d).(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d).\d{2})$/;
var alertMessage="";
if (contentUsername==""){
result=false;
document.getElementById('username').style.background="lightyellow";
document.getElementById('username').style.border="solid firebrick 1px";
}
if (contentEmail=="") {
result=false;
document.getElementById('email').style.background="lightyellow";
document.getElementById('email').style.border="solid firebrick 1px";
}
if (contentDate=="") {
result=false;
document.getElementById('date').style.background"lightyellow";
document.getElementById('date').style.border="solid firebrick 1px";
}
if (!(email.test(contact.email.value)) && contact.email.value != "") {
alertMessage += contact.email.value + ' is not a valid email address.\r\n';
result=false;
}
if (!(username.test(contact.username.value)) && contact.username.value != "") {
alertMessage += contact.username.value + ' is not a valid name.\r\n';
result=false;
}
if (!(date.test(contact.date.value)) && contact.date.value != "") {
alertMessage += contact.date.value + ' is not a valid date. Please select a date in 2017.\r\n';
result=false;
}
if (!result) {
alertMessage += "Please fill out the highlighted fields";
alert(alertMessage);
}
return result;
}
</script>
</head>
<body>
<div id="header">
<div id="branding">
<img src="Images/logo.png">
</div><!-- end of "logo" -->
<div id="tagline">
<p> Welcome to yourday.com - We hope you enjoy your visit!
<br> This is where you can book an appointment with one of our agents!
<br> Please note: Dates for 2016 are fully booked. Next available appointments are in 2017. We apologies for any inconvenience caused.</p>
</div><!-- end of "tagline" -->
</div><!-- end of "header" -->
<div id="bodycontent4">
<form action="http://www.rebol.com/cgi-bin/test-cgi.cgi" method="post" class="booking" id="booking" onsubmit="return validate()">
<fieldset>
<legend>Booking</legend>
<label for="username">Name: </label>
<input type="text" name="username" id="username"></br>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email"></br>
<label for="date">Date:</label>
<input type="date" name="date" id="date"></br>
<label for="location">Location:</label>
<select>
<option value="manor">Uppercourt Manor</option>
<option value="killruddery">Killrudderry</option>
<option value="carriage">The Carriage Rooms</option>
<option value="coolclogher">Coolclogher House</option>
</select>
</fieldset>
<input type="submit" value="Submit">
</form>
</div><!--end of "bodycontent" -->
<div id="navigation">
<ul class="topnav" id="TopNav">
<li>Home</li>
<li>Locations</li>
<li>Booking</li>
<li>Testimonials</li>
<li>Contact Us</li>
<li>About</li>
</li>
</ul>
</div> <!--end of "navigation" -->
<div id="footer" style = "position: absolute; top: 550px;">
<p>Created by: Calvin Leong</p>
<p>Contact information: calvin.leong#CLDesign.com</p>
</div>
</body>
</html>
CSS
/* Booking Form */
form.booking label {
display: block;
width: 100px;
float: left;
font-weight: bold;
font-size: small;
color: black;
line-height: 150%
}
form.booking fieldset {
border: 2px solid red;
padding: 10px;
}
form.booking legend {
font-weight: bold;
font-size: small;
color: black;
padding: 5px;
}
#bodycontent4 {
position: absolute;
top: 270px;
width: 25%;
left: 500px;
}
#div {
margin: 0 auto;
}
You could do like this:
var date = new Date("01/01/2017");
var year = date.getFullYear();
if(year == 2017){
alert(year);
}else{
alert("crap");
}
Here is your regex for date:
var date = /^2017-\d{2}-\d{2}$/;
And, here is the working link: http://jsbin.com/getunisagi
I am trying to make a small box where people can log in to my site, but im not the best at CSS. I want to have it like this
paragraph "username"
input(text)
parargraph "password"
input (password)
button(submit)
with small spaces between but I cant understand how to make them stay under each other :(
could a nice codegod help me?
CSS:
.login {
float: right;
height: 300px;
width: 300px;
background-color: white;
}
.login p{
float: left;
margin: auto 0;
clear: both;
}
.login input{
float: left;
}
.login button{
float:
}
.login input{
text-align: center;
}
button.loginBtn{
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matombrining</title>
<link rel="stylesheet" type="text/css" href="Css/Stil.css"/>
</head>
<body>
<header class="banner">
</header>
<nav>
<ul>
<li>Hjem</li>
<li>Info</li>
<li>Hvorfor</li>
<li>Login</li>
</ul>
</nav>
<main class="mainContent">
<h1>Hovedinfo</h1>
<div class="login">
<h1>login boks</h1>
<p>Brukernavn</p>
<input type="text" class="userIn" id="userIn"></input>
<p>Passord</p>
<input type="password" class="passIn" id="passIn"></input>
<button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
</div>
</main>
Sorry if this code looks bad, havent played around with coding for a long time hehe.. Help is very much appreciated!!!
What you are asking is (almost) default behaviour, just the input and button need to be turned in to block elements to have them go onto their own line. have a look at the following example: http://jsfiddle.net/kr8cyobk/
<div class="login">
<h1>login boks</h1>
<label>Brukernavn
<input type="text" class="userIn" id="userIn" />
</label>
<label>Passord
<input type="password" class="passIn" id="passIn"></input>
</label>
<button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
</div>
And this is all the css you need for that login form:
input, button {
display: block;
}
Note that I took the liberty of making your inputs self closing (<input />) and turning those p tags in the semantically more correct labels so you have the added advantage of making them clickable, and things like screenreaders and crawlers can make more sense of your page.