Im making a website for my tech class and i have put a submit button in but as said in the title when i click my submit button my page zooms in, i am on pc not mobile. heres my code for any interested
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="header"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> this is a Title </title>
<h1> GIVE ME A MILLION</h1>
<li> <img id="cart" src="shopping_cart_PNG66.png" width="10%"> </li>
</head>
</div>
<body>
<div id="Body">
<div id="Navbar">
<ul>
<nav>
<li>About</li>
<li>Contacts</li>
<li>Home</li>
</nav>
</ul>
<form>
<label for="Fname">first name:</label><br>
<input type="text" id="Fname" name="Fname"><br>
<label for="Lname">last name:</label><br>
<input type="text" id="Lname" name="Lname"><br>
<label for="Money">Give me Money:</label>
<select id="Money" name="Money">
<option value="1Million">1 Million 💰</option>
<option value="1Billion">1 Billion 💰💰</option>
<option value="1Trillion">1 trillion 💰💰💰</option>
<option value="1Quadrilion">1 Quadrilion 💰💰💰💰</option>
</select>
<input type="submit" value="submit">
</form>
<br><br><br><br><br>this is a body<br><br><br><br><br>
</div>
</body>
<div id="footer">
<footer>
<p>This is a footer</p>
</footer>
</div>
</html>
My css
* {margin: 0;}
body {background-color: aqua; text-align: center;font-size: 300%;}
#header {background-color: blue;padding: 35px;text-align: left;font-size: 80%;}
Nav {background-color: yellow;padding: 15px;font-size: 100%;}
ul {text-align: center; list-style-type:none;}
li {display: inline-block; font-family: 'Courier New', Courier, monospace; padding: 30px;}
footer{background-color: lime;padding: 35px;text-align: center;font-size: 100%;}
#cart {position: absolute; top: 0; right: 0;}
nav a {text-decoration: none;padding: 20px;}
nav a:hover {color: red; background-color: aliceblue;}
ive tried using meta port, looking on w3schools and ive tried moving it around, none of these have fixed my problem
I copy your code and tried it. cannot replicate the zoom you mention. But I guess you means the page scroll to top when button click. That is a normal behaviour when a form is submitted. And I need to bring out that the structure of your html is not standard. <div> should only place inside <body>. And <head> is not allow inside <div>. FYI, <head> is different from <header>.
Related
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 have a tabbed layout for one of my pages on my website where each tab has different content. I have the funcionality of the tabs working where you can click on the different tabs and it will change. I have content on my first tab that is "tab-active" and it shows the content. However if I click on another tab and back to the first tab the content does not show. Is this because it isn't on a server or is there something wrong with my code? Also when I add content to the other tabs divs and refresh the page and click on the tab nothing is showing up for theirs, only the first tab. Thanks
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./common/res.css"/>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
<script type="text/javascript" src="./common/tab.js"></script>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active">Stage</li>
<li>Studio</li>
<li>Session</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<form required>
Room Selection:<br>
<select name="room">
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</select> <br><br>
</form>
<p style="color:red;">In order to gain access to the stage you must pick up the access key from the Rental House.</p><br>
<textarea readonly id="policy" rows="8" cols="30" placeholder="Policy Summary will go here" ></textarea><br><br>
<input required type="radio" id="agree">I agree I have read and understand the policy stated above and have read the full liabilty form.<br><br>
<div id="cal">
<iframe src="https://calendar.google.com/calendar/embed?showPrint=0&showTabs=0&mode=WEEK&height=600&wkst=1&bgcolor=%23FFFFFF&ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div><br>
<form target="_blank" action="https://mediaservices.champlain.edu/webcheckout/pir/login">
<input type="submit" value="Confirm">
</form>
</div>
<div id="tab2" class="tab">
<form required>
Room Selection:<br>
<select name="studioroom">
<option value="control">Control Room A</option>
<option value="isob">Isolation Room B</option>
<option value="isoc">Isolation Room C</option>
</select> <br><br>
</form>
</div>
<div id="tab3" class="tab">
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links li').on('click', function(e) {
tabs(jQuery(this).attr('data-toggle'));
jQuery(this).addClass('active').siblings().removeClass('active');
});
function tabs(tab) {
jQuery('.tab-content .tab').hide()
jQuery('.tab-content').find(tab).show();
}
});
</script>
</body>
</html>
/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
Here is your problem:
jQuery(this).attr('data-toggle')
You click on li (that is the this) and you try to get data-toggle attribute, that does not exists.
You have to retrieve the href attribute of the a contained into the clicked li.
Solution:
jQuery(this).find("a").attr('href')
Working jsfiddle
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.
I'm out of ideas here, but I'm sure I'm missing something obvious. I want the video to float left and the paragraph above the contact form all to float right. The paragraph is cooperating but the form is out there on it's own.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description" content- "best=" " junk=" " car=" " buyers=" "
in=" " austin"="">
<meta name="author" content="Lucky">
<title>ATX Junk Cars</title>
<style>
iframe {
clear: left;
float: left;
}
<p> {
float: right;
display: inline-block;
vertical-align: middle;
float: right;
padding-left: 50px;
padding-top: 50px;
}
</style>
</head>
<body>
<h1> ATX Junk Cars &nbs p;
&n bsp;
<hr size="2" width="100%"> </h1>
<iframe src="https://www.youtube.com/embed/dNWh2w5VSn4" allowfullscreen="" width="700" frameborder="0" height="450"></iframe>
<p>If you're ready to turn that old car in your driveway into cash, we want to hear from you. Tell us who you are, how we can reach you, and most important, tell us about that car. For the fastest response, call or send a text to 512-229-5424. If it's 2:00 in the morning or you just don't like phones, send us a message with the form below.</p>
<br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Contact Form</title>
<style>
body {
background-color: #330000;
color: ffcc00;
</style>
<style>
label {
display:block;
margin-top:20px;
letter-spacing:2px;
</style>
<style>
/* Centre the page */
.body {
display:block;
margin:0 auto;
width:576px;
}
/* Centre the form within the page */
form {
margin:0 auto;
width:459px;
}
/* Style the text boxes */
input, textarea {
width:439px;
height:32px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
}
textarea {
height:213px;
background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
</style>
<header class="body"></header>
<section class="body">
<label>Who are you?</label>
<input name="name" placeholder="Name">
<label>How do we call you?</label>
<input name="phone" placeholder="Phone number with area code" type="phone">
<label>Do you have keys and a clear title?</label>
<input name="keys" placeholder="Keys, title or both?" type="keys">
<label>Does it start, run and drive?</label>
<input name="runs" placeholder="Yes or no?" type="runs">
<label>Anything not working on it?</label>
<textarea name="problems" placeholder="Dents, check engine lights, broken things?"></textarea>
<input id="submit" name="submit" value="Submit" type="submit">
</section>
<footer class="body"></footer>
</body>
</html>
Add style="float:right;" as below:
<section class="body" style="float:right;">
<label>Who are you?</label>
<!-- your form code -->
</section>
I'm ultimately looking to rebuild an old website that complies to web standards, and thought I would try getting my feet wet in html5 and css3. I know neither of these are fully supported across browsers yet, but I'm willing to work within whatever limits for the time-being.
However, I'm already ramming my head against an early wall, and frankly feel pretty stupid right now. I can't seem to highlight text OR open links in the pages generated by my code.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
<link rel="stylesheet" href="HIcss3.css" />
<script src="HIjs.js"></script>
</head>
<body>
<div class="title">
<div id="search">
<form id="searcher" onclick="startSearch('sbox')">
<input type="text" id="sbox" size="15" value="Search This Site">
<input type="button" id="sbutt" value="Find">
</form>
</div>
</div>
<div class="navigation">
<div id="about"> About </div>
<div id="blog"> Blog </div>
<div id="research"> Research/ Academic Papers </div>
<div id="hypercourse"> Hypercourses </div>
<div id="links"> Links </div>
<div id="contact"> Contact </div>
</div>
<div class="download">
<a href="http://www.mozilla.com/firefox/" target="_blank">
Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
</a>
</div>
<p>
Welcome to HI Updates!
</p>
</body>
</html>
css:
body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}
h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}
a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}
div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left}
div.download img {border:0; float:left; width:3em; height:3em}
div.navigation {}
#about {}
#blog {}
This was not a problem with my last layout in html 4, and feel I must be overlooking something REALLY obvious... even worse, it went through the validator without a hitch :P
Thanks!
Your div.title is position: fixed so it is actually floating over your links, so they don't receive the hover or click events from your mouse. Remove it to try it out.
With: http://jsfiddle.net/LFTpB/
Without: http://jsfiddle.net/THyke/