Below is my implementation of some HTML and CSS that I created. I am having trouble with the width of some buttons within my container div. I want it so that somehow I can always ensure that width of the button elements are always 50% of what the div that it is in. This is the image I wanted to recreate:
https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png
Here is my attempt:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 100px;
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 100px;
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
The problem I am having is with the save-button and share-button, but also the give-button and giving-input classes. I don't necessarily want to hard code the width here to make it so that they align properly. Rather, if there is a programmatic way so that I can set them to width: 50% of the parent div, as opposed to hard coding the widths that would be great. I tried to set the class .give {width: 100%} and then set the .giving-input, .give-button, .save-button, .share-button: {width: 50%} but that didn't work for me. Any tips or help would be appreciated. Thanks!
If you set all inputs/buttons width to 49% and remove the margin-left you had there everything should work (I also changed one of your containers from inline-block back to block to make sure it takes 100% of the width).
Here is the fix to your code:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 49%;
font-weight: bold;
padding: 10px;
}
.give {
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 49%;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50" />
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
you can split that in to 2 pieces ,each have width 50%.but here also applying a padding of 10px ,so you can use the function calc(50% - 10px); to get the exact value.
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: calc(50% - 10px);
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: calc(50% - 10px);
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
Related
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(21 answers)
Closed 4 months ago.
I created a simple form using HTML and CSS, but when I tried inspecting it on my browser by adjusting the width everything goes out of place i.e. I want the responsiveness of the website to smartly scale components to a smaller screen size.
So here's my form at different widths:
initial #1903px (as expected) adjusted #1619px (as expected) adjusted #1164px (not as expected i.e. distribute, buy and sell should maintain some distance away from the margin of fullname) adjusted #1103px (not as expected i.e. distribute, buy and sell should be together) adjusted #784px (not as expected i.e. distribute, buy and sell should be together) adjusted #483px (not as expected i.e. distribute, buy and sell should be together, drop-down-arrow for distribution-route falls out of place)
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<!--Form-->
<section class="applicant">
<div class="login-center">
<div class="text">
<h2>CREATE</h2>
</div>
<div class="links">
<button type="button" class="app-button active">Distribute</button>
<button type="button" class="app-button">Buy</button>
<button type="button" class="app-button">Sell</button>
</div>
<div class="form-u">
<form action="" class="form">
<label for="uname"><b>Full Name:</b></label>
<input type="text" name="student matric no"placeholder="Enter full name"required>
<label for="psw"><b>Password:</b></label>
<input type="password" name="password" placeholder="Enter password"required>
<label for="sem"><b>Location:</b></label>
<div class="selector">
<div id="selectField">
<p id="selectText">Select a Location</p>
<img src="logo/arrow_down.png" alt="" id="arrowIcon">
</div>
</div>
<button type="submit" class="button-u">SUBMIT</button>
</form>
</div>
</div>
</section>
<!--Here is the CSS:-->
<style>
* {
box-sizing: border-box;
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
font-size: 16px;
user-select: none;
}
/* APPLICATION */
.applicant {
width: 60%;
margin: auto;
text-align: left;
margin: 90px auto;
padding-top: 100px;
padding-bottom: 100px;
}
.login-center {
height: 100%;
flex-basis: 41%;
background: #ffffff;
padding: 35px 5px 0px 5px;
box-sizing: border-box;
box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
text-align: center;
font-size: 35px;
font-weight: 600;
color: #000;
}
.links {
text-align: center;
margin-left: -20px;
margin-right: -20px;
margin: 0 auto;
padding-top: 50px;
}
.app-button {
color: #c4c4c4;
background-color: #ffffff;
border: 1px solid #000;
font-weight: bold;
font-size: 17px;
width: 200px;
margin: 0 20px;
display: inline-block;
line-height: 40px;
padding: 5px;
cursor: pointer;
}
.app-button:hover {
background: #c4c4c4;
color: #000000;
transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
border: 1px solid #c4c4c4;
background-color: #c4c4c4;
color: #000;
}
/* FORM */
.form input::placeholder {
font-size: 14px;
color: #000;
}
.form label {
color: #000;
margin: 20px 0;
font-size: 17px;
}
.form-u {
margin: 70px 0;
padding: 0px 100px;
}
.form input {
width: 100%;
padding: 20px;
margin: 20px 0;
box-sizing: border-box;
border: none;
outline: none;
background: #ffffff;
border: 1.7px solid #e1e1e1;
}
.form input:focus {
border-color: #c4c4c4;
box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
color: #c4c4c4;
background-color: #000;
border: 1px solid rg#c4c4c4;
font-weight: bold;
font-size: 17px;
width: 100%;
margin: 40px 0;
display: inline-block;
line-height: 40px;
padding: 5px;
cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
font-size: 15px;
color: #000;
}
.selector {
width: 100%;
padding-top: 20px;
margin-bottom: 25px;
position: relative;
}
#selectField p {
font-size: 15px;
}
#selectField {
width: 100%;
background: #ffffff;
box-sizing: border-box;
border: 1px solid #c4c4c4;
padding: 20px 20px;
color: #000;
font-size: 15px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
position: relative;
}
/*RESPONSIVE*/
/* WHAT DO I DO ? */
</style>
My goal is to use media query to make the form responsive on all screens, please how can I make my form smartly responsive?
Your Question is how to use media query, right?
it's really simple. lets says I have button with width 200px. and I want width button become smaller in smaller device.
/* // Extra small devices (portrait phones, less than 576px) */
#media (max-width: 575.98px) {
button{
width: 100px;
}
}
/* // Small devices (landscape phones, 576px and up) */
#media (min-width: 576px) and (max-width: 767.98px) {
button{
width: 150px;
}
}
/* // Medium devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991.98px) {
button{
width: 180px;
}
}
/* // Large devices (desktops, 992px and up) */
#media (min-width: 992px) and (max-width: 1199.98px) {
button{
width: 190px;
}
}
/* // Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
button{
width: 200px;
}
}
just add the media query on your css and add element or classes name that you want to customize into each media queries.
You can use the vw, vh, vmin and vmax units to size your content relative to your viewport size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<!--Form-->
<section class="applicant">
<div class="login-center">
<div class="text">
<h2>CREATE</h2>
</div>
<div class="links">
<button type="button" class="app-button active">Distribute</button>
<button type="button" class="app-button">Buy</button>
<button type="button" class="app-button">Sell</button>
</div>
<div class="form-u">
<form action="" class="form">
<label for="uname"><b>Full Name:</b></label>
<input type="text" name="student matric no"placeholder="Enter full name"required>
<label for="psw"><b>Password:</b></label>
<input type="password" name="password" placeholder="Enter password"required>
<label for="sem"><b>Location:</b></label>
<div class="selector">
<div id="selectField">
<p id="selectText">Select a Location</p>
<img src="logo/arrow_down.png" alt="" id="arrowIcon">
</div>
</div>
<button type="submit" class="button-u">SUBMIT</button>
</form>
</div>
</div>
</section>
<!--Here is the CSS:-->
<style>
* {
box-sizing: border-box;
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
font-size: 1vw;
user-select: none;
}
/* APPLICATION */
.applicant {
width: 60%;
margin: auto;
text-align: left;
margin: 6.2vw auto;
padding-top: 6.5vw;
padding-bottom: 6.5vw;
}
.login-center {
height: 100%;
flex-basis: 41%;
background: #ffffff;
padding: 2.5vw 0.2vw 0px 0.2vw;
box-sizing: border-box;
box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
text-align: center;
font-size: 3vw;
font-weight: 600;
color: #000;
}
.links {
text-align: center;
margin-left: -1.3vw;
margin-right: -1.3vw;
margin: 0 auto;
padding-top: 3.2vw;
}
.app-button {
color: #c4c4c4;
background-color: #ffffff;
border: 1px solid #000;
font-weight: bold;
font-size: 1vw;
width: 13vw;
margin: 0 1.3vw;
display: inline-block;
line-height: 2.6vw;
padding: 0.2vw;
cursor: pointer;
}
.app-button:hover {
background: #c4c4c4;
color: #000000;
transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
border: 1px solid #c4c4c4;
background-color: #c4c4c4;
color: #000;
}
/* FORM */
.form input::placeholder {
font-size: 1vw;
color: #000;
}
.form label {
color: #000;
margin: 1.3vw 0;
font-size: 1vw;
}
.form-u {
margin: 4.5vw 0;
padding: 0px 6.5vw;
}
.form input {
width: 100%;
padding: 1.3vw;
margin: 1.3vw 0;
box-sizing: border-box;
border: none;
outline: none;
background: #ffffff;
border: 1.7px solid #e1e1e1;
}
.form input:focus {
border-color: #c4c4c4;
box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
color: #c4c4c4;
background-color: #000;
border: 1px solid rg#c4c4c4;
font-weight: bold;
font-size: 1vw;
width: 100%;
margin: 2.6vw 0;
display: inline-block;
line-height: 2.5vw;
padding: 0.3vw;
cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
font-size: 1vw;
color: #000;
}
.selector {
width: 100%;
padding-top: 1.3vw;
margin-bottom: 1.5vw;
position: relative;
}
#selectField p {
font-size: 1vw;
}
#selectField {
width: 100%;
background: #ffffff;
box-sizing: border-box;
border: 1px solid #c4c4c4;
padding: 1.3vw 1.3vw;
color: #000;
font-size: 1vw;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
position: relative;
}
/* I only used vw here, but it's not necessarily the best approach */
</style>
You can quickly look up the CSS Units, and google for each in depth if you need more clarification.
Also, if you need to know your viewport size: What is my viewport.
I'm working with this code:
$('.tab1-c').show();
$('.one').click(function(){
"use strict";
$('.tab1-c').show();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.two').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').show();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.three').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').show();
$('.tab4-c').hide();
});
$('.four').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').show();
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
I would like for the element below each category to remain active when I hover over the other categories. I don't want it to jump back to its original position when clicking a different category. I want it to remain depending on which category I click.
Help please?
This is possible by using a little extra CSS and jQuery (I added #oneActive, #twoActive... ). Additionally, I cleaned up your jQuery a bit and rewrote most of it to get active to work.
$('.tab1-c').show();
mapping = {
"one":"tab1-c",
"two":"tab2-c",
"three":"tab3-c",
"four":"tab4-c"
};
$('.one, .two, .three, .four').click(function(){
$('.' + mapping[$(this).attr("class")])
.show()
.siblings()
.hide();
$(this)
.attr('id', $(this).attr("class") + "Active")
.siblings()
.attr("id","");
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr, #twoActive ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr, #threeActive ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr, #fourActive ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
<div>
<div class="tab1-c">test1</div>
<div class="tab2-c">test2</div>
<div class="tab3-c">test3</div>
<div class="tab4-c">test4</div>
</div>
I have been trying to get the below code working for the past 2 hours with no luck. Can anyone see where I am having issues?
Snippet:
<script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
</script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to<br> <span id="color">*SELECTED_COLOUR*</span></div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme<br>
<div class="color-select-table">
<div class="color-select-orange" onclick="swapStyleSheet('_scripts/default.css')">Orange</div><br>
<div class="color-select-green" onclick="swapStyleSheet('_scripts/green.css')">Green</div><br>
<div class="color-select-blue" onclick="swapStyleSheet('_scripts/blue.css')">Blue</div>
</div>
</div><!--END COLOR-SELECT-->
</div><!--END THEMES-->
</div><!--END OF CUSTOMISER-->
The swapStyleSheet command works fine, but the text change for #color and the display change for .messageBox does not.
jQuery's show() and hide() are not animated by default, and doesn't support delay() as they don't add the the FX queue.
When the delay doesn't work, the elements are hidden right away, and never made visible for two seconds.
To make them animated, one has to pass in a number, and even zero should do it
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
console.log('ds')
$('.messageBox').show().delay(2000).hide(0);
$('#color').text('Orange').show().delay(2000).hide(0);
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to
<br> <span id="color">*SELECTED_COLOUR*</span>
</div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme
<br>
<div class="color-select-table">
<div class="color-select-orange">Orange</div>
<br>
<div class="color-select-green">Green</div>
<br>
<div class="color-select-blue">Blue</div>
</div>
</div>
</div>
</div>
I have a nav menu which has dropdown lists, and I have two problems atm:
I have the menu that when you click on a parent li, it will show its submenu, and when you click on another parent li or elsewhere in the page, it will hide.
On the first li.parent, i have a login form. The code I have won't let me click on the form to enter the login details. It will hide if I click on it.
How can I fill in the login form or click on it without it being hidden? But when I click elsewhere on the page it will close?
And
2) I want to have the li.parent to change its background color when I open one of its submenu. And return to his normal background color when closing the submenu.
//HEADER NAV-BAR SCRIPTS:
//Show Submenus when clicking on Parent / Hide Submenus when clicking other parent/elsewhere
function hide_sub_navs() {
$('.parent ul').hide().removeClass("shown");
}
$(function() {
hide_sub_navs();
$(".parent").click(function(event) {
event.stopPropagation();
var clicked = this;
var sub_menu = $(clicked).find("ul");
if (sub_menu.hasClass("shown")) {
sub_menu.hide().removeClass("shown");
} else {
sub_menu.show().addClass("shown");
$(".parent").each(function() {
var next_li = this;
if (next_li != clicked) {
$(next_li).find("ul").hide().removeClass("shown");
}
});
}
});
$(window).click(hide_sub_navs);
});
/** NAV MENU **/
div#nav-bar {
float: right;
display: inline-block;
height: 34px;
width: 40%;
clear: right;
padding: 0px 20px;
background-color: #FFF;
overflow: hidden;
}
/** Main Menu **/
div#nav-bar ul {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
padding: 0px auto;
margin-top: 7px;
margin-bottom: 0;
margin-right: 10px;
margin-left: auto;
text-align: center;
width: auto;
height: 25px;
list-style-type: none;
font-family: Roboto, sans-serif;
background-color: #FFF;
display: block;
}
/** Titles **/
div#nav-bar ul li.title, li.parent {
display: inline-block;
height: 28px;
width: auto;
line-height: 28px;
padding: 0px 5px;
margin: 0px 5px;
position: relative;
border-radius: 3px;
font-weight: 800;
color: #005D96;
font-size: 14px;
}
/*Change Main Menu li background when hovering*/
div#nav-bar ul li:hover {
background-color: rgba(0, 184, 227, 0.1);
}
div#nav-bar ul li div#register li:hover {
background-color: inherit;
}
div#nav-bar ul#mainmenu li a#home {
display: inline-block;
text-decoration: none;
color: inherit;
width: auto;
height: 28px;
margin: 0px 5px;
padding: 0px 5px;
font-weight: 800;
color: #005D96;
font-size: 14px;
line-height: 28px;
position: relative;
border-radius: 3px;
}
/** Submenus **/
div#nav-bar ul ul {
height: 0 auto;
width: 0 auto;
position: absolute;
z-index: 1000;
background-color: #004469;
margin-top: 28px;
margin-right: 0px;
margin-left: 0px;
padding: 0px 10px;
border-radius: 3px;
display: none;
}
div#nav-bar ul ul li.child-element {
background-color: transparent;
font-weight: lighter;
font-size: 12.5px;
color: #FFF;
display: inline-block;
float: left;
height: 25px;
width: auto;
text-align: left;
line-height: 30px;
margin-top: 5px;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
padding: 0px 10px;
border-radius: 3px;
}
div#nav-bar ul ul li a {
display: inline-block;
text-decoration: none;
color: inherit;
height: 27px;
font-weight: lighter;
color: #FFF;
font-size: 12.5px;
border-radius: 3px;
}
/** Submenu 1 - Account **/
div#nav-bar ul ul#submenu1 {
width: 190px;
height: 240px;
}
/*SUBMENU 1 - LOGIN FORM*/
form {
border: none;
font-weight: lighter;
}
form p {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.9em;
text-align: center;
line-height: 20px;
height: 15px;
float: center;
margin-top: 10px;
}
form label b {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.8em;
line-height: 20px;
height: 15px;
float: left;
}
input[type=text], input[type=password] {
width: 100%;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: rgba(0, 208, 244, 1);
color: white;
font-size: 0.8em;
padding: 5px 5px;
margin-top: 10px;
margin-bottom: 0px;
border: none;
cursor: pointer;
width: 30%;
float: right;
}
div#rememberme {
font-size: 0.8em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
float: left;
padding: 0 10px;
margin: 8px 0;
}
div#forgotpsw p {
height: 20px;
width: auto;
position: relative;
top: -10px;
float: right;
font-family: Roboto, sans-serif;
font-size: 0.8em;
font-weight: lighter;
color: #FFF;
line-height: 15px;
}
div#forgotpsw p a.forgot {
display: inline-block;
height: auto;
text-decoration: underline;
width: auto;
font-family: Roboto, sans-serif;
font-size: 1em;
font-weight: lighter;
padding: 0px 2px;
}
/*Register*/
div#register {
display: inline-block;
margin-top: -10px;
width: 210px;
height: 50px;
position: relative;
left: -10px;
border-radius: 3px;
background-color: #00598A;
font-weight: lighter;
}
div#register li p.register {
font-size: 0.85em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
margin: 0px 10px;;
height: 50px;
line-height: 25px;
text-align: center;
}
div#register li p a.register {
display: inline-block;
margin: 0;
padding: 0;
text-decoration: underline;
text-decoration-color: #FFF;
font-family: Roboto, sans-serif;
font-size: 1em;
}
.container {
padding: 0;
padding-bottom: 10px;
height: 170px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
}
/** Submenu 2 - Manage Bookings **/
div#nav-bar ul ul#submenu2 {
width: 170px;
height: 130px;
}
/** Submenu 3 - Support **/
div#nav-bar ul ul#submenu3 {
width: 140px;
height: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="nav-bar">
<ul id="mainmenu">
<li class="title"><a href="index.html" id="home" >Home</a></li>
<li class="parent">Account
<ul id="submenu1">
<!--Login Form-->
<form>
<div class="container">
<p>Log-in to Access your Account</p>
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<div id="rememberme">
<input type="checkbox" checked="checked ">Remember me
</div>
<!--Forgot Password-->
<div id="forgotpsw">
<li class="forgot">
<p>Forgot <a class="forgot" href="forgot.html">Password</a> ?</p>
</li>
</div>
</div>
</form>
<!--Register-->
<div id="register">
<li>
<p class="register">Don't have an account yet? Click
<a class="register" href="register.html">here</a> to Register.</p>
</li>
</div>
</ul>
</li>
<li class="parent">Manage Bookings
<ul id="submenu2">
<li class="child-element">Itineraries</li>
<li class="child-element">Manage my Flights</li>
<li class="child-element">Manage Hotel Bookings</li>
<li class="child-element">Travel Documents</li>
</ul>
</li>
<li class="parent">Support
<ul id="submenu3">
<li class="child-element">Customer Service</li>
<li class="child-element">Feedback</li>
</ul>
</li>
</ul>
</div>
</body>
Okay, I came up with this code, will it work well?? It worked for me on Boostrap Studio.
changed html li.parent elements to:
<li id="account" class="parent">Account
<li id="bookings" class="parent">
<li id="support" class="parent">Support
I added an id to each parent li. Also, each of its submenu has an id (#submenu1, #submenu2, #submenu3).
This is the script i used to keep the submenu open while I'm clicking anywhere inside it, and closing it if i click a different parent or anywhere else in html file.
$('html, .parent').click(function() {
$('#submenu1').hide();
});
$('#mainmenu, #submenu1').click(function(event) {
event.stopPropagation();
});
$('#account').click(function(event) {
$('#submenu1').toggle();
});
$('html, .parent').click(function() {
$('#submenu2').hide();
});
$('#mainmenu, #submenu2').click(function(event) {
event.stopPropagation();
});
$('#bookings').click(function(event) {
$('#submenu2').toggle();
});
$('html, .parent').click(function() {
$('#submenu3').hide();
});
$('#mainmenu, #submenu3').click(function(event) {
event.stopPropagation();
});
$('#support').click(function(event) {
$('#submenu3').toggle();
});
I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>
Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}
Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.