My web page loads with no styling on the inputs. When I put the styling inside the HTML file it displays correctly. I tried adding it before and after the scripts however nothing is working. I don't want to put the styling inside the same file.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article Review</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="home.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background-image"></div>
<div id="container">
<form method="POST" id="form">
<input type="text" autocomplete="First" id="firstname" placeholder="First Name: " />
<input type="text" id="lastname" autocomplete="Last" placeholder="Last Name: " />
<input type="text" id="user" autocomplete="User" placeholder="Username: " />
<input type="password" id="pass" placeholder="Password: " />
<input type="email" autocomplete="Email" id="email" placeholder="Email: " />
<button type="submit" name="submit" id="submit">Submit</button>
</form>
</div>
</body>
</html>
Next here is my CSS:
#background-image {
background-image: url("images/bg.jpg");
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
This is likely due to the location of your CSS relative to your HTML document, on your server.
Try relocating your index.css file to the root directory of your web server, and then make the following change to your HTML:
<!-- Add / infront of index.css, and close your link tag with /> -->
<link href="/index.css" rel="stylesheet" type="text/css" />
It is working for me using chrome.
Make sure the index.css is in the same folder as your html file
You could also try:
<link href="./index.css" rel="stylesheet" type="text/css">
index.css, index.html must be on the same directory.
If you still have the same issue.
I suggested you to hard reload your page (Ctrl+Shift+R).
Related
Basiaclly, I am trying to make a upload form for my website. I was wondering if there is any CSS that would make this look much more pleasing and unique. The code below is only HTML. I only need the CSS but if you find any way to improve the HTML, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file1"/>
<input type="submit" value="send!"/>
</form>
</body>
</html>
One way you could improve is change the <input type="submit" value="send!"/> code to <button id="" class="" type="submit">Your Text Here</button>. Also for css codes for like buttons I reccomend use something like this
ButtonIDHere {
border-radius: 25px;
border: 4px solid blue;
padding: 10px;
}
and to make inputs a little nicer use something like this
.InputClass {
position: absolute;
width: 150px;
top: 150px;
left: 730px;
z-index: 4;
}
Also maybe change the border color and stuff.
yo so what do you actually wanna see I just made the form centred and added some colour.
do u want the buttons to look nicer?
https://jsfiddle.net/jqc05Ldk/5/
.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
color: #BBDEF0;
border-radius: 25px;
}
input[type="submit"]{
border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;
}
input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;
}
For these type of file inputs you can use form control in bootstrap which does not include the external css that much because bootstrap is a css framework and the button styling also will be nice when we use bootstrap Try this code.This code also includes the alert that comes after send button.Try doing these type of forms with bootstrap
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<style>
.container{
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 25px;
}
</style>
<script type="text/javascript">
function showMessage(){
alert("Thanks Your papers have been evaluated");
}
</script>
</head>
<body>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<div class="container mt-4 mb-2">
<form>
<div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>
I'm trying to make a simple form that asks for login details, but I want it to also be mobile friendly. It works great with desktops, but on mobiles it shifts a little bit to the right. I want the text to be exactly in the middle, like on pc.
Pic of the site on mobile:
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teretulemast</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="display:block; padding: 0; width: 80%; margin-left: 40%; overflow:hidden; position: relative;">
<form>
<h1 style="">Sisse logimine</h1><br />
<p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
<p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
<input style="" type="submit" value="Logi sisse" name="Sisesta"/>
<input type="submit" value="Tagasi" name="back"/>
</form>
</body>
</html>
Learn more about flex box: https://www.w3schools.com/css/css3_flexbox.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teretulemast</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="display:flex; padding: 0; width: 100%; overflow:hidden; align-items: center; justify-content: center">
<form>
<h1 style="">Sisse logimine</h1><br />
<p style="">Kasutajanimi: </p><input style="height: 25px;"type="text" name="username"/>
<p style="">Parool: </p><input style="height: 25px;" type="password" name="password"/><br />
<input style="" type="submit" value="Logi sisse" name="Sisesta"/>
<input type="submit" value="Tagasi" name="back"/>
</form>
</body>
</html>
Try these css styles on the form
form{
margin-left:auto;
margin-right: auto;
width: 200px;
padding:30px;
border:1px solid grey;
left:0;
right:0;
}
One method is to set the <form> to display:inline-block and set text-align:center on its container. That ensures that the form's content dictates it's width and that it's always horizontally centered on the page.
body {
text-align: center;
}
form {
display: inline-block;
text-align: left;
background-color: #EEE;
padding: 1em;
}
h1 {
margin: 0 0 .2em;
}
label {
display: block;
margin: 0 0 1em;
}
input[type="text"],
input[type="password"] {
height: 25px;
}
<form>
<h1>Sisse logimine</h1><br />
<label>Kasutajanimi:<br><input type="text" name="username"></label>
<label>Parool:<br><input type="password" name="password"></label>
<input type="submit" value="Logi sisse" name="Sisesta">
<input type="submit" value="Tagasi" name="back">
</form>
I set the border width of these input boxes to 1px. However, for some reason on ios, the top border looks bigger than it should be ( regardless of browser ).
On any other kind of device, the border looks fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
<title>ios rendering test</title>
</head>
<body>
<style media="screen">
input {
border: 1px solid #ccc;
height: 100px;
margin: 5%;
}
</style>
<form class="" action="index.html" method="post">
<input type="text" name="" value="firstname">
<input type="text" name="" value="lastname">
<input type="text" name="" value="email">
<input type="submit" name="submit" value="subscribe">
</form>
</body>
</html>
Since it's an iOS input being targeted, you'll need to remove the default styles using -webkit-appearance: none;
Your Code
input {
-webkit-appearance: none; /* Add this */
border: 1px solid #ccc;
height: 100px;
margin: 5%;
}
Here is an article with more information about the appearance tags.
I have a problem with styling my radio input if :checked with selectivizr. Can you please help me how to make it work with selectivizr. If there is another method how to do it please wirte below. here is link to my site: test_radio_buttons and below is my CSS and HTML code ? Thank you all for your time and effort.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="checked-polyfill.js"></script>
<script>
$( document ).ready(function(){
$('input:radio').checkedPolyfill();
});
</script>
<link href="style.css" rel="stylesheet" />
<title>Radio</title>
</head>
<body>
<form>
<input type="radio" id="musi_se_jmenovat_stejne1" name="address" />
<label for="musi_se_jmenovat_stejne1"></label>
<input type="radio" id="musi_se_jmenovat_stejne2" name="address" />
<label for="musi_se_jmenovat_stejne2"></label>
</form>
</body>
</html>
CSS:
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background: url('radio_un.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"]:checked + label
{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"].checked + label{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Poly-fills like this one here: https://github.com/rdebeasi/checked-polyfill did work for me.
It adds a checked class in IE8 when the onchange event is triggered on the label.
I do remember to have had an issue with selectivizr and making this work.
See the fiddle here: http://fiddle.jshell.net/5a7Gj/15/Tested in IE8 on browser stack and it does not work with selectivr. It does not add any checked class.
input[type="radio"]:checked + label
{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"].checked
{
background: url('radio_in.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
I have the following code:
index.html
<HTML>
<HEAD>
<TITLE>My App</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<div id="logo"><img src="logo.jpg" /></div>
<div id="menu">
<FORM METHOD="LINK" ACTION="new.php">
<INPUT TYPE="submit" VALUE="Create New Entry">
</FORM>
<FORM METHOD="LINK" ACTION="viewall.php">
<INPUT TYPE="submit" VALUE="View All Entries">
</FORM>
<FORM METHOD="LINK" ACTION="list.php">
<INPUT TYPE="submit" VALUE="Generate Mailing List">
</FORM>
</div>
<div id="search">
<form action="search.php" method="post">
Search By First or Last Name:
<input type="text" name="term" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</BODY>
</HTML>
and
style.css
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
div#logo {
position:absolute;
width:290px;
height: 200px;
top: 0px;
left:0px;
background-color: black;
}
div#menu {
position: relative;
width: 150px;
height: 150px;
top: 20px;
left: 140px;
background-color: black;
}
div#search {
position: relative;
width: 265px;
left:25px;
clear: both;
color: white;
background-color: black;
}
It looks fine when I view in Safari, but when I view in FireFox, Chrome, or Opera the image in disappears. It's gone completely in Chrome and Opera, and in FireFox it shows a broken link icon. I know my use of CSS here is not entirely correct, or even best practices, but I still can't figure out why the image doesn't show up? (And what's more, why FireFox shows the broken icon)
file was named .png.jpg, so it didn't show up...newb mistake