I'm using the code below to jump to different sections of this page
<span id="section1">
Basically when you click the link it jumps to that section but my floating navigation blocks the titles. How do make the page "jump" to "section1" but with a 50 margin?
EDIT: These are acceptable solutions but I forgot to mention that I am using a plug in called "Table of Contents Plus" to create these links. I'm not proficient with javascript and need to know what to modify in the plug in code to add these solutions.
I used your specific page and this answer to come up with a decent solution. The <span> that actually has the anchor id should have the style of position: relative; top: -100px and the inner <strong> that has the actual text should be position: relative; top: 100px. This causes the text to appear where it would normally, but causes the anchor link to send you a bit above the text. You can play with the exact numbers until it looks exactly how you like.
section1:target {margin-top: 50px}
the :target pseudo-class applies properties when you have the id in the URL.
Related
I have some pages on a Wordpress site that have name anchor tags that initially get covered by the fixed/sticky header when clicked. I'm using some CSS that fixes that, but it only seems to work when linking inside the specific page(s).
Here's the code I'm currently using:
a[name] {
padding-top: 178px;
margin-top: -178px;
display: block;
}
Any thoughts would be greatly appreciated!
We now have scroll-margin to handle kind of thing.
From CSS-Tricks:
scroll-margin is used to adjust an element's snap area (the box that defines where the element will be snapped to). Adding
scroll-margin is useful when you need to give an element space from
the edge of the container when snapped into place, but allowing for
situations where each element might need slightly different spacing.
This is one I have not had to tackle before. I need to use alt tags on all images in a site including those used by CSS background-image attribute.
There is no CSS property like this as far as I know, so what is the best way to do this please?
Background images sure can present data! In fact, this is often recommended where presenting visual icons is more compact and user-friendly than an equivalent list of text blurbs. Any use of image sprites can benefit from this approach.
It is quite common for hotel listings icons to display amenities. Imagine a page which listed 50 hotel and each hotel had 10 amenities. A CSS Sprite would be perfect for this sort of thing -- better user experience because it's faster. But how do you implement ALT tags for these images? Example site.
The answer is that they don't use alt text at all, but instead use the title attribute on the containing div.
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}
According to the W3C (see links above), the title attribute serves much of the same purpose as the alt attribute
Title
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:
alt
The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.
A text equivalent brings the following benefits to your website and its visitors in the following common situations:
nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.
In this Yahoo Developer Network (archived link) article it is suggested that if you absolutely must use a background-image instead of img element and alt attribute, use ARIA attributes as follows:
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
The use case in the article describes how Flickr chose to use background images because performance was greatly improved on mobile devices.
I think you should read this post by Christian Heilmann. He explains that background images are ONLY for aesthetics and should not be used to present data, and are therefore exempt from the rule that every image should have alternate-text.
Excerpt (emphasis mine):
CSS background images which are by definition only of aesthetic value
– not visual content of the document itself. If you need to put an
image in the page that has meaning then use an IMG element and give it
an alternative text in the alt attribute.
I agree with him.
As mentioned in other answers, there is no (supported) alt attribute for a div tag only for the img tag.
The real question is why you need to add the alt attribute to all background images for the site? Based on this answer, it will help you determine which route to take in your approach.
Visual/Textual: If you are simply attempting to add a textual fall back for the user if the image fails to load, simply use the title attribute. Most browsers will provide a visual tool tip(message box) when a user hovers over the image, and if the image is not loaded for whatever reason, it behaves the same as an alt attribute presenting text when image fails. This technique still allows for the site to speed up load times by keeping images set to backgrounds.
Screen Readers: The middle of the road option, this varies because technically keeping your images as backgrounds and using the title attribute approach should work as hinted above, "Audio user agents may speak the title information in a similar context." However this is not guaranteed to work in all cases, including some readers may ignore it all together. If you end up opting for this approach, you can also try adding in aria-labels to help ensure screen readers pick these up.
SEO/Search Engines: Here is the big one, if you were like me, you added your background images, all was good. Then months later the customer(or maybe yourself) realized that you are missing out on some prime SEO gold by not having alt's for your images. Keep in mind, the title attribute does not have any weight on search engines, from my research and as mentioned in an article here: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/. So if you are aiming for SEO, then you will need to have an img tag with the alt attribute. One possible approach is to just load very small actual images on the site with alt attributes, this way you get all the SEO and don't have to readjust the existing CSS in place. However this may lead to additional load time depending on the size and google does indeed look at the images path when indexing. In short if you are going this route, just accept what has to be done and include the actual images instead of using backgrounds.
The general belief is that you shouldn't be using background images for things with meaningful semantic value so there isn't really a proper way to store alt data with those images. The important question is what are you going to be doing with that alt data? Do you want it to display if the images don't load? Do you need it for some programmatic function on the page? You could store the data arbitrarily using made up css properties that have no meaning (might cause errors?) OR by adding in hidden images that have the image and the alt tag, and then when you need a background images alt you can compare the image paths and then handle the data however you want using some custom script to simulate what you need. There's no way I know of to make the browser automatically handle some sort of alt attribute for background images though.
This article from W3C tells you what they think you should do
https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
and has examples here
http://mars.dequecloud.com/demo/ImgRole.htm
among which
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>
Still, if, like in the above example, the element containing the background image is just an empty container, I personally prefer to put the text in there and hide it using CSS; right where you show the image instead:
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}
The classical way to achieve this is to put the text into the div and use an image replacement technique.
<div class"ir background-image">Your alt text</div>
with background-image beeing the class where you assign the background image and ir could be HTML5boilerplates image replacement class, below:
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
Here's my solution for Immediate fix:
Once the background image is removed the alt text will be visible from Img tag.
.alt-image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-image{
background:url("https://www.w3schools.com/images/picture.jpg") no-repeat;
width:100%;
height:500px;
position:relative;
}
<div role="img" aria-label="place alt text here" title="place alt text here" class="background-image">
<img src="" alt="place alt text here" class="alt-image"/>
</div>
Here's my solution to this type of problem:
Create a new class in CSS and position off screen. Then put your alt text in HTML right before the property that calls your background image. Can be any tag, H1, H2, p, etc.
CSS
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>
HTML
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>
It''s not clear to me what you want.
If you want a CSS property to render the alt attribute value, then perhaps you're looking for the CSS attribute function for example:
IMG:before { content: attr(alt) }
If you want to put the alt attribute on a background image, then ... that's odd because the alt attribute is an HTML attribute whereas the background image is a CSS property. If you want to use the HTML alt attribute then I think you'd need a corresponding HTML element to put it in.
Why do you "need to use alt tags on background images": is this for a semantic reason or for some visual-effect reason (and if so, then what effect or what reason)?
You can achieve this by putting the alt tag in the div were your image will appear.
Example:
<div id="yourImage" alt="nameOfImage"></div>
Working with Bootstrap I wanted to make a replica of http://spring.io/projects; a grid of links that are each a bordered panel (might not be the right word...) with some words an a picture inside. I've come to a conclusion, that Bootstrap's Thumbnail component should be right for me.
Having tried to use it, however, I ran into a problem.
If I want the entire panel to be clickable, I have to apply the thumbnail class to an anchor tag (wrapping the anchor into a div with thumbnail doesn't seem to work). Then, inside the anchor tag I've got a div tag with the class caption in it to store some text whose styling I don't want to change upon hovering on the panel.
What this caused is this: the text regained normal colour (as compared to the link colour when used without the caption class, however hovering over the panel causes the text to get underlined, and I'd prefer if that was not the case: it doesn't look very good and the highlight of the border upon hover is already a good indicator of that it is indeed a link.
I was about to just get my css hat out and modify the caption class to not do this, but it doesn't seem like the right course of action; I can't imagine it being desirable behavior for captions to get highlighted like this, and I'd like to use as little custom code as possible (since sticking to standards means I won't have to maintain this code every time I update bootstrap).
So my question is: where am I going wrong? Is it actually bad practice to want the entire thumbnail panel to work as a link? Or should I go ahead and manually scrape the underlining off? Or am I maybe applying wrong classes to wrong tags? Or is the thumbnail component not a right component for me to use altogether in such a case?
EDIT:
Forgot to include the code.
The thing I'm currently using:
<a class="thumbnail text-center" href="#">
<div class="caption">
<h3>Potato</h3>
<p>Some short description of what this exact potato really is about.</p>
</div>
</a>
EDIT 2:
Adding an image of what is currently occurring:
This is with the mouse hovering over it; as you can see, the text is underlined, which is not ideal.
Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.
If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)
Make your Div position: Relative;
create a link
put span tags into that link <span></span>
Style the empty span tag with
CSS:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.
Hope this can help.
EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)
Add a tiny bit more CSS to your solution and you are sorted...
a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}
Here is an updated fiddle
The solution is to add on the top of your style sheet:
a:hover {
text-decoration: none;
}
I want to make bubbles containing content, placed around a HTML page. So, I made a .bubble CSS class, and put the positional values as an in-line style. This gave me some rather long lines. The style guides of programming languages I've used dictate a maximum line length, and specify how overly long lines should be broken up. Something like
<div class="bubble"
style="top: 10%;
left: 40%;
right: 60%;
width: 480px;
height: 295">
Content.
</div>
...looks absurd. What is good form for this?
I would rather look at that in one line. With that said, I pretty much never see it broken like that. And in some cases, I think the browser removes the line breaks anyways.
Though I would really rather not see in-line CSS.
However, if you have to have in-line CSS, I think the standard of 'whatever fits on the screen' which is 80 characters-ish still holds.
EDIT
Just to be sure, I did some light searching for in-line CSS guidelines and ever site I found is strongly against it as a practice all together. I know your question was about in-line CSS but I feel obligate to say don't. It breaks the concept of separation of concerns. It tightly couples your html to your CSS. What if you want to play around with a new design? Now you have to edit your html directly and risk breaking the flow or the page altogether instead of just pointing to a new CSS file.
If you need specific CSS for one particular element, slap an ID on it and throw it in your external CSS doc.
EDIT: It's not necessary to have both left and right declarations. If you tell the browser that the element is 40% from the left, it will know that it's 60% from the right. That will save you a few characters of code, and will not change the outcome.
You didn't make a bubble css class. You made a bubble class and added inline css to the div tag.
You have quite a few alternatives. I'm not quite sure why you haven't chosen them.
If line length is an issue, delete the spaces. You don't need them, and keeps the line shorter.
<div class="bubble" style="top:10%;left:40%;width;480px;height:295;">
Content.
</div>
But, agreeing with another post here, do not use inline css. It's bad practice. If the styles must be within the file (as in Tumblr themes) put them inside a style tag.
<style> .bubble {top:10%;left:40%;width:480px;height:295;}
</style>
Or do what most of us do, and put the style on a separate css file, with a link to it between the head tags.
<link href="yourstyles.css" rel="stylesheet" />
Did you consider doing this through js and jQuery? Alternatively, you could something like this:
$('.someBubble').css({
top: 10%;
'left': '40%',
'right': '60%',
'width': '480px',
'height': '295px'
});
Not knowing what constraints or limits you have to work with, this would at least let you keep styles from inlineing.
If you have several divs on a page, you can use CSS to size, float them and move them round a little... but I can't see a way to get past the fact that the first div will show near the top of the page and the last div will be near the bottom! I cannot completely override the order of the elements as they come from the source HTML, can you?
I must be missing something because people say "we can change the look of the whole website by just editing one CSS file.", but that would depend on you still wanting the divs in the same order!
(P.S. I am sure no one uses position:absolute on every element on a page.)
CSS can take elements out of the normal flow and position them anywhere, in any manner you want. But it cannot create a new flow.
By this I mean that you can position the last item from the html document at the beginning/top of the page/window, and you can position the first item from the html document at the end/bottom of the page/window. But when you do this you can't position these items relative to each other; you have to know for yourself how far down the end of the page will be for the first item from the html document to be positioned correctly. If that content is dynamic (ie: from a database or CMS), this can be far from trivial.
With Floating, and with position absolute, you can pull some pretty good positioning magic to change some of the order of the page.
For instance, with StackOverflow, if the markup was setup right, the title, and main body content could be the first 2 things in the markup, and then the navigation/search, and finally the right hand sidebar. This would be done by having a content container with a top margin big enough to hold the navigation and a right margin big enough to hold the sidebars. Then both could be absolutely positioned in place. The markup might look like:
h1 {
position: absolute;
top: 0;
left: 0;
}
#content {
margin-top: 100px;
margin-right: 250px;
}
#nav {
position: absolute;
top: 0;
left: 300px;
}
#side {
position: absolute;
right: 0;
top: 100px;
}
<h1> Stack Overflow </h1>
<div id="content">
<h2> Can Css truly blah blah? </h2>
...
</div>
<div id="nav">
<ul class="main">
<li>quiestions</li> ... </ul>
....
</div>
<div id="side">
<div class="box">
<h3> Sponsored By </h3>
<h4> New Zelands fish market </h4>
....
</div>
</div>
The important thing here is that the markup has to be done with this kind of positioning magic in mind.
Changing things so that the navbar is on the left and the sidebar below the nav be too hard.
You may want to look at CSS Zen Garden for excellent examples of how to do what you want. Plenty of sample layouts via the links on the right to see the various way to move everything using strictly CSS.
There are a couple of ways of doing it today. The first one works on more browsers but is more limited:
Using the CSS display values of table-caption, table-row and table-cell allow vertical ordering of at most three elements controlled exclusively with CSS.
This is much more recent and will only work in all latest browsers (yes, it will fail in IE9): Use of the flexbox CSS properties.
You can view live examples and read more about these techniques at the "this is responsive" patterns page. The two I'm talking about are in the section titled "Source-Order Shift"
You don't need position:absolute on every element to do what you want.
You just use it on a few key items and then you can position them where-ever you want, moving all the items contained within them along with the root element of the section.
I think that the most important factor is to place your html elements in a way that makes sense semantically, and with luck your layout in CSS will not have to do too much work. For example, your site's header will probably be the first element on the page, followed by common navigation, then sub-navigation, content and the footer (incomplete list).
Probably around 90-95% of the layouts you'll want to work with should be relatively trivial to manipulate that markup into something like what you're after. the other 5-10% will still be possible, with a little more effort, but the question you need to ask yourself is "How often am I likely to want my site header positioned in the bottom-right corner of the page?"
I've always found that the layout of a site is not too tough to manipulate after the fact if you do want to dramatically change the look and feel, at least in comparison with a ground-up recode.
</2c>
You can position individual boxes completely independent from the source order using position:absolute. So you can move the header to the bottom of the page, and the footer to the top using CSS.
Note however that this is genereally bad for accessibility: You should have the order of the content in the source more or less in the same order that you would present it for the reader. The reason is that a screen reader or similar device will present the content in the order it is defined in the source rather than the visual order defined by your CSS.
Good point about the header always being first and the footer last! But I might want to move my advertising DIV from along the top, to down the right.
The other thing I've heard about is putting the content DIV first, so Google pays you more attention (relevant keywords near the top of the page score higher)...or is that a myth? Doing that would require the sort of CSS trick I'm enquiring about too.