I am new to front end development- HTML/CSS. I was playing with CSS properties: "Float" and "Position:Fixed". When I run the code(given below), i got an output where the floated text and text from #static3 div tag were positioning itself in such a way that some text got hidden behind the fixed text. To make the output appear correctly, i applied the margin property for both the float text and #static3 text. For the float text the output got corrected, but for #static3 text, the whole page moves down when i apply margin property. Both are defined under seperate "div" tag(block element), then why both of them work differently.
Please help.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>This is a layout example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="CSS/Layyouts.css" type="text/css">
</head>
<body>
<div id="static1">This position changes</div>
<div id="static2">
This is some text thats using float attribute to be placed on right side while other text goes around and i need to make this text long to have a better look when this page is turned into a html page so better i write more
</div>
<div id="static3">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
<div id="static4">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
<div id="static5">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
<div id="static6">This is a random text for the static example. There are many different ways you can use our services – to search for and share information, to communicate with other people or to create new content. When you share information with us, for example by creating a Google Account, we can make those services even better – to show you more relevant search results and ads, to help you connect with people or to make sharing with others quicker and easier. As you use our services, we want you to be clear how we’re using information and the ways in which you can protect your privacy.
Our Privacy Policy explains:
What information we collect and why we collect it.
How we use that information.
The choices we offer, including how to access and update information.
We’ve tried to keep it as simple as possible, but if you’re not familiar with terms like cookies, IP addresses, pixel tags and browsers, then read about these key terms first. Your privacy matters to Google so whether you are new to Google or a long-time user, please do take the time to get to know our practices – and if you have any questions consult this page.
</div>
</body>
</html>
CSS code :
#static1{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
font-family: cursive;
font-weight: bold;
text-transform: capitalize;
background-color: lightgrey;
margin: 0px;
}
#static2{
width: 200px;
float: right;
border-top: 2px black solid;
border-bottom: 2px black solid;
margin: 50px 4px 4px 4px;
padding: 2px 2px 2px 2px;
}
#static3{
margin-top: 50px;
}
FIDDLE
EDIT I think I understand what you meant to ask. The thing with the whole page moving down when you add margin to static3 is due to these things:
The static1 has position:fixed but not actual position properties ( top, right, left, bottom), so it positions itself relatively to the following element which is static2
The static2 element has a float:right property, therefore it is positioned relatively to static3 (its margin-top is calculated relatively to the top position of static3 and not the top of the body)
That way, all the elements in your page are positioned relatively to the position on the static3 div. When you add margin to that element, the other two recalculate their positions relatively to the new coordinates.
Old Answer
Not sure what you're trying to achieve, but if the goal is for the "article" to not be overlayed by its "title" (#static1), just add a top:0 property to #static1:
CSS
#static1{
top:0; // ADDED THIS LINE
position: fixed;
width: 100%;
text-align: center;
...
DEMO
The thing is you have to specify a position when you use position: fixed, or else the browser will understand that your element must not move from its original position, but will not necessarily render it in the desired position. Here, the browser understands that the static1 has to be rendered "at the top of static3 and then fixed there no matter what"
I am not aware of internal workings of CSS parser, but I can tell you that changing margin-top to padding-top in your #static3 section does solve the problem.
I've been there and that's how I solved my problem. Try for yourself.
Related
CMS issues preclude me from using tabview, so I've been looking at alternatives to get similar content organization.
I'm not really concerning myself with browser compatibility since this is more of a personal, abstract effort, ergo I've been looking at the <details> tag. Ideally, I'd like to do it without pseudo-classes (I'd like to be able to transfer it to inline CSS for other really stupidly backward CMS reasons). An extension effort of this that I've been puzzling over is the use of <details> as a checkbox alternative for similar reasons (CMS limitations preclude me from using checkbox hacks; believe me, I know how insane this sounds).
But before I dedicate a lot of time to trying to figure this out, is it even possible to 'recreate' the tabview effect with <details> and <summary>?
I think the simple TL;DR answer (if I read your question right) is 'NO'. But...
The longer answer is a resounding 'YES'. <details> and <summary> are semantic elements, so they are basically just divs with a different name - you get no extra functionality with them. However, if you give the details tag a tabindex it would become selectable, and you could then style the show / hide functionality through CSS.
Not being sure how you would want to implement this on your page it's tricky to give a complete answer, but as an example:
In HTML
<details tabindex="0">
Heading
<summary>Interesting factoids...</summary>
</details>
And in the CSS...
summary {
overflow: hidden;
max-height: 0px;
height: auto;
}
details:focus summary {
max-height: unset;
}
This would make the summary 0px in height by default, but would expand it when its parent container is clicked (focused).
You might need to play about with the details a bit for your particular use case, but CSS is the way to go.
I'm aiming for an accessible Website with tiles to group content. They are implemented as a styled div which has no other syntactical purpose than to group its content.
<div class="tile">
Profile
Messages
My Documents
</div>
<div class="tile">
Jobs
Education
FAQ
</div>
.tile {
background-color: white;
border-width: 2px;
border-radius: 4px;
border-color: transparent;
}
I'd like to provide information for screen readers that its content belongs together. On the other hand I can't use global IDs (like with using the WAI ARIA group-role).
Is there any syntactical technique to tell my screenreader-users which rich-text contents belong together without the use of global IDs?
(Q1) Would <section> be a valid, understandable solution?
Kind Regards
EDIT: Added example; Added Question (Q1)
My first instinct would be to make each of these a list - it adds some extra markup, but it is a nice way to group related concepts. Another option (you could use both of these together, if you wanted) is to use an invisible header. An h2, h3, or whatever the appropriate header level is for each of these blocks, with the css making it invisible (not via display: none or visibility: hidden, though; look up "accessible screen-reader text" for more details on this pattern.)
You could also use a role=group with an appropriate aria-label on each parent div, if you want, but I think the list and/or header semantics are more common.
I am styling a table that has table cells with (non-interactive) checkmarks in it. The checkmark icons are added via CSS. As there is no accessible content in it, I added an aria-label to it. Now I wonder if it is a good idea to use this attribute as a CSS selector to add those checkmark icons like this:
td[aria-label="yes"] {
&:after {
content: '\f00c';
font-family: $font-family-icons;
}
}
I learned that using ARIA attributes as selectors is generally a good practice, at least for state related attributes like aria-hidden, aria-expanded etc. In this case it made sense to me to have the td styling coupled to the corresponding label. But of course if those labels change at some time I'll need to adapt the CSS too.
Do you know any other drawbacks apart from that? Or do you have ideas on how to solve this more elegantly?
To represent control states that are not natively conveyed in HTML, such as expanded (for example), then leaning on ARIA attributes as style selectors can be a good fit.
In this case you are relying on CSS to add content to a page based on ARIA I do not think you need. First, support for aria-label (on <td>s as well as other elements) can be shaky on older browser / screen reader combos, and second, support for CSS generated content by older browser / screen reader combos can be more shaky. I know nothing about your users, however, to know if this matters.
This also assumes the CSS loads without any issue (network drops, etc).
This means some users may never hear nor see the value in the cell.
I try to ensure that the raw content is available regardless of whether the CSS loads to style it, and I also try to limit my reliance on ARIA.
That being said, aria-hidden support is generally historically better than the two issues I raise above.
Let me toss another idea your way. This is not necessarily better, but I think it is more robust when considering unknown user AT configurations and potential network issues.
I put both the text and checkmark into the <td>. If the CSS never loads (or the users is on a really old browser), no big deal. The worst that will happen is a user sees / hears "Yes check."
Then the aria-hidden makes sure the checkmark does not get announced to screen readers. The CSS hides the text from sighted users. And I think you have the effect you want.
<td>
<span class="visually-hidden">Yes</span>
<span aria-hidden="true">✔</span>
</td>
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
Do you know any other drawbacks apart from that?
On using aria-label attribute as a selector for styling, there's technically no problem.
Concerning this use of aria-label
It's itself not sufficient enough to be a valid alternative text for all kind of accessibility concerns.
Very few people use a screen-reader. If aria-label can be an help for them (depending on screen reader support, see #aardrian answer), it's of no use for a large part of the population.
A special UTF-8 code representing a checkmark is nothing else visually than an image, and users may expect, for instance, to have a tooltip. For that matter, the title attribute is recommended, used conjointly with aria-label for better browser and screen reader support.
Someone using a screen magnifier or with a a cognitive disorder, may then be able to access the alternative text of the checkmark without having to scroll to the table heading of the column.
The problem will still be important for someone with motor disabilities because having to scroll to see the heading or using the mouse to see what this checkmark means is still very difficult.
TLDR: ARIA does not give universal accessibility for all kind of disabilities
I have a div that text will just not stay in and I have no idea why, I have never run into this issue before Im hoping some people can help me out, heres my code:
HTML:
#toronto-content {
position: relative;
z-index: 98;
height: 100%;
width: 700px;
background-color: #0A0A0A;
color: #FFF;
}
<div id="toronto-content">
Interactively pursue long-term high-impact vortals and distributed systems. Competently streamline team driven testing procedures without leading-edge intellectual capital. Energistically engage market-driven catalysts for change via client-centered technologies.
Compellingly architect long-term high-impact intellectual capital and resource-leveling interfaces. Phosfluorescently initiate market positioning supply chains with stand-alone processes. Collaboratively generate leading-edge services for synergistic
e-markets. Conveniently syndicate bleeding-edge resources whereas equity invested scenarios. Collaboratively parallel task backward-compatible deliverables and business relationships. Assertively implement turnkey niche markets for technically sound
human capital. Collaboratively integrate pandemic niche markets with corporate action items. Quickly utilize timely paradigms after best-of-breed infomediaries. Appropriately drive future-proof initiatives via standards compliant opportunities. Uniquely
coordinate 24/365 mindshare vis-a-vis top-line synergy. Phosfluorescently benchmark one-to-one mindshare with high-payoff best practices. Distinctively supply principle-centered relationships whereas revolutionary relationships.
</div>
if you want to check out the full site its here: http://lasociete.ca/new/
This will solve your issue:
#toronto-content {
white-space: normal;
}
But I would consider putting your text into a <p> or <span> tag.
That's because the amount of text is larger than the div. I recommend adding overflow:overlay to your style, this will create a vertical scroll bar right next to the content.
If you add overflow:scroll it will create a horizontal scroll-bar even if there's no need for one.
If that's not what you want, you should either add pages when there's too much content (called "pagination") or make a custom vertical scrollbar with Javascript or jQuery.
Add this
#toronto-content {
white-space: normal;
overflow: hidden;
}
I am currently building a webiste for a client whereby I am using CSS for the menu (not javascript). For the rollovers, have a background image that contains the regular state and the rollover.
an example code is: <a id="foo" href="bar.php" ><span>BAR</span></a>
I hide the <span> and use the background image instead.
My Question Is:
Is this form of navigation good for SEO? Is hiding the <span> seen as spam by the search engines. Will search engines even pick up this form of menu??
Please Help
Many/most/(all?) search engines will not understand CSS to the degree that they know you're hiding the <span>. For those, you're fine.
For any that are bright enough to understand your CSS, they'll also understand the reasons why people do that, and will recognise what you're doing. So for those you're fine too.
Many questions like this one boil down to "Are search engines just clever enough to misunderstand what I'm doing?" And the answer is no, because it's not in their interests. As the author of a search engine, you wouldn't add support for noticing CSS-hiding without also adding reliable heuristics to tell the difference between its normal use and its abuse.
You may use text-indent css property for your <li> or <a> element. This way you won't have to hide it via css. So you'd have something like this
<ul>
<li><a id="foobar">foobar</a></li>
</ul>
Then you could have following css:
li a {
display: block;
text-indent: -1000px;
width: 20px;
height: 20px;
background: transparent url('/image/path.png') no-repeat;
}
If you are simply going to hide them using
display: none;
then you will want to check out the question Stack Overflow thinks is most related to yours: Google SEO and hidden elements.
Summary: Google ignores anything it can determine is invisible to humans.