I checked a lot of answers in SO and the most common solution was to set display for the div as table-cell or inline-block and put vertical-align: middle
So, accordingly the following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
Check out our amazing offer
</div>
</body>
</html>
The CSS code is as follows
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
color: #000;
display: inline-block;
vertical-align: middle;
text-align: center;
background-color: #ffd800;
}
But, the text just does not seem to be centered vertically. Where am I going wrong here?
This would work:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
<div>Check out our amazing offer</div>
</div>
</body>
</html>
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:fixed;
height: 100%;
color: #000;
background-color: #ffd800;
width: 100%;
}
#initial-div div{
text-align: center;
position: relative;
top: 50%;
margin-top: -5px; /* height/2 */
}
http://jsfiddle.net/zpFym/
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 */
}
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?
The layout for this is rather simple and easy to achieve and has been covered here a lot, my problem comes from when I want the right div to be scrollable.
I simply cannot get the left side to be fluid and statically positioned while allowing the right side to be a fixed width and scrollable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" style="display: none !important;">
body {
margin: 0 0 0 0;
overflow: hidden;
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
background-color: #797979;
padding-right: 350px;
padding-top: 20px;
height: 100%;
float: left;
position: absolute;
}
#right-sidebar {
background-color: #cacaca;
width: 350px;
float: right;
overflow: auto;
height:100%;
}
</style>
</head>
<body>
<div class="page-wrap">
<div id="main-content">
<h2>Content Area</h2>
</div>
<div id="right-sidebar">
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Try this - jsFiddle
body {
margin: 0 0 0 0;
background-color: #797979;
/*overflow: hidden;*/
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
position:absolute;
right:200px;
left:0px;
padding:20px;
}
#right-sidebar {
background-color: #cacaca;
position:fixed;
overflow-y:scroll;
right:0px;
width:200px;
height:100%;
}
I had a problem with border-radius in webkit browsers and found the solution at the following URL:
How to make CSS3 rounded corners hide overflow in Chrome/Opera
but iam using a another element with position: absolute; inside this
now I need to make the caption with rounded border too, but do not know how
note: i can't use another border-radius in caption, because this will have an animation
see the code with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Problem</title>
<style type="text/css">
img {
border: 0;
}
a {
text-decoration: none;
}
.wrap-events {
float: left;
position: relative;
width: 500px;
height: 250px;
}
.events {
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.caption {
position: absolute;
width: 100%;
bottom: 0;
color: #FFFFFF;
background-color: #151515;
font: 12px "Arial", Helvetica, sans-serif;
opacity: 0.6;
border-radius: 0 0 50px 50px; /* add border-radius to caption */
}
.caption p {
padding: 10px;
}
</style>
</head>
<body>
<div class="wrap-events">
<div class="events">
<a href="#">
<img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image">
</a>
<div class="caption">
<p>This is a caption</p>
</div>
</div>
</div>
<button id="slide">Slide It!</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('#slide').click(function(){
$('.caption').hide().slideDown(2000);
});
</script>
</body>
</html>
cheers
That is a problem for now I think. May I suggest you use fadeIn() Instead. See a demo
http://www.xs4all.nl/~peterned/examples/csslayout1.html
The tutorial above is essentially what I want with a white column that extends to the bottom of the browser. In the tutorial it actually begins at the very top, with the header being a different shade of grey covering the white.
My case, the header would have to match the textured background. So, what I want is to have the container begin below the header. I don't know if it is possible because right now my header pushes the container down.
http://andrew.x10.mx/adam/
html -
<!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>for adam</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="container">
<br class="push"></br>
<div id="content">
<h1>Hi</h1>
</div>
</div>
</body>
</html>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width:100%;
height: 49px;
background: #fff url("bg.png") repeat-x top left;
padding: 0;
}
.push {
width: 860px;
height: 49px;
margin: 0;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 860px;
text-align: left;
margin: 0 auto;
min-height:100%;
z-index:1;
}
#content { padding: 10px; }
Only tested it in Firefox, though. :)
Updated: feel free to validate. :)
Updated v2: Had a problem when adding content inside the container. Fixed now, but had to do some more complex-ish stuff.