I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
Related
I'm attempting to style Wikipedia. I'd like to place the table of contents in a sidebar; however, I've come up against a few obstacles. I'd like to:
Vertically center the table of contents if it's shorter than the
viewport height.
Remove the scrollbar on long tables of contents while retaining scrolling ability.
Specify a sidebar %width and min/max widths, and have the body content fill the rest.
Please see this for a visual.
Here's what I have so far:
#-moz-document domain(wikipedia.org) {
#mw-navigation, #toctitle, #footer {display:none;}
/* Place table of contents in a sidebar */
#toc {
height: 100%;
width: 20%;
min-width: 150px;
max-width: 250px;
position: fixed; /* don't scroll with page. */
top: 0;
bottom: 0;
left: 0;
overflow: hidden; /* hide scrollbar, but... */
}
#toc > ul {
background: lightblue;
overflow: scroll; /* ...still allow scrolling? */
/* center vertically if shorter than height of viewport */
display: table-cell;
vertical-align: middle;
}
#content {
/* How to have contents fill the remaining width? */
}
}
Does anyone have solutions to these? Are they even possible?
I created a userscript which allows me to define custom links that display both horizontally across the top of Wikipedia as well as in the navigation panel which sits along the left side of the page. I copied it over to Gist in case anyone is interested. It should help you accomplish what your looking for I think:
Wikipedia User Defined Navigation Links (Gist)
To use this code you need to find your Wikipedia theme JS file which is going to be a subpage to your userpage. Mine is here. You can find yours by clicking this link which will automatically direct you to the appropriate location. You should be logged into Wikipedia first, and then click here.
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
I am trying to get rid of a distinctly unwanted second vertical scrollbar that has appeared on this page I am putting together, see http://abchealth.info/doc-mike-special/test3/.
My research here led me to try and remove the 'overflow' from my CSS, but this absolutely trashed my layout, so I am looking for a solution that removes the inner vertical scrollbar without changing anything else...
I'd much appreciate your help, thanks!
Here's my CSS:
/* Generated by KompoZer */
body {
background-image: url(http://abchealth.info/images/bg.png);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
div#wrap {min-height: 100%;}
div#mastercontainer {
overflow:auto; width: 100%;
height: 100%;
min-height: 100%;
}
div#header {
background-image: url(http://abchealth.info/images/header-bg.jpg); background-repeat:
repeat-x;
position: top; height: 96px;}
div#content {
}
div#innercontentmiddle {
margin: 0 auto;
width: 540px;
padding:10px; padding-bottom:510px;}
div#footerclear {
}
div#footer {
position:relative; margin-top: -510px; height: 510px; clear:both;
background-image: url(http://abchealth.info/images/footer-bg.jpg); background-repeat:
repeat-x;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
change this: #mastercontainer {overflow:auto;} to #mastercontainer {overflow: visible;}
What's happening is 'auto' uses a scroll bar if the content is too big for the frame. Aka that div or w/e needs enlarged to avoid the scroll. Visible will let it overflow like I think you want. Either visible or even hidden would work with this code-- css is all about playing around and experimenting.
***Most browsers offer a plug-in called 'FireBug' -> download it. It allows you to edit the css etc of webpages while viewing. Very useful for css styling errors. Highly recommended for issues such as this.
This works
#mastercontainer { overflow: hidden; }
or the above solution works too.
Remove overflow:auto from div#mastercontainer.
If the problem is due to html, body { overflow-x: hidden;} then try using html, body{height: 100%;} it worked fine for me.
For anyone using ion-icons and bootstrap, the issue can be in ionic/structure.css.
I was using ion-icons on the website and in ionic/structure.css I found these two properties causing the issue and changing them solved the issue.
{
overflow: hidden;
overscroll-behavior-y: none;
}
Changed to:
{
overflow: scroll;
overscroll-behavior-y: scroll;
}
Setting overflow-y to'hidden' can in many cases remove the vertical scrollbar. As can setting it to 'visible' because that means that overflow is visible which means no need to scroll, so scrollbars are not visible.
Those setting however don't always work, because of what is said at https://developer.mozilla.org/en-US/docs/Web/CSS/overflow :
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
The above link is a good resource for trying to understand how 'overflow' works in general, it's not as simple as you could hope.
For instance, another note, from there:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.
I have a margin below my footer in most browsers. Not in Chrome though. See enter link description here
Both body and my page wrapper have margin: 0. Wrapper is also height: 100%.
Here's the footer code:
#colophon {
clear: both;
display: table;
width: 960px;
max-width: 960px;
background: #131313;
border-top: 3px solid #0099cc;
border-collapse: collapse;
}
Adding margin: 0 there doesn't help. Shouldn't be necessary anyway. What am I missing?
In the bottom of your code I found this
<img alt="" src="http://stats.wordpress.com/g.gif?host=atlanticsentinel.com&rand=0.059020346471435614&blog=28342037&v=ext&post=0&ref=" id="wpstats">
If you remove that it works. What you should do is add display: none to that image in the CSS.
I saw that you have added visibility: hidden. When you do that it hides the image but the image will still take up room in the DOM.
Your wordpress stats tracker image is set to visibility: hidden, and follows your body tag. It is this image which creates your extra footer spacing, as you can see by changing the image like so img#wpstats { display: none; } (don't leave it like this - see below)
I'd move that image within your main footer (ie #colophon) somewhere it won't cause a problem. Alternatively, you could set it to position: absolute to remove it from the flow entirely. You can't set it as display: none as the browser needs to load the image in order for your tracking to work.
the issue is caused by your latest image img#wpstats because its visibility property is hidden
if you set display: none to that image (or make it absolutely positioned adjusting negative top or left properties) you solve the problem