There is a siderbar and we do not want it to scroll. So clearly either position:fixed or position:absolute should do the trick, but they don't!
The following happens with position:fixed:
the sidebar glitches on scroll and breaks up and just acts oddly
The following happens with position:absolute:
the sidebar scrolls rather than staying in place.
Here is the css for the sidebar (not correct id name)
#sidebar{
font-family: 'Jura', sans-serif;
position: fixed;
margin-top:80px;
margin-left:1020px;
font-size:18px;
padding-top:0px;
padding-bottom:17px;
text-align:center;
height:420px;
width:300px;
overflow:hidden;
solid #000000;
color:#000000;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
background-color:transparent;
opacity: 1;
z-index:999;
}
this is a link to the blog so you can maybe check with developer tools to see the glitching and what exactly is happening.
Why is the positioning acting so odd, and how can that be fixed?
And this happens in safari and chrome, I do not have firefox or internet explorer installed, so I am not sure the response for those browsers
picture of glitch, splits sidebar image up and occasionally will show some of the text:
Remove overflow:hidden from the element with the four-letter F-word.
#???? {
font-family: 'Jura', sans-serif;
position: fixed;
margin-top: 80px;
margin-left: 1020px;
font-size: 18px;
padding-top: 0px;
padding-bottom: 17px;
text-align: center;
height: 420px;
width: 300px;
/*overflow: hidden;*/ <---- remove for "glitch" to go away
color: #000000;
-webkit-transition: opacity 0.3s linear;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
background-color: transparent;
opacity: 1;
z-index: 999;
}
The element is named a censored (I assume) F word!
You want the css overflow property: Overview. Hidden or visible should do the trick.
Related
I need to show title in two line.
Like it shown in below image.Second Item is fine but first Item is coming is single line that I dont want
.ms-tileview-tile-titleTextMediumCollapsed {
width: 120px !important;
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: hidden;
}
<div class="ms-tileview-tile-titleTextMediumCollapsed">Group Members</div>
<div class="ms-tileview-tile-titleTextMediumCollapsed">Temp Document Library</div>
You could change the width:
width: 80px !important;
is it that important?
If you don't whant to change the width, you could put a <br/> in the middle of the title.
<div class="ms-tileview-tile-titleTextMediumCollapsed">Group <br/> Members</div>
Here is another way you can achieve it although leo's answer is simple and elegant.
.ms-tileview-tile-titleTextMediumCollapsed {
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: visible;
word-wrap: break-word; // word break with overflow display
max-width: 120px;
}
please check out the link.
https://jsfiddle.net/sarojsasmal/6ce9ym4n/4/
You can easily achieve this by changing the elements width.
But if you don't want to mess with the width, then simple solution is to use padding and box-sizing: border-box properties.
Like this:
.ms-tileview-tile-titleTextMediumCollapsed {
width: 120px !important;
top: 80px !important;
-webkit-transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-o-transition: top 0.5s ease-out;
text-align:center;
line-height: 1.5em;
height: 3em;
overflow: hidden;
padding: 0 20px;
box-sizing: border-box;
}
<div class="ms-tileview-tile-titleTextMediumCollapsed">Team Members</div>
<div class="ms-tileview-tile-titleTextMediumCollapsed">Draft Document Library</div>
So you want "Team Members" to be on two lines? But keep everything else?
I would wrap those words in a wrapper that way you don't have to repeat that class on ever menu item. I don't know how much you can customize the html but this might work better for you:
HTML
<div class="title-container">
<span class="two-line-title">Team Members</span>
<span>Draft Document Library</span>
</div>
CSS
.title-container {
width: 120px !important;
top: 80px !important;
text-align:center;
line-height: 1.5em;
overflow: hidden;
transition: top 0.5 ease-out;
}
.title-container span {
display: block;
margin: 0 auto;
}
.two-line-title {
width: 70px !important;
line-height: 1.2em;
}
http://codepen.io/StefanBobrowski/pen/ryRRRv
Here's the page I'm working on:
http://jordankline.design/designs.html
I have a CSS fade in animation on each of those tiles that reveals the name of each project when you hover. It works perfectly on every browser I've tried... except Chrome on my friend's computer, where the animation only occurs when you click (instead of hover). We have the same operating system (Windows) and the same version of Chrome (51.0.2704.106), so I'm not sure what's happening. My only guess is that it might have something to do with her monitor having touch capabilities?
Here's the CSS for the relevant class:
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 38%;
background: #000;
background: rgba(255,255,255, 0.7);
color: #000;
padding: 10px;
text-align: center;
vertical-align: middle;
font-family: MinionPro;
font-size: 100%;
letter-spacing: 2px;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
opacity: 1;
}
Add this (since you have no focus or hover selector):
a:hover .titleBox, a:focus .titleBox {
opacity: 1;
}
The :focus ensures it works for keyboard users as well.
I have a fixed nav bar running the length of my website, but just now it currently has it's own scrollbar, so when i scroll on the body of the website, the navbar is static, and will only scroll if i physically scroll over the navbar itself.
Is this just the outcome of 'position: fixed;' or am i missing something in my CSS?
body {
margin: 0;
padding: 0;
color: #555;
font: normal 1.3em Arial,Helvetica,sans-serif;
background-color: #FAFAF0;
font-family: "proxima-nova",sans-serif;
display: block;
}
/*NAVBAR*/
#sidebar-wrapper {
position: fixed;
background: #2C4649;
z-index: 1000;
left: 0px;
height: 100%;
margin-left: 0px;
border: none;
display: block;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*PAGE CONTENT TO THE RIGHT OF NAVBAR*/
#page-content-wrapper {
margin-top: 20px;
overflow: hidden;
margin-left: 130px;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow-y: auto;
}
Does anyone know how to fix this so the full height of the website is dependant on either the navbar content or page content - rather than being separate scrollable items?
Thanks
Not exactly sure what you're after, but here's an example fiddle.
All I did was this rule: #sidebar-wrapper{overflow-y:hidden;} which will remove any scrollbar in the fixed element. This means that if there is too much content in the navbar, it will be cut off and not visisble (hence "hidden"). If you are already experiencing a scrollbar in the fixed nav bar, it means you have too much content in it, so this might not be the best solution for you.
Then I added a fixed width of the sidebar to match the margin offset of your content.
I am currently working on my tumblr theme footer size. I changed the paddings of the ".post .footer" so that it would be smaller and came up with:
#wrapper #content .post .footer {
background: {color:Footer} url({image:footer});
{block:IfFooterBorder}
border: {text:Footer Border}px solid {color:Footer Border};
{/block:IfFooterBorder}
font-family: {text:font family secondary};
font-size: 9px;
color: {color:Footer text};
padding:4px 8px;
margin-top:15px;margin-bottom:8px;
line-height:8px; z-index:10;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#wrapper #content .post .footer .date {
width: 67%;
float: left;
}
#wrapper #content .post .footer .notes {
width: 33%;
float: right;
text-align: right;
}
#wrapper #content .post .footer .notes a, #wrapper #content .post .footer .date a {
color: {color:Footer link};
text-decoration:none;
}
#wrapper #content .post .footer .tags a {
color: {color:Footer link};
{block:ifnotlinkunderline}
text-decoration: none;
{/block:ifnotlinkunderline}
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
font-size: 10px;
}
So then I tested it and am satisfied with the size. But then i noticed that the second footer (footer for the post tags)'s size is slightly bigger than the first footer (the footer for the time or date and notes).
So then i decided to edit it and add a separate section for the "tags" footer. I placed this in between ".post .footer .notes a,.post .footer .date a" and " .post .footer .tags a":
#wrapper #content .post .footer .tags {
padding:0px 0px;
}
I put in 0px paddings so that the size would be smaller as there are no paddings. But it still did not work so i changed the paddings to:
#wrapper #content .post .footer .tags {
padding:-1px -1px;
}
Then i tested it, but it still did not work. What's going on? The second footer's size is still bigger and the footers are still imbalanced. Am I missing something here?
Okay, tag is an inline element by default, so you need to add display:block; to it so that it can adapt to your custom width and height.
#wrapper #content .post .footer .tags a {
color: #ffdaf4;
text-decoration: none;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
font-size: 10px;
font-style: italic;
cursor: help;
display: block; //add this line to change the height
line-height: 8px; // add this line to vertical center your text for better looking
}
I'm trying to create simple auto-hide menu/header with css. I use transition but I think this is not a point here.
When I hover header is should slide down and show whole content, when I move mouse away it should slideup. It works for me. I want also screen content to expand when header is slidedup. This is mayor problem. The only way I know to have div expanded on whole page (screen) is to fix its top, bottom, left & right. It does not work when top value is changing.
Please look at my code example:
http://jsbin.com/ahamid/2/edit
The green part is problematic. I tried to fix it with changing top value on hover - but it does not work when mouse is outside of content & outside of header too.
Below is code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main">
<div id="head">
<span> header </span>
</div>
<div id="content">
<span>
test content
</span>
</div>
</div>
</body>
</html>
and css:
body {
position: relative;
}
#main {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
}
#head {
display: block;
height: 50px;
top: -44px;
right: 0px;
left: 0px;
background-color: #fcc;
margin: 0px 3px;
position: absolute;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover {
height: 50px;
background-color: red;
top:0px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content {
background-color: cfc;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 3px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#head span {
color: black;
font-weight: bold;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
#head:hover span {
color: yellow;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
}
#content:hover {
top: 6px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
I think that the problem is that you set the #content as you want it to be on hover.
What you really want is that it is always that way, and only change it (downwards; increasing top) in the hover of the #head
Change the #content to:
#content {
background-color: cfc;
.....
top: 6px;
.....
}
and modify the top in the hover of the head:
#head:hover ~ #content {
top: 50px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
You can do that because head and content are siblings, so you can use the sibling selector.
This way it behaves correctly, the only strange thing comes from the transitions timing being different, but you can manage this :-)