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.
Related
I'm designing an online clothing store, and on the product's page I want the product info (on the right) to align with the center of the image (on the left) while both of the divs are centered with the page. However, it seems that no matter what I do, the product info is always pushed down to the bottom corner of the image. It works when the image is removed completely, but unless that happens no formatting in CSS will affect the product-info div.
I've tried floating the elements to the left but that negates the text-align that keeps them centered, and any padding, margin, or dimension changes I make to the product-info only adds to the bottom of the div rather than shifting it up. There's probably something obvious that I'm overlooking, but I've been working on this problem for so long and just can't seem to find a fix.
Can someone please help me?
> Screenshot of how it looks <
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="/Media/hoodieblack.png">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
Simply add display: flex; to the main parent, in this case, .product. Then you can use align-items: center; to get them in line with one another.
You can also add max-width: 100%; to the image so it resizes accordingly.
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
}
.product {
display: flex;
align-items: center;
justify-content: center;
}
#product-image {
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="https://dummyimage.com/800/000/fff">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
Hi I am studying and trying to make my website mobile responsive and no matter what I try have had no luck. So I have tried a range of ways to turn a menu into a mobile menu when I resize. I have also been trying to get the content to centre properly when in smaller screen. I have googled alot and worked out most now I just need help finishing it off properly.
Edit: Updated code as per request #https://stackoverflow.com/users/13447870/tobias-kristensen
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
/* Main Body */
body {
background-image: url(Image/footballField.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100hv;
min-width: 100hv;
background-size: 100% 100%;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black
}
/*Header with logo*/
#header {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
padding: 10px;
}
#container1 {
position: relative;
background-color: #FFFFFF;
position: absolute;
min-height: 100vh;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-bottom:120px;
}
/* footer for all pages */
#footer {
position: absolute;
clear: both;
color: white;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-weight: 300;
bottom: 0;
background: linear-gradient(to bottom, #C61618 5%, black 100%);
width: 100%;
height: 100px; /* Footer height */
}
.fa-facebook {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
background: #3B5998;
color: white;
margin-right: 50px;
border-radius: 30%;
} /* Facebook Icon and link in Footer */
* {
box-sizing: border-box;
}
/*Search Field */
input:focus,
textarea:focus,
select:focus {
outline-color: #C61618;
}/* Search Area on Header */
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid black;
float: right;
width: 20%;
background: white;
margin-right: 5%;
} /* Style the search field from W3Schools*/
form.search button {
float: right;
width: 5%;
padding: 10px;
background: #C61618;
color: white;
font-size: 17px;
border: 1px solid black;
border-right: none;
/* Prevent double borders */
cursor: pointer;
} /* Style the submit button from W3Schools */
form.search button:hover {
background: #C61618;
} /* Search button hover */
form.search::after {
content: "";
clear: both;
display: table;
} /* Clear floats on Search from W3Schools */
/*Nav Bar*/
#navbar {
position: relative;
margin-top: 40px;
margin-right: 5%;
margin-left: 8%;
}/*Main White Background*/
li a {
display: inline;
text-decoration: none;
color: white;
font-size: 16px;
} /*link look on Nav Bar */
#navbar ul li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
border-radius: 30px; /*curved corners on buttons*/
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /*Menu look*/
#navbar ul li:hover {
background: black;
} /*Menu hover Colour*/
#navbar .btn.active {
background: black;
} /*Menu active Colour*/
/* Text Styling */
p,
h2,
a {
text-decoration: none;
color: black;
} /*all paragraph text*/
h1 {
text-align: center;
margin-top: 5%;
}/*position of h1*/
h2 {
text-align: center;
margin-top: 5%;
text-decoration: none;
color: black;
} /*position of h2*/
h4 a {
text-decoration: none;
color: black;
}
p {
margin-left: 50px;
margin-right: 50px;
text-align: justify-all;
line-height: 150%;
} /*format text <p> */
/*Index Page*/
#image_index {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
max-width: 30%
} /* Image on home page format */
#image_contact {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
} /* Image on home page format */
#index_table {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
} /* Table Index Page format */
/*Competitions Page */
table.c {
table-layout: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.competition_table p {
text-align: center;
margin-left: auto;
margin-right: auto;
}/* format for <p> Competitions Page */
th {
text-emphasis: bold;
font-size: 20px;
height: 10px;
background-color: lightgrey;
border-color: black;
} /* Table Header*/
table,
th,
td {
padding: 10px;
border-style: solid;
border-color: black;
border-width: thin;
border-collapse: collapse;
}
/* Contact Us Page */
#secretary {
padding-top: 41px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
}
.column1 {
float: left;
width: 40%;
padding: 10px;
}
.right {
width: 75%;
}
.row:after {
/* Clear floats after the columns */
content: "";
display: table;
clear: both;
}
#contact_form {
float: right;
padding-right: 10px;
padding-bottom: 30px;
margin-right: 5%;
width: 50%;
}
* {
box-sizing: border-box;
} /*format for Contact Us form*/
input[type=text],
[type=email],
[type=tel],
select,
textarea,
email {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
} /*format for Contact Us form*/
label {
padding: 12px 12px 12px 0;
display: inline-block;
} /*format for Contact Us form*/
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 20px;
font-weight: bold;
} /*format for Contact Us form*/
input[type=submit]:hover {
background-color: #C61618;
} /*format for Contact Us form*/
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/*Merch Page*/
.merch_order_form {
clear:both;
text-align: left;
margin-bottom: 5%;
margin-right: 5%;
margin-left: 5%;
padding:10px;
}
.col-50 {
float: left;
width: 40%;
margin-left: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.col-45 {
float: right;
width: 40%;
margin-right: 10%;
align-content: inline;
text-align: center;
} /*Column setout for Merch & Information Pages*/
.row:after {
content: "";
display: table;
clear: both;
} /* Clear floats after the columns */
input[type=submit_merch] {
background-color: black;
color: white;
text-align: center;
padding: 12px 20px;
font-size: 30px;
border-radius: 30px;
cursor: pointer;
margin-left: 30%;
margin-top: 10px;
} /* Merch Page Submit Button */
input[type=submit_merch]:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
} /* Merch Page hover change */
#subject {
font-size: 16px;
}
/* Registration Page Submit Button */
.myButton {
box-shadow: inset 0px 0px 0px 2px #0154FA;
background: linear-gradient(to bottom, #0154FA 5%, #283966 100%);
background-color: #0154FA;
border-radius: 30px;
border: 1px solid #4e6096;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 28px;
font-weight: bold;
padding: 21px 76px;
text-decoration: none;
text-shadow: 0px 0px 0px #283966;
text-align: center;
margin-left: 35%;
margin-right: auto;
margin-bottom: 70px;
} /* Merch Page Registration Button */
.myButton:hover {
background: linear-gradient(to bottom, #C61618 5%, black 100%);
background-color: #C61618;
border: 1px solid #C61618;
box-shadow: inset 0px 0px 0px 2px #C61618;
} /* Merch Page Registration Button */
.myButton:active {
position: relative;
top: 1px;
} /* Merch Page Registration Button */
#media screen and (min-width: 800px) {
.column {
width: 100%;
background-image: disabled;
.navbar li, .navbar li a:last-child {
display: none !important;
visibility: hidden !important;
}
}
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
background-image: disabled;
.mobile_navbar li, .mobile_navbar li:last-child {
display: none !important;
visibility: hidden !important;
font-family: "Lucinda Sans", "Arial", sans-serif;
text-decoration: none;
color: black;
text-align: right;
}
.col-25,
.col-75,
.col-50,
.col-45,
input[type=submit] input [type=submit_merch] {
width: 100%;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
#body {
background-color: white;
margin: 0px;
}
}
#container1 {
margin="0px";
background-color: ="white";
}
#mobile_navbar {
display:flex;
margin-left: 100px;
display: inline;
}
.mobile-container {
min-width: 370px;
margin: auto;
padding: auto;
background-color: white;
height: 500px;
color: black;
border-radius: 10px;
}
/* TopNav Menu Code from W3Schools.com Dropdown Button */
.dropbtn {
background-color: #C61618;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #C61618}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<!DOCTYPE html> <!-- Contact Us page for OaklandFC -->
<html lang="en-US">
<head>
<title>Oakland Football Club</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='width=device-width, initial-scale=1' name='viewport' />
<meta name="viewport" content="minimum-scale=0">
<meta name="viewport" content="user-scalable=yes">
<meta charset="UTF-8">
<meta name="description" content="Oakland Football Club">
<meta name="keywords" content="Football, Soccer, Oakland, Club, family">
<meta name="author" content="Simply Designed for You">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Oaklandstyle.css" />
<script src="formValidation.js"></script>
<script src="jquery-3.5.0.js" type="text/javascript"></script>
</head>
<body>
<div id="container1">
<div id="content-wrap">
<div id="header">
<img src="Image/logo.png" alt="Oakland Football logo" />
<form class="search" action="action_page.php">
<!--from W3Schools -->
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="navbar">
<ul>
<li class="btn">Home</li>
<li class="btn">Competitions</li>
<li class="btn">Registration</li>
<li class="btn">Merchandise</li>
<li class="btn">Sponsors</li>
<li class="btn">Information</li>
<li class="btn active">Contact Us</li>
</ul>
</div>
<div id="mobile_navbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
Home
Competitions
Registration
Merchandise
Information
Contact Us
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Contact Us</h1>
</div>
<div class="column1">
<h2>Secretary</h2>
<p>Name: Laci Tanner </p>
<p>Phone: 02 - 6620 3324</p>
<p>Email: secretary#oaktownfa.com.au</p>
<br>
<div id="image_contact" show="#media screen and (max-width: 800px)">
<img src="Image/soccer.jpg" alt="Oakland Football Team Photo" width="380px"/>
</div>
</div>
<div class="column2">
<h2>Contact Us</h2>
<form action="mailto:secretary#oaktownfa.com.au" method="post" enctype="text/plain">
<div id="contact_form">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email</label>
</div>
<div class="col-75">
<input type="email" id="email" name="email" placeholder="Your email address" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="tel">Phone Number</label>
</div>
<div class="col-75">
<input type="tel" id="tel" name="tel" placeholder="Your phone number" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="team">Team</label>
</div>
<div class="col-75">
<select id="team" name="team">
<option value="PleaseChoose">Please Choose</option>
<option value="Adults">Adults</option>
<option value="Under%12s">Under 12s</option>
<option value="Under%6s">Under 6s</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="I%am">I am</label>
</div>
<div>
<form action="/action_page.php">
<input type="radio" id="thinking" name="member" value="thinking">
<label for="thinking">Thinking about joining the club</label><br>
<input type="radio" id="member" name="member" value="member">
<label for="member">Already a member</label><br>
<br>
</form></div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Message</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Message" required style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
</div>
</div>
<footer id="footer">
Copyright © 2020 Simply Designed For You
</footer>
</div>
</body></html>
So this is how it shows when I add it all together. Both menu's and columns not stacking.
Assuming you want to use the same elements in your navbar on both large and small screens I would recommend not having two separate navbars in your HTML document. If you change one of them later, then you'll also need to update the other one.
W3schools has a good, basic tutorial on media queries. Media queries provide you with a way of defining special CSS rules based on the size of the browser. So if your site is opened on a smaller device, your navbar will be formatted according to the code in your media query.
Try to use media query, But first you need to set up your browser and make it like you're working on a phone to preview what you're doing, so first Press F12 (better use chrome), Look for the phone widget on the top-left , click on it, and start working with Media Query.
For example:
#media screen and (max-width:768px) {
body {
background: red!important;
/* That means that on a 768px-width screen the body will be red. */
}
}
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;
}
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>
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.
}