The case
I am making a single page website which uses One Page Navigation jQuery plugin for smooth scrolling. The content is grouped into three pages:
home.html
abilities.html
portfolio.html
The idea is when a user is in home.html a jQuery function (js/pop4.js) loads the content of the other two pages in divs with the respective names:#abilities-wrapper and #portfolio-wrapper and vice versa when in abilities.html the script loads the other two pages in current page.
I am also using a jQuery script which adds possition:fixed,'top':0, 'left':0 to the menu after scrolling down and adding or removing .hidden class to two other divs.
The problem:
I want the divs to have a margin-top: 120 px. I set this in the css file
That is my css file:
#home-wrapper{
margin-top:120 px;
}
#abilities-wrapper{
margin-top:120 px;
}
#portfolio-wrapper{
margin-top:120 px;
}
This is what I get in Firebug:
#home-wrapper{
}
#abilities-wrapper{
}
#portfolio-wrapper{
}
The whole code is a bit long so:you can see it here
Because you have a syntax error. Why you have white-space in between value and unit in which it is measured ? It should be like this:
#home-wrapper{
margin-top:120px;
}
#abilities-wrapper{
margin-top:120px;
}
#portfolio-wrapper{
margin-top:120px;
}
That margin-top property is not set as you have error in your code and hence, also not considered as a style of that div.
Fiddle
Related
How to print a html page with header and footer by default (without explicitly clicking checkboxes during printing)?
For example, for displaying background picture, i found "-webkit-print-color-adjust: exact;":
.print-layout {
width: 210mm;
margin: 0 auto;
#media print {
-webkit-print-color-adjust: exact;
}
}
But how to do it for footer and header?
In my HTML page, I don't have any header and footer classes explicitly.Hence in my case,header is name of tab and date, footer is link of site and number of page in my case.
As far as i am aware you cannot get a header and footer added on by just adding css, the new features in HTML allow you to add <footer> and <header> tags to your HTML and you could add in an <a> tag with the URL link to the webpage, again if you need something dynamic like the data changing every time you would have to add in a script with the new Date() method.
The -webkit-print-color-adjust property is a non-standard CSS extension which is not really recommended to be used as it does not give reliable outcomes every time.
So my site is locked at the top of the browser which is correct, however when I hit reload (command + R) on this gallery page it now vertically centers everything which is not what I want. It's a template based site (squarespace) with stuff I have added.
I added this css:
#canvas { top: 0 !important; margin-top: 0 !important;}
and this HTML
<script type="text/javascript">
window.onload=function(){
document.getElementById('canvas').removeAttribute('id');
document.getElementById('canvasWrapper').removeAttribute('id');}; </script>
When you first load the page, you have a div (with ID something like "yui_3_10_1_1_1376940471763_412") that has no inline styling. So everything looks fine.
When you reload the page, that div no longer has an ID, and instead has an inline top margin added to it, apparently by Javascript, which pushes your site down.
Meanwhile, your code makes no sense. You've applied CSS to the div with id="canvas", and then used Javascript to remove that id, giving your CSS nothing to apply to.
Having removed that, your page is also throwing a JS error because a SquareSpace function in site.js is looking for the IDs you've deleted.
I'd try removing your added JS (leaving "canvas" and "canvas-wrapper" intact). Your CSS (with the "!important" tags) should override any inline styling that SquareSpace adds.
On the website I am currently working on I have a div that loads slowly causing the page to load slowly but also jump as not all the positions elements load until after this slow div does. I cannot control the contents of this div as the content from the div comes from an external source.
So I was wondering if I could move the contents of this div to the bottom of my code so that it loads after the rest of my page whilst still keeping the position of the content on the same place on the webpage? Similar to what people do with some java script code.
Like Sergey said do something like this
javascript in the head
window.onLoad = function() { switchDivs(); }
HTML above where you want the content
<div id="whereYouWantIt"></div>
More HTML for the rest of your page
<div id="contentIsInHere"></div>
javascript here for function that switches the content around. Optionally call an external script here that contains this function.
<script>
function switchDivs() {
document.getElementById("whereYouWantIt").innerHTML = document.getElementById("contentIsInHere").innerHTML;
document.getElementById("contentIsInHere").innerHTML = "";
document.getElementById("whereYouWantIt").style.display = "inline";
}
</script>
</body>
CSS
#whereYouWantIt {
display:none;
other styles ...
}
#contentIsInHere {
display:none;
no other styles needed
}
You can use CSS to position the div and have it in the end. Or javascript is actually is good idea, load the content in a window.onload() function.
You can locate 2 divs - one where it should be and second in the bottom of page. Both of elements should have initially display none. After page will be loaded copy inner content of "pseudo" div by using JavaScript to the div you needed and make display block for this.
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.