I am trying to make multiple div h3 use the hide and show function. When the user first accesses the website on the faq page, the user hovers over the question, and when they click on it, the answers are shown below. When they click the question again, the answer is hidden. I need to do this for 3 more questions, but I don't know specifically how to.
I did the first question, it worked perfectly fine, but I'm stuck on the last three. I've tried following many examples but nothing has changed so far.
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BRICKSxMORTAR: F.A.Q.</title>
<script src="script/jquery-ui.js"></script>
<script src="script/jquery-3.6.0.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script>
$(document).ready(function() {
$("h3+i").hide()
$("h3:nth-of-type(1)").click(function() {
$("h3:nth-of-type(1)+i").toggle("drop");
$("i:nth-of-type(1)+h3").toggle("drop");
$("h3:nth-of-type(1)+p").toggle("drop");
$("h3:nth-of-type(1)+p").toggle("drop");
});
});
$(document).ready(function(){
$("def1").click(function(){
$("modal").modal();
})
})
</script>
<style>
h3.magenta{
cursor: pointer;
background-color: aquamarine;
transition-property: magenta;
}
</style>
</head>
<style>
#font-face {
font-family: 'agendaimport';
src: url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff2')
format('woff2'),
url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff')
format('woff');
font-weight: normal;
font-style: normal;
}
h1{
font-family: 'agenda';
font-size: 1.8em;
}
body{
background-image: url("images/BRICKSxMORTAR.jpg");
background-size: 200px;
background-color: black;
color: floralwhite;
font-size: 1.2 em;
font-family: 'Courier New', Courier, monospace;
width: 100%;
height: auto;
margin: auto;
}
a {
color: aquamarine;
font-size: 25px;
}
h3{
color: magenta;
font-size: 28px;
font-weight: bold;
}
b{
color: aquamarine;
font-size: 40px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#wrapper{
width: 80%;
height: auto;
margin: auto;
padding: 1em;
background: #000;
position: relative;
top: 4.5em;
z-index: 0;
}
div {
color: rgb(255, 255, 255);
font-size: 22px;
}
q{
color: magenta;
}
i{
color: rgb(255, 255, 255);
font-size: 22px;
}
#img{
display: block;
margin: auto;
}
#logo{
display: block;
margin: auto;
width:60%;
height:auto;
}
nav{
width: 100%;
height: auto;
background: aquamarine;
margin-right: auto;
margin-left: auto;
margin-top: -99em;
padding: 1em 0;
text-align: center;
margin-bottom: 1em;
padding-top: 1em white;
padding-bottom: 1em white;
color: magenta;
/*border-top: 1px white;
border-bottom: 1px white;*/
transition: margin-top 0.8s ease-in-out;
}
a.menu:link{
display: block;
color: black;
}
a.menu:visited{
color: rgb(16, 20, 19);
text-decoration: none;
}
a.menu:hover{
color: magenta;
text-decoration: underline;
background-color: aquamarine;
}
a.menu:active{
text-decoration: underline;
background-color: aquamarine;
}
#magenta{
font-size: 0.8 em;
}
#smaller{
font-size: 0.8em;
color: black;
}
footer{
width: 100%;
background-color: floralwhite;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
clear: both;
}
footer p{
margin: auto;
width: 90%;
color: magenta;
}
footer a{
margin: auto;
width: 90%;
color: magenta;
}
footer p:link{
color:black;
}
footer a:link{
color:black;
}
.floatLeft{
float:left;
}
.floatRight{
float:right;
}
#banner{
width: 100%;
height: auto;
background: #000;
border-bottom: 1px solid #fff;
position: fixed;
z-index: +1;
top: 0;
left: 0;
right: 0;
}
header{
width: 100%;
height:auto;
margin-bottom:2em;
}
header p{
width: 99%;
height: auto;
color: black;
background-color: aquamarine;
font-weight:bold;
padding-left:1%;
}
header:hover nav{
margin-top:-1em;
}
header:hover p{
color: magenta;
cursor: pointer;
}
h1{
animation-name: strobe;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#keyframes strobe{
0%{
color: floralwhite;
}
50% {
color: magenta;
}
100%{
color:white;
}
}
a.definition:link{
color: white;
text-decoration-style: underline;
text-decoration-style: wavy;
}
a.definition:visited{
color: white;
text-decoration-style: underline;
text-decoration: wavy;
}
a.definition:hover{
cursor: pointer;
color: magenta;
}
a.definition:active{
cursor: pointer;
color: magenta;
}
#modal{
color: black;
}
h3:hover{
background-color: aquamarine;
}
</style>
</html>
<body>
<br>
<div id="banner">
<img src="images/logo.png" id="logo" /></div>
<br>
<br>
<div id="wrapper" max-width="50px">
<header>
<p>menu</p>
<nav>
<a class="menu" href="OURSTORY.HTML" >OUR STORY</a>
<a class="menu" href="#" >OUR SERVICES</a>
<a class="menu" href="#" >LOCATIONS</a>
<a class="menu" href="#" >F.A.Q</a>
<a class="menu" href="Indexxxx.html">HOME</a>
</nav>
</header>
/*<div id="def1" class="modal">
<p>
<strong>What Do We Mean By Galleries?</strong><br/><br/>
While we do sell a limited array of items off the rack, the majority of the clothes that we make are custom-to-order. So, we do not have stock to fill the shelves per se, let alone multiples of items in different sizes. Instead, what you'll find when you arrive is a curated collection of our best work displayed on mannequins of many different sizes and shapes.
</p>
</div>*/
<div id="mission">
<h1 style="color:magenta">The mission of BRICKSxMORTAR is to transform how Canadians think about fashion.</h1>
<hr>
<br>
<b style="font-family: Arial, Helvetica, sans-serif">F.A.Q</b>
<br>
<h3>
Do I need to make an appointment, or can I walk right in?
</h3>
<i>
While our physical locations are open to the public to come in and explore our galleries,
we do ask that you call or e-mail ahead of time if you're interested in a design consultation or a fitting. Just send us your name, a
number we can reach you with, and a preferred date and time, using the e-mail link at the bottom of the page.
</i>
<div id="def1" class="modal" color="magenta">
<q>
<strong>What Do We Mean By Galleries?</strong><br/><br/>
While we do sell a limited array of items off the rack, the majority of the clothes that we make are custom-to-order.
So, we do not have stock to fill the shelves per se, let alone multiples of items in different sizes. Instead, what you'll find when you arrive is a curated collection of our best work displayed on mannequins of many different sizes and shapes.
</q>
</div>
<br>
**<h3 id="h3+isecond">
Do I need to have my own fabric and materials picked out ahead of time?
</h3>**
<div>
No, that's all part of the fun and the customer experience. One of our talented designers will be happy to walk you through fabric samples,
make recommendations, and place orders on your behalf for everything you need to create the perfect custom look.
</div>
<br>
** <h3>
Do you make men's clothing?
</h3>**
<div>
Yes, we make clothing for all expressions of gender, whether that's cis-gendered men and women or a more androgynous look.
We want clothing to be comfortable for our clients physically, emotionally and psychologically.
</div>
<br>
** <h3>
What if I can't pay for everything up front?
</h3>**
<div>
We know that custom clothing can be expensive, but it's also an investment in you. That's why we're more than willing to work
with you to devise a payment plan for your custom outfit. We offer 2, 4 and 6-month instalment plans as well as free consultations
for low-income and precarious workers.
</div>
<br>
<br>
<br>
<hr>
<br>
<footer>
<h1>
<div class="magenta"</div>
<p>
<div class="smaller" font-size="0.8em"</div>
</p>
</h1>
<p>©BRICKSxMORTAR, inc. 2018-2020 // 1.888.708.9950 //
<a class="menu"href="mailto:info#bricksxmortar.com"
style="color:magenta"> <u>info#bricksxmortar.com</u></a></p>
</footer>
</div>
</body>
So this can easily be done with the following stept;
Make with css all the needed display:none;, that way they will al be hidden when the page loads.
Make a click event on the H3 that wil trigger a function
Make the function to toggle the next div.
Whit this way, when you click on the H3 it will open when it is hidden and it wil hide when it's visible. Very usefully.
HTML:
<h3 class="faq-question">Question 1</h3>
<div class="faq-answer">Answer 1</div>
<h3 class="faq-question">Question 2</h3>
<div class="faq-answer">Answer 2</div>
<h3 class="faq-question">Question 3</h3>
<div class="faq-answer">Answer 3</div>
<h3 class="faq-question">Question 4</h3>
<div class="faq-answer">Answer 4</div>
JavaScript (jQuery)
<script>
$('.faq-question').click(function(){
$(this).next().toggle();
});
</script>
CSS
<style>
.faq-answer {
display:none;
}
</style>
Related
so I am doing a challenge for FreeCodeCamp and my Nav Bar is being wonky. If you notice, it doesn't go across the entire screen so there is some white space. The only way I seem to be able to alter the dimensions of the navbar is if I get rid of overflow:hidden, but then the navbar acts really weird.
https://codepen.io/mso122591/pen/boowZv
Thanks!
HTML:
ul {
list-style-type: none;
margin-lef: 100;
padding: 0;
overflow: hidden;
}
li {
display: inline;
float: right;
}
li a {
display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 100px;
font: bold 30px/50px Georgia, serif;
background-color: #66ccff;
}
li a:hover {
background-color: #b3e6ff;
}
.left-middle-text {
margin-left: 150px;
}
.portfolio-text {
margin-left: -200px;
margin-top: -1200px;
text-align: center;
background-color: white;
color: white;
z-index: 5;
}
.background-blue {
background-color: #66ccff;
}
.background-silver {
background-color: silver;
}
.portfolio-placeholder {
background-color: silver;
padding: 20px;
margin: 20px;
width: 300px;
height: 300px;
}
.social-two {
width: 50px;
height: 50px;
display: block;
z-index: 5;
}
.social {
padding-top: 20px;
margin-left: 1400px;
width: 20px;
height: 20px;
display: block;
z-index: 5;
}
.white {
color: white;
}
.ptext {}
h1 {
font-size: 60px;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
margin-top: 100px;
margin-left: 300px;
padding: 60px;
font-family: "Comic Sans MS";
font-size: 40px;
}
.black-box {
background-color: black;
width: 100%;
height: 200px;
margin-top: -150px;
z-index: -1;
}
.col-xs-6 {
text-align: center;
}
dbody {
padding: 20px;
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.wrapper {
float: left;
/* important */
position: relative;
/* important(so we can absolutely position the description div */
}
div.description {
position: absolute;
/* absolute position (so we can position it where we want)*/
top: 0px;
/* position will be on bottom */
margin-left: 100px;
width: 80%;
height: 90%;
/* styling bellow */
background-color: white;
color: white;
opacity: 0.2;
/* transparency */
filter: alpha(opacity=40);
/* IE transparency */
}
.image-static {
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="background-blue">
<ul>
<li>
<img class="social-two" alt="Facebook page. " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAclBMVEU6WJf////29/oeRo4sTpKwudAyU5S6wtV3iLJ7i7MtT5M2VZYoTJEYQ43t7/SIl7tIY57N0+JRaqHl6fDa3unDydu0vNK+xdhid6lsf6yosstYb6PS1+Rne6rn6vGDkriapcORnr8SQIzd4epDX5uhrMfw5inQAAAETklEQVR4nO3dW3eiMBSG4dCEjCVBDioe2tp2tP//Lw7YOkPX6BhkSPbO+t4rb3TxLAwIQRBJv31TbErBuXJTNPtvJtF7nZZSaRN6GUdmtJJlelGYKstdd85Ylf4lnNc29HL912w9/y6sZCzr75yRVV+4zkMv0ATl6z/CKkZgS6zOwrkMvSwTJedfwjq2MXjO1J/CNK6taD+bnoQq9HJMmOqEEa/C00oUSRnrKOwyZSIWsW5IP5ML0cQ8DNuB2IhCh16ISdOF2MQ8DNuBuBG8D3hvF7sPIYQQQgghhH5ntM4yZbvkqdNLq1TG/ujd6MzKPKu3xduuWVXPy8NhsVgcDsvlc7VaN+luxpnY4vLy8WN1eEiut+Z6JtRoK7e753/QvvrBU6jl8c1Bx1VobPZ+cOOxFGr5tHLmMRQauVkO8bET2tJx9DEVGrkb6uMlVL+vDolUKIs7fJyEeXMXkI8wH7SLYCi8G8hFKO/8irIRqvs2MnyEp6t6ohbK/W0Ia6H9GAHkIDTlGCAHoRz8Y5uZUG9HARkI8zGbGQ5C/ToOSF84dhWSF+rZSCB5oRx4VoadcNTvNRZCe/8xBROhHA0kLtSPsQttFb1wPJD27NrgL+l+tSu2T0fdTQRbfaxfZsXHK+UZUrseoJun20zaLNPmfM22MUZntGe5pfs57upFKtKWi7kf+u6fJD9eW/buCPyRM/0zgXU8C/zG9i89jsPwnS1QaCdgwxjodIJmz/j/ydmbi/CJ6Uamy2l/X/H9jrZCl2tmXljuB7+S/7pa7asHxqPQ7cBiRfnA4VZOp2g+stCLOSKn84ikD41u5fSrlPW/WzOXWcMjZ6FyOZHIeUPjdmTBeX8vrMPE6ANvocOMBe+75sjFbSHv21m4XGKyZL2lcTnCf+YtdPjhXUFIOhch60MLJ+Ga9Y1znITRr0Pac4O3chHyvr0ThBASSl/up4MwlVfe3Cv8WQDzeLmtyx5/duXNvcKfysluQ0YVfp85tTD8PhNCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBDCWIThZ9fM4+xiTjOk28vv7UVghjT+We5ruVypkPK4UuFKEEJIPwghpB+EENIPQgjpByGE9IMQQvpBCCH9IISQfhBCSD8IIaQfhBDSD0II6QchhPSDEEL6QQgh/SCEkH4QQkg/CCGkH4QQ0g9CCOkHIYT0gxBC+kEI4aDK//Q5g/IoLEWQP+37E5qNKEI8ZdCfUBciyCMI/AlVI4I8/MufUC5EUgYYiN6EpkxEkga4A4o3oU1bYRJgIHoTqqQTBliJvoTtKuyESe19JHoSnh473An9Py3Sk/D0EMJOmFS+n4DtR5hXyVmYrD0TvQjzzyfUfwqTSnodix6ERlZJX5jMa59b1OmFtj4/CFT0PtF6W48TC43tdhN/CdvPPErl5wZhEwqNVvKY9j5HfPvURVNsfBwSTycsN0Xz/WHDvwC3A1K2lfV16AAAAABJRU5ErkJggg==">
</li>
<li>
<img class="social-two" alt="Linkedin page. " src="data:image/png;base64,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">
</li>
<li><a onclick="scrollWin()">Portfolio</a></li>
</ul>
</div>
</div>
<div class="background-silver">
<h2 style="text-align:center;"> Michael Oelbaum </h2>
<h3 style="text-align:center"> Front-End Developer and UX/UI designer with experience in Japanese translation/interpretation
</div>
<!--Itachi background code
-->
<div class='wrapper'>
<!-- image -->
<div id="theFixed" style="position:fixed;top:200px">
<img src="https://images3.alphacoders.com/144/thumb-1920-144565.jpg" alt="Itachi Background. ">
<h1 class="white portfolio-text"> Portfolio </h1>
<div class='description'>
</div>
</div>
<!-- description div -->
<!-- description content -->
</div>
<h1 id=P ortfolio class="white portfolio-text"> Portfolio </h1>
<div class="row">
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
<div class="col-xs-6">
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
<div class="portfolio-placeholder box">Coming Soon!</div>
</div>
</div>
<!-- end description content -->
</div>
<!-- end description div -->
There is a wrapper div element called .container-fluid which has padding set to 15px (the whitespace you see) on either side. Either use a different class for this element, or add padding: 0px !important to your css.
I was able to add the following code to the top of the css:
.container-fluid {
padding: 0;
}
As long as this code is below any call to Bootstrap on a live site, you shouldn't need !important.
Added both the navbar and navbar-fixed-top classes to the nav tag according to the Bootstrap 3.3.7 documentation, given it's the version you're using, and added a margin-top: 80px to the background-silver class you're using for your "subnav" element, so it won't get behind your navbar when you scroll to the top.
Also, remember to import the rest of the bootstrap dependecies to your project, aka the bootstrap theme and it's JS functions.
Portfolio Page Link
I am not very good at css, but i believe that the . referse to a class ie, .button I would suggest using inspect element(ctrl-shift-i) to change the div you want to 100%, such as in my example :
My rats html
Here's my html and css code. My strategy seemed to work well with the 1st background image, but when I got to the 2nd background image, it no longer worked. I created a stage outside the main content area set the position to relative then a wrapper to include my 2 backgrounds with their position to absolute so I can manually position it. However, once I get to the benefits-section div, it acts like this part is no longer contained in the content-wrapper div. Can anyone spot my problem? I also included an image of what the the website actually looks like completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Garcinia Cambogia</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="stage">
<div class="bg-wrapper">
<img src='img/flower-background.jpg' id="bg" atl="flower background">
<img src="img/middle-background.jpg" id="bg2" alt="benefits-section background">
</div>
<div class="content-wrapper">
<nav>
<h1>Produce</h1>
<ul>
<li>Home</li>
<li>About the Product</li>
<li>Benefits</li>
<li>Testimonals</li>
<li>Buy</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div class="copy">
<h2>Increase your <br> energy level with <br> <span>Garcinia Cambogia</span></h2>
<img src="img/product.png" alt="Main Product">
<div class="opt-in">
<h2>Try it Out</h2>
<form>
<input type="text" value="Your Name*">
<input type="text" value="Your Email*">
</form>
<div class="order-btn">
<h2>Order Now</h2>
</div>
</div><!-- end of opt-in -->
</div><!-- end of copy -->
<div class="promo-section">
<h1> About Garcinia Cambogia </h1>
<h2> Reduce food intake and promote <span>weight loss fast</span>!</h2>
<p>Effective thermogenic supplements are those that contain key ingredients that create a fat burning 'thermogenic'
environment by working together and in synergy. Some of these ingredients also aid
in reducing appetite and spiking an increase in short-term energy. Dosage of Garcinia cambogia, beginning
from 750 mg to 1,500 mg, takes 2-3 times in individual dose before meals.
</p>
<h2> Other <span>Related</span> Products</h2>
<ul>
<div class="hover08">
<div class="img-wrapper">
<li><img src="img/Rasberry-product.png" alt="Rasberry Product"><a class="search" id="search1" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li><img src="img/Garcinia-Cambogia.png" alt="Garcinia"><a class="search" id="search2" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li id="mango-ketone"><img src="img/Mango-Ketone.png" alt="Mango Product"><a class="search" id="search3" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
</ul>
</div><!-- end of hover08 -->
</div><!-- end of promo-section -->
<div class="benefits-section clear">
<h1> What are the benefits </h1>
<h2> Obesity is an imbalance between fat intake and energy expenditure.
Now day obesity is a problem of health and mind in many people.</h2>
<p>The rush hours working lifestyle make many people take junk food and fast food more than nutritionists.
The important factor is Generic, it is found that one obese patient has a 40% chance of obesity and both
obese patients have 80% chance of obesity. The chronic diseases that are developed from obesity are
diabetes, high blood pressure, stroke, heart attack, cancer, gout and sleep apnea. So control the weight
is the best way to void health problem.
Control the body weight helps you against the chronic diseases and make good looking. There are many
ways to reduce and control the weight. Using weight control products is not the best way, especially use
potential dangerous diet products without consult from the doctors or the pharmacists. Balance the energy
expenditure and fat intake is an important point. If you eat more you have to exercise more. Other ways
are break bad habits such as alcohol intake, watching T.V. during eating, or ignore vegetables. You have
to realize how much the fat in each menu and should the low cholesterol with high nutrition.</p>
</div>
</div><!-- end of content-wrapper -->
</div><!-- end of stage -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
#font-face { font-family: 'Lucida Sans Demibold Roman'; src: url('../fonts/Lucida Sans Demibold Roman.ttf'); }
#font-face { font-family: 'Arizonia-Regular'; src: url('../fonts/Arizonia-Regular.ttf'); }.stage { position: relative; max-height: 100%; max-width: 100%; }
.content-wrapper { width: 960px; margin: 0 auto; position: relative; z-index: 2; }
.bg-wrapper { position: absolute; z-index: 1; left: 0; top: 0; min-width: 100% }
#bg { position: relative; top: 0; left:0; min-width: 100%; max-height: 760px; }
#bg2 { position: relative; top: 500px; left: 0; min-width: 100%; max-height: 702px; }
nav h1 { font-size: 69px; font-family: 'Arizonia-Regular'; letter-spacing: 0; text-align: center; color: #e0bd67; margin-bottom: 15px; margin-top: 15px; }
nav ul { list-style-type: none; padding: 0; margin: 0; background-color: #c29f4d; box-shadow: 5px 5px 1px #808279; height: 50px; width: 100%; float: left; margin-bottom: 95px; }
nav ul li { display: inline; padding-right: 40px; padding: 16px 40px 16px 0; margin-top: 0; float: left;}
nav li:first-child { padding-left: 113.04px; }
nav li:last-child { padding-right: 113.04px; }
nav a { text-decoration: none; color: #fff; font-family: 'Lucida Sans Demibold Roman'; font-size: 16px; }
.copy { float: left; }
.copy h2 { font-family: 'Open Sans'; font-size: 34px; color: #fff; font-weight: bold; float: right; text-transform: uppercase; line-height: 34px; margin-bottom: 35px; margin-top: 0;}
.copy img { float: left; margin-top: 55px; }
.copy span { color: #ffd062; }
.opt-in { background-color: #d1aa50; width: 378px; height: 299px; float: right; margin-bottom: 78px; }
.opt-in h2 {float: left; width: 301px; text-align: center; margin: 15px 38.5px; padding-bottom: 20px; border-bottom: 2px solid #fff; }
.opt-in input { width: 296px; height: 40px; background-color: #ecdcb7; margin: 7px 38.5px; padding-left: 5px; }
.order-btn h2 { border-bottom: none; }
.promo-section { float: left; }
.promo-section h1 { font-family: 'Open Sans'; font-size: 36px; text-transform: uppercase; color: #c29f4d; text-align: center; border-bottom: 2px solid #c29f4d; width: 795px; margin: 90px 82.5px 30px 82.5px; padding-bottom: 5px; }
.promo-section h2 { text-align: center; font-size: 26px; color: #8e8e8e; }
.promo-section h2 span { color: #c29f4d; }
.promo-section p { text-align: center; color: #8e8e8e; font-family: 'Open Sans'; font-size: 16px; }
.promo-section ul { list-style-type: none; margin-top: 30px; padding: 0; }
.promo-section ul div li { display: inline; float: left; margin-right: 109.5px }
#mango-ketone { margin-right: 0;}
.img-wrapper { position: relative; float: left; }
.hover08 li img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.hover08 li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }
.hover08 a.search { position: absolute; top: 0px; right: 0px; opacity: 0; background-color: transparent; filter: alpha(opacity=0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#search1 { top:71px; right: 200px;}
#search2 { top: 92px; right: 190px; }
#search3 { top: 67px; right: 100px; }
.hover08 li:hover a.search { opacity: 1; -webkit-transition-delay: .2s; transition-delay: .2s;}
.benefits-section { margin-top: 30px; float: left; }
.benefits-section h1 { color: #fff;}
.clear { clear: both; }
First off let me say how much of a big help this website has been with my little project. Anyway on to my question.
So right now I'm creating a personal website for myself and I want to add some padding to something, but when I add padding, it ends up creating space between some stuff and making it completely white without using the background image or color. This is what I mean.
When I open up the "About" tab (I added padding to that one but not the one above), do you see how there's a lot of white space? How can I have that colored in grey and use the background image aswell?
And when I close the tab, there is a big white gap, which is (I'm pretty sure) the padding not closing
I only added padding to the "About" tab and as you can see, it is messed up compared to the others (This is the jsfiddle)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
padding: 15px;
margin: auto;
}
This is the css code for the class holding the info.
Take the padding off .two, and if you want the white border around the content in .four, you can use a margin:
$(document).ready(function(event) {
$('.one').click(function() {
$('.two').slideToggle();
})
$('.three').click(function() {
$('.four').slideToggle();
})
$('.five').click(function() {
$('.six').slideToggle();
})
$('.seven').click(function() {
$('.eight').slideToggle();
})
setTimeout(function() {
$('.two').slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.one {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.two {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.three {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.four {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
margin: 15px;
}
.five {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.six {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.seven {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.eight {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<div class="container">
<div class="big1">
<div class="one">Main</div>
</div>
<div class="small1">
<div class="two">Welcome to my page!
<br>Click around
<br>Learn a thing or two about me</div>
</div>
<div class="big1">
<div class="three">About</div>
</div>
<div class="small2">
<div class="four">My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!</div>
</div>
<div class="big1">
<div class="five">Projects</div>
</div>
<div class="small1">
<div class="six">My projects can be found here</div>
</div>
<div class="big1">
<div class="seven">Contact</div>
</div>
<div class="small1">
<div class="eight">You can contact me here</div>
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Try moving the padding to the .four class, I think it will give you your desired result.
You could do some restructuring of the code to simplify it like
$(document).ready(function(event) {
$('.header').click(function() {
$(this).next('.content').slideToggle();
})
setTimeout(function() {
$('.content').first().slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.header {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.content {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="big1 header">
Main
</div>
<div class="small1 content">
Welcome to my page!
<br>Click around
<br>Learn a thing or two about me
</div>
<div class="big1 header">
About
</div>
<div class="small2 content">
My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!
</div>
<div class="big1 header">
Projects
</div>
<div class="small1 content">
My projects can be found here
</div>
<div class="big1 header">
Contact
</div>
<div class="small1 content">
You can contact me here
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Use display : none; for .small2 in css. Even though it is hidden it is taking space on UI. (if you need padding when visible)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
display : none;
}
I wrote the code below and I was wondering if I could, in any way, make the white space of the body bigger. As of right now, I have the header color #444 and, I thin,k about 130px from the top and the footer is the same color and about 260px from the bottom. In the middle, I have the little tiny white space for the body. Is there any way to open that up with still keeping my header and footer the size they are — just moving the footer down? Then my next problem is that my text in my div tags, in my body will spawn behind my header and/or footer when they are in the body. Is there a way I can limit that so that they will have to spawn between my header and footer in the white space? Thanks for your help and time!
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<body>
<header>
<div class="zebusoft-logo">
<img src="images/logo-3.png" alt="">
</div>
</header>
<div class="body-text">
<h1>Software Devlopment Company</h1>
</div>
</body>
<footer>
<div class="about-zebu">
<p>About ZebuSoft</p>
</div>
<div class="fast-nav">
<p>Nav</p>
</div>
</footer>
</html>
html, body {
padding: 0;
margin:0;
background: #444;
}
header {
position:fixed;
top:0;
width:100%;
height:102px;
background-color:#222;
padding:20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400px;
}
.body-text {
font-family: "Museo Sans",sans-serif;
color: #300000;
margin-top: 150px;
text-align: center
}
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .8em;
margin-right: 1570px;
border-bottom: 1px solid #131313;
margin-left: 120px;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .9em;
margin-right:;
border-bottom: 1px solid #131313;
margin-left: 390px;
}
jsFiddle
Solution
jsFiddle
Here I made the changes to your HTML, you need to nest footer into the body, I have also made changes to your CSS.
So now your footer will stick to the bottom and if there is overflow of text in the middle it will scroll.
Good luck..
old
I am not 100% sure what you have asked but here is the sample:
jsFiddle
I have added a large paragraph and everything seems to be correct.
I have changed your <div> into a section and used <p> to add text. Tell me what is wrong with the page in the link? Thanks
ADDED CSS
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 75%;
float:left;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 25%;
float:left;
}
So I am currently trying to create a webpage, where the user can toggle between KMZ (there will be 8) files (which depict colour coded maps of Canada made in GIS then converted to KMZ). What I would like this website to look like can be seen at www.mapathy.ca, but with the toggle option on there! This is where I am having issues, I can find similar questions where there is code options for making a toggle for these KMZ layers, but I am unable to in put them into my existing html file. Whenever I try to I seem to make the GoogleEarth window that is currently there disappear altogether. I am going to include my entire HTML as it stands currently. I appreciate any insight very much!!
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<title>Mapathy</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<style>
/* normalize.css 2011-06-23T00:50 UTC //github.com/jonathantneal/normalize.css */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}html{cursor:default;font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,form,input,button,select,textarea{font-size:100%;margin:0}a,a:active,a:hover{outline:none}a:focus{outline:thin dotted}abbr{_border-bottom:expression(this.title ? '1px dotted':'none')}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#FF0;color:#000}pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}nav ul{list-style:none}audio[controls],canvas,video{display:inline-block;*display:inline}audio{display:none;_display:expression(this.controls ? 'inline':'none');*zoom:1}audio[controls]{display:inline-block}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){ overflow:hidden}legend{*margin-left:-7px}button,input,select,textarea{vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;_overflow:expression(this.type == 'button|reset|submit' ? 'visible':'')}button,input[type="button"],input[type="reset"],input[type="submit"]{overflow:visible;-webkit-appearance:button}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
body {
color: #151412;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 50px;
}
h2{
font-size: 36px;
}
p {
line-height: 1.4;
}
img.profile1 {
border: 1px solid #4C4B47;
width: 200px;
height:200px;
border-radius: 50%;
padding: 5px;
}
img.GE2008 {
border: 3px solid #4C4B47;
width: 800px;
height: 600px;
}
img.favourite {
border: 2px solid #4C4B47;
width: 200px;
height: 200px;
border-radius: 50%;
padding: 5px;
margin: 15px;
}
img.logo {
margin: 0 auto;
display: block;
}
section.banner {
padding-top: 100px;
padding-bottom: 100px;
background-image: url('images/tweed.png');
text-align: center;
}
section.banner h1 {
font-size: 45px;
text-transform: uppercase;
padding: 2px;
}
section.banner h2 {
padding-top: 10px;
}
script.map {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
border: 300px solid #4C4B47;
width: 600px;
height: 400px;
}
section.about {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
section.moreinfo {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
script.map {
text-align: center;
}
section.about h2 {
text-align: center;
}
section.contact {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.social {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.favourites {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.box {
padding: 50px 100px;
}
section.banner {
background-attachment: fixed;
}
h1, h2, h3, h4, p {
font-family: 'News Cycle', sans-serif;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
border-bottom: 1px solid #434A5C;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.menu li {
display: inline-block;
padding: 20px 35px;
}
.menu a {
text-decoration: none;
color: #333333;
text-transform: uppercase;
font-weight: bold;
font-family: 'News Cycle', sans-serif;
}
</style>
</head>
<body>
<ul class="menu">
<li>About</li>
<li>More Information</li>
<li>Contact</li>
<li>Favourites</li>
</ul>
<section class= "banner">
<h1>Mapathy</h1>
<h2>A re-conceptualization of the declining voter turnout rates in Canada</h2>
</section>
<div class="map" id="map3d"></div>
<script class="map" type="text/javascript">
var ge;
google.load("earth", "1", {"other_params":"sensor=false"});
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
addKmlFromUrl('https://sites.google.com/site/mapathy2/kmz-files/1988eqintkmz.kmz?attredirects=0&d=1');
}
function addKmlFromUrl(kmlUrl) {
var link = ge.createLink('');
link.setHref(kmlUrl);
var networkLink = ge.createNetworkLink('');
networkLink.setLink(link);
networkLink.setFlyToView(true);
ge.getFeatures().appendChild(networkLink);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
<section id= "about" class= "about box">
<h2>About this project</h2>
<p>The following maps depict the declining voter turnout rate being witnessed in Canada. Voter turnout refers to the percentage of eligible voters who cast a ballot in an election. Areas marked white (1.00), are where 54% or less of eligible voters cast a ballot, areas marked grey (2.00), are where between 55-74% of eligible voters cast a ballot, and areas marked black (3.00), are where 75% or more eligible voters cast a ballot. </p>
</section>
<section id= "moreinfo" class= "moreinfo box">
<h3>More Information</h3>
Elections Canada Official Information for Voters
<p>for more information on the voting process & ways to vote in Canada</p>
Elections Canada Past Elections
<p>to learn more about historical voter turnout rates.</p>
</section>
<section id= "contact" class= "contact box">
<h4>Contact Owner</h4>
<img src="images/profile1.png" class="profile1">
</section>
<section class= "social box">
<img src="images/twitter.png">
<img src="images/linkedin.png">
<p>Note: This webpage is part of a final Master's Research project for the Communication and Culture program at Ryerson University. All Rights Reserved.</p>
</section>
<section id="favourites" class= "favourites box">
<h4>My Favourite Things</h4>
<img src="images/empirebiscuit.jpg" class="favourite">
<img src="images/candy.jpg" class="favourite">
<img src="images/algonquin.jpg" class="favourite">
</section>
</body>
</html>
If you are using KML files that are pre-made and do not change in real time it is much easier to use fetchKML to toggle ON and OFF rather than use networkLink (as you are doing)
look at this Google demo
https://code.google.com/apis/ajax/playground/#fetch_kml_(interactive,_checkboxes)