I have just started learning html and css3. trying to create a login page but when I am trying to add once check box its not inline with label. When I run the same code only for check box its inline. not able to understand what is the exact issue.
HTML Code is
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
CSS code is
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
}
When I include the same in my complete html code and css code the check box and label are not perfect.
Complete HTML code is.
<!doctype html>
<head>
<title>Dchamps-Signin</title>
<style>
body {
background-image: url("bg_signin.jpg");
background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="signin.css">
</head>
<body>
<header>
<div class="header">
<div>
</header>
<div id="wrapper">
<div class="logo">
<img src="Logo_FF.gif">
</div>
<div class="heading">
Sign in to your account
</div>
<div id="subwrapper">
<div class="un">
Username
</div>
<input type="text" size="60">
<div class="pw">
Password
</div>
<input type="text" size="60">
<div class="signin">
<button class="button">Sign in</button>
</div>
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
<div class="needhelp">
Need Help?
</div>
</div>
</div>
<footer>
<div class="footer">
<ul>
<li>Help</li>
<li>Terms</li>
<li>CompanyInfo</li>
</ul>
</div>
</footer>
</body>
</html>
and My complete CSS Code
.header {
width: 100%;
height: 50px;
margin-bottom: 25;
}
#wrapper{
width: 800px;
margin: 0 auto;
float: center;
text -align: center;
}
#wrapper .logo{
margin-top: 25px;
text-align: center;
}
#wrapper .heading{
padding-top: 20px;
font-size: 45px;
color: #e94324;
text-align: center;
}
#wrapper #subwrapper {
width: 400px;
margin: 0 auto;
}
#wrapper #subwrapper .un {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper .pw {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px;
}
#wrapper #subwrapper .signin{
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
}
#wrapper #subwrapper .button{
background-color: #f26534;
height: 65px;
width: 380px;
font-size: 35px;
/*-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;*/
color: #ffffff;
top: 55%;
}
#wrapper #subwrapper form {
}
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
position: relative;
}
#wrapper #subwrapper .needhelp{
float: right;
color: #f6ec28;
padding-bottom: 80px;
}
.footer{
height: 20px;
clear: both;
border-top: 1px solid #254A73;
}
.footer ul li{
float: right;
display:inline-block;
margin-right: 20px;
color: #ffffff;
}
I am not sure why the check box is not in line.
Regards,
KJ
Here is a fiddle with the fixed checkbox alignment issue, it is just a quick fix but you should try to think about your structure and how you style: http://jsfiddle.net/n2b93zaz/2/
#wrapper #subwrapper .checkbox1 {
display: inline-block;
float: left;
font-size: 20px;
color: #000000;
position: relative;
}
/*Added this css rule to override the input properties set earlier*/
#wrapper #subwrapper .checkbox1 input{
height:auto;
}
Your problem this:
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px; //This is your problem. Change height to auto or without value.
}
Related
I recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<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">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
I'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
What I would like is to have a column of labels, and to the right a column of text boxes approximately a few tabs apart and all aligned on (their respective) margins.
So far I have this. However when I resize the screen my text boxes move. How can I make them fixed?
This is the CSS:
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color:#ffffff;
padding-left: 9em;
padding-right: 9em;
}
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
This is the HTML:
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<br>
<label>input one:</label>
<input type="text" class="myform" value="0" /><br><br>
<label>input two:</label>
<input type="text" class="myform" value="0" /></br>
</br>
</form>
</div>
EDIT:
I've figured it out:
Add this:
#one label {
display: inline-block;
width: 270px;
}
And take away:
position: absolute;
right: 800px;
from
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
try to give the label a width:
label {
width: 100px;
}
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color: #ffffff;
height: 1.5em;
}
.myform {
text-align: left;
position: absolute;
right: 800px;
}
.leftCol {
float: left;
width: 50%
}
.rightCol {
float: right;
width: 50%
}
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<div class="leftCol">
<label>input one:</label>
<input type="text" value="0" />
</div>
<div class="rightCol">
<label>input two:</label>
<input type="text" value="0" />
</div>
</form>
</div>
I removed the position:absolute from the inputs (because in my screen they where way of, that's why you should use it if nothing else works) and then added a margin-right on the form labels. demo;
Relevant CSS
#one label{
margin-right:10px;
}
Update
I've added a fixed width to ammend for the possibility of labels with differente text lengths, here it is:
#one label{
display:inline-block;
margin-right:10px;
width:150px;
}
You should change width:150px to whatever you want it to be :)
Hope it helps!
I'm using this CSS track to get the hang of what's happening in the browser. However, the last assignment was an incomplete success. How can I push the post-updates section not only right, but to the top of the page?. (So far I've tried position: absolute without much luck).
ed: Both answers helped, I am grateful.
You can try this:
Working Fiddle here
#post-update {
position:absolute;
top:0; right:0;
}
Good Luck...
The <div id="post-update"> needs to be floated right and the width of the header narrowed to fit in the screen.
JSFiddle Demo
HTML
<div id="content">
<div id="header">
<h1 id="stf">Stanford Connection</h1>
<img src="//i62.tinypic.com/i2onyf.gif" alt="I'm a tree"/>
</div>
<div id="about">
<img src="//i62.tinypic.com/2vnkmtl.jpg" alt="Molly"/>
<h2 class="section-heading">About Me</h2>
<p><strong>Birthday:</strong> December 8, 2001</p>
<p><strong>Gender:</strong> Female</p>
<h2 class="section-heading">Friends</h2>
<p><strong>Patrick Young</strong></p>
<p><strong>Chloe Cox</strong></p>
</div>
<div id="updates">
<h1>Molly the FloPup</h1>
<h2 class="section-heading">Status Updates</h2>
<p>When am I going to get fed?</p>
<p>I want to go for a walk. </p>
<p>There's a squirrel on the patio, why won't Patrick let me chase it? </p>
<p>I really like summer, because I get to sun myself on the patio </p>
</div>
</div>
<div id="post-update">
<h2 class="section-heading">Post Updates</h2>
<form action="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<input type="button" value="Submit New Update" align="left"/>
</form>
</div>
CSS
body {
padding: 0.5em;
}
strong {
font-weight: bold;
}
h1 {
font-size: 32pt;
text-indent: 1em;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
#stf {
margin-left:1em;
line-height: 2.5em;
display: inline;
vertical-align: top;
}
#content {
width:50em;
float:left;
}
#header {
background-color: #9A0000;
color: white;
height: 120px;
}
#header img {
display: inline;
vertical-align: top;
float: right;
}
.section-heading {
border-top: 3px solid black;
border-bottom: 3px solid black;
background-color: #CC9191;
font-size: 13pt;
padding-left: 0.5em;
padding-bottom: 0.3em;
padding-top: 0.3em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
#about {
width: 200px;
font-family: sans-serif;
font-size: 12pt;
float: left;
}
#about img {
margin-top: 7px;
}
#updates {
/* background: #AA4; */
float:left;
margin-left:10px;
}
#updates p {
border-top: 2px solid black;
line-height: 2em;
}
#post-update {
float: right;
}
textarea {
width: 17em;
height: 7em;
}