I can't understand, why text on left panel go top?
https://jsfiddle.net/c13Lb7ka/
and how move link-text in front of hovered background?
<html>
<head>
<title>ssssssss</title>
<style>
html, body{
height: 100%;
}
.flat_menu_wrap{
display: table;
width: 75%;
height: 50%;
}
.flat_menu_wrap div{
text-align: center;
vertical-align: middle;
}
.flat_menu_wrap a{
vertical-align: middle;
color: #f00;
font-size: 15px;
font-weight: 600;
display: block;
height: 100%;
}
.f_r_wrap{
width: 100%;
height: 100%;
}
.flat_cell_l{
display: table-cell;
width: 40%;
background-image: url("http://numberimage.ru/img/tst/wood.png");
}
.f_r_t_wrap{
display: table;
width: 100%;
height: 100%;
}
.f_c{
position: relative;
display: table-cell;
background-size: cover;
min-height: 100px;
}
.f_r_t_1{
background-image: url("http://numberimage.ru/img/tst/furnit.png");
}
.f_r_t_2{
background-image: url("http://numberimage.ru/img/tst/frezer.png");
}
.f_r_b_wrap{
display: table;
width: 100%;
height: 100%;
}
.f_r_b_wrap > div{
background-size: cover;
min-height: 100px;
}
.f_t{
display: table;
}
.f_r{
display: table-row;
}
.f_r_b_1{
background-image: url("http://numberimage.ru/img/tst/metal.png");
}
.f_r_b_2{
background-image: url("http://numberimage.ru/img/tst/tools.png");
}
.f_r_b_3{
background-image: url("http://numberimage.ru/img/tst/repair.png");
}
.f_s_a{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
.f_s_a:hover{
background-color: rgba(129, 129, 129, 0.38);
}
.f_t_m{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="flat_menu_wrap">
<div class="f_t f_t_m">
<div class="f_r">
<div class="flat_cell_l f_c">
wodd dfdfd dfd
</div>
<div class="f_c">
<div class="f_r_wrap f_t">
<div class="f_r">
<div class="f_c">
<div class="f_r_t_wrap">
<div class="f_r">
<div class="f_r_t_1 f_c">
<a class="f_s_a" href="/go776.html"><span></span></a>
wodd dfdfd dfd
</div>
<div class="f_r_t_2 f_c">
reload answer next
</div>
</div>
</div>
</div>
</div>
<div class="f_r">
<div class="f_c">
<div class="f_r_b_wrap">
<div class="f_r">
<div class="f_r_b_1 f_c">
wodd dfdfd dfd
</div>
<div class="f_r_b_2 f_c">
<a class="f_s_a" href="/g53333333333355o.html"></a>
reload answer next
</div>
<div class="f_r_b_3 f_c">
reload answer next
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you are trying to center your text so it is vertically centered, simply remove height: 100%;
.flat_menu_wrap a{
vertical-align: middle;
color: #f00;
font-size: 15px;
font-weight: 600;
display: block;
//height: 100%;
}
The text on the left panel stays at the top of the div because it has a display attribute of block. Remove this and the text remains centered.
Fixed fiddle.
Related
I have built this personal web page and for some reason, the last part of the page (a table container) is not displayed on the screen.
* {
padding: 0%;
margin: 0%;
}
body,
html {
height: 100%;
}
/* more CSS properties goes here (not relevant for this question)*/
#fotter {
height: 30%;
background-image: url(bottom.jpg);
background-size: cover;
opacity: 0.6;
display: flex;
}
#fotter-title {
position: absolute;
bottom: 22%;
left: 45%;
font-size: 250%;
}
#table-div {
display: table;
height: 100%;
}
#row-div {
display: table-row;
height: 100%;
}
.image-title {
display: table-cell;
background-size: cover;
background-repeat: no-repeat;
width: 30%;
height: 30%;
}
#first {
background: url(first.jpg);
width: 100%;
}
#second {
background: url(second.jpg);
height: 100%;
}
#third {
background: url(third.jpg.);
}
#forth {
background: url(forth.jpg);
}
<div id="heading"></div>
<h1 id="heading-title">Hi, my name is Imanuel Sinwany</h1>
<div id="body-div">
<div id="left-div">
<div id="body-text">
<p>...............</p>
<p>...............</p>
</div>
</div>
<div id="right-div"></div>
</div>
<div id="fotter">
<div id="table-div">
<div id="row-div">
<div id="first" class="image-div">
</div>
<div id="second" class="image-div">
</div>
<div id="third" class="image-div">
</div>
<div id="forth" class="image-div">
</div>
</div>
</div>
</div>
<h1 id="fotter-title">My Gallery</h1>
I have tried to include the relevant code.
My question is why I can't see the last table (inside "footer" div id) Am I missing some properties?
Thanks for the helpers!
The #table-div element needs a defined width. Otherwise it will collapse to zero pixels because there is no content within the child elements.
The bottom level divs should also use display: table-cell.
* {
padding: 0%;
margin: 0%;
}
body,
html {
height: 100%;
}
#fotter {
height: 30%;
background-image: url(bottom.jpg);
background-size: cover;
opacity: 0.6;
display: flex;
}
#table-div {
display: table;
height: 100%;
width: 100%;
}
#row-div {
display: table-row;
height: 100%;
}
#row-div > div {
display: table-cell;
outline: 1px solid orange;
}
#first {
background: url(https://placehold.it/100x100?text=FIRST);
}
#second {
background: url(https://placehold.it/100x100?text=SECOND);
}
#third {
background: url(https://placehold.it/100x100?text=THIRD);
}
#forth {
background: url(https://placehold.it/100x100?text=FORTH);
}
<div id="fotter">
<div id="table-div">
<div id="row-div">
<div id="first" class="image-div">
</div>
<div id="second" class="image-div">
</div>
<div id="third" class="image-div">
</div>
<div id="forth" class="image-div">
</div>
</div>
</div>
</div>
Have you thought about putting <table> instead of <div>?
<div id="heading"></div>
<h1 id="heading-title">Hi, my name is Imanuel Sinwany</h1>
<div id="body-div">
<div id="left-div">
<div id="body-text">
<p>...............</p>
<p>...............</p>
</div>
</div>
<div id="right-div"></div>
</div>
<div id="fotter">
<table id="table-div">
<tr id="row-div">
<td id="first" class="image-div"></td>
<td id="second" class="image-div"></td>
<td id="third" class="image-div"></td>
<td id="forth" class="image-div"></tr>
</tr>
</table>
</div>
<h1 id="fotter-title">My Gallery</h1>
And CSS:
* {
padding: 0%;
margin: 0%;
}
body, html {
height: 100%;
}
/* more CSS properties goes here (not relevant for this question)*/
#fotter {
height: 30%;
background-image: url(bottom.jpg);
background-size: cover;
opacity: 0.6;
display: flex;
}
#fotter-title {
position: absolute;
bottom: 22%;
left: 45%;
font-size: 250%;
}
table {
border: 1px solid red;
width: 100%;
height: 100%;
}
#row-div {
height: 100%;
}
#first {
background: url(https://placehold.it/100x100?text=FIRST);
}
#second {
background: url(https://placehold.it/100x100?text=SECOND);
}
#third {
background: url(https://placehold.it/100x100?text=THIRD);
}
#forth {
background: url(https://placehold.it/100x100?text=FORTH);
}
I got pretty close to what I want however I think the 32vh is what's ruining my size.
When I use img {height: 100%;} they become too big so I settled down for 32vh; However the left and right div are a few pixels off. It's especially noticeable if you zoom in a little (press ctrl+'+'). It happens on both firefox and chrome. I tried using 50% and 100% height on the images and putting position relative on testB but it didn't seem to help. How do I make both size equal height? I don't mind if there's extra pixels between the right two divs but they must be same height as left aka div a
body * {
box-sizing: border-box;
color: white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
text-align: center;
}
.testA {
background-color: black;
width: 61.5%;
display: inline-block;
padding-right: 18px;
line-height: 65vh;
}
.testB {
background-color: green;
flex-grow: 1;
line-height: 32vh;
position: relative;
}
.testC {
background-color: royalblue;
vertical-align: top;
margin-bottom: 10px;
}
.testD {
flex-grow: 1;
background-color: purple;
vertical-align: bottom;
margin-top: 10px;
}
.test img {
vertical-align: middle;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32vh;
}
.testD img {
vertical-align: bottom;
height: 32vh;
}
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/300x500">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/300x500">
</div>
<div class="testD">
<img src="https://placehold.it/300x500">
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/500x300">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/500x300">
</div>
<div class="testD">
<img src="https://placehold.it/500x300">
</div>
</div>
</div>
I hope this is what u r expecting:
<style>
body * {
box-sizing: border-box;
color: white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
}
.testA {
background-color: black;
width: 61.5%;
display: inline-block;
padding-right: 18px;
line-height: 65vh;
text-align: center;
}
.testB {
background-color: green;
flex-grow: 1;
display: flex;
flex-direction: column;
line-height: 32vh;
text-align: right;
position: relative;
}
.testC {
display: flex;
align-items: center;
justify-content: center;
background-color: royalblue;
vertical-align: top;
}
.testD {
display: flex;
align-items: center;
justify-content: center;
background-color: purple;
flex-grow: 1;
vertical-align: bottom;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32.5vh;
}
.testD img {
vertical-align: bottom;
height: 32.5vh;
}
</style>
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/300x500">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/300x500">
</div>
<div class="testD">
<img src="https://placehold.it/300x500">
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/500x300">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/500x300">
</div>
<div class="testD">
<img src="https://placehold.it/500x300">
</div>
</div>
</div>
not quit sure if I understand your question, but here is my approach.
Use "background-image" instead and then background-size: cover;
<style>
body * {
box-sizing: border-box;
color:white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
}
.testA {
background-image: url(https://placehold.it/500x300);
width: 61.5%;
}
.testB {
background-color: green;
flex-grow:1;
line-height: 32vh;
text-align: right;
position: relative;
}
.testC {
background-image: url(https://placehold.it/500x300);
margin-bottom: 6 px;
background-size: cover;
}
.testD {
background-image: url(https://placehold.it/500x300);
margin-bottom: 10px;
background-size: cover;
}
.test img {
vertical-align: middle;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32vh;
}
.testD img {
vertical-align: bottom;
height: 32vh;
}
</style>
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
So I centered my text. But now there is a white space between body and the div. This is the HTML:
.parent-aligner {
background: #f2f2f2;
width: 100vw;
height: 500px;
text-align: center;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
I think what causes this is the width: 100vw;. But when I change it to width:100%; the text isn't centered anymore. Any suggestions on how to fix this?
Deduct the width of the scrollbar from the viewport width for smaller screen sizes...
EDIT: Add max-width property.
(And also remove the margin on body)
body {
margin: 0;
}
.parent-aligner {
background: #f2f2f2;
width: 100vw;
max-width: 100%;
height: 500px;
text-align: center;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
try this
.parent-aligner {
background: #f2f2f2;
width: 100%;
height: 500px;
text-align: center;
display:table;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
I've been trying to figure how to achieve this without JavaScript and padding and so far it's been mission impossible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:
http://jsfiddle.net/zLzg8v3s/1/
This is exactly what I'm trying to do but with divs and CSS:
http://jsfiddle.net/u0u7snh6/1/
HTML
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 400px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
This is as close as I can get to the layout... what I cannot fix:
1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)
2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:
<!doctype html>
<html lang="en-CA" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MOCKUP</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 1200px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
</style>
</head>
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
</html>
Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/
For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/
CSS:
#content{
margin: 0 auto;
}
Remove this from your css:
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
Removing the asterisk fixed everything.
Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/
HTML:
<div id="container">
<div class="header">
<h4>This is header</h4>
</div>
<div class="row">
<div class="content">
<div class="left">Left Col</div>
<div class="middle">Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
</div>
<div class="right">Right Col</div>
</div>
</div>
<div class="footer">
<h4>This is footer</h4>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.row {
display: table-row;
width:100%;
height: 100%;
}
.header, .footer{
background: pink;
display:table-row;
text-align: center;
vertical-align: middle;
}
.content {
display: table;
background: brown;
width:100%;
height: 100%;
overflow: auto;
}
.left, .right{
background: green;
display: table-cell;
width:10%;
vertical-align: middle;
}
.middle{
background: brown;
display: table-cell;
vertical-align: middle;
}