I'm using jekyll to generate my pages and as anyone knows that uses jekyll, the anchor tags on h-tags are automatically generated.
Solutions I am not looking for:
Add padding — my h-tags are using margins because I'm a normal person. Also, my sticky header is 50px tall which means that all my h-tags would need a miniumum of 55(ish)px padding. This causes there to be too much spacing.
Create your own anchor in a span tag — this defeats the point of the autogenerated tags and I'm trying to live a D.R.Y. lifestyle.
Summary: I need to offset the anchor's position without changing the location of the h-tag.
If this has already been answered, I apologize for creating a duplicate question. I could not find the answer to this that was not 'solved' with the previous mentioned 'solutions'.
You may want to use the :target pseudo selector, which matches when the hash in the URL and the id of an element are the same. Therefore, the style will only apply to the h-tag which has been navigated to rather than all of them.
For example, you can use :target::before to add a margin to the top of the selected tag:
:target::before {
content: "";
display: block;
margin-top: -75px;
height: 75px;
}
Here, this technique was used along with an animation which removes the margin after one second so that the margin no longer exists if/when the user scrolls up the page.
Adding this solved my problem.
html {
scroll-padding-top: 70px; /* height of sticky header */
}
Related
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
I've created a codepen for this, but the issue is basically beneath my YouTube embed there's a margin (Seperating the footer from the page) and I don't understand why, I'm still learning when it comes to web development, so I'll be grateful for any explanations.
http://codepen.io/anon/pen/yyjaVJ
Links to codepen must be accompanied by code,
but it's all on codepen, considering there's not much.
It's because an iframe element is inline by default. The reason you are seeing whitespace below the iframe is because inline elements are aligned this way so that there is reserved space below the element for letters such as p, y, q.
You could either change the display of the iframe element to block: (example)
iframe {
display: block;
}
..or you could change the value of the vertical-align property to something other than the default value of baseline. In this case, a value of top would work: (example)
iframe {
vertical-align: top;
}
You can still use what you have, if you edit your CSS and change this code:
#body_wrapper footer {
margin-top: -6px;
}
Not exactly a professional way to do things as you will see the comments i shall get for it but it does fix your problem at hand.
I am new to CSS and learning it side by side while making a site.
I am confused about how to position elements.I want to know whether I should use div to position elements or do I do it directly by either using tags and ids.If I use tag names and IDs I don't have to use div separately to position the elements. I can both style and position at the same time.
When to use div and when not to?
Actually, I am trying to build something like this:
HTML5 has made divs a bit outdated with the introduction of the header, footer, aside, section, article tags and so on. In HTML5, divs should only be used when the content cannot fit inside one of the newer, more fitting tags that I just listed. Check out this article for better clarification.
If I understand your question properly, it appears to me that you have a misunderstanding of some very basic concepts.
Basically, a div can be thought of as a Container, Panel or Element which hosts other elements. You can position a div, but chances are you're also going to want to position any other element, so here is some very basic code:
Positioning an element:
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="uniqueDiv">
<!-- You cannot use the same ID on any element more than once on a page. If you need multiple elements with the same "id", use class instead. -->
<img id="one" src="one.png" />
<img id="two" src="two.png" />
</div>
</body>
</html>
* { margin: 0; padding: 0; outline: 0; border: 0; outline: none; border: none; }
uniqueDiv img {
margin: 10px 0 0 0;
}
#one {
float: left;
}
#two {
float: right;
}
The is the basic premise behind positioning. I did not add an example for Padding, but you should not position elements using Padding. You should use margin instead. Also, the line that begins with * is called a CSS Reset and the goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins etc.
Here's a brief explanation of what this code does:
The top piece of code is obviously HTML. It should be placed in its own .html file. The bottom piece, the CSS, should be placed in its own .css file.
So, we have 1 div and two images inside it. In this scenario, we want to have one image to the far left of the div and another to the far right. We also want to push both images down by about 10 pixels (positioning).
So, uniqueDiv img {} is used to position all images contained within the uniqueDiv down by 10 pixels from the top of its div. #one {} and #two are used to float the image to the left and the right.
My advice as per the excellent book "The Truth About HTML5 by Luke Stevens" switching to "Sections" "Header", "Footer", "Aside" etc can have accessibility problems as HTML5 is not recognized by all devices so to combat this you can make use of ARIA "Roles". You can still use Divs and assign "Roles" for your layouts, but adopting the HTML5 approach is what I would do.
Some good info is here;
Improving Web Accesibility
Aria Roles 101
I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.
I am styling it fine i think but my code is here at jsFiddle
and it works fine there for some reason. Any ideas?
If needed i can supply the entire page link.
I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.
The list on the page you link to needs to have its padding (and potentially its margin ... some browsers have different default styles) cleared. Here are some rules you could use to fix this:
#navlist {
list-style-type: none; /* Removes default list style */
margin: 0;
padding: 0;
}
I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.
As an aside, you shouldn't be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;
So, there have been some questions about this already, but mine is a bit more specific.
I want to add a 40px high admin bar to the top of all pages of my CMS when the user is logged in as an admin.
But I don't want to obscure the content on the page, so I want to push it down. Remember, this is a CMS so there is a lot of different CSS/designs on all the pages that use it. The system do have control of all the CSS though, so I can change it on the fly.
I started out by adding a "margin-top: 40px" to the body element before realizing that the background-image of BODY isn't actually attached to the body, but rather the otherwise unstylable root element.
So, I used "background-position: 0 40px" to move down the background image. Score! Only, some sites already used background-position to position their background in relation to the content and me overriding that severely messed up the design of those pages.
So - is there a better way to handle this? Or am I going to have to parse and alter every sites possible background-position on the fly - which I can do, but rather not :)
Thanks for your help!
To avoid the problem, you could change the way your CMS functions. Add a full page wrapper div that acts as a body for the user's content. Then, inserting a 40px high element above the wrapper will universally push it down.
You can try the following, you might need to position your cms toolbar negatively though.
html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }
You can push down the html element if the background is applied to the html element, and then use position:absolute to positioning your header. Example: http://jsfiddle.net/u22zE/2/