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.
Related
I have to show 2 adjacent boxes, both have a dynamic content (rendered using angular). The Container must have the height of Box1. Box2s heigth may vary due to the dynamicity and it should not be higher as Box1. If higher a scroll should be shown.
I started with the following code using tables:
<table id="Container">
<tr>
<td valign="top" id="Box1">
<dynamic rendered html code/>
<td>
<td> <td>
<td valign="top" style="position: relative; id="Box2">
<div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
<dynamic rendered html code/>
</div>
<td>
</tr>
</table>
Unfortunately it does not work in IE, since (as I'v read on the web) position is not defined for tables (not HTML standard);
So I decided to switch to divs:
<div id="Container">
<div style="display: inline-block; vertical-align:top" id="Box1">
<dynamic rendered html code/>
<div>
<div style="display: inline-block;"> <div>
<div style="display: inline-block; vertical-align:top" id="Box2">
<dynamic rendered html code/>
<div>
</div>
Box1 should always wrap its content. Box2 should not be heigher than Box1, IF then scroll overflow.
Is it possible in CSS? No JQuery and no Javascript.
I believe you want #Box2's height equal to #Box1's height.
There is no way to align there height within the same parent. Therefore, I suggest you to wrap #Box2 with #Box1 like below.
<div id="Box1">
<div id="Box2">
</div>
</div>
And that you can set max-height: 100%; to #Box2 so that the maximum height of #Box2 will not be larger than #Box1.
Adding overflow-x: auto; to #Box2 can show scrollbar automatically when text overflow.
https://codepen.io/blackcityhenry/pen/LMVoZd
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.
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'm having a hard time with HTML/CSS now. I'd love to create some sort of a slider with images placed side by side with hidden overflow (so when you press "next" arrow it will "move" pictures to the left (hiding the left one and showing the one that was hidden).
The problem is I can't make my div to go beyond its parent thus I can't line up my images side by side.
It looks like this:
<div id="slider">
<div id="images">
<div class="image_container">
<img src="" alt="1"/>
</div>
<div class="image_container">
<img src="" alt="2"/>
</div>
...
<div class="image_container">
<img src="" alt="3"/>
</div>
</div>
</div>
Where #slider should be at 95% of width and preferably height based on content,
#images should have "no width" - it should be based on the content and max-height~, .image_container should have the width of the img - these should line up one next to another.
Any ideas how can I achieve that? I've been trying lots of things and none of them work.
Set the display property of the child elements to inline-block and the white-space property of the parent to nowrap.
#parent{
background:#000;
height:100px;
padding:5px;
white-space:nowrap;
width:200px;
}
#parent>div{
display:inline-block;
height:100%;
width:100%;
}
#parent>div:nth-child(odd){background:#f00;}
#parent>div:nth-child(even){background:#0f0;}
<div id="parent"><div></div><div></div><div></div><div></div><div></div></div>
I just wanna know if background is in color and content div is in image is possible?
<body style="background-color: black; ">
<div id="header" style="background: url('xxx11.png') repeat left top;">
</div>
<div id="#container" style="background-image: url(xxx.png)">
</div>
</body>
When I run, I can just see black color but cannot see the background image..
Thanks in advance
<div id="#container" style="background-url: url(xxx.png)">
should be
<div id="#container" style="background-image: url(xxx.png); width=500px; height=500px;">
Set the width and height to whatever you need.
You will see black color until you do not set width and height of the divs. You do not have set width or height of div or do not have content in it.That is why it is showing body's black color. As you are using inline style so, you can use this:
<div id="header" style="background: url('xxx11.png') repeat left top; width:*px; height:*px;">
</div>
<div id="container" style="background-image: url(xxx.png); width:*px; height:*px;">
</div>
If your <div> is empty, it will be very small (1x1 pixel?), so you won't see your background.
So you can use CSS to set the size of your idv, so the background is shown. For example your could use:
#header {
position:absolute;
height:200px;
width: 400px;
}
Note: the id of your container div is #container, I do not think that a # is allowed in a tag id...
Try below code.
background: url(../img/pattern/59.png) 0 0 scroll #ccc;
<body style="background-color: black; ">
<div id="header" style="background: url('img/4.png') repeat left top #CCC;height:200px;">
</div>
<div id="container" style="background-image: url(img/5.png);height:200px;"></div>
</body>
Above code is tested, body was all black screened because you did not defined height property for divs.