I found a very interesting image grid background on Codepen, that I'd like to use.
Only thing is i'm experiencing issues with getting a DIV on top of it.
https://codepen.io/pirolab/pen/qmeNqY
I've tried things such as top, z-index, but for some reason I'm struggling to get anything to be on top of the images.
Example of something I've tried
<section class="o-hero">
<div class="o-cards__main">
<div style="z-index:999;top:5;background:blue">Hello<div>
<div class="o-cards__container" id="container">
</div>
</div>
</section>
I'd really appreciate it if someone could help.
https://codepen.io/andrasadam93/pen/KyNvoe forked from yours if I understood your query correctly. The key parts are these (although I added some extra for visibility):
<section class="o-hero">
<div class="overlay">
<p>This is overlay</p>
</div>
<div class="o-cards__main">
<div class="o-cards__container" id="container"></div>
</div>
</section>
.overlay{
position:absolute;
z-index:999;
width: 100%;
height: 100%;
font-size: 24px;
font-weight:700;
color:#ff0000;
display:flex;
align-items:center;
justify-content:center;
}
Related
I have two div element inside main div element I want those two div float left and the align center of the main div.
Something like this.
[ main div [div1][div2] ]
I have successfully floated the two divs but I am failing to assign the space on both the side. I mean to say align them in center.
code to float left css
.container{
width:100%
height: auto;
}
.img{
width:auto;
height:auto;
float:left;
}
.data{
width:auto;
height:auto;
}
html code
<div class="container">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
if you write text-align:center to parent.It will align their children
thank you for comments
.container{
width:100%
height: auto;
text-align:center;
}
.data{
width:auto;
height:auto;
}
<div class="container">
<div class="img"><img src="https://picsum.photos/200/300"/></div>
<div class="data">data goes here</div>
</div>
You can wrap the img and data div in a div, then float that div right with a 50% width. I prefer not to use floats; flexbox would be a better option in my opinion, but if you like floats, I put some code below you can try.
HTML:
<div class="container">
<div class="dataImgContainer">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
</div>
Add below to the CSS sheet:
.dataImgContainer {
width: 50%;
float: right;
}
I'm having a problem to stick my footer to bottom. I'm following the classic wrapper idea with an empty div that push the footer to the bottom. This is my code:
HTML
<html>
<body>
<section class="wrapper">
<!--main content-->
<div class="push"></div>
</section>
<footer class="footer">
<div class="container">
<!--footer content-->
</div>
</footer>
</body>
</html>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -13em;
}
.push {
height: 13em;
clear: both;
}
.footer{
padding: 20px 0;
width: 100%;
clear: both;
}
I used 13em for the height and margin sizes because is the size for the medium and large screens.
This code works, but the problem starts when the layout has to adapt to extra-small and small sizes. Infact when the screen becomes smaller, the footer's height increase.
So my question is: how can i set a dynamic height to the .push div and to the margin of the wrapper? I want those values equal to the footer height.
I tried also some javascript but without success.
P.s. please don't tell me to set a static height for the footer (13em for example) because, as i said, i want an adaptative height.
UPDATE
I want something like this: http://ryanfait.com/html5-sticky-footer/
You are missing a important part in the html, the body content, there is no content. I added a div with height and take a look
<body>
<section class="wrapper">
<!--main content-->
<div class="push"></div>
</section>
<div style="height:100%;min-height:100%;"></div>
<footer class="footer">
<div class="container">
<!--footer content-->
</div>
</footer>
</body>
Now its working as you want. Here is the fiddle
https://jsfiddle.net/wgrLfxg3/12/
Take a look to the div I set height and min-height to 100%. Now put your content inside this div and it will work fine.
Remove the wrapper and add this to your css instead:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
How do you make a one page scrolling site like this.
I tried using "peachananr" plugin from here but it didn't work instead it messed up my layout.
Eg after doing:
<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>
<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
Projects:
</span>
</section>
</div>
My whole page came together o.O ! (all sections came together in one) my page is basically a one page website like this
This is my css for the way i layout each section page:
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
/* look this up */
}
.container {
width: 100%;
text-align: center;
height: 100%;
}
.mainPage {
height:100%;
width:100%;
background: url(Imgs/13.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.projectContents {
position: relative;
height:100%;
width:100%;
background: white;
}
This is my Html:
<section id = "mainPage" class="container mainPage" >
</section>
<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
Projects:
</span>
</section>
Please how do i resolve this issue or can you please give any solution. Examples will be greatly appreciated !! :D Thanks alottt !
ps i call the plugin in my js file like so $(".main").onepage_scroll();
Make sure you are loading the onepage-scroll css and javascript... It works fine without any of your CSS. Style from there.
HTML
<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>
<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
Projects:
</span>
</section>
</div>
JS
$('.main').onepage_scroll()
DEMO
Make bind to mouse scroll, and create slides.
<div class="b-slider">
<div class="b-sider__item">
Item 1
</div>
<div class="b-sider__item">
Item 2
</div>
<div class="b-sider__item">
Item 3
</div>
<div class="b-sider__item">
Item 4
</div>
<div class="b-sider__item">
Item 5
</div>
</div>
And use jcarousel slider plugin with vertical scroll options
$('.b-slider').jcarousel('next');
I don't really have a background with scrolling pages but I found this site that might help you in your code.
The structure is quite simple, adding a section class for each section of the site, and slide for each slide within a section:
<div id="fullpage">
<div class="section">WHATEVER</div>
<div class="section">WHATEVER</div>
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide</div>
<div class="slide">Slide 4</div>
</div>
<div class="section">WHATEVER</div>
</div>
To initialize the plugin with default options, is as simple as this:
$(document).ready(function() {
$('#fullpage').fullpage();
});
Here is an example: http://alvarotrigo.com/fullPage
I'm seeing a lot of "how to vertically align stuff" type questions but I can't seem to find anything that solves this particular problem.
I have 3 "sections" in a jquery dialog and I want them to sit vertically in the space without leaving big gaps in between them.
I don't know their heights as their content is dynamic and changes.
Here's a fiddle showing what I mean:
http://jsfiddle.net/PTQS8/
In it's simplest form the code looks something like this (just imagine that all the br tags are real content though)
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/>
</section>
</div>
Then my current css:
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
I want the bottom section to automatically fill the space above it if possible.
Any ideas?
EDIT:
Maybe I wasn't clear enough ...
This is my ideal result:
http://jsfiddle.net/PTQS8/2/
However bear in mind that the content in the sections is all dynamic so the style definition for "section3" would need to have a dynamic negative top margin in order for this to work.
Figuring this out could be possible with javascript I suppose but I was hoping there might be a more elegant solution.
<!--The simplest way is to use the span and float properties.-->
<!--Make use of table if you dont like the gap between the left and right panes-->
<div class="jqDialog">
<span style="float: left"><section>
<br/><br/>
</section></span>
<span style="float: right"><section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section></span><span style="float: left">
<section>
<br/><br/><br/><br/><br/>
</section></span>
</div>
If you want them vertically centered, change width:200px to width:100%;
http://jsfiddle.net/PTQS8/3/
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section class="section2">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section class="section3">
<br/><br/><br/><br/><br/>
</section>
</div>
and the css ...
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
.section2 { float: right; }