I got an overflow hidden container (scrollable) and within a couple of tiles with custom dropdowns for better touch usability.
The problem: I can't get the dropdown list shown above the overflow hidden grandparent:
<div id="overflow">
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
</div>
#overflow{
height: 190px;
width: 200px;
border: 1px solid black;
overflow: hidden;
}
.tile {
clear: both;
margin: 10px 0 0 10px;
width: 180px;
height: 50px;
position: relative;
border: 1px solid green;
z-index: auto;
}
.absolute {
position: absolute;
left: 20px;
bottom: -20px;
width: 50px;
height: 30px;
border: 1px solid red;
background: red;
z-index: 99;
}
https://jsfiddle.net/enmwmtw8/
Any ideas how to achieve this?
This can't be achieved in this way. As whatever is in the overflow: hidden container can't be shown outside of it.
The only way to do this would be to place the dropdown outside the container
Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
(3 answers)
Closed 11 months ago.
I can't get #up-arrow to stick to the bottom of .container.
.container {
height: 100vh;
width: 100vh;
background-color: yellow;
}
#up-arrow {
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
<div class="container">
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
</div>
The element #up-arrow will not stick to the bottom of the container with the current layout.
Because, sticky element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).
Here the element #up-arrow is at the top of the container, hence the element will not be able to stick to bottom on scroll.
Add some content on top of #up-arrow to see sticky working.
Sample Implementation
.container {
min-height: 100vh;
width: 100vh;
background-color: yellow;
}
#up-arrow {
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
#an-element {
height: 100vh;
}
<div class="container">
<div id="an-element"></div>
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
</div>
OR
use position: relative; parent and position: absolute; child
Working Fiddle
.container {
height: 100vh;
width: 100vh;
background-color: yellow;
position: relative;
}
#up-arrow {
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
position: absolute;
bottom: 0;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
<div class="container">
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
</div>
as you haven't wrote any other content sitcky position may not work fine.
please review below stuff and you might get what you want,
.container {
height: 300vh;
width: 100vh;
background-color: yellow;
}
#up-arrow {
position: -webkit-sticky;
position: sticky;
bottom: 0;
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
<div class="container">
<div style="background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
<div class="sticky">Sticky Section</div>
<div style="background: pink;">Scroll</div>
<div style="height: 300px; background: green;"></div>
<div class="sticky">Sticky Section</div>
<div style="background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
<div class="sticky">Sticky Section</div>
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
<div style="background: pink;">Scroll</div>
<div style="height: 300px; background: green;"></div>
<div class="sticky">Sticky Section</div>
</div>
Note: I have made sticky at bottom position and for your understanding how bottom positioned sticky works I've also added some stuff below sticky positioned content.
Whenever content below sticky position renders position of screen will be initial(normal).
References: https://www.w3schools.com/howto/howto_css_sticky_element.asp
I'm trying to create a stack of playing cards in CSS, where each card is slightly offset diagonally from the one before it. Here's what it would look like:
.card {
float: left;
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
}
.card:nth-child(2) {
margin-left: -98px;
margin-top: -2px;
}
.card:nth-child(3) {
margin-left: -98px;
margin-top: -4px;
}
.card:nth-child(4) {
margin-left: -98px;
margin-top: -6px;
}
/* and so on... */
Example: http://jsfiddle.net/coev55w6/
I know I can do it by specifying different margins for each card, but I was wondering if there was a better way.
It's easy enough to create a purely horizontal offset:
.card {
float: left;
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
}
.card:not(:first-child) {
margin-left: -98px;
}
Purely vertical is easy too. But is there a way to get a diagonal offset with only a couple CSS rules?
It's a little bit of a hack, but you end up with that effect if you use the second option you gave:
.card:not(:first-child)
And put a <br> after each card:
<div>
<div class=card></div><br>
<div class=card></div><br>
<div class=card></div><br>
<div class=card></div><br>
</div>
JSFiddle:
http://jsfiddle.net/e4o0k2o5/
You could probably fine-tune it if you used a line-height or something other than <br>s.
I'm not sure it you're willing or able to change you HTML, but here's a wonderful alternative HTML layout and CSS to achieve your desired card spread.
.card {
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
position: relative;
margin-top: 10px;
margin-left: 10px;
}
.card2 {
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
position: relative;
margin-top: -10px;
margin-left: 10px;
}
<div>
<div class="card">
<div class="card">
<div class="card">
<div class="card"></div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div>
<div class="card2">
<div class="card2">
<div class="card2">
<div class="card2"></div>
</div>
</div>
</div>
</div>
i'm new to HTML & CSS and was hoping someone could help me out. I'm having a problem with this page where content is not fixed in place and when I zoom in and out the containers move freely. Any idea how to fix this? Not sure what layout I should be using to prevent this from happening. Thanks
<body>
<img class="img" src="http://i824.photobucket.com/albums/zz162/nathanial292/banner_zps45abd080.png">
<div id="header">
<h3 id="header h3">
Home Servers Shop Forum About Us Contact
</h3>
</div>
<div class="left">
<h1>Server Updates</h1>
<h2><span>Hello readers</span></h2>
</div>
<div class="right">
<a id="nabblelink" href="http://hydronetworks-forums.58422.x6.nabble.com/">HydroNetworks Forums</a>
<script src="http://hydronetworks-forums.58422.x6.nabble.com/embed/f1"></script>
</div>
<div id="footer">All Rights Reserved 2013 HydroNetwork</div>
</body>
#header{
z-index: 1;
border-radius: 5px;
height: 50px;
width: 600px;
background-color: #585858;
border: solid #383838 6px;
position: absolute;
margin-top: 25px;
margin-left:640px;
min-width: 480px;
}
.right{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 400px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-right: 50px;
font-family: Ebrima;
overflow:auto
}
.left{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 600px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-left:150px;
margin-right: 750px;
text-align: center;
font-family: Ebrima;
}
When you zoom in the content moves to the right and bottom, because you used pixel values.
At any rate you should remove
<body background= "http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png">
from your HTML-Code.
And add this to your CSS-Code:
body{
background: url(http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png);
background-position: top center;
}
If you don't want the divs to "move" when zooming, you should use percentages like width: 50%.
I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it's width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111 get's preformatted for some odd reason.
The code:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
I recommend using two divs floated.
On the right one, place the middle and the right divs.
All that is done via floats:
HTML:
<div class="left">content for the left</div>
<div class="rightContainer">
<div class="right">right content</div>
<div class="middle">middle content</div>
</div>
CSS:
.left {
float: left;
width: 100px;
overflow: hidden;
min-height: 30px;
background: red;
}
.rightContainer {
float: none;
min-height: 30px;
overflow: hidden;
background: yellow;
}
.right {
float: right;
width: 100px;
overflow: hidden;
min-height: 30px;
background: blue;
}
.middle {
overflow: hidden;
min-height: 30px;
background: green;
}
example:
UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/
This can be solved by specifying the style word-wrap: break-word; for your center fluid div.
Browsers don't work well with word-wrapping. Anyways I hope this code brings some help:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
</div>
First: paragraph elemements are block-level elements. Google it to learn more. So if you want it to not overlap with the other You must float it as well.
so include this in the header (or separate file - or inline if you want):
<style type="text/css">
p {
float:left;
}
</style>
Then rearrange your divs:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
I have some very basic code and it works except everything aligns to the top...ideally the bars would align to the bottom. I suppose I could use fixed positioning as the dimensions are squared at 50px by 50px but I'd prefer something a little less "fixed".
<div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
</div>
I don't want to use a library or JS add on. Keeping this light weight is mission critical.
Also I'd prefer the bars were vertical. Any CSS guru care to shed the bit of light I seem to be missing? I've googled and most examples are far to complicated/sophisticated,
First of all, separate your CSS from your HTML. You're repeating too much code when you could just use a bar class for your inner divs.
bottom: 0 doesn't change anything for relatively positioned div.
If you wish to use relative positioning, get rid of float and bottom and use display: inline-block and vertical-align: baseline;. Also, in this case, you need to get rid of any space in the HTML between the inner divs (newline).
Like this (you can see the demo at http://dabblet.com/gist/2779082 ):
HTML
<div class="graph">
<div style="height: 22px;" class="bar"></div><!--
--><div style="height: 11px;" class="bar"></div><!--
--><div style="height: 6px;" class="bar"></div><!--
--><div style="height: 49px;" class="bar"></div><!--
--><div style="height: 28px;" class="bar"></div>
</div>
CSS
.graph {
width: 50px;
height: 50px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
.bar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}
I would personally avoid setting xpos explicitly on every element, makes things less maintainable. In some scenarious percentage-basedvalue dumps would be more appropriate too. With that in mind, an imo more scalable and semanticaly correct approach has been mocked up in a fiddle. HTML:
<ul class="graph">
<li><span style="height:45%"></span></li>
<li><span style="height:12%"></span></li>
<!--as many more items as you want !-->
</ul>
and CSS:
.graph {
border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/
float:left; /*should be clearfix'd instead, but this is OK for a demo*/
}
.graph li {
width:8px; height:50px; /*set a bar width and a full height*/
float:left; /*to have bars "left-aligned"*/
position:relative; /*needed for the actual bar fill element*/
margin:2px;
}
.graph li+li {
margin-left:0; /*avoid margin double-up between bars as they don't collapse*/
}
.graph span {
position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars,
widths will be set inline*/
background-color: #aeaeae;
}
This also gives you potential to get quite fancy - bars could have content with a negative text indent for semantic value or <span> elements could be abandoned altogether in favor of pseudo-elements.
Kolink's answer is correct. Each bar div's width is 8px, plus margin-left and margin-right, 8+1+1=10px. So I suggest, set the left value to 0px, 10px, 20px ...
<div class="wrapper">
<div style=" left:0px;height:22px;"></div>
<div style="left:10px;height:11px;"></div>
<div style="left:20px;height:6px;"></div>
<div style="left:30px;height:49px;"></div>
<div style="left:40px;height:28px;"></div>
</div>
The css should look like this(I grouped some general css rules):
.wrapper{
border: 1px solid #aeaeae;
background-color: #eaeaea;
width: 50px;
height: 50px;
position : relative;
}
.wrapper > div{
bottom: 0px;
width: 8px;
position : absolute;
background-color: #aeaeae;
margin: 1px;
display : inline-block;
}
You can check this link: http://jsfiddle.net/zhujy_8833/AFbt4/ to see the result of the above code.
If you give the parent position: relative, then you can use position: absolute for child div to place them in precise coordinates by setting left, top, right, bottom, width, height you can precisely control the placement of the bars in your bar chart.
.graph {
position: relative;
width: 54px;
height: 54px;
border: 1px solid blue;
background-color: lightgrey;
}
.bar {
position: absolute;
border: 1px solid blue;
background-color: yellow;
}
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div>
<div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div>
<div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div>
<div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div>
<div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div>
</div>
</div>
<p></p>
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div>
<div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div>
<div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div>
<div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div>
<div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div>
</div>
</div>
Use position: absolute, and instead of float:left; use left: 0px;, 8px, 16px and so on.
Also add position: relative to the container.