My website is VivasCoaching. I have been trying to eliminate some of the space on sides for the middle_column and right_column so that it looks a little more condensed but I am not too sure how to go about doing that. I also made a linkswrapper div so that I could add a background color to the div that my navigation sits in but I can't seem to get it working. Here is my code:
html{
height:100%;
width:100%
}
header{
margin-left: 20px;
margin-bottom:5px;
}
body{
font-family: "Comic Sans MS", sans-serif;
}
h1,h2,h3{
color: #112C84;
}
a:link {
color: #112C84;
text-decoration: none;
font-size: 120%;
}
/*-------NAV STYLING------------*/
#mainlinks li{
float:left;
margin-left:120px;
}
/*---------- COLUMN STYLING ----------*/
.linkswrapper{
background-color: red;
}
.middle_column{
float:left;
text-align:center;
width:70%;
margin:2px;
margin-left: 20px;
padding:10px;
}
.right_column{
float:left;
text-align:center;
width:10%;
margin:5px;
}
/*---------- MOBILE --------------*/
<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" width="465" height="135">
</header>
<div class="linkswrapper">
<nav id="mainlinks">
<ul>
<li>Main</li>
<li>About Us</li>
<li>Courses</li>
<li>Register</li>
</ul>
</nav>
</div>
<div class="middle_column">
<img src="Images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style=" width: 80%; height: auto;">
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</div>
<div class="right_column">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" />
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" />
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" />
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit"/>
</form>
</div>
</body>
</html>
You need to set your image to 100% or reduce you middle_column's width
<div class="middle_column">
<img src="Images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style="width: 100%;height: auto;">
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</div>
and about right column there is width set at 10% if middle_column's width is 70% then it should be 30%;
change this into css.
.right_column{width:30%;}
.linkswrapper set height/ padding for this to show background color.
.linkswrapper{height:30px;}
NOTE: i think your footer should also out of from the middle_column.
The problem with the background not showing is that you haven't provided any height for your 'linkswrapper' div. Give it some height in your css, and it will show that red color.
.linkswrapper {
height: 40px;
}
This should do the trick.
I added bootstrap for responsiveness and also it clears the white space try this code
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<header class="col-md-12 col-sm-12 col-xs-12 thumbnail">
<img src="images/logo.png" alt="logo" width="465" height="135">
</header>
<div class="linkswrapper col-md-12" style="text-align:center">
<nav id="mainlinks">
<ul>
<li>Main</li>
<li>About Us</li>
<li>Courses</li>
<li>Register</li>
</ul>
</nav>
</div>
<div class="middle_column col-md-8 thumbnail" style="border-style:none;">
<img src="images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style=" width: 80%; height: auto;">
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</div>
<div class="right_column col-md-4" style="border-style:none;">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" class="form-control" />
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" class="form-control"/>
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" class="form-control"/>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here" class="form-control">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!" class="form-control"></textarea>
<input type="submit" id="submit"/>
</form>
</div>
</body>
</html>
middle_column's width is 70% so you need to set right column width to 30% so that it will come side by side and looks perfect.
.middle_column { width:70%; }
.right_column { width:30%; }
Related
Nothing seems to make the image size stay inside the dimensions of the div.
Here is the html code and the css code that corresponds to it.
I have tried max width max height as well as object contain and width and height set to 100%
HTML:
<div class="container">
<div class="center">
<div class="row">
<div class="col-md-4">
<form asp-action="SignIn">
<div class="logo-container">
<img src="~/Assets/SignUp.png" alt="logo image" />
</div>
<h4>Sign up to Snippet</h4>
<div class="form-group">
<input class="form-control" placeholder="Full Name" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Email" type="email" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Phone Number" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Company" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Title" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Confirm Password" type="password" />
</div>
<div class="form-group">
<input type="submit" value="Sign up" class="btn" />
</div>
</form>
</div>
</div>
</div>
</div>
CSS:
.container {
background-color: white;
width: 50%;
}
.logo-container {
width: 80%;
max-height: 400px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
you would need to make the display on the div inline-block and set it's dimensions. Then the img will take % from its parent
div{
height:100px;
width:100px;
display:inline-block;}
img{
height:100%;
width:100%;
}
#a{
width:50%;
height:50%;
display:block;
}
<div>
<img src = "https://via.placeholder.com/200x200">
</div>
<div id='a'>
<img src = "https://via.placeholder.com/200x200">
</div>
Weird!
Is your css file linked properly?
are you sure there are no spelling mistakes on class names?
maybe try setting img as img {display: inline-block;}
Else, you can just add a overflow of hidden on the img's parent div .logo-container {overflow: hidden}
Also check if you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside your <head></head>. It's a very important tag/attribute that displays page based on users screen size (makes your site responsive).
I'm trying to make a form but when I try to centralise it, it just stay tight to the left side of #wrapper. It reacts to margin-top but not anything to do with going across. I've tried putting a value on margin, using margin-left and still nothing. I'm pretty sure I've followed the YouTube tutorial I'm working with character for character so not sure where I've gone wrong, does anybody have any ideas?
body {
padding: 0;
margin: 0;
background-color: #ccc;
}
#wrapper {
width: 1000px;
background-color: #FFF;
margin: 0px auto;
min-height: 400px;
margin-top: 40px;
border: 1px solid #999;
border-bottom: 3px solid #999;
border-radius: 5px;
}
#formDiv {
width: 200px;
margin: 0px auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv"></div>
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>
You closed your formdiv tag to early. Use this:
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv">
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</div>
</body>
</html>
If you need to center it, you also need to center form element
#wrapper form{
width: 180px;
margin: 0 auto;
}
http://jsfiddle.net/47ku1qud/
I am trying to make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.
Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...
You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!
I am trying to center my form but even trying in all possible ways I can I am not able to achieve it.
.content {
margin: 0 auto;
padding: 0 1em;
max-width: 768px;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::Members Area::</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
</head>
<body>
<div class="page-wrap">
<div class="header">
<h1>heading</h1>
<h2 id="msg">Heading</h2>
</div>
<div class="content">
<form class="pure-form" action="" method="post" id='loginform'>
<div class="fields">
<fieldset class="pure-group center" >
<input type="text" required autofocus class="pure-input-1-2" value="" name="username" id="username" placeholder="Username">
<input type="password" required class="pure-input-1-2" name="password" id="password" placeholder="Password">
<input type="email" class="pure-input-1-2" value="" name="email" id="email" placeholder="Email">
<input type="hidden" name="type" value="login" id="type">
</fieldset>
</div>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="loginbutton" id="button" value="login">Sign in</button>
<div class="login-links">
Forgot password ?
Already have an account ? <strong>Sign in</strong>
<br />
Don't have an account ? <strong>Sign Up</strong>
</div>
</form>
</div>
</div>
</body>
</html>
The text and buttons in the field are centered but the input fields are not centered I tried adding width to the content but it didn't helped if I add <center> it works But I want to do it with css please help.
set .pure-form .pure-group input to display: inline-block instead of display: block in pure-min.css
or just override it in another stylesheet:
.pure-form .pure-group input{
display: inline-block;
}
FIDDLE