I try to do such thing with web page with HERE maps
Grey block is a block where map should be situated(i did that when wifi was turned off).
The html code is:
<div id="map" style="position:absolute; width:100%; height:100%; background:grey;z-index:0">
<div style="position:absolute;">
<div class="forbut">
<button onclick="myFunction()" class="btn-danger">edf</button>
</div>
<div id="list" style=" width:100px; left:0; background-color: red; z-index:1">
</div>
<div style="position:absolute; left:600px;top:0">
<div class="forbut1">
<button onclick="myFunction1()" class="btn-danger">edf</button>
</div>
<div id="list1" style=" width:100px; left:600px; background-color: red; z-index:1">
</div>
</div>
</div>
</div>
But when wifi is turned on, blocks with buttons dissapears regardless that those blocks have bigger 'z-index' value than map-container
How make blocks with buttons be over the map?
It is not fully clear for me what you try to achieve, but from my perspective adding the z-index to the first child container of the parent div should suffice. Nevertheless, I would recommend in general against adding anything to the container that is passed to the map. There are two options, either to build UI in the container that is parent to the div with the id=“map” or use libraries UI module and build custom buttons with it.
Related
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
I have this code:
#points{
width:25%;
background:#2a2a2a;
height:20px;
color:white;
z-index:2;
position:absolute;
}
#areas{
position:absolute;
color:white;
border-right:2px solid black;
height:120%;
}
<div class="container" style="width:100%">
<div class="scale" style="width:100%; position:relative;">
<div id="points" style="left:0; ">0</div>
<div id="points" style="left:25%;">25</div>
<div id="points" style="left:50%;">50</div>
<div id="points" style=" left:75%;">75</div>
<div id="points" style=" left:100%;">100</div>
<div id="points" style=" left:125%;">125</div>
<div id="points" style=" left:150%;">150</div>
</div>
<div class="area" style="width:100%; background:orange;">
<div id="areas" style="left:0;"></div>
<div id="areas" style="left:25%;"></div>
<div id="areas" style="left:50%;"></div>
<div id="areas" style="left:75%;"></div>
<div id="areas" style="left:100%;"></div>
<div id="areas" style="left:125%;"></div>
<div id="areas" style="left:150%;"></div>
<div id="areas" style="left:175%;"></div>
</div>
</div>
While scrolling to top and bottom, I would only like to scroll the area div; I don't want the scale div to hide from the container while scrolling.
I tried using position: fixed for the scale div, but it didn't fit correctly with the the scroll left, this case only display the 0 25 50 75, but each scale points are correspond to the area div tag so display the all div tag 0,25,50,.. 150 with these corresponding areas div tags
Is there any other way to do it without positon: fixed?
Working fiddle with postion: absolute. But the points divs are hidden from the container.
position: fixed. Left side div tags are not visible.
Do you want something like that ?
https://jsfiddle.net/qk37kson/ (Edited : added a little bit of JQuery to make the header move horizontally)
1) The id attribute has to be unique. That's why in JavaScript we have getElementById and getElementsByClassName.
From W3Schools :
http://www.w3schools.com/tags/att_global_id.asp
The id attribute specifies a unique id for an HTML element.
http://www.w3schools.com/tags/att_global_class.asp
The class attribute specifies one or more classnames for an element.
2) change
<div class="scale" style="width:100%; position:relative;">
to
<div id="scale" style="width:100%; position:fixed;">
3) then, in your CSS, add this :
#scale {
top:0px;
left:0px;
z-index:2;
}
Edit :
4) Finally, add some JQuery :
$(window).scroll(function(){
$('#scale').css('left','-'+$(window).scrollLeft()+'px');
});
You could keep .container's overflow-y to hidden and .area's overflow-y to scroll. Thereby the container would scroll .scale and .area along x but not y, but the .area will scroll along y within itself giving you your effect.
I'm trying to display a vertical list of buttons composed of merged text and images. I'm using position:relative and position:absolute to merge the text with the image.
<div class="well">
<div style="position:relative;">
<img src="assets/launch_item.png" style="position:absolute;"/>
<div style="position:absolute;padding: 16px 0px 0px 55px;">
<h5 style="float:left;width:300px;">Option1</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
<div style="position:relative">
<img src="assets/launch_item.png" style=position:absolute;"/>
<div style="position:absolute;padding: 16px 0px 0px 55px;">
<h5 style="float:left;width:300px;">Option2</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
</div>
The combined button turns out OK but there seem to be problems arranging the buttons in the parent window. As seen on the image above, only one of the two buttons gets displayed. Moreover the button gets slapped on to the existing window instead of "fitting into it". How can I fix that?
Remove the float inside the h5 and control it with the position, as you have already made a relative positioning for the parent Div, so I suggest creating the elements inside it with absolute positioning like what you have done for the rest of your elements. Hope this helps.
EDIT
Here is the Solution.
The Updated Code:
<div class="well" style="position:relative;">
<div style="width:300px;">
<img src="assets/launch_item.png" style="position:absolute;"/>
<div style="position:absolute;padding: 8px 0px 0px 55px;">
<h5 style="width:300px;position:absolute;">Option1</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
<div style="width:300px; left:305px; top:0; position:absolute;">
<img src="assets/launch_item.png" style="position:absolute;"/>
<div style="position:absolute;padding: 8px 0px 0px 55px;">
<h5 style="width:300px;position:absolute;">Option2</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
</div>
Hope this helps.
EDIT - 2
Usually for menus, UL and LI play a vital role. Considering your code with a position has no problematic effects, just that list items are more useful for these stuff. Providing you with a new solution with list items as vertical menu. This is like a further reference for you to know about the creation of menu styles with list items. Hope this helps.
This resource was used during the research for the list items creation with vertical menus.
Hope this makes your work easier. :)
Apply overflow:hidden to the div with class well so that the buttons will be fitted into that parent div.
I'm using bootstrap to do a simple version of something like this: http://techlist.in/
Basically, I want to have a map and a right side bar with a fixed size and fixed position.
I've started with something like:
HTML:
...
<div class="container">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
...
CSS:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:40px; /* used for the top navigation bar */
}
But this is not working as expected, as the map remains 100% width and the "some stuff" label appears on top of the map. Any hints?
UPDATE
In fact, I already have the nav-bar, but I did not detailed it in the code, my bad. So basically the whole structure of the html page is (with the missing row div added):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
</div>
<!-- include javascript stuff -->
...
</body>
The css file is:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:200px;/* used for the top navigation bar */
background: #ccc;
}
If a leave 200px of right margin for the map, how can I fill the margin with the sidebar ?
Basically, I need a side bar of 200px width and the map adapting accordingly on screen resizing.
UPDATE 3
I'm wondering if I really need to use container / row to achieve this layout in fact (I still do not manage to have this working as expected). As I only need to have a map and a sidebar (that should always remain on the right of the map even if the window is resized), would it make some sense to use basic div / css and not bootstrap classes ?
This is basically what I needed: http://jsfiddle.net/kuXYq/4/
have a look at this fiddle I made it might help.
http://jsfiddle.net/eKQGD/
I used percentages to keep things the same
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:150px;/* used for the top navigation bar */
background: #ccc;
}
There are a few parts to the answer to this question.
The first thing to point out is that it's a little hazy as to why there is the requirement of a "fixed size and position", and by that I mean that the terminology being used may be throwing off your thinking a bit. Typically, you only need to use the "fixed" css position property if you plan on the page having scroll bars and you want the element to stay in the same position on the page no matter what. In this case, it doesn't seem like you want page scrolling at all since the map will appear to be the same size as the entire page. It seems like what you really want on the sidebar is for it to be a fixed height (aka the height of the browser window) with overflow set to scroll.
Secondly, it appears that you're missing a <div class="row"></div> tag around your elements - a tag with a "row" class is necessary to make the bootstrap "span" classes work.
Lastly, here is something that I would go with if I was trying to duplicate the link you posted, using a bit of JS love as well: http://jsfiddle.net/kzBkA/5/ (background colors added just to show what it looks like )
HTML:
<div class="container">
<div class="row">
<div class="span10">
<div id="nav_bar">
Nav bar goes here
</div>
<div id="map_canvas">
test
</div>
</div>
<div class="span2">
<div id="sidebar">
Some stuff
</div>
</div>
</div>
</div>
css:
#nav_bar {
height:40px;
background-color:blue;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
js:
$(function(){
$("#map_canvas").height($(window).height() - 40);
$("#sidebar").height($(window).height());
});
UPDATE:
So - again, first off, I encourage you to reconsider your use of fixed elements. You seem to be trying to build a page that won't scroll, but then using a "positioning" feature that's specifically for scrolling (position:fixed), which basically tells all your nice bootstrap code to be ignored and just put it where you tell it. A much nicer way to do this would be to use Bootstrap to your advantage. I changed the row class to row-fluid, I moved your nav bar into the span10 with the map (since that's how wide you actually want the nav, or at least that's how it was in the example), I removed the "navbar-fixed-top" class since you don't actually need things to be fixed, and removed the fixed positioning from the sidebar (since again that's basically making it ignore what you're trying to do). Check out the updated jsfiddle: http://jsfiddle.net/kzBkA/7/ - you may have to tinker with the JS to get the map_canvas div set with the correct height, but otherwise this should take care of making your page fluid when the browser is resized without having to add a ton of unnecessary CSS rules. In general, if you use a scaffolding framework, you should use it to your advantage to avoid creating cluttered, messy css with lots of "width:80%; height:20%; margin: ..." - the whole point of using the framework and scaffolding was to avoid that kind of code :)
HTML:
<div class="container">
<div class="row-fluid">
<div class="span10">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
navbar
</div>
</div>
<div id="map_canvas">
map goes here
</div>
</div>
<div class="span2" id="sidebar">
Some stuff
</div>
</div>
</div>
CSS:
.container{
max-width:100%;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
JS:
$(function(){
$("#map_canvas").height($(window).height() - 40);
$("#sidebar").height($(window).height());
});
UPDATE 2
Just realized I missed the part about the sidebar always being 200px but the map width being fluid. I've updated the fiddle to reflect that as well as updating so that sizes get reset when window is resized - http://jsfiddle.net/kzBkA/9/
HTML:
<div class="container">
<div class="row-fluid">
<div class="span10 left-col">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
navbar
</div>
</div>
<div id="map_canvas">
map goes here
</div>
</div>
<div class="span2 right-col" id="sidebar">
Some stuff
</div>
</div>
</div>
CSS:
.container{
max-width:100%;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
.right-col{
width:200px;
}
JS:
$(function(){
resizeElements();
window.onresize = function(event) {
resizeElements();
}
});
function resizeElements(){
//set height
$("#map_canvas").height($(document).height() - $(".navbar").outerHeight() - 20 /*not sure where this is coming from, possibly the scrollbar?*/);
$("#sidebar").height($(document).height());
//set width of left col
$(".left-col").width($(document).width() - $(".right-col").outerWidth() - 20 /*not sure where this is coming from, possibly the scrollbar?*/)
}
Let's say I have a container <div> with some buttons in:
<div class="cont">
<div class="button">Button 1</div>
<div class="button">Button 2</div>
<div class="button">Button 3</div>
<div class="button">Button 4</div>
<div style="clear:both"></div>
</div>
And assigned some CSS to this:
.cont{
background:#0F0;
width:400px;
height:40px;
line-height:40px;
}
.button{
background:#F00;
float:left;
height:inherit;
line-height:inherit;
}
Background colours are just so that I can see what I am doing. I'm wondering if there is a JavaScript-free way to make all of the button <div>s stretch (with equal widths) to the parent <div> and I want them to automatically get the width using the parent <div>. So, yes I could just set the .button width to 25% because there are 4 of them but if I added more buttons I would want them to automatically get a new width.
I hope I explained myself well enough, I did look around but couldn't find anything to suit this. Can I do this in CSS or is it a JS-job?
JSFiddle here.
Thanks.
It can be done with display: table; and display: table-cell;
I know the bad connotations that come with tables but you aren't using table markup, you are just making div's act like tables.
See demo here
<div class="cont">
<div class="button">Button 1</div>
<div class="button">Button 2</div>
<div class="button">Button 3</div>
<div class="button">Button 4</div>
</div>
.cont{
background:#0F0;
width:400px;
height:40px;
line-height:40px;
display: table;
}
.button{
background:#F00;
display: table-cell;
}
This is a perfect use case of the CSS Flexible Box Model.
HTML5 Rocks has a nice introduction to this.
This needs vendor prefixes and it's not supported on old browsers. There's Flexie which is a polyfill for older browsers.
I found out that HTML buttons are a bit weird, for example "text-align: center" will alter the position of the buttons in a div, whereas "margin: auto" does not. And also, changing the size of a button makes it's styling different (in Chrome).
An alternative solution may be to make a clickable div, in this way you can also style the button, to be certain of how it looks cross-browser. (HTML5)
<a href="http://example.com">
<div>
anything
</div>
</a>
Reference: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/