I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page
Pretty page!
Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -
/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}
I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page.
This is how the page looks now w/missing bgcontainer.gif:
Current page
Please help - thank you
With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:
But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.
The "#container" div of the "wrong" page spans the whole witdh.
By the way, I like your design.
EDIT:
This is the look of the page with float: left; and left:107px; added to the ".container" div.
Here's your biggest problem:
The structure of the HTML pages is MUCH too different to pin this problem on one single line of code. In the "old" page there are 5 stylesheets including your own; in the "new" page there is only one stylesheet.
The reason your old and new pages don't look the same when you add your default.css stylesheet is because the old page has FOUR other stylesheets also applying styles, many of which are overriding your own.
Related
The link below is where to find my website that I am making for a university project and for a client.
https://homepages.shu.ac.uk/~b7009049/wordpress/
Once the webpage loads up, you will be introduced with a page title populated with an image and two buttons. One will lead you to the About us and the other will take you to services. Click on the services button as that's where the problem is please.
Basically there is a white gap and I want the image below to completely fill up the page. Like a full screen except that you are not pressing F11 .
I don't know where the issue is. If I remove the header page, it does not do anything to clear the gap. So I don't think the header is the problem.
I am using fusion slider + a plugin called layerslider. If that helps.
I can provide a screenshot of what I am editing upon request if needed.
Thank you very much.
You have two things producing white space at the top of https://homepages.shu.ac.uk/~b7009049/wordpress/services/
One is padding applied to the "main" element. You can get rid of that with CSS:
/* REMOVE MAIN TOP PADDING ONLY ON THIS PAGE (id-2546) (AT LEAST FOR NOW) */
.page-id-2546 #main {
padding-top: 0;
}
You might also want to get rid of the padding at the bottom of #main element on this page - padding-bottom: 0, of course
That will still leave a 20px white bar at the very top, produced by a stray 'p' element that has a bottom margin of 20px. Though this paragraph happens to contain a jQuery script (which probably shouldn't be there), there's another stray p element further down the page - also contained within "ls-" elements - also producing a 20px white separation between two full-width image elements, that happens to be empty.
I don't know exactly where these p's came from. You might have to dig into the applications involved - both Layer Slider and, I think, the Fusion Page Builder - and how they were deployed here, to remove the unwanted separation where it originates.
If they can't practically be cleaned up, you might have to correct via CSS again. Just to get rid of the effect on display on this page, you might try
/* REMOVE MARGIN ON POST PARAGRAPHS ON THIS PAGE */
.page-id-2546 .post-content p {
margin: 0;
}
You could also try something like the following, if you were concerned about affecting other ".post-content" ps outside of Layer Slider.
/* TARGET LAYER SLIDER .post-content p TO REMOVE WHITE SPACE */
.page-id-2546 .post-content .ls-fullscreen-wrapper p {
margin: 0;
}
Another approach would be to apply a negative margin to .ls-fullscreen-wrapper:
/* TARGET LAYER SLIDER WRAPPER TO REMOVE WHITE SPACE*/
.page-id-2546 .ls-fullscreen-wrapper {
margin-top: -20px;
}
Without actually working on the installation or examining it more thoroughly, I couldn't say for sure that the code I've provided would be sufficient and also wouldn't produce undesirable consequences, but it might be a start. You could add the snippets to the Customizer Additional CSS box, and see how things turned out.
ADDITIONAL NOTE AFTER COMMENTS
I've gone back to the page and it seems that you have successfully added code eliminating the 20px post-content p margin, but I don't see anything applied or applied and overruled regarding the 90px top (and bottom) padding on #main.
I don't know how exactly you're trying to address that problem. I previously recommended utilizing the Wordpress Customizer (assuming you're in Wordpess 4.7 or later) - see https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/.
From inspection I can see that the unwanted padding in question is added via the theme/Fusion stylesheet. The Customizer will add your new CSS to the underlying html, after other stylesheets have been loaded, so should override duplicated selectors. If it's still not taking, you could try, adding !important to the new styles. I think most coders would view this method as a kludge, but all of this after-the-fact correction effort is kludge-y.
/* LAST RESORT KLUDGE TO REMOVE 90px TOP PADDING ON #MAIN ON IDENTIFIED PAGE */
.page-id-2546 #main {
padding-top: 0 !important;
}
If that doesn't work - if inspection of the element doesn't show the code being applied at all, for instance - then I'd look to caching issues and peculiar theme characteristics, not to mention typos...
What worked for me was adding this code to my css
.ls-overflow-visible {
overflow: hidden !important;
}
in my case the white piece above my menu was not caused by the padding but by an overflow that was only there when I switched to full width modus. You could of course delete this code:
.ls-overflow-visible {
overflow: visible !important;
}
from the plugin css, but it will return when you perform an update.
I've noticed there is a small amount of padding on one of my containers that i would like to remove entirely however the code i am implementing doesn't seem to be working.
CSS:
.elementor-container elementor-coloumn-gap-default {
padding-top: 0;
}
I think i may have the name of the element wrong. My website is www.monoalarms.co.uk/wp and i am trying to remove the padding from the container that contains that 5 buttons. it is directly under the header image.
You are looking padding in wrong container,
please try next css -
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-bottom: 0; }
Seems your padding goes from banner
their could be many other css styles overriding yours. Remember CSS tries to take the last styling, so make sure yours is loaded last. You might need a more specific tag i.e 'body .elementor-container elementor-coloumn-gap-default', right click element and inspect in chrome, at the bottom of the browser you'll see the exact CSS tag it uses.
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
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);
}