I am trying to fix my content inside my div tag. I have only fit in some of the content inside it, but there is more that needs to be put inside it. I need help.
Note I am doing Angular but I need to fix my HTML & CSS only.
My HTML
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
CSS
.button {
padding: 20px 30px;
font-size: 25px;
background-color: lightblue;
position: relative;
top: 28em;
left: 3em;
}
.button:hover {
padding: 22px 32px;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
padding: 20px;
font-size: 30px;
border: 3px black inset;
text-align: center;
position: relative;
top: 3em;
}
Output
You can see the two buttons are not within the div (in grey). How do I expand the div so it will be behind the buttons, providing the background for all the content?
Thanks!
You need to replace your top styles with margin as shown in the fiddle https://jsfiddle.net/saksham_malhotra/cnLrv87f/
By providing top coordinates with position relative, you are shifting your element position without considering the containing element.
It's because you're using position: relative for your address bar and buttons. This shifts that element down by whatever your top value is, relative to where it's normal position is. I would use margin-top to achieve the same effect for your purpose.
.button {
padding: 20px 30px;
font-size: 25px;
background-color: lightblue;
}
.button:hover {
padding: 22px 32px;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
padding: 20px;
font-size: 30px;
border: 3px black inset;
text-align: center;
margin-top: 3em;
}
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
You can read more about the position property here
Try this:
<html>
<head>
<style>
textarea {
width:100%;
max-width:250px;
padding: 0 0 80px 0;
}
.contentBox {
display: inline-block;
background-color: lightgray;
}
.addressBar {
/*some style*/}
.button {/*button style here*/}
</style>
</head>
<body>
<div class="contentBox">
<h1>Please Type In Your Address</h1>
<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
<textarea class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus></textarea>
</form>
<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>
</div>
</body>
</html>
Related
I have a login form section that I have enclosed inside a div. I want this section of the page only to be styled by the css shown below. However, when I add the css in the style, it isn't applied. I think it is down to syntax. I am trying to add styles within styles.
<div class="login-form">
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
The existing css is below (note there is bootstrap enabled and the bottom part of the css is relevant to another part of the site -the intro part and div)
It's in the first part
.login-form {
body {font-family: Arial, Helvetica, sans-serif;}
that I've tried to refer to the div class for the form I want styled.
<style>
.login-form {
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
}
.intro-text {
width: 1000px;
padding:15px;
margin:40;
}
Can someone point out the error with some best practices on applying several styles to one div. I have already applied styles correctly, as can be seen with the
intro-text {
width: 1000px;
padding:15px;
margin:40;
}
which is correctly applied to:
<div class="intro-text">
<h1 class="display-5">Login</h1>
<p>Welcome back</p>
</div>
I cannot figure out how to apply the more complex styles to just the login-form div class and have tried several things.
The css you have is not valid. You cannot nest css blocks like that. I would recommend take a look at the css selectors.
Let's say you want to target a button inside the div with class login-form. Instead of doing this:
.login-form{
button{
//this doesn't work
}
}
You should do this:
.login-form button{
//css here
}
.login-form {
font-family: Arial, Helvetica, sans-serif;
}
.login-form form {border: 3px solid #f1f1f1;}
.login-form input[type=text], .login-form input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.login-form button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.login-form button:hover {
opacity: 0.8;
}
.login-form .cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.login-form .imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
.login-form img.avatar {
width: 40%;
border-radius: 50%;
}
.login-form .container {
padding: 16px;
}
.login-form span.psw {
float: right;
padding-top: 16px;
}
.intro-text {
width: 1000px;
padding:15px;
margin:40;
}
Here is a snippet with the proper css:
<link rel="stylesheet" href="style.css">
<div class="login-form">
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Syntax use is not correct , nesting in css shoud be in you case like
.login-form form {
// css code here
}
so apply selector and space and other selector for nesting properties
so every css rules in your code to be applyed only to this page , should be preceded with parent selector (.login-form) in your case .
but for the body , it cant be applied by this way ,
to apply some font for only this page , you could use by example :
adding class to body in this page then apply css as :
<body class="login-page">
// rest of html
</body>
and css should be :
body.login-page {font-family: Arial, Helvetica, sans-serif;}
Also I forget to mention that the syntax you used before, is like the scss syntax, but it should be precompiled to browser understandable css formt , thus you project should as modern web project to precompile scss to css .
Okay, so maybe I'm not searching properly but I can't seem to find exactly what I'm looking for.
I have a form, let's say something like this:
div.some_form {}
div.some_form>span {
font-weight: bold;
position: relative;
text-align: left;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<br>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
what I want it to do is pretty much keep the inputs centred (which I'm able to do), which is why everything is in a div, I used text-align: center to centre everything, but I want the span element to be stuck to the top left corner of the first input, which I can't seem to do properly.
I mean, I get it, but then once I resize the window, the span shoots off into space (i.e. the text field will expand at a lower rate than the span is, which is great because the text stays centred even with the button attached) and I can't seem to get it to just stick.
(also this seriously isn't homework, I'm just getting into CSS and this is really bothering me..)
any help is obviously very much appreciated!
Thanks in advance :)
Adding a display: block to your span will work. And remove the <br />. You have the class specification wrong. The <span> isn't a direct child there. So > doesn't work:
body {
text-align: center;
}
div.some_form span.some_class {
font-weight: bold;
position: relative;
text-align: left;
display: block;
padding: 0 4.5%;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 45%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
div.some_form {
display: inline-block;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
Preview
Here the answer hope it can help you
.container{
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
}
.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<div class="container">
<span class="some_class">Some text</span>
<div class="input_container">
<input type="text" class="txtfield" />
<input type="submit" class="button" value="Submit" onclick="doSomething()" />
</div>
</div>
</form>
</div>
I have two divs sitting side-by-side inside a form element. Normally, they both line up against the top of the form.
However, when I add p tags(class forget) to the bottom of the second sibling div, the first div is pushed down from the top of the form. The second div stays up against the top of the form element.
I don't understand why the p tags at the bottom of the second sibling div are adding margin/padding to the top of the first div.
One clue is that setting vertical-align: top fixes the problem, but I want to know what is causing it.
form {
color: white;
width: 430px;
height: 80px;
float: right;
border: 1px solid black;
}
.formEmail,
.formPassword {
border: 1px solid white;
width: 165px;
height: 100%;
font-size: 13px;
margin-right: 10px;
display: inline-block;
}
<form id="logIn">
<div class="formEmail">
<p>Email or Phone</p>
<input type="text" name="emailphone">
</div>
<div class="formPassword">
<p>Password</p>
<input type="text" name="password">
<p class="forget">Forget Account?</p>
</div>
</form>
You need to add vertical-align: top to the two divs: https://jsfiddle.net/pobbLs21/ They're set to either baseline or middle I guess in your reset (if you're using one).
Just add overflow:hidden; to the divs
form {
color: white;
width: 430px;
height: 80px;
float: right;
border: 1px solid black;
}
.formEmail,
.formPassword {
border: 1px solid white;
width: 165px;
height: 100%;
font-size: 13px;
margin-right: 10px;
display: inline-block;
overflow: hidden;
}
<form id="logIn">
<div class="formEmail">
<p>Email or Phone</p>
<input type="text" name="emailphone">
</div>
<div class="formPassword">
<p>Password</p>
<input type="text" name="password">
<p class="forget">Forget Account?</p>
</div>
</form>
I want to change my main HTML page. I would like to have the login section at the right side, the paragraph in the middle and the header at the top and in the middle. I tried to change the code in the CSS but nothing.
How it is now:
How I would like to be:
My current website code:
function resetForm() {
// clearing selects
var selects = document.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++)
selects[i].selectedIndex = 0;
return false;
}
window.load(resetForm());
body {
background-color: #ffffff;
margin: 0;
padding: 200px;
}
h3 {
text-align: center;
color: #ff9900;
padding-bottom: 50px;
}
div.container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
div.login#input[type="password"] {
font-size: 20px !important;
border-radius: 2px;
}
input[type="submit"] {
font-size: 18px !important;
font-family: Arial, sans-serif;
color: #ffffff;
background-color: #ff9900;
border: solid;
border-radius: 25px;
}
div.login#input[type="reset"] {
font-size: 18px !important;
font-family: Arial, sans-serif;
color: #ffffff;
background-color: #ff9900;
border: solid;
border-radius: 25px;
}
#footer {
clear: both;
margin-top: 20px;
border-top: 1px solid black;
padding: 20px 0px;
padding-bottom: 20px;
font-size: 70%;
background-color: black;
color: #ff9933;
text-align: center;
text-decoration: none;
bottom: 40px;
}
<div id="container">
<div id="header"></div>statistics</div>
<!--End of Header-->
<!--Pragraph in the center-->
<div id="p">
<p>
Some text
</p>
</div>
<!--End of Pragraph-->
<div id="content">
<div id="content_right">
<div id="login">
<h3>Login</h3>
<form action="login.php" method="POST">
<label>Username:</label>
<br/>
<input class="inputfield" type="text" name="username" size="30" />
<br />
<br/>
<label>Password:</label>
<br/>
<input class="inputfield" type="password" name="password" size="30" />
<br />
<br/>
<input type="submit" value="Login" name="submit" />
<input type="reset" name="reset" value="Clear" />
</form>
<!--End of Login-->
</div>
<!--End of content right-->
</div>
<!--End of content-->
</div>
</div>
<!--End of Container-->
<div id="footer">
footer
</div>
<!--End of Footer-->
You need to research the display CSS property, this will go a long way to helping you reach what you want.
see http://learnlayout.com/display.html and https://css-tricks.com/almanac/properties/d/display/
P.s
please note that the OP was edited so this no longer displays the page was set as HTML5
In HTML5, which you have, the character encoding is displayed differently:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
P.s.s
As Jamie Barker rightly pointed out, your <div id="header"> is not closed. this will cause problems later on. Just add a </div> underneath the header element.
P.s.s.s
Finally, your CSS:
div.container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
These are all referencing using the period (dot) . or the # symbol. But div.container means "the div containing the container class" but this is not so because the "container" identifier is infact an id NOT a class so you need to adjust all your CSS to reference id rather than class as so:
#this is an id identifier in CSS
.this is a class identifier in CSS
You also do not need to reference the div tag itself, so replace the quoted CSS with this:
#container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
#container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
Is there any reason you aren't using absolute positioning over float?
Place all of your html within a container div and apply the following css:
#container {
position:relative;
left: 0;
top: 0;
margin: 0 auto;
}
All of your html elements within the div then use position: absolute and left and top attributes to position them however you want. If you need to give the container a fixed height and / or width.
I have a checkbox within a div that is appearing higher than the text I want it to be aligned with.
Here's how it appears in Firefox:
As you can see, the checkbox is just a few pixels higher than the text. I have tried applying various padding / margins, including negative values, but to no avail.
HTML:
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS:
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
/* Empty */
}
check this jsFiddle
HTML
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
position: relative;
top: 3px;
}
You can wrap both text and input into a div, It's a good practice.
To align both the divs containing text and control accordingly, use display properties
Try:
HTML
<div id="read-confirm-box">
<div class="inline">I Have read the above </div>
<div class="inline"><input type="checkbox" id="checkbox" /></div>
</div>
<label for="checkbox">I Have read the above </label>
<input type="checkbox" id="checkbox" />
<span>I Have read the above </span>
<span><input type="checkbox" id="checkbox" /></span>
CSS
.inline{
display:inline-block;
vertical-align:middle;
}
Fiddle Example
Updated
Try to use following css.
#checkbox {
vertical-align: middle;
}
The checkbox is likely higher for lack of a reset.css (browsers apply their own defaults).
For usability, you should use the label element, rather than wrapping the input and text in extra divs.
Give the input and label the same margin and voila!
HTML
<div id="read-confirm-box">
<input type="checkbox" id="checkbox" />
<label for="checkbox">I Have read the above </label>
</div>
CSS
#read-confirm-box {
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
input {
margin: 3px;
}
label {
float:left;
margin: 3px;
}
http://jsfiddle.net/djungle/x6EUp/1/
Pretty easy fix.
CSS:
#checkbox {
vertical-align:middle;
}
Or as an alternative, forking that fiddle: Fiddle
#checkbox
{
vertical-align:-2px;
}