I've done everything to try work this out but here's my problem:
It happened after wrapping my table in a form, Anyways, if possible I need this centred unless my centring is correct. Please tell me what I did wrong and what I should do next time!
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Game</title>
</head>
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table>
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}
Its because of the login ID, you have given it 15% width. Increase it to 50 or 60% and it will work.
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
Working example:
http://jsfiddle.net/vcz72sxy/1/
EDIT
I have changed some code from the previous poster, added the align value within the table to center it.
http://jsfiddle.net/kc3gh83h/1/
There are two issues:
You've called id="login" twice, you can only call it once. So the rule for #login is being applied twice. If that was intentional, you want to change it to a class (.login)
The second, which takes care of the issue directly (as #Dan and #JSG have said) - change your width.
Here you go. Use this and you'll be set! Demo: http://jsfiddle.net/hfnqbboj/2
HTML
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table align="center">
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
CSS
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}
Related
I have tried to use justify content but the content contiously stacks on top of the other
below is my code and why i have tried
input
button
input
input
button
Above is how i would like the layout to look
I tried implementing classes for each and every input but coudnt make the not stack on top of each other any help would be greatly aprreciated.
<?php
if (isset($_POST["submit_address"]))
{
$address = $_POST["address"];
$address = str_replace(" ", "+", $address);
?>
<iframe padding ="5px" width="100%" margin="5px" height="600px" src="https://maps.google.com/maps?q=<?php echo $address; ?>&output=embed"></iframe>
<?php
}
if (isset($_POST["submit_coordinates"]))
{
$latitude = $_POST["latitude"];
$longitude = $_POST["longitude"];
?>
<iframe padding ="5px" width="100%" margin="5px" height="600px" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longitude; ?>&output=embed"></iframe>
<?php
}
?>
<!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>Livestock Dashboard</title>
<style>
button{
width: 7%;
height: 45px;
background: #2364d2;
border: none;
border-radius: 5px;
font-size: 22px;
font-weight: 500;
font-family: "Source Sans Pro", sans-serif;
box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
color: #fff;
margin-top: 20px;
cursor: pointer;
}
input{
text-align: center;
width: 50%;
height: 40px;
border-radius: 5px;
box-shadow: none;
border: 1px solid #ced6e0;
transition: all 0.3s ease-in-out;
font-size: 18px;
padding: 5px 15px;
background: none;
color: #1a3b5d;
font-family: "Source Sans Pro", sans-serif;
}
body {
background-image: url('bull.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<form method="POST">
<p>
<input type="text" name="address" placeholder="Enter address">
</p>
<div style="justify-content:left; align-items:center; display:flex;">
<button type="submit" name="submit_address" style ="
">
Submit
</button>
</div>
</form>
<form method="POST">
<p>
<input type="text" name="latitude" placeholder="Enter latitude">
</p>
<p>
<input type="text" name="longitude" placeholder="Enter longitude">
</p>
<div style="justify-content:left; align-items:center; display:flex;">
<button type="submit" name="submit_coordinates">
Submit
</button>
</div>
</form>
</body>
</html>
I tried using justify content on the div but id didnt work
The English is quite difficult to understand but hopefully this will help you.
Add the following to the style in your <form>:
style="display: flex; justify-content: stretch;"
Change the justify-content and center as fit. An easy to understand list of possible options you can use can be found here, or you can use a better documented list from Mozilla.
This will make make your inputs and submit button be next to each other rather than stacked.
A mock on CodePen can be found here.
Also, remove the width: 7%; from your button's style.
I'm just trying to have a label and text box fill the width of a form. I can't believe how much time I've wasted on this simple problem. This would have been SO simple with tables.
Here's the simple HTML:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* { box-sizing: border-box; }
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
And here's how it looks:
All I want is for my text box to fill the rest of the form (the empty area to the right of the text box. I've tried 100%, display:table etc. I want to solve it with HTML and CSS only (no JavaScript or jQuery), and without having to play around with pixel counts or percentages until it looks right.
Thanks in advance.
Here is my solution
Use width: calc(100% - 82px); for the input width
The 82px is equal to width of the label and (1px border * 2) of the input
* {
box-sizing: border-box;
}
label {
width: 80px;
display: inline-block;
}
input {
display: inline-block;
width: calc(100% - 82px);
border: 1px solid #ccc;
font-size: 16px;
}
<form class="back">
<label>Test Label</label><input type="text" name="search" class="">
</form>
You could use the grid layout by defining the grid template.
Here is the link to Mozilla Docs for CSS Grid.
* { box-sizing: border-box; }
.form {
width: 500px;
border-style:solid;
border-color: red;
display: grid;
grid-template-columns: min-content auto;
}
<form class="form">
<label for="Txt">Label:</label>
<input id="Txt" type="text" />
</form>
You should be use this simple way.
Please try: width: calc(100% - 45px) !important; into input#Txt class.
Hope this help.
Let me know further clarification.
input#Txt {
width: calc(100% - 45px) !important;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* { box-sizing: border-box; }
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
Flexbox approach:
form {
display: flex;
}
input {
flex: 1;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" style="width: auto;" />
</form>
</body>
</html>
Using browser-safe CSS rules, you can set width for label and input, then set them to display: inline-block, this way.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style>
label {
display: inline-block;
width: 10%;
}
input {
display: inline-block;
width: 88%;
}
</style>
</head>
<body>
<form style="width: 500px; border-style:solid; border-color: red;">
<label for="Txt">Label:</label>
<input id="Txt" type="text" />
</form>
</body>
</html>
I' m trying some simple exercise to improve my web development skills. I' m doing a simple translator. Of course for the front end I'm using HTML and CSS. For the backend I'm using Java Servlet.
I want to show two textarea one next to the other and two button under the text area on the left for translating and swapping the language(kind of google translate but with two buttons on the left of the first text area).
I achieved in a tricky way(I suppose?) what I want. But I think there is a better way to do it. Here is the fiddle. Someone can give me an hint, or any explanation on how do it or how works for align elements? Thank you!
Code here:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>Translator</title>
</head>
<body>
<h1>Welcome to translator!</h1>
<div class="div1">
<form id="form1">
<textarea class="inline-textarea" id="text1" form="form1"></textarea>
<input type="submit" value="Translate" id="translate">
<input type="submit" value="Swap" id="swap">
</form>
</div>
<div class="div2">
<form id="form2">
<textarea class="inline-textarea" id="text2" form="form2"></textarea>
</form>
</div>
<script type="text/javascript" src="js/jsScript.js"></script>
</body>
</html>
style.css
body {
font-family: 'Open Sans', sans-serif;
}
.div1 {
float: left;
margin-right: 2px;
}
#translate {
display: block;
}
#swap {
float: right;
position: relative;
margin-top: -21.2px;
margin-right: 35px;
}
Here the fiddle:
https://jsfiddle.net/8e6s1d25/
First thing I am not sure if you need two forms. You are just better off with one single form. And I am going to use two columns inside the <form> so that there's the input on the left and output on the right, as how you see in the Google Translate.
Next thing is that, I am not sure why you needed to give the Translate button, a display: block, which is causing you the problem. Combining all the above said, I have made a simple snippet below, that looks like the preview below:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
textarea {
width: 100%;
height: 5em;
border: 1px solid #ccc;
border-radius: 5px;
margin: 0;
}
.input, .output {
float: left;
width: 50%;
padding: 5px;
}
<h1>Welcome to translator!</h1>
<form action="">
<div class="input">
<textarea name="input" id="input"></textarea>
<input type="button" value="Translate" />
<input type="button" value="Swap" />
</div>
<div class="output">
<textarea name="output" id="output"></textarea>
</div>
</form>
Preview
Hope this is helpful. Feel free to ask any question to make yourself clear on the coding standards. What I have used is the one that's being used in live production sites. :)
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 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