I'm developing a theme for Tumblr and the scrollbar isn't appearing for some reason? This is the url for the blog.
The code for the theme can be found on the page source from the right click (all but the html as it gets messed up by Tumblr filling in the {} blanks)
<body>
<div id="titlebox">
<div id="title"><b>{Title}</b><div>
{block:IfHeaderImage}<img src="{image:Header}" class="avatar"/>{/block:IfHeaderImage}
<div id="description">{Description}</div>
{block:Pages}{block:HasPages}<div id="pages">{Label}<br></div>{/block:HasPages}{block:Pages}
</div>
</div>
<div id="postholder">
{block:Posts}
<div id="post">
{block:Photo}<img src="{PhotoURL-400}" alt="PhotoAlt" class="photo">{/block:Photo}
{block:Text}{block:Title}{Title}{/block:Title}{Body}{/block:Text}
</div>
{/block:Posts}
Try:
body {
overflow:auto;
}
The theme is in a way the the height is small therefore the scroll bar disappears.
If you have to have a scroll bar try this by adding it under the <style type="text/css"> tag :
html {
height: 110%;
margin-bottom: 0.01em;
}
There's a few funny things going on here.
'sidebar' has position 'fixed', which prevents the any new content from being seen even with overflow: auto.
What you can do is remove position: fixed from 'sidebar' and 'postholder'. give 'postholder' overflow: scroll and set body's overflow: auto to hidden (this removes the second scrollbar)
html, body{
overflow:initial !important;
}
Related
I am attempting to create a footer tag to change the background color of it.
footer {
display: block;
background-color: #92a8d1 !important;
}
<footer>
<div class="container-fluid" name="footer">
</div>
</footer>
Code
Code
Could someone help me fix the code for CSS color displays on the footer?
I cant comment yet so will just answer here. You might not have a height for your footer, that is why it is not showing. Try setting a height like:
footer {
/*display: block;*/ /*remove this, footer is already a block element*/
height: 200px;
background-color: #92a8d1 !important;
}
This might help. You can send a sample/plunk of your code in order for us to help you better.
This is because the footer does have to be inside the body. After the body comes only the closing html-Tag.
If you want a footer for your page, add it before the closing body Tag. This is the same behaviour as if you would have a p-tag in another p-tag. The browser auto corrects your errors and places them next to each other.
If I got your question right this should work :
<footer style="background-color: #92a8d1;">
<div class="container-fluid"> </div>
</footer>
I think the background-color is overwritten by an other style.
I'm using Skeleton CSS Boilerplate
Two different pages of my website, similarly structured, are slightly laterally shifted away from each other. This is causing a jarring effect in the navigation bar when navigating from one page to the other.
Upon investigation, I noticed in the Chrome Dev Tools CSS inspector that the body tag of each page is a different width.
The structure of both pages is the same, shown below. The class .wrap has a max width of 960px, and all the content is contained within .container .wrap.
<body>
<?php
require 'navsub.php';
?>
<div class="container wrap" id="singlepageajax">
</div>
<?php
include 'footer.php';
?>
</body>
So... what could be causing the body tags to be different widths?
Add the following CSS code
html, body {
height: 100%;
overflow: hidden;
}
then add a <div id="container-wrapper"> to wrap up the container
place its CSS like
#container-wrapper {
height: 100%;
overflow-x: auto;
position: absolute;
width: 100%;
}
this will enables the scrolling again
Vertical scroll bar is the cause.
The body element will shrink in horizontal direction to add some free space for the scroll bar, as the browser window has fixed amount of horizontal space.
UPDATE
If you want to prevent this behaviour, you may use:
body{
overflow: hidden;
}
But you may lose the scrolling feature of your browser on the page.
I set background image in #section-content, background is repeat-x, and background color in #section-footer. Problem is that backgrounds are cut by the amount of space that is first seen.
Is there any way to fix this?
There is image with problem, you can see that footer background color is cut off when is resolution or window small and I scroll right...
Problem image
You need to define min-width to the footer. Consider your main page wrapper has width: 980px; then assign min-width: 980px; to the footer element. When you resize the browser window, your footer knows that he has to repeat the background to the specified min-width even when your page gets horizontal scroll.
my html structure looks like this
<div id="page">
<div id="section-header">
...
</div>
<div id="section-content">
...
</div>
<div id="section-footer">
...
</div>
</div>
so I add to css
#page {
margin: auto;
overflow: hidden;
min-width: 1180px; /* it fits on my site */
}
and problem is solved...
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
I've got a strange problem with Chrome, Firefox and obviously IE.
I'm building a WordPress theme for my portfolio site/blog and everything has been okay, up until today when I viewed the site in chrome and suddenly there was a large white bar at the bottom of the page, when the page is viewed in Firefox/IE it shows a double sidebar.
here is the page http://iamdannygreen.com/?p=5
Please excuse the ugly header in firefox, havent yet bug fixed all browsers.
Any help would be greatly appreciated.
Thank you
Fix your header and remove overflow-x: hidden from body and it'll work just fine.
By fix your header, I mean, what is this...?
margin-left:-1000px;
padding-left:1000px;
padding-right:1000px;
margin-right:1000px;
If you want the header background to span the width of the window, move it outside of #wrapper and put another wrapper inside for the content (so the content stays centered).
<div id="header">
<div class="wrap">content here</div>
</div>
<div class="wrap" id="content"> body stuff here </div>
.wrap {
width: 500px;
margin: 0 auto;
}
#header {
background-color: #CCC;
}
#content {
background-color:#FFF;
}
DEMO.