I am working on a pure oocss approach to creating the charms as found in Windows 8. I have the Dock class finished, but am having problems with figuring out how to "expand" the charm when the mouse is moved over a docked area. I know there are ways to hide content but have the browser respond to the :hover event of Charm. If you have any ideas, let me know.
Dock
Docks content to the edge of the screen.
.dock
{
position: fixed;
height: auto;
width: auto;
}
.dock--top
{
width: 100%;
top: 0;
}
.dock--bottom
{
width: 100%;
bottom: 0;
}
.dock--left
{
height: 100%;
width: auto;
left: 0;
}
.dock--right
{
height: 100%;
right: 0;
}
Charm
Island containing the content.
.charm
{
padding: 24px;
}
.charm:hover
{
}
Html
<div class="charm dock dock--right">
</div>
I tried padding it and setting the width to 1px but had no luck. On my original plan I would have applied the background-color when the move moved over it so it did not render a line going down the side of the screen.
This is as close as I have gotten but its ugly:
.charm__body
{
width: 0;
visibility: collapse;
}
.charm:hover
{
background: blue;
}
.charm:hover .charm__body
{
width: auto;
visibility: visible;
}
You can make a transparent div, positioned absolutely, and make it work as a hover trigger.
Related
I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
UPDATE 2: Making further progress. Almost there!
jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/6/
The sprite is now 99% responsive, except that the
margin-bottom: %
Does not line up perfectly as the page changes width. The
margin-left: %
Seems to work great.
Any thoughts on how to align the margin-bottom perfectly?
UPDATE: Making progress, but still not yet there.
Below is the jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/5/
The sprite image that I wanted to crop is working responsively, except it is only being cropped horizontally and not vertically.
The Code below:
<div class="responsive-sprite" style="width: 100%;">
<img alt="Yay for alt tags..." src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" />
</div>
img {
width: 100%;
height: 200%;
margin-left: -81.869%;
}
.responsive-sprite {
overflow: hidden;
}
Can anyone think of a way to crop this vertically as well?
Below is the original post:
Is there a way to make CSS sprites responsive?
Take a look at the attached jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/2/
Is there a way to resize this CSS sprite once the container can no longer fit the full size image?
<div class="container">
<h2 class="popular"><img src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" alt="" />Featured</h2>
</div>
.container {
width: 20%;
margin: 0 auto;
}
h2 {
overflow: hidden;
position: relative;
height: 128px;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
}
h2.popular img {
top: 0;
left: -867px;
}
h2.popular img:hover {
top: -128px;
left: -867px;
}
Hmmm. Tricky.
I haven't tested but would it work to orient the sprite horizontally instead of vertically and then:
h2 {
overflow: hidden;
position: relative;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
width: 200%;
}
h2.popular img {
top: 0;
left: 0;
}
h2.popular:hover img {
top: 0;
left: -100%;
}
Edit:
Seems to work, the sprite just needs to be configured. Have a look at this JSFiddle.
Unfortunately, I think you will have to do each button individually because the image height is what determines the button height when it is resized.
I've got this css code that makes a webkit scrollbar.
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
This will make a scrollbar that will be right next to the screen edge. Is there any way that I can put some space between the screen edge and the scrollbar?
Here is an interesting solution to what I think you are talking about; they actually put padding/position on the body element:
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
Do not do this, you will be murdering usability.
If a scrollable region extends to the edge of the screen, the scrollbar must also be at the edge of the screen. This way, the user can simply hit the edge of the screen with their cursor and use the scrollbar. This action doesn't require visual attention or precise positioning; it's a simple, easy movement.
If the scrollbar is not at the edge of the screen, the following will happen:
The user will want to scroll the content which will unconsciously translate to hitting the edge of the screen with the cursor.
This unconscious scrolling action will fail, breaking the user's focus on the content.
The user will look toward the cursor to see what's wrong.
After detecting the problem, the user will have to make a precise movement of the mouse to position the cursor over the scrollbar. The difficulty of this movement is even greater if you use a non-standard, narrower scrollbar.
The user will click and drag, scrolling the content and returning their focus to it.
Even if all this takes a second, it's still very annoying and completely unnecessary, and, I imagine, quite likely to make the user take their business elsewhere.
Change the width of the scrollable element. For instance...
#div_content {
width: calc(100% - 20px);
}
That way, the other elements of the page are unaffected. For instance.
<div id="div_header">Welcome</div>
<div id="div_content">
Scrollable content goes here.
</div>
<div id="div_footer">©2015 by Whomever</div>
Sample CSS...
#div_header {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100px;
}
#div_content {
position: absolute;
left: 0;
top: 100px;
width: calc(100% - 20px);
height: calc(100% - 140px);
padding: 50px;
overflow-x: hidden;
overflow-y: auto;
}
#div_content::-webkit-scrollbar {
-webkit-appearance: none;
}
#div_content::-webkit-scrollbar:vertical {
width: 5px;
}
#div_content::-webkit-scrollbar:horizontal {
height: 5px;
}
#div_content::-webkit-scrollbar-thumb {
border-radius: 8px;
border: none;
background-color: #404040;
}
#div_footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
}
I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.