I'm picking up bootstrap after some time away,
I trying to create a simple responsive page
but I'm finding that when I resize the browser to a certain point
my central div overlaps the div above.
I've tried adjusting media queries, setting the top margins etc.
I've mocked up a page for viewing below
Thanks
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bwin slot game</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</head>
<body>
<div class="container-fluid">
<div class="sitebg">
<div class="row">
<div class="col-md-12 clearfix header">
<div id="tContainer"></div>
</div>
</div>
<div class="row">
<div id="game_container">
<div class="col-md-8">
<div id="sContainer" class="pull-right"></div>
</div>
<div class="col-md-4">
<div id="sContainer2"></div>
</div>
</div>
</div>
<div class=" row clearfix">
<div class="col-md-12"><div id="bContainer"></div></div>
<div class="faqs col-md-12"><div id="bContainer2"></div></div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#sContainer{
width:900px; height:500px;
background-color:#ccc;
}
#sContainer2{
width:320px; height:368px;
background-color:#c88;
}
#tContainer{
width:1087px; height:49px;
background-color:#c8c;
margin:0 auto;
}
#bContainer{
width:1087px; height:93px;
background-color:#ccc;
margin:0 auto;
}
#bContainer2{
width:970px; height:329px;
background-color:#c8c;
margin:0 auto;
}
.header{
background-color: #fff;
position: fixed;
top: 0;
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.footer{
position: fixed;
bottom: 0;
width: 100%
}
.faqs{
background-color:#0b1140;
}
#accepted_payments img, .faqs img{
margin: 0 auto;
}
/* width:100%
* Header
*/
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
#game_container{
width:90%;
margin:10% auto 10% auto;
}
}
/*Game*/
#game_container{
width:90%;
margin:10% auto 10% auto;
}
#game{
padding-right: 0;
padding-bottom: 100px;
}
/*
* Footer
*/
#accepted_payments {
text-align: center;
width: 100%;
background: #fff;
min-height: 38px;
margin-top: 50px;
vertical-align: top;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
#game_container{
width:100%;
height:500px;
margin:10% auto 100px auto;
clear: both;
}
}
#media (min-width: 992px) {
#game_container{
margin:10% auto 100px auto;
width:100%;
margin:0 auto
}
}
#media (min-width: 1700px) {
#game_container{
margin:6% auto 100px auto;
width:70%;
}
#game{
padding-right: 5%;
}
}
Sorry just noticed the header class was position:fixed
Once I took that out works better now
Related
I am trying to position a div in the center of a grid header but many of my attempts have failed.
Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe
Here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ermesinde Clube de Karaté</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="brand">
<img src="/images/eck_logo.png">
<div class="page-headers">
<h1>ECK</h1>
<h3>ERMESINDE CLUBE KARATE</h3>
</div>
</div>
</div>
<div class="section1">Section1</div>
<div class="section2">Section2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
And here is the css:
.wrapper{
display:grid;
width:100%;
background-color:#e3e3e3;
grid-template-rows:
[grid-start hd-start] 100vh
[hd-end sc1-start] 100vh
[sc1-end sc2-start] 100vh
[sc2-end ft-start] 125px
[ft-end grid-end];
grid-template-columns: 100%;
}
div div:hover{
border:1px solid black;
}
/*
HEADER
*/
.header{
grid-row:hd;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/black_belt_stock_photo.jpg);
}
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
}
.brand img{
border: 2px rgb(109, 12, 12) solid;
border-radius: 50%;
}
.brand h1{
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
.brand h3{
color:white;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.section1{
grid-row:sc1;
}
.section2{
grid-row:sc2;
}
.footer{
grid-row:ft;
}
This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.
I have tried to move around in the css with somethings like:
- position:absolute;
- vertically-align:center;
- justify-content:right; align-content:center;
But none of these worked for me, so please could someone help me?
Thank you.
This might work for you:
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
position: absolute;
right: 2rem;
top: 50%;
margin-top: -160px; /* 1/2 image height */
}
I was looking for some help in regards to media queries. This is the first time I am using this on a site, but it doesn't seem to work. This is also the first time I am changing my html4 code to html5, not sure if that's where the problem lies.
My HTML Code:
<!doctype html> <!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
My CSS:
body {
margin:0 auto;
background:#f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration:none;
font-weight:bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color:#0CF;
}
header {
margin:0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height:59px;
}
#banner {
margin:0 auto;
width: 883px;
height: 439px;
background:url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height:24px;
}
#cols {
margin: 0 auto;
height:188px;
width:883px;
}
#spacer3 {
height:39px;
}
footer {
margin: 0 auto;
height:98px;
width:883px;
}
<!-- MEDIA QUERIES -->
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
When I resize the browser to below 850px the color still stays the same and doesn't change to red.
It does not work since you are using HTML comments inside CSS code which leads to syntax error and browser not recognizing the code. Remove the comment or modify it from <!-- --> to /* */ and it works.
body {
margin: 0 auto;
background: #f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration: none;
font-weight: bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color: #0CF;
}
header {
margin: 0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height: 59px;
}
#banner {
margin: 0 auto;
width: 883px;
height: 439px;
background: url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height: 24px;
}
#cols {
margin: 0 auto;
height: 188px;
width: 883px;
}
#spacer3 {
height: 39px;
}
footer {
margin: 0 auto;
height: 98px;
width: 883px;
}
/* Media Queries */
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
<!doctype html>
<!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
I have recently discovered skeleton.css and it is exactly what I was looking for. I didn't quite understand columns, but the example for buttons did exactly what I wanted as far as stacking elements as the screen narrows. What I have works beautifully, but I am not yet savvy enough with css to make the buttons into columns. The html and css code I have cut down to just what works. Any suggestions as to how to convert buttons to columns would be greatly appreciated.
My code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div>
<a class="button" href="#">Would like column 1</a>
<button>Would like column 2</button>
<input value="Would like column 3" type="submit">
<input value="Would like column 4" type="button">
<input value="Would like column 5" type="button">
</div>
</div>
</body>
</html>
/* css */
.container {
position: relative;
width: 80%;
max-width: 960px;
margin: 0 auto;
padding: 0; }
.container .columns {
float: left;
width: 100%;
box-sizing: border-box; }
/* For devices larger than 550px */
#media (min-width: 550px) {
.container .columns {
margin-left: 4%; }
}
html {
font-size: 62.5%; }
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, ans-serif;
color: #222; }
a {
color: #1EAEDB; }
a:hover {
color: #0FA0CE;
}
.button,
button,
input[type="submit"],
input[type="button"] {
display: inline-block;
background-color: transparent;
border-radius: 4px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid #bbb;
height: 38px;
width:188px;
line-height: 38px;
padding: 0;
white-space: nowrap;
box-sizing: border-box;
}
button {
margin-bottom: 0;
}
.container:after,
.row:after/**,
.u-cf**/ {
content: "";
display: table;
clear: both;
}
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
I decided to play with it myself and replaced the inputs with divs and changed the css accordingly. The code below will produce five equal width columns which will stack in four stages as the screen narrows. It works perfectly for what I need and was pretty simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton2.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div class="column">Column 1<br>More stuff here</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="column">Column 5</div>
</div>
</body>
</html>
.container {
position: relative;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
/* For devices larger than 550px */
#media (min-width: 550px) {
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
}
.column {
display: inline-block;
width:188px;
vertical-align: text-top;
padding-left: 10px;
white-space: nowrap;
box-sizing: border-box;
}
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>
How do I get "mymessage.gif" to show over "bread_wine.jpg".
mymessage.gif has a transparent background.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>overlap images</title>
<style type="text/css">
<!--
#navbar {
font-size: 18px;
font-weight: bold;
text-align: center;
}
#thebigimage {
background-image: url(bread_wine.jpg);
height: 548px;
width: 731px;
margin-right: auto;
margin-left: auto;
}
#overlapthis {
background-image: url(mymessage.gif);
}
-->
</style>
</head>
<body>
<div id="navbar">this is the nav bar</div>
<div id="thebigimage">
<div id="overlapthis"></div>
</div>
</body>
</html>
#overlapthis {
background-image:url("mymessage.gif");
height:100px;
left:50px; /* play around with this */
position:absolute;
top:90px; /* and play around with this */
width:500px;
}
#thebigimage {
background-image:url("bread_wine.jpg");
height:548px;
margin-left:auto;
margin-right:auto;
position:relative; /* and this has to be relative */
width:731px;
}
Try
#overlapthis {
position: absolute;
top: ??px;
left: ??px;
z-index: 1;
}
As you have it right now, the image overlaps already. You just can't see it because you didn't add sizes to your overlapthis div. Try this:
#overlapthis {
background-image: url(mymessage.gif);
width: 500px;
height: 100px;
}
Then add margins (and an position: absolute) to position the image at your desired location.