I'm wondering if it's possible to have the 4 colored divs around the black svg, to fill in the extra width or height of the blank space (the pink) when the screen is resized. There's a pink div behind the logo, to give you and example of the space that needs to be filled by the 4 colored divs. Is something like this possible in pure CSS and HTML or is JS needed? Any info on this helps, thanks.
<style>
ul {
margin:0;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 77%;
}
li {
display: block;
font-size:17px;
text-decoration:none;
}
.navtext{
background-color:orange;
width: 35%;
height:20%;
right:0px;
position:absolute;
display: flex;
align-items: center;
}
body {
margin: 0;
}
.header{
background-color:yellow;
width:100%;
height:20%;
}
.logo{
position:absolute;
left:5%;
background-color:lightblue;
height:20%;
display: flex;
align-items: center;
}
.logotext{
font-size:27px;
font-weight:bold;
}
.front {
background-color:blue;
height: 81vh;
position: relative;
z-index: 2;
width:100%;
}
.video {
background: url(https://picsum.photos/id/107/800/800) center/cover;
height: 100vh;
margin-top: -100vh;
position: sticky;
width:100%;
top: 0;
}
.container {
height:200vh;
}
.right{
right:0px;
width:50%;
Height:91%;
position:absolute;
background-color:pink;
/*display: flex;*/
justify-content: center;
align-items: center;
}
.logoanimecont{
text-align:center;
width:75%;
margin:auto;
}
.left{
width:50%;
Height:91%;
background-color:green;
display: flex;
justify-content: center;
align-items: center;
}
.titlebox {
text-align:center;
width:75%;
background-color:purple;
margin:auto;
}
.title {
font-size:30px;
text-align:center;
}
.hide{ display:none }
.rightbordertop{
width:100%;
height:25%;
background-color:red;
}
.rightborderbottom{
width:100%;
height:25%;
bottom:0px;
position:absolute;
background-color:darkgrey;
}
.rightborderleft{
width:25%;
height:75%;
background-color:brown;
}
.rightborderright{
right:0px;
height:75%;
width:25%;
background-color:blue;
position:absolute;
}
svg { position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50%;
height: 50%;}
</style>
<div class="container">
<div class="front">
<div class="header">
<div class="logo">
<span class="logotext">f-e</span>
</div>
<div class="nav">
<div class="navtext">
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="left">
<div class="titlebox">
<span class="title">Random text, centered v and h.</span>
</div>
<div class="right">
<div class="rightbordertop"></div>
<div class="rightborderright"></div>
<div class="rightborderleft"></div>
<div class="rightborderbottom"></div>
<div class="logoanimacont">
<div class="logoanime">
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
<path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
<path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="video"></div>
</div>
<div style="height:150vh"> more content later </div>
There are many ways to do it, but without information what do blue and red containers contain content wise, we can only guess. One suggestion though, don't use position: absolute that much, master flex layout A complete guide to flexbox. This solution requires grouping of central three sections into one (maroon, pink and blue containers are now wrapped in div with inline style):
body {
margin: 0;
}
.right {
right: 0px;
width: 50%;
height: 91%;
position: absolute;
background-color: pink;
justify-content: center;
align-items: center;
}
.hide { display: none }
.rightbordertop {
width: 100%;
height: 25%;
background-color: red;
}
.rightborderbottom{
width: 100%;
height: 25%;
bottom: 0px;
position: absolute;
background-color: darkgrey;
}
.rightborderleft{
height: 100%;
flex-grow: 1;
background-color: brown;
}
.rightborderright{
height: 100%;
flex-grow: 1;
background-color: blue;
}
svg {
height: 100%;
}
<div class="right">
<div class="rightbordertop"></div>
<div style="height: 50%; display: flex;">
<div class="rightborderleft"></div>
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
</svg>
<div class="rightborderright"></div>
</div>
<div class="rightborderbottom"></div>
<div class="logoanimacont"></div>
</div>
For simplicity stake, I focused only on the right side of you page, where the svg is surrounded by the four div. Also be aware that I used new class names to make the code easier to understand.
I used flexbox one level at a time to achieve this effect. You can use the new .container div and place it wherever you wish on your page (just be aware of the possible conflicting class names with your current project).
NOTE: Run the code snippet on full screen so you can test the effect.
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 40%;
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<div class="container">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" /></svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
I just want to add this new example to show that the my last answer can and will achieve the desired effect. One just need to add the specifics of the project (which are unknown to us).
* {
margin: 0;
padding: 0;
}
.header {
background: yellow;
width: 100%;
height: 15vh;
}
.nav {
background: orange;
width: 35%;
height: 15%;
position: absolute;
right: 0;
}
.content {
display: flex;
align-items: center;
font-family: sans-serif;
background: purple;
}
.left-column {
position: absolute;
left: 0;
width: 50%;
height: 70%;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
.right-column {
position: absolute;
right: 0;
width: 50%;
height: 70%;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 30%;
/* size of the svg */
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<body>
<div class="header">
<div class="nav"></div>
</div>
<div class="left-column">
<div class="content">Center and Middle Content</div>
</div>
<div class="right-column">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" />
</svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
Had to re-write using flexbox to obtain what I wanted. Incase anyone comes across a problem similar, im posting my answer because it achieved what I needed after re-writing the code.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#right>* {
flex: 1 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsidebottom"></div>
</div>
</div>
I've got a header on my webpage that changes height based on the viewport (eg. 15vh) and has a min-height of 50px.
I'd like to make a colored square within this header that is always exactly 50% of the height of the header regardless of the user's viewport. There will be no content in the colored box. It is for style purposes only. I know that I can't use height: 15%; as there is no content in the container and, as a result, nothing will be displayed. I can't define the box in terms of viewport units because the header isn't always 15% of the height of the viewport (due to the min-height assignment).
Is there any way to accomplish this with CSS?
Here's my setup:
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
float: left;
height: 50%;
background-color: black;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* #end */
<div class="header clearfix">
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
<div class="box">
<img src="http://www.bluebean.ca/grey.jpg">
</div>
</div>
You can do this with absolute positioning. Like this :
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
position: relative;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
z-index:10;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
position:absolute;
top:0;
left:0;
height: 50%;
background-color: black;
width: 100%;
}
<div class="header clearfix">
<div class="box"></div>
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
</div>
You will also need to set z-index value greater than that of box to keep box below elements in header.
Im trying to slide in a div then move 3 other divs.
I have fiddle showing how I want to do it. But its not 100% correct.
If you check the fiddle you will see it slides in when you press "Press me". But instead of going over the 3 red divs I want it to push them to the side.
Fiddle with code
HTML
<div class="wrapper wrapper-content">
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div id="red">Press Me</div>
<div id="red"></div>
<div id="red"></div>
</div>
</div>
CSS
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:absolute;
height:100%;
z-index:1;
}
.container {
border: 2px solid #73AD21;
width:100px;
}
Script
$(function()
{
$("a#toggle-menu").click(function()
{
$("#effectMenu").animate({width:'toggle'},350);
return false;
});
});
Change the id to a class,toggle a class to the items called left,in the css animate the transition of adding the class using css transitions
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div class="red">Press Me</div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
$(function() {
$("a#toggle-menu").click(function() {
$("#effectMenu").animate({
width: 'toggle'
}, 350);
$(".red").toggleClass('left');
return false;
});
});
.red {
background-color: red;
height: 50px;
margin-top: 2px;
width: 100px;
position: relative;
transition: all 350ms ease-in-out;
}
#effectMenu {
display: none;
background: grey;
color: #FFF;
width: 30px;
position: absolute;
height: 100%;
z-index: 1;
}
.container {
border: 2px solid #73AD21;
width: 100px;
}
.left {
margin-left:30px;
transition: all 350ms ease-in-out;
}
https://jsfiddle.net/ygmbnwgL/
Using float and relative position instead of absolute one, you can do it :
CSS code :
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
float: left;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:relative;
height:150px;
z-index:1;
float: left;
}
.container {
border: 2px solid #73AD21;
width:150px;
}
See this fiddle
I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.
No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/
Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/
Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.
I have three divs: head, foot and textbox.
The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).
My question is: How can I change the textbox's div bottom to fix different monitors size? I can't use 100% height because it hangs on foot div. In this homepage I don't use scrollbar, because the backgrounk is changing image files. I woud like to make it somehow the margin-bottom part keep distance the monitor's bottom.
<html>
<head>
<title>Div bottom</title>
<style>
.head{
position:absolute;
clear:both;
top:0px;
right:0px;
float:right;
width:100%;
height:80px;
background-color:grey;
}
.foot {
position:fixed;
clear:both;
height:35px;
right:0px;
float:right;
width:100%;
background-color:grey;
bottom:0px;
}
.textbox {
overflow: hidden;
position: relative;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
margin-top:100px;
width:910px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="head">HEAD</div>
<div class="textbox">?</div>
<div class="foot">FOOT</div>
</body>
</html>
You could use javascript to accomplish this .. add in the following script to your head:
<script type="text/javascript">
window.onload=resize_height;
function resize_height(){
var height=0;
var divs=document.getElementsByTagName('div');
if(self.innerHeight){
height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
height=document.documentElement.clientHeight;
}else if(document.body){
height=document.body.clientHeight;
}
divs[1].style.height=(parseInt(height)-200)+'px';
}
</script>
The 200 comes from height and padding and margins, you could dynamically generate the 200 by taking the height/padding from your other divs and offsetting it to achieve what you want.
EDIT:
also, for textbox, remove margin-top:100px; and replace with top:100px; ....
.textbox {
overflow: hidden;
position: relative;
top:100px;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
/*margin-top:100px;*/
width:910px;
margin-left: auto;
margin-right:auto;
}
You don't have to use a script for that, here is a pure CSS solution for the 'header content footer' layout.
the margin between the sections is optional, so and so are the vertical & horizontal centering. and everything is totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Centered">
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*For Centering only*/
.Content:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
padding: 0 5px;
text-align: center;
}
.Header, .Footer
{
margin-bottom: 5px;
padding: 5px 0;
}
.Header
{
background-color: #bf5b5b;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}