I have the following HTML and CSS files, where the class "table" div is affected by the css for its brother div of class "login", as the dashed border encloses both divs.
What could be the problem and the solution? Many thanks!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="welcome.css">
<title>Vokabeltrainer</title>
</head>
<body>
<div class="left"></div>
<h1>VokabelTester</h1>
<div class="form">
<form action="http://localhost:8080/vokabulary/Welcome" method="get">
<div class="table">
<table>
<tr><th>Sprachen</th></tr>
<tr><td>Englisch<input type="checkbox" value="englisch" name="language" checked="checked"/></td></tr>
<tr><td>Französisch<input type="checkbox" value="franzoesisch" name="language" checked="checked"/></td></tr>
<tr><td>Italienisch<input type="checkbox" value="italienisch" name="language" checked="checked"/></td></tr>
<tr><td>Spanisch<input type="checkbox" value="spanisch" name="language" checked="checked"/></td></tr>
<tr><td>Portugiesisch<input type="checkbox" value="portugiesisch" name="language" checked="checked"/></td></tr>
</table>
</div>
<div class="login">
<h2>Anmeldung</h2>
Name:<input type="text" name="name"/><br/>
Passwort:<input type="password" name="password"/><br/>
Login<input type="radio" name="login" value="login" checked="checked"/><br/>
Registration<input type="radio" name="login" value="registration"/><br/>
<input type="submit" value="LOS GEHT'S"/>
</div>
</form>
</div>
</body>
</html>
CSS:
body{background-color: #6cc034; margin: 0; font-family: Calibri}
h1{margin: 0px;}
.left{display: block; margin: 0;height: 100%; width: 30%; float: left; background-color: green;}
.form{float: left; background-color: orange; width: 50%; border-style: dotted;}
.table{float:left; width:200px; display: block;}
th{font-size: 16pt; width: 150px; text-align: left; height: 60px;}
h2{font-size: 16pt; display: block; background-color: red;}
td{text-align: right; font-size: 14pt;}
.login{font-size: 14pt; display: block; background-color: blue; height: 200px; border-style: dashed;}
Remove the float:left from your .table declaration like so: http://jsbin.com/wanuyewewome/1/edit
I added float: left for the login div which fixed the problem.
Related
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 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 am working with bootstrap. I got a problem. I am using the following classes: form-control and form-inlinel. And here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<div class="center">
<div class="label label-primary">First interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from1">
<input type="text" class="form-control" placeholder="To" id="to1">
</div>
<div class="label label-primary">Second interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from2">
<input type="text" class="form-control" placeholder="To" id="to2">
</div>
<button type="button" class="btn btn-success" id="button">Show intersection</button>
<div class="label label-primary moveDown">
Intersection:
</div>
</div>
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
Here is css:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:0;
margin-top: 5px;
margin-bottom: 5px;
}
.container-fluid
{
padding: 20px;
text-align: center !important;
}
.label
{
font-size: 15px !important;
margin-bottom: 10px !important;
}
.center
{
width: 200px;
margin: 0 auto;
}
.moveDown
{
margin-top: 5px !important;
display: block !important;
}
.label.moveDown
{
display: inline-block !important;
}
And now about the problem. If you start the html on medium screen it is exactly okay and exactly what I want. However, try to resize and you will notice the problem. It is input the thing that is not satisfies me, it moves to left on small enough screen. If you know how I can tackle that help me, please.
If you change this part of your CSS to read:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:0 auto;
margin-top: 5px;
margin-bottom: 5px;
}
The Margin: 0 Auto; attribute force center the inputs for you!
It could even be shortened to:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:5px auto;
}
To take into account the 5px margin you've added.
Hope this helps!
There are two ways you can make it stays centred.
In the element input[type="text"], add the value auto in margin and it will stay centred.
Or you can add the property display: inline-block; in input[type="text"].
It works both ways.
EDIT: The reason that it doesn't stay centred when reduced to mobile size is because Bootstrap has set the element input as block; pushing it to the left side.
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 100px;
margin: 5px auto;
}
.container-fluid {
padding: 20px;
text-align: center !important;
}
.label {
font-size: 15px !important;
margin-bottom: 10px !important;
}
.center {
width: 200px;
margin: 0 auto;
}
.moveDown {
margin-top: 5px !important;
display: block !important;
}
.label.moveDown {
display: inline-block !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<div class="center">
<div class="label label-primary">First interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from1">
<input type="text" class="form-control" placeholder="To" id="to1">
</div>
<div class="label label-primary">Second interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from2">
<input type="text" class="form-control" placeholder="To" id="to2">
</div>
<button type="button" class="btn btn-success" id="button">Show intersection</button>
<div class="label label-primary moveDown">
Intersection:
</div>
</div>
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
Here is a fiddle
I removed the form-inline and changed it to it's own custom class (I just called it inputs for the sake of this example). Then I added simply added this CSS:
.inputs {
padding-left: 3.5em;
}
You can slide the fiddle back and forth now and see that it stays in the center.
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;
}
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