I'm trying to create a fixed/floating right aligned help button on my website that when clicked expands to take up a specificWidth by maxHeight section on the screen on the right side as a way to provide help to users.
.floating-help-section {
background-color: #fbd850;
position: fixed;
float: right;
left: 0;
right: 0;
bottom: 50px;
height: 50px;
width: 200px;
z-index: 2000; !important;
}
.help-accordion {
background-color: yellow;
color: #444444;
cursor: pointer;
padding: 10px;
width: 200px;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s
}
.help-panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<div class="container" style="width: 100%;">
<div class="floating-help-section">
<button class="help-accordion">Help</button>
<div class="help-panel">
This is where the help content goes
</div>
</div>
</div>
The code above is a start in the right direction, it doesn't float on the right yet among a few smaller issues. My main issue is that I don't know how to force a specific uncollapsed/expanded size for my help panel to get it to expand nicely and have a good amount of space to show my content.
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
I've been trying to create a feed page and I want it to be totally responsive. The layout is a score on the right with a fixed width and a link on the left which should take up the rest of the horizontal space.
The code I have so far has the link just taking up the whole line and passing underneath the score div.
This will be a problem if the link title is so long that it gets cut off by the score as I can't stop the link div's width once it collides in which case I'd like to use the text-overflow: ellipsis feature.
My code is below along with a jsfiddle link
HTML
<body>
<ul id="tracklist">
<li class="trackwrap"> <a class="tracklink" href="#">Link 1</a>
<p class="trackscore">x score</p>
</li>
</ul>
</body>
CSS
#tracklist {
margin: 0;
position: relative;
list-style-type: none;
background: white;
padding: 10px 20px 10px 20px;
}
.trackwrap {
position: relative;
margin: 0;
width: 100%;
height: 24px;
transition: 1s;
margin-bottom: 2px;
transition: 1.5s;
}
.tracklink {
background: red;
margin: 0;
display: inline;
position: absolute;
left: 3px;
width: 100%;
max-height: 24px;
font-size: 16px;
line-height: 24px;
}
.trackscore {
background: blue;
margin: 0;
display: inline;
position: absolute;
right: 52px;
font-size: 14px;
color: white;
text-align: right;
line-height: 24px;
}
http://jsfiddle.net/4Lf8v9tn/
This needs to be responsive so I'd prefer it if answers could use width: 100% for the link div
Thanks
Add a min-width on your .trackwrap like so: http://jsfiddle.net/4Lf8v9tn/1/
Up until a couple days ago using position:absolute; and bottom:-36px was enough to hide the controls down the page, and they would popup whenever the mouse was hovered over the player. Now I'm able to scroll down to see them. How can I fix this while keeping the same slide-up effect?
Also, one more thing... I set the controls div with line-height:36px expecting it to be 36px in height but it is actually 38px (making bottom:-36px kind of useless since 2px are visible). The timer and the P, M and F divs get two extra px on the top and the seek bar gets them on the bottom. Where are these extra px coming from?
Sample
Any help on how to fix these issues and understand what's going on will be greatly appreciated. Thank you.
EDIT1:
Thanks to Fahad I managed to solve my first issue. The snippet didn't work outside of codepen but I fixed it adding position:relative; to the parent div. It still is unclear to me why line-height adds those extra px, though.
Giving the parent div a relative position raised another problem, don't ask me why but sometimes I need to scroll inside the "player" (well, you can ask) and when I do the controls don't stay at the bottom. Please see for yourselves:
Sample
EDIT2:
Apparently that can be easily solved by replacing position:absolute; with position:fixed; in the controls div. I'm still testing just in case this little change is messing with anything else.
You can assign overflow-y: hidden; to your body tag using CSS (to disable vertical scrolling) and change the bottom value to -38px.
html,
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #EEE;
margin: 0;
overflow-y: hidden;
}
#player {
background-color: #333;
text-align: center;
height: 100vh;
}
#toggle {
margin: auto;
width: 500px;
font-size: 24px;
line-height: 60px;
background-color: #B83B3B;
}
#toggle:hover + #controls {
bottom: 0;
}
#controls {
position: absolute;
left: 0;
right: 0;
bottom: -38px;
line-height: 36px;
background-color: #B83B3B;
transition: bottom 0.3s ease;
}
#left {
float: left;
}
#right {
float: right;
}
#curTime {
font-size: 13px;
font-weight: bold;
margin: 0px 8px;
display: inline-block;
vertical-align: middle;
}
#center {
overflow: hidden;
}
#seekBar {
-webkit-appearance: none;
outline: none;
background-color: #1F7783;
height: 6px;
margin: 0;
width: 100%;
}
#seekBar::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #EEE;
height: 12px;
width: 12px;
border-radius: 12px;
cursor: pointer;
opacity: 0.8;
}
.button {
margin: 0px 8px;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
<div id="player">
<div id="toggle">Hover to show controls.</div>
<div id="controls">
<div id="left">
<div class="button">P</div>
<span id="curTime">0:01</span>
</div>
<div id="right">
<div class="button">M</div>
<div class="button">F</div>
</div>
<div id="center">
<input type="range" id="seekBar" step="any">
</div>
</div>
</div>
Here's the example on CodePen.
I have the following structure:
<div class="wrap">
<div class="menu">
<div class="item">
Menu
<div class="submenu">
<div class="submenuitem">Submenu</div>
</div>
</div>
</div>
</div>
and so far the following CSS:
div.wrap {
background: #eee;
height: 80px;
}
div.menu {
margin-left: 50px;
background: #36e;
}
div.item {
background: #d00;
color: #fff;
line-height: 40px;
padding: 0px 20px;
font-size: 16px;
display: inline-block;
margin-left: 50px;
}
div.item:hover {
background: #b00;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0%;
top: 50%;
min-width: 300px;
}
div.item:hover div.submenu {
display: inline-block;
}
div.submenuitem {
line-height: 40px;
padding: 0px 20px;
background: #b00;
color: #fff;
display: inline-block;
}
JSFiddle
The behaviour I'm after is that the width of submenuitem expands to fit its textual content, but that it can use at most the width of wrap for expanding. It should also be positioned directly under item unless the width of submenuitem will be larger than the distance from its original position to the right end of wrap. Thereafter it should expand to the left until it meets the left edge of wrap.
As you can see this succeeds perfectly when I can know the distance from submenuitem's original position to the right end of wrap by setting right: 0%; min-width: 300px; on submenuitem, but I want to do this in a way that doesn't require knowing that distance.
I have been trying to craft or find a solution to this for the past few days and have not managed to get any closer. Is it even possible with pure CSS to begin with?
Is this something you want? check this one nd let me know.
http://jsfiddle.net/zmcEC/9/
div.wrap {
width: 400px;
background: #eee;
position: relative;
height: 80px;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0;
top: 40px;
left:0;
}