I'm having difficult times to find a way to fit an iframe and div both with 100% full height on the page. Ideally I need to have a footer menu with 280px height and the iframe div needs to cover the rest of the page.
As far as I researched, it will be possible only with jQuery. I tried CSS Flex without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<header class="header-flex">
<div class="map">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div class="footer">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</header>
</div>
</div>
</body>
</html>
Any idea?
Thanks
Working example with CSS Flexbox:
body,
html {
min-height: 100%;
height: 100%;
margin: 0;
}
.header-flex {
display: flex;
flex-direction: column;
height: 100%;
}
.map {
background: red;
flex: 1;
}
.footer {
background: blue;
}
<header class="header-flex">
<div class="map">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div class="footer">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</header>
Related
could someone help with this?
i have four articles and i want them to be organized like this:
first one
second one third one fourth one
but i don't understand what is the problem??
body {
background-color: #edefee;
font-family: serif;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: 5%;
margin-right: 5%;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
header > img {
display: block;
margin-left: auto;
margin-right: auto;
}
nav ul{
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
}
section {
display: flex;
}
article {
flex: 1;
}
footer {
display: flex;
}
footer div {
flex: 1;
}
my problem for the articles
could someone help with this?
i want this result and this is my code for css part
You can use something like https://grid.layoutit.com/ to draw this using grid.
something like this :)
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". a1 ."
"a2 a3 a4";
}
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
this is ny html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<img src="logos/logo3.png" alt="" width="300px" height="100px">
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Book</li>
<li>About</li>
</ul>
</nav>
<main>
<section>
<article class="art-fle">
<h1>Header 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat
corporis voluptate vel ab consectetur repudiandae sunt accusantium.
Perspiciatis, minima voluptatem!</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Similique, enim ad architecto necessitatibus consectetur tempora.</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
autem! Modi voluptate officia facere voluptatibus!</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perferendis, veniam nam! Dicta dolorum officiis quas?</p>
</article>
</section>
</main>
<footer>
<div>
<img src="">
</div>
<div>
<p>Copyright Little Lemon</p>
</div>
</footer>
</body>
</html>
Hello I have problem when I make header using html and css. I have my header in fixed position, but the content is covered up my header. I want my content position under header when I run it. One more, I set header width 100% but it shift to the right so it doesn't cover up whole width on the screen.
[UPDATED]
<style>
#media(min-width: 468px) {
body{
background-color: aqua;
}
.container-1{
display: flex;
/*
align-items: flex-start; -->box 1 lebih sempit ke atas
align-items: flex-end; -->box 1 lebih sempit ke bawah
align-items: center; -->box 1 lebih sempit ke tengah (atas bawah)
flex-direction: column; -->flex box menjadi kolom
*/
}
.container-2{
display: flex;
/*
justify-content: flex-end;
justify-content: flex-start;
*/
justify-content: space-between; /*ada spasi diantara kotak*/
}
}
.container-3{
display: flex;
flex-wrap: wrap;
}
.container-1 div, .container-2 div, .container-3 div{
border:1px #000000 solid;
padding:10px;
}
.box-1{
flex:2;
order:2;
}
.box-2{
flex:1;
order:1;
}
.box-3{
flex: 1;
order:3;
}
.container-2-box{
flex-basis:20%;
}
.container-3-box{
flex-basis: 10%;
}
header{
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
margin:0;
}
.whole-container{
margin-top:2.0rem;
}
</style>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Flexbox</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<header>
<h1> Flexbox</h1>
</header>
<div class="whole-container">
<div class="container-1">
<div class="box-1">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-2">
<div class="container-2-box">
<h3>Box 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-3">
<div class="container-3-box">
<h3>Box 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 10</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 12</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>
Without seeing your HTML code it is a bit guessing, but I'll give it a go.
Adding a position: fixed to an element will make it flow above the other content. The element is taken out of the document flow. So the overlapping is natural behavior.
To prevent the content to be hidden, you should add a padding to the parent of the boxes. I'm guessing that when you add the following code, it solves the problem
body {
padding-top: 3rem; /* should be at least the height of the header*/
}
The second question about the position of the header can be fixed by the following code:
/* option 1, add a left position:*/
header {
...
left: 0;
}
/* option 2, remove the width, use left and right position instead: */
header {
...
/* width: 100%; remove this line */
left: 0;
right: 0;
}
body {
margin: 0;
}
body {
margin: 0;
}
header {
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
/*not cover whole width*/
margin: 0;
}
.whole-container {
margin-top: 2.0rem;
}
<body>
<header>
0000
</header>
</body>
I'm trying to create a layout where the user will be able to scroll one service section at a time for ex if the user scrolls down from the first section i want the first section to fade out before the second section fades into the same place as the frist section was
here is a link to js bin Click [here] (https://jsbin.com/xubemivaso/edit?html,js,output)
#one, #two, #three, #four
{
padding: 0px;
margin: 0px;
height:100%;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
font-size:3rem;
right: 0px;
left: 0px;
background-color:black!important;
}
#one {
top:0px;
}
#two {
top:100%;
}
#three {
top:200%;
}
#four {
top:300%;
}
.container-outer{
overflow: hidden;
margin:0px;
padding:0px;
width:100%;
height:100%;
position:relative;
}
.container-inner{
overflow:auto;
position:fixed;
width:100%;
height:100%;
padding:30px;
border:30px solid #131313;
margin:0px;
padding:0px;
}
.container-inner::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body itemscope itemtype ="http://schema.org/LocalBusiness">
<div class="cursor"></div>
<div class="cursor"></div>
<div class="container-outer">
<div class="container-inner" id="fullpage">
<nav>
<a class="careers">CAREERS</a>
<a class="services">SERVICES</a>
<a class="about">ABOUT</a>
<a class="find-us">FIND US</a>
</nav>
<div class="slogan">
<h1>SERVICES</h1>
</div>
<div id="one" class="outer section">
<div class="service-inner first">
<p class="service-title-first"></p>
<p class="service-para-first">
Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor
</p>
</div>
</div>
<div id="two" class="outer section">
<div class="service-inner second">
<p class="service-title-second"></p>
<p class="service-para-second">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="three" class="outer section">
<div class="service-inner third">
<p class="service-title-third"></p>
<p class="service-para-third">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="four" class="outer section">
<div class="service-inner fourth">
<p class="service-title-fourth "></p>
<p class="service-para-fourth ">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
</div>
</div>
<script>
(function(container){
$.fn.stopAtTop= function (serv) {
var $this = this,
$container = $(".container-inner"),
thisPos = $this.offset().top,
//thisPreservedTop = $this.css("top"),
setPosition,
under,
over;
under = function(){
if ($(".container-inner").scrollTop() < thisPos) {
TweenMax.to($this, 0, {"position":"absolute","top":""});
setPosition = over;
}
};
over = function(){
if (!($(".container-inner").scrollTop() < thisPos) ){
TweenMax.to(serv.prev(".service-inner").find('.service-inner'), 1, {"opacity":"0"});
TweenMax.to($this, 0, {"position":"sticky","top":"0px"});
TweenMax.to(serv, 1, {"opacity":"1"});
setPosition = under;
}
};
setPosition = over;
$container.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$container.scroll(function(){setPosition();});
setPosition();
};
})($(".container-inner"));
$('#one').stopAtTop($("#one > .service-inner"));
$('#two').stopAtTop($("#two > .service-inner"));
$('#three').stopAtTop($("#three > .service-inner"));
$('#four').stopAtTop($("#four > .service-inner"));
</script>
I am trying to make a carousel using the owl-carousel plugin but I am having a problem showing the dots. Dots are not being shown despite they are enabled on the javascript. Is it the problem with owl carousel 2? I have tried adding owl-dots class inside the owl-carousel class. It does produce some result but one extra dot is being shown.Here is the fiddle for you :https://jsfiddle.net/aoa9a457/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
CSS( I am just going to show of owl-carousel)
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
Javascript
(function ($) {
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
dots: true,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
}
});
});
}(jQuery));
'owl-dots disabled' class can also show if you do not have enough items to allow the function of the dots.
It seems in your example you have set in the owl carousel config to 'items :4' but only have 3 HTML elements to 'carousel'
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4, <<
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
onInitialized:setDots,
onChanged:setDots
});
});
}(jQuery));
This may be just your HTML markup but going by your example code this would display the 'owl-dots disabled' class as there aren't enough items to cycle.
I couldn't debug why your dots aren't appearing... that been said you can use this work around that removes the disabled class from your DOM, which is currently hiding them. with css you can fix your dots style...
(function ($) {
function setDots(){
$("#testimonial-slides .owl-dots").removeClass('disabled');
}
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
//items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
//onInitialized:setDots,
//onChanged:setDots
});
});
}(jQuery));
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
EDITION As suggested #navigator you are setting 3 elements and declaring four, if you add more elements and set the default configuration you will see the dots appearing...
Hi im using agency theme from boostrap but i customised the size of it but when click outside of it its not closing even the normal modal from bootstrap is not closing, (sometimes it close sometimes its note) ill show my bootstrap modal below:
<p class="buttonp "> <a href="#portfolioModal" class="portfolio-link" data-toggle="modal" data-dismiss="modal">
Click for more info </a></p>
</div>
<!-- Portfolio Modal 1 -->
<div id="portfolioModal" class="modal fade portfolio-modal" tabindex="-1" role="dialog" aria-labelledby="portfolioModal" aria-hidden="true">
<div class="modal-content">
<!-- <div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="modal-body">
<!-- Project Details Go Here -->
<p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
<p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
Issues with your code are:
You have put modal code inside some other element and not directly in body as per directons on Bootstrap Modals
You have resized your modal-body and modal-content so it is taking whole screen. Modals have a layer that occupies whole screen (modal-backdrop class) and above it they display the modal. This modal-backdrop class closes the modal when it receives the click but it can't do that now as it is covered by the modal dialog.
I think you may have wanted to have overlay over some element. Take a look at Example on CodePen
<div class="parent">
<div class="content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
<div class="overlay">Flower, Plants, Herbs, Trees.,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,</div>
</div>
.parent{
background:green;
position: fixed;
}
.content{
background: blue;
width: 100px;
}
.overlay{
position:absolute;
background: red;
top: 0;
bottom: 0;
left: 0;
right: 0;
}