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;
}
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 found a jsfiddle that can applies a color gradient to specific lines of text. It applies a different 2 color gradient for each line of text. And it does a consistent pattern. Black to Red, Red to Black, Black to Blue, Blue to Black.
I have no idea how it works though. Can someone explain?
Here is the jsfiddle
https://jsfiddle.net/cers/o9s70yjq/2/
Here is the code
HTML
<p><em>Nobody is perfect.</em> At times we have difficulty managing our finances, we don’t always take our medications as planned, and sometimes we don’t perform up to par at work. However, research shows that people experience these problems to different degrees. Across financial strata, research reveals that the financially less well-off engage in these behaviors more often than those who are financially stable (1). These behaviors are particularly concerning, because, for those with limited financial resources, they can lead to poverty as well as perpetuate it.</p>
<p>In their article, “Poverty Impedes Cognitive Function,” which appears in the latest issue of Science, University of Warwick Professor Anandi Mani and several other social scientists (2) suggest poverty, and the ever-present concerns that come with it, places an undue burden on an individual’s limited mental resources. Compared with those who are free from poverty, this burden leaves those in poverty with fewer cognitive resources with which to make choices and take action. Mani et al. write, the poor “are less capable not because of inherent traits, but because the very context of poverty imposes load and impedes cognitive capacity.”</p>
<p>However, it is important to note that their explanation is not limited to the traditional populations of poverty, defined by a specific income level or ability to access basic human needs. The authors define poverty “broadly as the gap between one’s needs and the resources available to fulfill them.” That is, people in poverty are those who feel “poor,” who feel they have less than they need.</p>
And here is the CSS
p {
margin: 0 0 1.5em 0;
line-height: 1.5em;
padding: 0;
background: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%02%00%00%00%3C%08%02%00%00%00%C3%A4%FC%AE%00%00%00%25IDAT%18%D3c```%F8%CF%C0%C0%C4%C0%C0%C0%40S%8A%E1%3F%ADm%80Y%04%B1%8D.%16%FD%A7%8B%8F%00e%B4%04m%18%DC%1D%8A%00%00%00%00IEND%AEB`%82) 0 0 / 100% 6em repeat-y;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
em {
font-weight: bolder;
font-style: normal;
}
a {
text-decoration-color: black;
}
Well the tricks in this jsfiddle are :
First he set a background to the <p> that mean the red and blue color are comming from the background-image property.
Second he set the background-clip CSS property to text that would appely the background-image only to the text in the <p> tag.
at last he The -webkit-text-fill-color and that property would make the text fill color transparent.
and the result is as below
p {
margin: 0 0 1.5em 0;
line-height: 1.5em;
padding: 0;
background: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%02%00%00%00%3C%08%02%00%00%00%C3%A4%FC%AE%00%00%00%25IDAT%18%D3c```%F8%CF%C0%C0%C4%C0%C0%C0%40S%8A%E1%3F%ADm%80Y%04%B1%8D.%16%FD%A7%8B%8F%00e%B4%04m%18%DC%1D%8A%00%00%00%00IEND%AEB`%82) 0 0 / 100% 6em repeat-y;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
em {
font-weight: bolder;
font-style: normal;
}
a {
text-decoration-color: black;
}
<p><em>Nobody is perfect.</em> At times we have difficulty managing our finances, we don’t always take our medications as planned, and sometimes we don’t perform up to par at work. However, research shows that people experience these problems to different degrees. Across financial strata, research reveals that the financially less well-off engage in these behaviors more often than those who are financially stable (1). These behaviors are particularly concerning, because, for those with limited financial resources, they can lead to poverty as well as perpetuate it.</p>
<p>In their article, “Poverty Impedes Cognitive Function,” which appears in the latest issue of Science, University of Warwick Professor Anandi Mani and several other social scientists (2) suggest poverty, and the ever-present concerns that come with it, places an undue burden on an individual’s limited mental resources. Compared with those who are free from poverty, this burden leaves those in poverty with fewer cognitive resources with which to make choices and take action. Mani et al. write, the poor “are less capable not because of inherent traits, but because the very context of poverty imposes load and impedes cognitive capacity.”</p>
<p>However, it is important to note that their explanation is not limited to the traditional populations of poverty, defined by a specific income level or ability to access basic human needs. The authors define poverty “broadly as the gap between one’s needs and the resources available to fulfill them.” That is, people in poverty are those who feel “poor,” who feel they have less than they need.</p>
Things will became much more clear if you will remove -webkit-background-clip rule. This rule tells browser to only apply background definition to the pixels filled by rendered text instead of all pixels in the area. Here is how result looks like without this style:
Another trick is inlined background image that defines gradient itself. Here is it:
If you will resize it - you will find very similar result:
Remaining styles defines background size so it will roughly cover whole paragraph
The background:url(...) is setting the image that has the gradient.You can also achieve something like that with background:linear-gradient.
The -webkit-background-clip: text is specifying how far the background should extend within an element.
The -webkit-text-fill-color:transparent specifies the fill color of characters of text.
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 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.
In order to keep my mobile web app lean and efficient, I'm trying to limit the number of elements on the DOM at any given time. One way in which I intend to limit the use of DOM elements, is by using the pseudo :before and :after elements to generate content where possible.
For example, rather than representing a list-item with metadata like this:
<dd class="item">
<div class="name">Name</div>
<div class="desc">Description</div>
<div class="location">Location</div>
<div class="genre">Genre</div>
</dd>
I could represent it like this (& use the content: property to display the metadata):
<dd class="child"
data-name="Name"
data-desc="Description"
data-location="Location"
data-genre="Genre">
</dd>
So, one DOM element with data attributes as opposed to 5 separate elements and arguably cleaner markup.
Demo here: http://jsfiddle.net/quc8b/2/
Will this technique actually improve performance? My thought is that with fewer DOM elements javascript should parse faster and I should be able to add/remove the list-item nodes faster. But will rendering (i.e. painting, layout, & reflows) occur faster? In other words, is CSS generated content rendered/parsed faster or more efficiently than traditional elements and text nodes?
How browsers internally handle CSS generated content in the render tree and document tree is an unknown to me (shadow DOM maybe?). Are there any articles that discuss this?
I was also interested in figuring this out. So I did a simple litte test case.
I created two html pages for comparison:
A. Pseudo-selectors:
HTML: 50.000 of these: <p>paragraph</p>
CSS: p:before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; content: ""; }
B. Many DOM-elements:
HTML: 50.000 of these: <p><span class="icon"></span> paragraph</p>
CSS: .icon { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; }
Tests:
I used the Chrome Devtools Performance monitor running on a 2015 Macbook Pro.
Test1: "Start profiling and reload page"
Option B was the loser by ~400ms.
It took 2452ms to parse while the "pseudo" variant took 2033ms.
I ran this test three times with similar results.
Test2: Resizing the window
To measure re-layout I started a separate recording where I resized the browser window 3 times by changing from full-screen to half-screen (using shortcut keys in a window manager)
"Many DOM-elements" was the winner, clocking in at 1136ms of rendering time, while "pseudo-elements" took 1463ms.
Test3: Reflows
I tried to cause reflows by measuring the page height using this piece of Javascript: document.body.offsetHeight;
But that never took more than 4ms to execute... not enough time to reliably measure performance.
Apparently 50.000 elements isn't enough to cause any significant slowdown in that area.
PS: The test selection wasn't all that scientific, they just happened to be the first ones I thought of
Please notice that this answer was given years ago. Many of the statements listed below are not valid anymore. Using pseudo-elements is still discouraged when serving content that should be accessible.
I don't know about the performance of pseudo-elements but I'm concerned that you put performance above everything else.
Pseudo-Elements have considerable drawbacks when compared to "real" DOM-Nodes:
They can't be transitioned or animated
You can't change their appearance dynamically with Javascript
They are far less "important" to search engines
They are cumbersome when it comes to debugging
Their number is restricted to one :before and one :after element
They aren't able to contain HTML-Tags, for example links or additional containers
You hurt the concept of the separation of content and appearance
Some HTML-Elements cannot have pseudo elements
For further reading, see the Tag-Wiki
I'm sure there is more. On the other side is some sort of performance boost, which I believe, will be negligible.