I am trying to make a div with google map same as on airbnb page. Div's position with google map inside of it is fixed and gmap div's height and width are 100% and it seems when I open the page that it is that way, but the google logo on the bottom is not showing, even though when I inspect the element it doesnt show that it goes outside of the div.
#gmap {height:100%;
width:100%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;}
.container {position: relative;
display: table;
min-height: 100%;
height: 100%;
width:100%;}
.container > div {
vertical-align: top;}
.map {position: fixed;
top: 70px;
right: 0;
min-height: 100%;
margin-right: 0px;
height: 100%;
z-index: 99;
overflow: auto;}
HTML code `
<div id="content">
<div class="container">
<div class="col-md-2">
#section('leftsidebar')
#include('layouts.pages.leftsidebar')
#show
</div>
<div class="col-md-6"
<section class="content">
#section('content')
#yield('content')
#show
</section><!-- /.content -->
</div>
<div class="col-md-4 map">
<div id="gmap">
</div><!--/#gmap-->
</div>
</div>
</div><!-- ./wrapper -->`
Related
I've been using bootstrap framework recently. I'm new to this framework.
so I'm trying to position an image next to some text in landing page. I use grid system of the bootstrap and it work. but when I come to push the image using position: absolute, and left:somePX, it make horizontal scroll and get out of the body of the page. what should I do to prevent this scrolling. I just want to cut the image and position it as I want.
Note: I've applied so many templates using only CSS with out bootstrap and I never get across on same problem.
thank you
here is my html code:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}
<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>
you can simply add to your body:
<style>
body{
overflow-x: hidden;
}
</style>
I'm trying to divide an IONIC page into 2 vertical sections. The first section holds an responsive YouTube iframe and the second section holds a list of items. The sum of the height of these 2 divs should be the total height of the page.
I have been able to make the YouTube video iframe responsive. Now I need to adjust the height of the items DIV so it takes up the rest of the height of the ion-content (the view page). I have tried various solutions with no success! Is there any way that we can adjust the height of the items DIV and make it scrollable? It scrolls fine when I define the height but not if the height is not defined. Can the height be calculated dynamically? I really appreciate your help. Thanks.
HTML
<ion-content scroll="false">
<!-- video wrapper -->
<div class="videoDiv">
<div class="videoWrapper">
<div class="videoWrapperIframe">
<iframe width="560" height="315" src="https://www.youtube.com/embed/-v2ZDYMu1Rc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- item wrapper -->
<div class="itamWrapper">
<div class="itamWrapperItem">
<ion-scroll delegate-handle="item" direction="y">
<ol class="list">
<li class="item" ng-repeat="item in items">
{{item.id}}
</li>
</ol>
</ion-scroll>
</div>
</div>
</ion-content>
CSS
.videoDiv {
display:block;
max-width: 400px;
margin-right: auto;
margin-left:auto;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
background-color:#ededed;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.itamWrapper {
position: relative;
height: 100%;
display:block;
max-width: 600px;
margin-right: auto;
margin-left:auto;
background-color:red;
}
.itamWrapperItem {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can check out the code on Code Pen https://codepen.io/codingSober/pen/PjWxJy
I'm not gonna lie, your code is very messy and there are random html tags and css rules in there for no reason.
I cannot clean it all up but here's some updated html + css that may be what you are looking for:
<ion-view view-title="Live Now" hide-back-button="false">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content scroll="false">
<!-- video wrapper -->
<div class="videoDiv">
<div class="videoWrapper">
<div class="videoWrapperIframe">
<iframe width="560" height="315" src="https://www.youtube.com/embed/-v2ZDYMu1Rc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- item wrapper -->
<div class="itamWrapper">
<ion-scroll delegate-handle="item" direction="y">
<ol class="list">
<li class="item" ng-repeat="item in items">
{{item.id}}
</li>
</ol>
</ion-scroll>
</div>
</ion-content>
</ion-view>
.videoDiv {
display:block;
max-width: 400px;
margin-right: auto;
margin-left:auto;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
background-color:#ededed;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
ion-content {
max-height: 100vw;
}
ion-scroll {
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
.itamWrapper {
background-color: red;
}
This time, I'll include the code (as I've been asked previously).
The problem is that, even when this code does what I need (a CSS modal/lightbox window), I can't get it to animate neither the top nor the translate properties.
I think it's a problem of positioning, because, the original example used no position for the container but, instead, used the :before pseudo-element (I don't like it).
What's wrong with this code.
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Pure CSS Modal Window</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
.modal-container
{
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
}
.modal-content
{
position: absolute;
top: -100%;
left: 50%;
width: 70%;
max-width: 400px;
max-height: 400px;
transform: translateX(-50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
overflow-y: auto;
transition: all 5s;
}
.modal-container:target
{
display: block;
}
.modal-container:target .modal-content
{
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
Modal 1
Modal 2
<div class="modal-container" id="modal1">
<div class="modal-content">
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
Close
</div>
</div>
<div class="modal-container" id="modal2">
<div class="modal-content">
<p>This is the content of Modal 2</p>
Close
</div>
</div>
</body>
</html>
This is because the display state changes from display: none to display: block, meaning there is no previous layout to transition between.
One option would be to replace display: none with visibility: hidden and display: block with visibility: visible.
Working Example:
*
{
margin: 0px;
padding: 0px;
}
.modal-container
{
position: fixed;
visibility: hidden;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
}
.modal-content
{
position: absolute;
top: -100%;
left: 50%;
width: 70%;
max-width: 400px;
max-height: 400px;
transform: translateX(-50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
overflow-y: auto;
transition: all 5s;
}
.modal-container:target
{
visibility: visible;
}
.modal-container:target .modal-content
{
top: 50%;
transform: translate(-50%, -50%);
}
Modal 1
Modal 2
<div class="modal-container" id="modal1">
<div class="modal-content">
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
Close
</div>
</div>
<div class="modal-container" id="modal2">
<div class="modal-content">
<p>This is the content of Modal 2</p>
Close
</div>
</div>
The solution provided by Alexander O'Mara works great (& also taught me a little), but I found another answer.
I solved it just separating both DIV's. I mean, instead of:
<div class="container">
<div class="content">
<p>Content here</p>
</div>
</div>
I used:
<div class="container">
</div>
<div class="content">
<p>Content here</p>
</div>
And for the CSS I used:
.container:target + .content {}
instead of
.container:target .content {}
All this without changing "display: none" for "visibility: hidden", as Alexander suggested, & it worked perfectly.
Thanks for your help. It's great to see that people around the world worries about other one's problems & try to solve them.
Cheers.
Marcelo.
I have a container element which is positioned relatively so all absolute children within this parent are overlaid.
The following element is overlapped by the container caused by a rendered 0px height.
Is there a solution without using JS to give the container the height of an inner element?
The HTML:
<article class="modul header_modul drei_boxen_slider ">
<section class="element">
<div class="modul_image_wrapper">
<img src="img/pic.jpg" alt="title"/>
<div class="modul_image_title"><h4>Image Title</h4></div>
</div>
</section>
<section class="element">
<div class="modul_image_wrapper">
<img src="img/pic.jpg" alt="title"/>
<div class="modul_image_title"><h4>Image Title</h4></div>
</div>
</section>
<section class="element">
<div class="modul_image_wrapper">
<img src="img/pic.jpg" alt="title"/>
<div class="modul_image_title"><h4>Image Title</h4></div>
</div>
</section>
</article>
The CSS:
.drei_boxen_slider{
width:100%;
height:auto;
position:relative;
clear:both;
}
.drei_boxen_slider .element{
width:100%;
height:auto;
position:absolute;
}
// test you this code
.drei_boxen_slider {
bottom: 0;
height: auto;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
.drei_boxen_slider .element {
border: 1px solid #FF0000;
height: auto;
margin-bottom: 10px;
position: absolute;
width: 100%;
}
I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.