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.
Related
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/
I'm trying to figure out why when I insert text into one of the divs in the horizontally scrolling div it causes the text's parent div to push downward.
Any ideas?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
Demo
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
Does this satisfy your requirements?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
//custom code by naren
body{
overflow:hidden;
}
footer{
height: 50px;
bottom: 0px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.project_container {
border: purple 4px solid;
height: auto;
width: auto;
overflow: auto;
white-space: nowrap;
position: absolute;
overflow-x: hidden;
top: 50px;
bottom: 50px;
left: 0px;
right: 0px;
}
header{
position: absolute !important;
top: 0px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
//custom code by naren
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
</header>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer class="footer">
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
Also find below the JSFiddle:
https://jsfiddle.net/Kai_Draord/kz4uap1t/
I effectively have one goal in mind:
The ".hours" div should be centered and BELOW the two divs (.phone and .mail) which share the screen size equally.
so effectively:
.nav
.phone / .mail
.hours
\\\\\.footer/////
HOWEVER: Here is the tricky part... it shows up okay in Atom. Whenever I try to see it in Chrome though, it puts .hours before the .phone and .mail line...
Why?
Note: Just checked in Safari as well, and the same error is displayed. Thoughts?
* {
margin:0;
font-family: 'Roboto', sans-serif;
}
.topWrapper{
position: fixed;
top:0;
z-index:10;
width: 100%;
}
.header{
/*border: 1px solid rgb(0,0,0);*/
text-align: left;
width: 100%;
background-color: white;
height:75px;
position: relative;
top:0px;
}
#title{
padding-left: 10px;
padding-top: 10px;
font-size: 50px;
}
#contactBox{
position:fixed;
right:20px;
top:20px;
width:100px;
height:40px;
background-color: black;
color:white;
}
/*CONTACT US BUTTON = FTEXT*/
.fText{
font-size: 15px;
padding: 10px;
}
.nav{
height:50px;
width:100%;
border: 1px solid rgb(200,200,200);
background-color: white;
}
#nBar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
li {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 15px 40px 10px 40px;
}
#home{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#bio{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#projects{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#contact{
height:26px;
margin-top: 0px;
/*border: 1px solid black;*/
}
#home:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#bio:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#projects:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
#contact:hover{
background-color: black;
color:white;
/*transition: 0.25s;*/
}
a{
text-decoration: none;
color:black;
}
/*body starts here*/
.contentWrap{
width:100%;
position:absolute;
top:135px;
z-index: 1;
}
.container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
min-width: 960px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.phone{
width:48%;
height: 350px;
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
border-right: 1px solid rgb(200,200,200);
padding-left:10px;
/*padding-right: ;*/
}
.phone:hover{
background-color: rgb(208, 177, 202);
}
.phoneImg{
height:auto;
width:75%;
}
.mail{
width:47%;
height:350px;
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;
padding-left: 10px;
}
.mail:hover{
background-color: rgb(208, 177, 202);
}
.mailImg{
height:auto;
width:75%;
}
/*hours is the entire hours div*/
.hours{
width:100%;
-webkit-box-ordinal-group:3;
-ms-flex-order:2;
order:2;
padding-bottom: 50px;
}
/*title of hours*/
.textHours{
padding-top: 10px;
text-align: center;
font-size: 50px;
}
/*available times*/
.timewindow{
text-align: center;
padding-top: 10px;
font-size: 20px;
}
/*the explanation of the time*/
.timeExp{
text-align: center;
padding:10;
}
.footer{
text-align: center;
width:100%;
-webkit-box-ordinal-group:4;
-ms-flex-order:3;
order:3;
height:65px;
border-top: 1px solid rgb(200,200,200);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul A">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styleContact.css" />
<script src="jquery-3.1.1.min.js"></script>
type="text/javascript" src="scriptContact.js"></script>
<title>dockmann</title>
</head>
<body>
<div class="topWrapper">
<div class="header">
<h1 id="title">DOCKMANN</h1>
<a href="mailto:"><div id="contactBox">
<p class="fText">
Contact Us!
</p>
</div>
</a>
</div>
<div class="nav">
<ul id="nBar">
<!--inserted .navigation because it will help
differentiate the nav bar links when I add
other "<a> links" along the page -->
<a class="navigation" href=""><li id="home">
HOME
</li></a>
<a class="navigation" href=""><li id="bio">
BIO
</li></a>
<a class="navigation" href=""><li id="projects">
PROJECTS
</li></a>
<a class="navigation" href=""><li id="contact">
CONTACT
</li>
</a>
</ul>
</div>
</div>
<!-- body starts here -->
<div class="contentWrap">
<div class="container">
<div class="phone">
<center>
<a class="phoneLink" href="tel:">
<img class="phoneImg" src="images/phone.png" /></a>
</center>
</div>
<div class="mail">
<center>
<a class="mailLink" href="mailto:">
<img class="mailImg" src="images/mail.png" /></a>
</center>
</div>
<div class="Hours">
<h1 class="textHours">HOURS:</h1>
<h5 class="timewindow">9:00 (EST) - 21:00 (EST)</h5>
<p class="timeExp">
We normally pick up our phones during this time window.
<br />
However, it is okay to call afterhours.
<br />
(All times shown are shown in local Miami time)
</p>
</div>
<div class="footer">
footer;
</div>
</div>
</div>
</body>
</html>
Classes are case-sensitive, and you accidentally put class="Hours" in your HTML. Fix that and you'll see the CSS apply.
I am making a fluid layout for a website. All elements on the home page of the website look correct when I view it on Safari or Chrome but when I try to view it on FireFox, the logo and the container for the logo become very big and it takes up more space than what I have set for it.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/stylesheetHome.css" />
<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div id="logoBlock" class= "grid_4">
<img width=100px src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
<div id="navigation" class="grid_8 omega">
<ul id="navList">
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../index.html" id="homeNav">Home</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle" >
<a class= "round-button" href="../html/gamesPageTemporary.html" id="gamesNav">Games</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/resumePage.html" id="resumeNav">Resume</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/contactPage.html" id="contactNav">Contact</a>
</div></div>
</li>
</ul>
</div>
<div id="section1" class="grid_10">
<div id="sizzle" class="grid_8">
<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&version=3&rel=0""></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&version=3&rel=0"" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
<!--<iframe width="620" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>-->
</div>
</div>
<div id="section2" class="grid_5">
<div id="portrait" class="grid_3">
<img width=300px src="../img/IshiharaPlate3.svg" />
</div>
</div>
<div id="section3" class="grid_5 omega">
<h2>About me</h2>
<p>Video games as a medium is the most amazing creative outlet for me and I am working hard to do it for a living. Scripting is my specialty, but I enjoy working on every part of a game(VFX are especially fun). I have a wide variety of experience from working at Oak Ridge National Lab on a game environment for GIST analysts to use to making a mobile game about catching birds while falling through the sky. I love all types of games and I am always trying to improve upon what I have learned so that I can make new and exciting games.</p>
</div>
<div id="contact" class="grid_4">
<p><span>Michael Agreda © 2014</span></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../jquery.fitvids.js"></script>
<script>
// Target your .container, .wrapper, .post, etc.
$("#sizzle").fitVids();
</script>
<body id="home">
</body>
</html>
And here is my CSS:
/*global*/
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #faf3bc;
background: #333;
width: 100%;
}
a {
color: #4fb69f;
text-decoration: none;
}
/*typography*/
h1 {
font-size: 1.750em;
font-weight: 100;
letter-spacing: -1.5px;
}
h2 {
font-weight: 100;
font-size: 1.500em;
font-size: 2.5vw;
color: #b4c34f;
}
h3 {
font-weight: 100;
font-size: 1.125em;
color: #ed6c85;
}
#logoBlock{
position: relative;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
top: 0;
background-color: #420600;
width: 100%;
height: 5%;
}
/*#logoBlock h1 {
color: #FFF;
text-align: center;
top: 20px;
}*/
#logoBlock img {
width: 100%;
height: 10%;
left: 70%;
}
#navigation{
position: relative;
width: 80%;
height: 15%;
left: 10%;
background-color: #008080;
}
#navigation ul{
list-style-type:none;
margin: 0 auto;
width: 100%;
height: 25%;
margin-left: 12%;
}
#navigation li {
display:inline;
float: left;
padding: 1%;
width: 15%;
}
.round-button {
width:85%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #ff8080;
overflow:hidden;
background: #c83737;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#F5F5DC;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
/*
.home {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg2 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.games {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg3 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.resume {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg4 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.contact {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
*/
#section1 {
position: relative;
height: 40%;
width: 100%;
}
#section 1 h1 {
height: 2%;
width: 2%;
left: 5%;
color: #FFF
}
#sizzle {
position: relative;
left: 17%;
top:-10%;
}
#section2 {
position: relative;
top: 45%;
height: 20%;
width: 30%;
}
#portrait {
position: relative;
height: 30%;
width:30%;
left: 10%;
}
#section3 {
top: 40%;
}
#contact {
height: 10%;
width: 100%;
background-color: "blue";
}
body#home .round-button a#homeNav,
body#games .round-button a#gamesNav,
body#resume .round-button a#resumeNav,
body#contact .round-button a#contactNav {
background: #30588e;
}
How do I get the layout to show properly in Firefox?
Try to put double quotes around the 100px in the img tag and remove the px:
<div id="logoBlock" class= "grid_4">
<img width="100" src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
EDIT: Thanks #RichardB
The width of your block and image are both set to 100%, and so are filling the full width of the browser window.
Your inline style says you want the logo to be 100px.
If that is the case then change
#logoBlock img {
width: 100%;
to
#logoBlock img {
width: 100px;
If it is supposed to be a more responsive in its size, then you may want to look at max-width, which allows it to expand only up to a specified point.
As to why it was working in Chrome - my guess is that they are choosing the inline style over the css one (Rems code fix should also be applied).
There are two issues that I have;
1) I'd like the images in the header to stay within my 990px header during browser window resize.
2) How do I align (middle) images withtin header?
This is what I get after resize
Orange image goes under black one.
While they suppose to stay like this (within 990px of course)
Here is the code:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 930px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
margin-left: 224px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
</style>
</head>
<body>
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" border="0" alt=""></div>
<div class="right"><img src="imgn/banners/banner1.gif" border="0" alt=""></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</body>
HTML:
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" alt="" border="0"></div>
<div class="right"><img src="imgn/banners/banner1.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
CSS:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 933px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
float:right; margin-left:0px; width:748px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
Use the CSS background-image property instead of using an image. This way you can set the width of the container div as a percentage of the width of the outer container div based on the new size of the window after resize.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body { background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px; padding: 0; margin: 0; }
h1 { padding: 0px; margin: 0px; }
#wrapper{width:990px; margin:0 auto;}
#container { margin:0px auto; border:0px solid #bbb; padding:10px; width: 990px; }
.white-box { width: 180px; margin: 0px; }
#main-header { border:1px solid #bbb; height:98px; padding:3px; background:#FFF; width: 990px; margin:0px auto; }
#main-content { margin-top:10px; padding-bottom:10px; }
#main-body { margin-left:10px; width:666px; height:150px; }
#main-footer { margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; }
.box { padding: 8px; border: 1px solid silver; -moz-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 5px; border-radius: 8px; background-color: #fff; }
.box1 { width: 200px; float: left; }
.box2 { float:right; margin-left:0px; width:748px; }
div.left { width: 200px; float: left; }
div.right { width: 730px; float: right; margin-right:3px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="main-header">
<div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" alt="" border="0"></div>
<div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</div>
</body>
</html>
As suggested by Pete in another thread: You need to increase the min-width of #main-header to around 950px