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 */
}
Related
what I want to ask is "shouldn't be line-height have a value of 3em in h2. how it is actually working. when I set set font-size:2em and line-height:3em it is not in center vertically. How can be a line-height:1.5 is keeping the text in center of header?"
html{
font-size:10px;
}
h2{
margin:0;
}
.card{
width: 35em;
height: 22em;
margin: 05em auto;
background-color: red;
}
.card header{
height: 3em;
padding: 1em;
background: orange;
}
.card header h2{
font-size:2em;
line-height: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section class="card">
<header>
<h2>This is Header</h2>
</header>
</section>
</body>
</html>
I figured it out myself.
problem is here
.card header h2{
font-size:2em;
line-height: 1.5em;
}
basefont size is set to 10px. so when i set font-size:2em it means font-size has value "20px" so when line-height is set to 1.5em it is taking the current font-size value which is 20px (2em) so now line-height:1.5em means 1.5 of 20px which is 30px.
in short: em refers to local font-size value first then to parent and last to global.
I'm trying to make my #logo element disappear once the screen gets smaller than 670px. It works in that the logo disappears but it takes my navigation with it for some reason. Why is my nav ul disappearing?
The Code:
header {
position: fixed;
background-image: url(img/grey-bg.jpg);
background-size: cover;
width: 100%;
height: 8%;
min-height: 50px;
z-index: 2;
}
header nav ul {
position: relative;
margin-top: -28px;
margin-right: 5%;
z-index: 3;
}
header li {
font-size: 1rem;
font-family: 'Cabin Sketch', cursive;
float: right;
color: #fff;
padding-right: 30px;
z-index: 3;
}
#logo {
height: 75%;
margin-top: 5px;
margin-left: 10%;
}
#media screen and (max-width: 670px) {
#logo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jovial Entertainment | Home</title>
<link href="main.css" type="text/css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Cabin+Sketch'rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<img src="img/JOVIAL-LOGO-TEXT.png" id="logo"/>
<nav>
<ul>
<li>VIDEOS</li>
<li>ABOUT</li>
<li>PHOTOS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</body>
</html>
Because you changed it to display: none, it's not there on the page any more, therefore there's nothing to take up the space where it once was, so your nav is moving over to where the logo was. Try visibility: hidden instead.
You have negative margin on your navigation, so once you remove the logo your navigation just goes above the top of the screen. You need to set margin top of your navigation to zero in your media query.
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
Use % layout responsive
HTML Source
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
<!-- Top -->
<div id="top"> TOP</div>
<!-- Menu MID LEFT -->
<div id="midleft"> Menu Meio Esquerda</div>
<!--MID-->
<div id="mid"> BANNER</div>
<!-- Back -->
<div id="back"> RordaPé </div>
</body>
</html>
CSS Soruce
html, body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
margin:0; height: 100%;
}
#top{
background-color: #bfb;
position: relative;
width: 100%;
height:18%
}
#midleft
{
background-color: #ddd;
position: relative;
width: 12%;
height: 65%;
padding: 1%;
padding-right: 2%;
}
#mid{
background-color: #ff9;
float: right;
width: 75%;
height: 35%
}
#back{
background-color: #bfb;
width: 100%;
height: 7%;
clear:both;
}
I need to make my layout like this!
I'm not able to do this Responsive Layout Mode.
Could someone send me link explaining Position BOX in CSS3?
Or should do another layout mode without BOX CSS?
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>