I'm trying to hide a section of the page until a button is clicked, whats the best way to achieve this?
I have attached an image below encircled in red is the button I want to work as a toggle to show the content of the laptops section. Currently if you click the image it just opens a tab with an image and instead I want it to show open the laptops and mac section.
I have attached a JS fiddle with my current code.
https://jsfiddle.net/2j4b4bdn/2/
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" crossorigin="anonymous">
<style>
body {
background-color: #161A25;
margin:0;
}
#logo {
position:absolute;
left:0;
top:0;
}
h9
{
color: white;
position:absolute;
right:50rem;
top:4rem;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h10
{
color: white;
position:absolute;
right:30rem;
top:4rem;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h6
{
color: black;
position:absolute;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h7
{
color: #32CE87;
position:absolute;
right:6rem;
top:2.5rem;
font-size: 9px;
font-family: 'Raleway', sans-serif;
}
h8
{
color: white;
position:absolute;
right:6rem;
top:3.5rem;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #32CE87;
}
.footer {
position: fixed;
right:0;
bottom: 0;
width: 100%;
height:110px;
background-color: #2A3046;
color: white;
}
img.logo {
height: 80px;
left:3em;
position: relative
}
img.logo1 {
height: 40px;
left:3em;
bottom:2rem;
position:absolute;
}
.my-button {
display: inline-block;
margin: 1px;
background: #32CE87;
color: white;
font-family: 'Raleway', sans-serif;
text-align: center;
border-radius: 5px;
padding: 8px 16px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
width: 100px;
text-decoration: none;
}
.my-button:hover {
background: #666;
color: #c1e1e0;
}
.center-bottom {
position: fixed;
bottom: 12rem;
width: 100%;
text-align: center;
}
img.arrow {
max-height: 40px;
}
.row {
background-color: white;
max-width:100%;
margin-top: 0.5rem;
margin-left: 10px;
margin-right: 10px;
border-radius: 5px;
}
.box1 {
background-color: white;
max-width:100%;
height:250px;
padding-bottom:50px;
margin-top: 0.5rem;
margin-left: 25px;
margin-right: 25px;
border-radius: 5px;
}
img {
margin-top:0.5rem;
}
div.container1 {
background-color: white;
max-width:100%;
height:250px;
padding-bottom:50px;
margin-top: 0.5rem;
margin-left: 25px;
margin-right: 25px;
border-radius: 5px;
}
div.container {
margin-top:14rem;
}
p {
font-size:7px;
width:490px;
position: absolute;
right:12em;
text-align: left;
bottom: 1.5rem;
}
img.laptop {
height: 80px;
position: absolute;
left:0px;
right: 0px;
margin-top: -0.5rem;
margin-left: auto;
margin-right: auto;
}
div.bottomtext {
position: relative;
left:0px;
right: 0px;
font-family: 'Raleway', sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
width:800px;
top:7rem;
font-size: 1.2rem;
}
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height:50px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
h9:hover {
color: #32CE87;
}
h10:hover {
color: #32CE87;
}
p:hover {
color: #32CE87;
}
h7:hover {
color: white;
}
h8:hover {
color: white;
}
.pt-inner-wrap {
color: #ecf0f1;
text-align: center;
color: black;
border-right: 1px solid #d4d4d4;
bottom:-6px;
}
.pt-inner-wrap1 {
color: #ecf0f1;
height: 200px;
text-align: center;
color: black;
border-right: 1px solid #d4d4d4;
bottom:-6px;
}
img.img-responsive {
width: 230px;
height: 32px;
}
img.img-responsive1 {
width: 260px;
height: 50px;
margin-top: 12rem;
}
h4 {
font-size: 18px;
font-family: 'Raleway', sans-serif;
top: 1rem;
}
h6.pt-title {
font-size: 20px;
text-align: center;
vertical-align: middle;
position: absolute;
}
h6.pt-title1 {
margin-top:8rem;
font-size: 20px;
width: 200px;
margin-left:12rem;
position: absolute
}
figcaption {
font-family: 'Raleway', sans-serif;
}
.col-xs-2{
background: #32CE87;;
color:#FFF;
border-radius: 5px;
height: 50px;
text-align: center;
padding-top: 5px;
font-size: 3rem;
}
.col-half-offset{
margin-left:4.166666667%;
text-align: center;
vertical-align:middle;
padding-top: 5px;
}
p.text1 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:86rem;
border-right: 1px solid;
}
p.text2 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:63rem;
border-right: 1px solid;
}
p.text3 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:39rem;
border-right: 1px solid;
}
p.text4 {
position:fixed;
right: 16rem;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
}
p.text5 {
position:fixed;
left:17rem;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
border-right: 1px solid;
}
</style>
</head>
<body>
<img src="Logo-Trans.png" class="logo" >
<div class="toptext">
<h9> GET A QUOTE</h9>
<h10> RETRIEVE A QUOTE</h10>
<h7>NEED HELP OR ADVICE?CALL US <br style> </h7>
<h8> 0800 0481804</h8>
</div>
<img src="nav.png" class="column">
<div class="container1">
<div class="row">
<div class="col-sm-4">
<div class="pt-inner-wrap">
<i class="fa fa-mobile fa-4x"></i>
<h4 class="pt-title">Mobiles & Smartphones</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Total Value when new</figcaption>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Would you like instant replacement?<i class="fa fa-question-circle" aria-hidden="true" style="margin-right;1rem; color:grey" ></i></figcaption>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
</div>
</div>
<div class="col-sm-4">
<div class="pt-inner-wrap">
<img src="tablet.png" style="height:50px;">
<h4 class="pt-title">iPad's & Tablets</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Total Value when new</figcaption>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Would you like instant replacement?<i class="fa fa-question-circle" aria-hidden="true" style="right;1rem; color:grey"></i></figcaption>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
</div>
</div>
<div class="col-sm-4" >
<div class="pt-inner-wrap" style="border-right: 0px ">
<i class="fa fa-laptop fa-4x"></i>
<h4 class="pt-title">Laptops & Macbooks</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<figcaption>Select the value range for the device(s)</figcaption>
<img src="2000.png" width="100px" class="img-responsive" style="margin: 0 auto;"> <figcaption>OR</figcaption>
<h6 class="pt-title"></h6>
<img src="multiple.png" width="200px" class="img-responsive" style="margin: 0 auto;" onclick="window.open(this.src)">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="box1">
<div> <img src="laptop.png" class="laptop"> </div>
<div class="bottomtext">Please enter a figure for the number of individual laptops/macbooks that you would like to insure in each price range. Where you dont want cover with a particular price range, please leave bank.</div>
<div class="container">
<div class="row" style="">
<div class="col-xs-2" id="p1">0</div>
<p class=Text1>Up to £500 <br>How many would you like to insure?</p>
<div class="col-xs-2 col-half-offset" id="p2">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text2>Up to £500 <br>How many would you like to insure?</p></div>
<div class="col-xs-2 col-half-offset" id="p3">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text3>Up to £500 <br>How many would you like to insure?</p> </div>
<div class="col-xs-2 col-half-offset" id="p4">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text4>Up to £500 <br>How many would you like to insure?</p></div>
<div class="col-xs-2 col-half-offset" id="p5">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text5>Up to £500 <br>How many would you like to insure?</p></div>
<div></div>
</div>
</div>
</div>
<div class="footer">
<div class="center-bottom">
<a class="my-button" title="Relevant Title" href="#">BACK</a>
<a class="my-button" title="Relevant Title" href="#">NEXT</a>
</div>
<p> © Insync Insurance Solutions Ltd 2016 All rights reserved. Mobiru is a trading style of Insync Insurance Solutions Ltd which is authorised and regulated by the Financial Conduct Authority. Our registered office is Midland House, 2 Poole Road, Bournemouth, Dorset BH2 5QY and we are registered in England under company number 08810662. Should you have cause to complain, and you are not satisfied with our response to your complaint, you may be able to refer it to the Financial Ombudsman Service, which can be contacted as follows: The Financial Ombudsman Service Exchange Tower, London, E14 9SR | <br>Tel: 0800 023 4567 or 0300 123 9 123 | www.financial-ombudsman.org.uk | Terms of Business </p>
<img src="Logo-Trans.png" class="logo1">
</div>
</body>
</html>
First, in the future I would suggest that you copy over only the relevant code to the problem you're facing. Dumping all the HTML, CSS, and JS into a single block like that, much of it not being pertinent to the problem you're trying to solve, makes it difficult for others to slog through.
Now, since your already including jQuery (though you need to include it in your <head> tag), you might as well just use some CSS and the .toggleClass() function included with it.
Below is some code that displays it in action, as yours was a bit cluttered to display a concise concept. You basically need to execute the .toggleClass() function on the desired element (the laptop/mac section) when the button is clicked. If you want it to look smoother, you'll want to look into the .hide() and .show() functions. Documentation can be found here.
$( "#toggleBtn" ).click(function() {
$( ".laptops" ).toggleClass( "show" );
});
body {
padding: 10px 0px;
}
.laptops {
padding: 5px 10px;
margin-top: 10px;
background-color: #32CE87;
display: none;
}
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div>
<button id="toggleBtn">Show and Hide</button>
</div>
<div class="laptops">
<p>
The content you want to show and hide. Here is the mac/laptop section.<br>
More stuff about laptops.<br>
Event more content if you wanted it.
</p>
</div>
</div>
</body>
</html>
I'm not completely sure what you're trying to achieve, but if you just want an element to appear when another element is clicked, you can easily do so using js. I normally handle the visiblity in css, and add a class to make the element appear.
HTML:
<div class="toggler">
Click me
</div>
<div class="element">
Hello
</div>
CSS:
.element{
opacity:0;
}
.element.show{
opacity:1;
}
JS:
var elementToClick = document.querySelector(".toggler");
var elementToShow = document.querySelector(".element");
if(elementToClick){
elementToClick.addEventListener("click", showElement)
}
function showElement(){
elementToShow.classList.add("show");
}
https://jsfiddle.net/L3r43pg0/
Related
I've made it so once you hover over the images on this page they become interactive and show a hyperlink. I've tried my best to make this responsive but for some reason to the left the images are sticking out and creating a gap between the white box and background image.
I would really appreciate it if someone could make an effort to help me out and educate me a little here :) Thank you!
Here's my code
/* Extra small devices (phones, up to 480px) */
#media screen and (max-width: 767px) {
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px) {
}
/* tablets/desktops and up ----------- */
#media (min-width: 992px) and (max-width: 1199px) {
}
/* large desktops and up ----------- */
#media screen and (min-width: 1200px) {
{
font-size: 2.350em;
}
}
body {
width:100%;
margin:0;
padding:0;
max-width:100%;
font-size: 2.175em;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
background: url(http://eyeofthestormproductions.com/css/background.jpg) no-repeat center center fixed;
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}
.underh {
padding-top: 1.750em;
margin-left: 1.25em;
max-width: 100%;
}
.teamimg {
}
.team {
text-align: center;
padding-top: 5px;
margin-bottom: 25px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 50px;
margin: auto;
}
.vspacer {
padding-top: 1.875em;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.container-fluid,.row{
width:100%;
margin:0;
padding:0;
max-width:100%;
}
.footertext {
font-family: 'Oxygen', sans-serif;
font-weight: 100;
font-size: 15px;
color: white;
margin-left: 30px;
opacity: 0.8;
text-align: right;
}
.lastbox {
font-family: 'Oxygen', sans-serif;
font-weight: 100;
font-size: 19px;
text-align: center;
}
.footer {
background-size: cover;
font-family: 'Oxygen', sans-serif;
margin:0;
padding:0;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
padding: 10px 0 10px 0;
}
.boxmain {
background-color: white;
width: 100%;
min-height: 12.500em;
background-size: cover;
max-width: 100%;
margin-bottom: 100px;
padding-bottom: 15px;
}
.logo {
display: block;
width: 75%;
height: 96%;
margin: auto;
max-width: 100%;
margin-bottom: -30px;
}
.navbar .nav > li > a {
color: #F2F4F4;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
font-size: 17px;
text-transform: uppercase;
padding-left: 35px;
text-decoration: none;
letter-spacing: 1px;
}
.navbar-default {
margin-top: 0px;
background: #000;
background: rgba(0,0,0,0.1);
border-color: transparent;
}
#media (min-width: 768px){
.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
.himage {
position: relative;
width: 300px;
border-radius: 15px;
height: 434.5px;
margin: 10px;
float: left;
}
.htext {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
text-align: center;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 17px;
padding-left: 5px;
padding-right: 5px;
}
.hheader {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 50px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 436px;
text-align: center;
padding-top: 100px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
}
.upage {
opacity: 0.7;
}
span {
color: white;
}
.servicesimg {
padding-top: 1.250em;
padding-bottom: 2.188em;
border-radius: 0.625em;
height: auto;
max-width: 100%;
padding-left: 1.25em;
margin-right: 1.25em;
}
.servicesheading {
margin-top: 0.325em;
font-family: 'Oxygen', sans-serif;
text-align: center;
margin-bottom: 0.02933333333333em;
font-weight: 300;
font-size: 35px;
}
.underhserv {
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 95%;
padding-top: 3px;
margin-left: 1.25em;
max-width: 100%;
}
.teamimg {
padding-top: 0.450em;
padding-bottom: 1.188em;
border-radius: 0.625em;
height: auto;
max-width: 100%;
padding-left: 1.25em;
margin-right: 1.25em;
}
.connectsc {
margin-left: 1.25em;
margin-bottom: 15px;
}
.followb {
margin-left: 1.25em;
margin-bottom: -40px;
}
#likebox-wrapper * {
width: 100% !important;
margin-bottom: 5px;
}
.underhcontact {
padding-top: 1.750em;
margin-left: 1.25em;
max-width: 100%;
font-size: 30px;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
}
.pgspacer {
margin-bottom: 60px;
}
.eventpadding {
margin-top: 1.250em;
margin-bottom: 2.188em;
}
.margin1 {
margin-top: 13px;
margin-bottom: 7px;
}
.breadcrumb {
border: 0px solid rgba(245, 245, 245, 1);
background-color: white;
margin-left: 1.25em;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
}
.breadcrumb li {
font-size: 14px;
}
.breadcrumb a {
color: rgba(66, 139, 202, 1);
}
.breadcrumb a:hover {
color: rgba(42, 100, 150, 1);
}
.breadcrumb>.active {
color: rgba(153, 153, 153, 1);
}
.breadcrumb>li+li:before {
color: rgba(204, 204, 204, 1); content: "\002F\00a0";
}
.mediaheading {
margin-top: 0.325em;
font-family: 'Oxygen', sans-serif;
text-align: center;
margin-bottom: 0.7933333333333em;
font-weight: 300;
font-size: 35px;
}
.bottombox {
margin-top: 30px;
}
.caption {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
margin-right: 1.25em;
margin-top: 1.250em;
margin-bottom: 2.188em;
margin-left: 1.25em;
}
.caption::before {
content:' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.imageh:hover + .caption::before {
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
}
.imageh {
position: absolute;
display: block;
height: 100%;
width: 100%;
z-index: 1;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.imageh:hover + .caption .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__media{
padding-top: 130px;
max-width: 100%;
}
.linkstyle {
padding-top: 20px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
}
.servicesspace {
margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eye Of The Storm Productions - Services </title>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="description" content="">
<script type="text/javascript" src='jQuery/jquery-1.9.1.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Shadows+Into+Light|Oswald:400,300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
<!-- Css -->
<link rel="stylesheet" href="http://eyeofthestormproductions.com/gettingthere/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="http://eyeofthestormproductions.com/gettingthere/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>home</li>
<li>artists</li>
<li class="upage">services</li>
<li>events</li>
</ul>
</div>
</nav>
<!-- navbar -->
<img class="logo img-fluid" alt="Eye Of The Storm" src="logo.png">
<div class="boxmain">
<div class="container-fluid">
<div class="row">
<div class="servicesspace"></div>
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="servicesheading">Producer's & DJ'S</p>
<p class="underhserv">Music is at the heart and core of each one of us, so it is obviously important to us that we represent this through our selection of label DJ’s and Producers.
Eye Of The Storm hosts 5 DJ acts, and 5 Live acts,
which between them cover a diverse range of cutting-edge EDM.
Psytrance, Progressive Trance, Techno, Minimal, Glitch Hop and
Bass are the primary styles of music we aim to deliver, however we
strive for a unique, innovative sound that connects our heritage and vision.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/livemusic.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">OUR ARTISTS</a></h1>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Film and Photography</h1>
<p class="underhserv">Our fantastic media and photography crew are some of the best young event photographers in Australia.
With their dynamic and enthusiastic approach behind the lens, each photographer has developed a reputation for beautifully capturing any event in all scenarios.</p>
<br>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/photography.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">OUR MEDIA TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Stage management</h1>
<p class="underhserv">We offer a professional team of stage managers all with countless hours of on-stage experience.
Working at a wide variety of events has lead to an extensive knowledge of electronic equipment and devices, sound, lighting, communication, organization and authority.
This knowledge and experience makes the Eye Of The Storm stage management team very effective and easy to work with.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/stagemanagment.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">STAGE MANAGEMENT TEAM</a></h1>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Stage Design and Construction</h1>
<p class="underhserv">Our friends from Fulcrum Designs provide all of our stages, shade sails, projections and 3D mapping.
From small, cost effective staging solutions, through to full size festival fit outs.
We have a number of professional labourers and experienced fabricators who all have helped in large festivals and productions across Australia.
As well as past and current employment in roles such as lighting technician, audio technician, décor, rigging, landscaping, cabinet making, welding, fabricating and hard physical labour.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/stagedesign.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">FULCRUM DESIGNS TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Graphic Design</h1>
<p class="underhserv">Eye of the Storm Productions works in collaboration with a range of
aspiring graphic designers capable of producing stunning artworks with intricate detail. Our range of
designer allows as to complete pieces and graphics projects very quickly,
regardless of what you need or when you need it, it's not an issue.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="graphics.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">GRAPHIC DESIGN TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="footer">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div id="likebox-wrapper">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<p class="footertext">Copyright © 2017 Eye Of The Storm Productions. All Rights Reserved.</p>
<p class="footertext">Website developed by Charlie Fisher</p>
</div>
</div>
</div>
</div>
</body>
</html>
Also I was going to post this question separately but. The hyperlink on the interactive images doesn't work once clicked. I believe that there are some layers that are not allowing it to work. Is there anyway to bring it forward? Thanks!
So when I fully reduce the browser size, I have my website looking like this, which is how I want it to look:
http://oi66.tinypic.com/10x7zw4.jpg
But when I start stretching out the browser, the position of my picture in the center will begin to change and move all the way to the left. I want the picture to stay on the center regardless of whether I stretch out the browser or reduce it. Is there a way I can fix this issue? Been trying to find out how to solve the issue but cannot find any clue. Please help, thank you.
My HTML:
<html>
<head>
<title>Jason H Kang</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="span">
<h1 class="text-center">Jason H Kang</h1>
<div class="intro">
<p class="text-center">23 Years Old | Junior Web Developer | NJ</p>
</div>
<div class="hello">
<p class="text-center">
Hello I am Jason Kang. Welcome to my personal website!</br>Please feel free to contact me if you have further inquiries.</p>
</div>
</div>
<div class="image">
<img src="kangjason.jpg" alt="face" class="img-circle">
</div>
<!-- <div class="button">
<button type="button" class="btn btn-success">Contact Me!</button>
</div> -->
<div id="footer">
<p class="copyright">Copyright: Jason Kang 2015</p>
</div>
</body>
</html>
My CSS:
body {
background-color: #F8F8FF;
color: #000000;
}
.navbar {
background: rgba(114, 180, 39, 1)
}
.navbar .brand, .navbar .nav > li > a {
color: #FFFFFF;
margin-left: 14em;
padding-right: 0em;
font-family: Gill Sans;
font-size: 1.0em;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #000000;
}
#footer {
background:#000000;
width:100%;
height:47px;
position:fixed;
bottom:0px;
left: 0px;
}
.copyright {
padding-top: 19px;
padding-left: 1.3%;
font-family: Arial;
font-size: 0.9em;
color: white;
}
.intro {
padding-left: 0.35%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.hello {
padding-top: 1.5%;
padding-left: 5%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin-left: 10em;
margin-top: 1em;
position: relative;
}
To center a block level element, you use margin:auto:
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin: auto;
margin-top: 1em;
position: relative;
display:block;
}
JSFiddle Demo
Or, alternatively, you can set the parent to text-align:center;:
.image {
text-align: center;
}
JSFiddle Demo
Change your css for the img-circle class as follows
.img-circle {
width: 11.0em;
height: 11.0em;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
I am trying to make the basic HTML5/CSS3 framework for a Minesweeper Web Game thing. But for some reason I can't get my buttons to move out of their static positions. What did I do wrong? Here is my code (Note: I am using the NetBeans 8.1 IDE)
HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Minesweeper Web App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="http://old.no/icon/entertainment/mini-mine.gif" />
<link rel="stylesheet" href="classes.css" type="text/css"/>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
<body>
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!"/>
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!"/>
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="8x8">
<p>Medium (8x8)</p>
</div>
<div class="button" id="10x10">
<p>Hard (10x10)</p>
</div>
</div>
</div>
</body>
</html>
css:
`
.header {
width:100%;
height:20%;
border-bottom:2px solid #efefef;
border-radius:5px;
background:#80ffff;
text-align:center;
font-family:"Comic Sans MS", cursive;
}
.sub-header {
width:100%;
height:10%;
border-bottom:2px solid #efefef;
border-radius:5px;
background:#e5ffff;
}
.img-box {
display:inline-block;
position:relative;
width:50px;
height:50px;
background:radial-gradient(#cccccc 20%, #999999 80%);
border:2px solid #cccccc;
border-radius:2px;
align-content:center
}
.img-box img {
vertical-align:middle;
}
.button {
position: relative;
background-color: #efefef;
height: 30px;
width: 100px;
border: 2px #999999 solid;
border-radius:8px;
font-family:"Modern No. 20";
font-weight:bold;
margin-left: 100px;
}
.button p {
position: absolute;
top: -8px;
}
.header p {
text-shadow: 2px 2px gray;
right: 1px;
}
.sub-header {
text-align:center;
margin-top:0px;
}
.body {
background:#d9d9d9;
height:1000px;
width:100%;
}
#8x8 {
left: 500px;
}
#10x10 {
left:1000px;
}
.grid-box {}
You can't move the buttons because the div ids are numeric. They should have at least one character. I changed the id's and now its working.
HTML
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!" />
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!" />
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="eight">
<p>Medium (8x8)</p>
</div>
<div class="button" id="ten">
<p>Hard (10x10)</p>
</div>
</div>
</div>
CSS:
.header {
width: 100%;
height: 20%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #80ffff;
text-align: center;
font-family: "Comic Sans MS", cursive;
}
.sub-header {
width: 100%;
height: 10%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #e5ffff;
}
.img-box {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
background: radial-gradient(#cccccc 20%, #999999 80%);
border: 2px solid #cccccc;
border-radius: 2px;
align-content: center
}
.img-box img {
vertical-align: middle;
}
.button {
position: relative;
background-color: #efefef;
height: 30px;
width: 100px;
border: 2px #999999 solid;
border-radius: 8px;
font-family: "Modern No. 20";
font-weight: bold;
margin-left: 100px;
}
.button p {
position: absolute;
top: -8px;
}
.header p {
text-shadow: 2px 2px gray;
right: 1px;
}
.sub-header {
text-align: center;
margin-top: 0px;
}
.body {
background: #d9d9d9;
height: 1000px;
width: 100%;
}
#eight {
left: 200px;
}
#ten {
left: 1000px;
}
.grid-box {}
Here's a fiddle with the solution. For more info, read this.
I constructed a 1-10-1-column header construction in Bootstrap. Now I want to center this ! in the 10-column. But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
And the height of the header depends on the font-size of the text in it. How can I set the height of the header manually by a command?
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
bottom: 0px;
left: 50%;
border-left: 1px dotted #333333;
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
JS:
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
Codepen
Try this:
<div class="row col-md-12">
...
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
...
</div>
If you want change height of header try to set height for div, for example:
<div class="col-md-10 text-center" style="height:100px;">
<li><a>!</a></li>
</div>
Of course for good style, create a specific style at css with value of height and add to class of your div.
But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
It is invalid to have a list tag <li> in the middle of nowhere. Try using a <span> instead (or leave it out alltogether) and your ! will be centered.
<div class="col-md-10 text-center">
<a>!</a>
</div>
How can I set the height of the header manually by a command?
You can assign the height property. I also set a background-color, so you can see that the header actually grows.
.header {
height: 200px;
background-color: blue;
}
actuallay ! is already coming in center your dotted line giving on body after is not align center you need to use translated instead of left. for header to giving height you need to give header in navbar div that is bootstrap class.
here is demo...
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
border-left: 1px dotted #333333;
bottom: 0;
content: "";
display: block;
left: 0;
margin: 0 auto 0 50%;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: -1;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="navbar">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header ">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div></div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
body {
background-image: url(pattern.jpeg); background-attachment: fixed;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
h1,h2,h3
{
color : #6685a8;
}
div#outer {
width: 960px;
background-color:#FFFFFF;
margin-top: 00px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
text-align: left;
}
div#header {
padding: 5px;
margin: 0px;
text-align: left;
background-color :#8bb8e8;
}
div#nav {
width: 160px;
height: 1669px;
padding: 0px;
margin-top: 0px;
float: left;
background-color:#6685a8;
}
div#navright {
width: 160px;
height: 1669px;
padding: 0px;
margin-top: 0px;
background-color:#6685a8;
}
div#main {
float:top;
margin-top: 0px;}
div#footer {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
Once I create the html for it it just has a small header two sidebars and the main part in the middle(which is just a picture) and the footer contains all the information, it is also all centered on the page. The problem is it works fine in chrome and firefox, but when I open it in internet explorer it puts the Main.div and the Footer.div below everything, I need it to be at the top between both the nav.div and right.div
<html>
<head>
<link href="carguys.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outer">
<div id="header" >
<p>
</div>
<div id="nav">
<img src="" alt="" width="160" height="400" align="middle"/>
</div>
<div id="navright">
</div>
<div id="main" align="center">
<img src="" alt="" width="640" height="400"></img>
</div>
<div id="footer">
<h1 align="center">The Show</h1>
*lots of content in this section, including a table*
</div>
</div>
</body>