Basically, I made the post boxes smaller (height and width) on my tumblr's main page so that users won't have to scroll down to read through blogs. I tend to write lengthy blogs. What I did was lowered the height and width of my post boxes, added an overflow:hidden property (so that my lengthy texts won't go outside the divs), and permalinked them so that they can read the full posts on another page instead.
My problem is, since I adjusted the height and width of the post box on the main page, the height and width of the post box on the redirected page is also the same. My question is, there a way that I can just adjust the post box height and width ONLY on my main page and not on redirected pages?
Yes, find the class or id of the body tag for your main page. (if it has one, if not you would just need to add one)
for example if the home page has this (you can find this easily by viewing page source and looking for the opening body tag)
<body class="home-page">
you could do this
.home-page .each-post {
width: 100px;
height: 100px;
overflow: hidden;
}
So that would only change the .each-post on the .home-page, and the .each-post css would stay the same on the other pages.
Related
My website is thoughtshouts.com running on WordPress using VOICE THEME (by Meks). For some of the pages that are short, the footer appears in the middle of the screen for all devices. I explored some other websites too running on the same theme but not witnessed the same issue. I am skeptical that this might be some issue with WordPress or theme compatibility, not very sure. I explored help forums giving a common remedy setting as
.site-footer{
position: absolute;
bottom: 0px;
}
After making the above CSS change, this works for that particular page where the issue is, but for other website pages, the footer comes somewhere in between content overlapping the content screen. I wish the footer to fixed at the end of every page, posts where it only appears when content is scrolled to the last.
Problem Page link: https://thoughtshouts.com/publish-content/
Please guide me with the required code to fix this issue.
This isn't really an issue with your sites codes or CSS.
This template like many other themes that use best practice headers and footers to house content wraps the headers and footer around the content of the page.
The real issue here is the content in your page.
Can I suggest that you re think your approach to the UI of this page such as the following:
Increasing the padding above and below your main content
Add more content to the page to increase the body height
By default show the login form on this page so regular users dont have to click Login. Then have an additional link to your sign up page.
The simplest solution will ba add min-height of whole screen but footer and header height to your #content wrapper.
#content {
min-height: calc(100vh - 131px - 58px); // screen size minus header minus footer
}
Also need to check every media queries since footer/header height may be changed. If you have no worries about extra empty space after content just use
#content {
min-height: 100vh;
}
My layout_main custom control contains 3 tops layout_banners, one custom control ( facet ) which contains the custom control for the document called ccDoc, and one layout_footer. This layout_main is on my xmain XPage.
Is there any chance to 'enable' scrolling for my ccDoc.? Its structure is quite big, having numerous fields, and if its size > window size, the entire xpage ( window ) is scrolling and I found my lowest banner/layout_footer not visible on the window browser - I must scroll down to see it. I want just theccDoc to have the scrolling possibility and the others custom controls / layouts to stay fixed.
Thank you for your time!
Surround your content in ccDoc with a div with a fixed height and overflow set to auto (or scroll).
Example CSS
.scrollDiv {
height: 500px;
overflow: auto;
}
Example HTML
<div class="scrollDiv">
<!-- rest of ccDoc goes here -->
</div>
I was working on a project and was required to have the navigation bar remained static(e.g. facebook), not CSS fixed position but say when I click an item in the menu to load its content, only the content area gets refreshed.
Hence I believe I will need a container in the center of the page to load the dynamic contents. Right now, the navigation bar is included in all my aspx pages which are identical and the bar refreshes from page to page.
I read several articles/post and the approach I thought of was to wrap every single aspx into usercontrols and then dynamically load it into a div inside my masterpage upon being called from the respective menu items which is based on this article:
http://msdn.microsoft.com/en-us/library/c0az2h86%28v=VS.100%29.aspx
One of my pages uses jquery tabs to show/hide multiple child div content in a parent div which means all div contents are in one single page, however now I am dealing with 30 over aspx pages which mean this way should be out but that's the concept I need.
Problem is I have over 30 huge aspx pages and not sure if this is the way to go. Any advises for my situation? Thanks.
So you just want your menu bar to remain fixed? Well then make use of the css position property fixed.
Wrap your menu bar within a containing div and then style that up.
div#menu{
position: fixed;
height: 25px;
width: 100%;
}
Then give your page content a 25px top margin
div#content{
margin-top: 25px;
}
This will result in your navigation to always remain fixed at the top of the page when you scroll, and you don't need to do anything with pages/usercontrols/dynamically loadingin content.
I have put together a little example here. CSSDeck Example
The question is how clean or dirty do you want it to be?
Really clean? -> Build a Single Page Application. This will problably make you rewrite a large part of your application.
Old school? -> Use an iFrame and remove (part of?) the MasterPage from your pages.
More dirty? -> Load your content in an UpdatePanel. You have to remove the MasterPage from your pages again.
All solutions will present you a navigation challenge, as asked here.
My <footer> tag will not seem to stay at the bottom of my page. I have tried several different techniques to fix it and none have worked.
I have included the link to my working site below.
http://stage.bmdigitalgroup.com/recipes.html
i think you want to put your footer at bottom of the page i any resolution, if am i right than here is answer.
.footer {
position:absolute;
border:0px;
}
for more tips, tricks and tutorial visit - blog.klassicweb.com
Based on your screenshot, it looks like your monitor's height is larger than your website's content or you have zoomed out a lot, so what you're seeing is totally normal. In a smaller monitor it would look just fine. You could add a min-height: rule to your sites container so it pushes the footer down to the specified value, but you need to figure out a min-height that makes sense to you and your users.
If you really want to make the footer always stick to the bottom regardless of the monitor's height or zoom level, then you could add the following rules - just keep in mind that in a page where there isn't much content, you will end up forcing users to scroll down for no reason if they need to get to the footer:
/*
This rule is already in your stylesheet.
I added it here just for reference.
*/
html, body {
height: 100%;
}
/*
This is the container that holds your whole site.
You should use an id like "#container" or "#site" so this rule
applies only to your site's main container.
*/
.container_12 {
min-height: 100%;
}
[Update]
I actually compromised on this problem for now by foregoing the fixed footer design.
It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.
I hope others will eventually provide a great solution that encompasses the best of both worlds.
I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.
I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.
That same css layout works fine for other pages that have content that extends beneath the browser window.
The catch:
The content has to be rendered and passed to the browser with the initial load.
The Problem:
Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.
Please tell me there is a fix for this.
I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.
Thanks.
Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bound this function to $(document).ready and $(window).resize.
If ajax call resizes body, this should be called also after content load.
It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:
bottom: 0;
display: block;
position: absolute;
That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?
Without any code it´s hard to tell what the problem might be.
However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.
Use include in PHP and call the footer after the dynamic content appears.
I'm not sure you are looking for this, but I am also facing the same problem before and same CSS, where my content overlaps on the footer when i call the ajax through jQuery method.
Now I found the solution: Just get the div height through jQuery and apply the height to the div where you are returning your results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is div ID.
I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}