I want to show a div with list of data over a div(this div has google map).
So a list of Locations want to show in a div over google map div.
Html Code :
<div id="mapcan" style="width:100%;height:400px"></div>
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
Style code:
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 1350px;
left: 12px;
}
I am giving fix margin from top 1350px but if i added more content on above google map div list div goes to top so it's not properly work.
i want to fix it on google map div if added more content above or below from this div. This list div will not affect.
Put your "legend" div inside your map and give your map a position: relative style.
That way, the absolute position of the child will be relative to its parent, meaning it will stay inside the parent div, even if you add content above/below the parent div.
#mapcan {
background: blue;
position: relative;
}
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 12px;
left: 12px;
}
.content {
height: 100px;
border: 1px solid black;
}
<div class="content">content above</div>
<div id="mapcan" style="width:100%;height:200px">
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
</div>
<div class="content">content below</div>
I thing you want to like this:
Wrap both div with main div and add relative position of main div. Then try this code:
<div class="map-section">
<div id="mapcan" style="width:100%;height:400px"> map Div</div>
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
</div>
css:
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 30px;
left: 12px;
}
.map-section{
position:relative;
}
#mapcan{
background:rgba(0,0,0,0.4);
}
Here is jsfiddle code : https://jsfiddle.net/aou5gmcv/
Add z-index: 0; to the bottom div and z-index: 1 to the top div
and add position: absolute; to both div's
Related
I am having the following div structure in a part of my site. There are two divs one below another. The first div is divided into two elements. One div (63%) and a button.
Below this, there is another div which is having same 63% as width and position as absolute.
Having the position as absolute not resulting in the two divs with the same width in the same size.
A part of CSS code
#two{
border: 1px solid;
width: 63%;
position: absolute; //Enabling this resulting in varying size even width is same
}
This is my code pen link, https://codepen.io/JGSpark/pen/bZyvEV?editors=1100
I would like to have two divs in the same size as the position absolute. Is there something I can try out here?
When you add position: absolute not relative to any element it is positioned relative to the root element.
A 63% textValue is 63% of #one element but 63% of #two is 63% of the document which includes the default body margin. So reset this to zero:
body {
margin: 0; /* added */
}
#template {
width: 30%;
}
#textValue {
border: 1px solid red;
width: 63%;
float: left;
}
#icon {
width: 5%;
}
#text {
width: 95%;
float: left;
}
#one {
width: 100%;
}
#two {
border: 1px solid;
width: 63%;
position: absolute;
}
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
Or you can add a wrapper to the element which has position: relative - see demo below:
.wrapper {
position: relative; /* added */
}
#template {
width: 30%;
}
#textValue {
border: 1px solid red;
width: 63%;
float: left;
}
#icon {
width: 5%;
}
#text {
width: 95%;
float: left;
}
#one {
width: 100%;
}
#two {
border: 1px solid;
width: 63%;
position: absolute;
}
<div class="wrapper">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon "><i class="fa fa-angle-up "></i></span></div>
<button id="template" class="btn primary ">Template</button>
</div>
<div id="two">TWO</div>
</div>
We able to add parent div with position:relative. Or Just add position:relative to body tag.
<div style="position: relative;">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
</div>
Position absolute need to be relative to something, in this case it is relative to the document which has default margin and padding. Try this:
<div class="wrapper">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i
class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
</div>
in css add:
.wrapper {
position:relative;
}
In your case the #textValue that is inside #one is 63% that is 63% of #one div.
where as the #two div is given absolute without giving a parent element position relative so it is taking relative to body element that is comparatively bigger than the #one div so
you able to see the difference even though you have given a same width.
I am trying to use links to scroll the content within a div.
HTML is here:
<header>
<div class="wrapper">
<img src="/img/header.jpg" alt="Ace Land Surveying">
</div>
<nav>
<div class="wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Types of Surveys</li>
<li>About Us</li>
<li>Links</li>
<li>Request a Survey</li>
<li>Past Projects</li>
<li>Contact</li>
<li>SOQ</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper">
<div class="content">
<div class="column left">
<ul class="survey-type-list">
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
</ul>
</div>
<div class="column right" id="survey-column">
<div class="survey-type" id="type1">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type2">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type3">
<p> ... long text ... </p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-top">
<div class="wrapper"></div>
</div>
</footer>
and the CSS:
header {
float: left;
width: 100%;
height: 200px;
}
.wrapper {
width: 90%;
margin: auto;
}
.content {
float: left;
width: 100%;
padding: 20px;
background: #02274b;
}
.column {
min-height: 500px;
padding: 20px;
border-radius: 20px;
color: #fff;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), transparent);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
}
.column.left {
float: left;
width: 20%;
}
.column.right {
float: right;
width: 60%;
}
.survey-type-list li {
margin: 0 0 4px 0;
list-style: none;
}
.survey-type-list h2 {
font-size: 13px;
}
#survey-column {
overflow: hidden;
height: 460px;
}
.survey-type {
float: left;
width: 100%;
height: 460px;
}
The problem is that the entire page moves with the content inside the div.
Here is a fiddle:
http://jsfiddle.net/q8a1s5wj/8/
I tried several other threads here but none could solve my problem.
How can I prevent the whole page from scrolling and just scroll inside the right column with my anchor links?
I want to be able to click the link in the left column and see the right column scroll but not the move the entire page.
Fiddle
Some minor adaptations to the CSS - not doing this gave the wrong element offset :
#survey-column {
position: relative;
}
This one's just so the last div can scroll to the top completely :
.survey-type {
height: 520px;
}
And a bit of script to make it work :
$(function() {
$('.column.left a').click(function() {
var goal = $(this.hash).position().top-20,
aim = goal+$('#survey-column').scrollTop();
$('#survey-column').scrollTop(aim);
return false;
});
});
The 20 pixels deduction of goal is just done to keep the same top padding as was started with...
you can add position as fixed on top div element, i have checked your code on jsfiddle and added position style attribute in wrapper div element
<div class="wrapper" style="position:fixed; margin-top:10px">
just add this
.stop-scrolling {
height: 100%;
overflow: hidden;
}
this class to your body tag.
Reference: How to disable scrolling temporarily?
Updated Fiddle: http://jsfiddle.net/q8a1s5wj/2/
so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle
Using jQuery the jquery plugin along with the easing plugin.
I have a series of anchors, in a list which are all fixed heights and widths. Within each div is another I've called 'content', this is positioned absolute and slides into view, from the bottom, when the mouse enters the containing div. When the mouse leaves the containing div, the 'content' div slides back out of view.
I had this working, using a combination of top and bottom values but this doesn't work cross-browser (only works correctly in firefox from what I can tell). The code for this is below (html, css and javascript):
<!doctype html>
<head>
<style>
.index {
float: left;
margin: 0 0 30px 0;
margin-left: 0;
padding: 0;
position: relative;
}
.index li {
border: 2px solid #f3f3f3;
float: left;
list-style: none;
font-family:"Helvetica";
font-size:14px;
font-weight:normal;
margin: 0 10px 10px 0;
padding: 1px;
position: relative;
}
.index li a {
float: left;
height: 126px;
overflow: hidden;
position: relative;
width: 224px;
}
.index li img {
display: block;
}
.index li .content {
background: #f7f7f7;
bottom: auto;
display: block;
margin: 0;
padding: 10px 0 3px;
position: absolute;
top: 132px;
width: 224px;
}
.index li a:hover .content {
bottom: 0;
top: auto;
}
.index .content h3 {
background: url(../img/content/arw-sma.png) no-repeat 0 -100px;
color: #666;
margin: 0 10px 1px;
padding-left: 20px;
}
.index .content p {
color: #999;
display: block;
float: left;
font-size: 12px;
margin: 0 10px 2px;
padding: 0;
}
</style>
<script src="js//jquery-1.6.2.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script type="text/javascript">
$(function(){
$('.index .content').css( {'top':'132px', 'bottom':'auto'});
$('.index li a').hover(
function(){
$(this).find('img').animate({'opacity': '.7'}, 200);
$(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});
},
function(){
$(this).find('img').animate({'opacity': '1.0'}, 200);
$(this).find('.content').animate({'top':'132px'}, 150);
}
);
});
</script>
</head>
<body>
<ul class="index panel">
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
</ul>
</body>
Different browsers don't like using both top and bottom values. So ideally, I'm guessing I need to just use 'top'. The problem is, I don't know how tall the 'content div' will be, so I can't set an explicit value, as if its taller, it will chop off some of the content.
Since I know the anchor will be 126 pixels in height. I've been trying to use .height() to detect the height of the 'content div'. Then subtract this value from 126 - which would leave me with the value I need to set 'top' to be, to position it within the div.
Does this sound plausible and am I making sense? Hopefully this isn't to long winded, just trying to be as detailed as I can.
Hope someone can help and I love forward to you replies!
demo jsBin
Use SPAN instead of DIV (DIV are block level elements, and AFAIK it won't validate your document.)
You can just set an initial bottom value like -132...-150 ...or whatever you prefer for your .content
.index li .content {
background: #f7f7f7;
bottom: -132px;
display: block;
margin: 0;
padding: 10px 0 3px;
position: absolute;
top: 132px;
width: 224px;
}
jQ:
$(function(){
$('.panel li a').hover(
function(){
$(this).find('img').animate({'opacity': '.7'}, 200);
$(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});
},
function(){
$(this).find('img').animate({'opacity': '1.0'}, 200);
$(this).find('.content').animate({'bottom':'-132px'}, 150);
}
);
});
THe other solution I would use is to: at DOM ready, calculate each content height ( var outerH = $(this).outerHeight(true) ) and set that value as a data-height for each element. ($(this).data('height', outerH);). Than you can animate on hover the exact N of px that is stored in that element data-height.