I'm very new to coding, and am currently teaching myself html/css and i found that my paragraphs weren't centering in the middle of the page. I'd had my headline and sub headline labelled as h1 and h2, so i thought naturally the paragraphs would be the same (even though they had exactly the same declarations), yet when i changed both the elements to just p and brought them both under the same selector it worked. I was wondering if p1/p2 using would cause a lot of problems in the future? (this was before i was learning about ID's and classes, would that be the correct way to differentiate between paragraphs instead?)
please be kind, I've been learning less than a couple weeks:)
p1 and p2 are not valid HTML elements in themselves.
Granted, with HTML5, you can define your own elements where necessary, however this is usually reserved for instances where it makes your markup more semantic, and usually with a front-end framework or such.
With paragraphs, if you must differentiate between them, then I would suggest using classes.
<h1>Heading One</h1>
<h2>Heading Two</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat efficitur magna eget tincidunt.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat efficitur magna eget tincidunt.</p>
Paragraphs are always <p>. Only the header elements have this kind of numbering.
My personal reccomendation would be to use ID's rather than Classes. This is due to the nature of what seem to you want in your question.
ID's are unique - meaning that there can only be one of them per page.
Classes aren't unique - meaning that they can be assigned to multiple objects per page.
<p id="one">This is paragraph one.</p>
<p id="two">This is paragraph two.</p>
Related
I have a html site which gets some textsnippets with php. I can not control how long those snippets are but want to keep my formatting.
I rather want that the text which is inserted via php not completely visible than have linebreaks. I assume there is a simple css solution to this, i just don't know what to search for. I had that problem several times the other way around, but cant find the code where it occured.
<div class="col-4">
{some PHP code that receives information}
</div>
Output:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Expected Output:
Lorem ipsum dolor sit amet, consetetur sa
The rest of the text should be in the html file but not be visible, counting characters is no option. Overflowing the boundaries of the div container is ok.
i wrote js script for your issue. try to understand it but if you have question, just ask in comments.
$(document).ready(function(){
var fulltext = $('#text').text();//change #text to your elements id or class
var nof = 3; //number of charachter from start , starts from 1
var removedText = fulltext.slice(nof,fulltext.length);
//slice nof to end to hide it
var selectedText = fulltext.slice(0,nof);
$('#text').text(selectedText);
$('#text').append('<p style="visibility:hidden">'+removedText+'</p>')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent"style="background-color:#ffffff">
<h1 id="text">HelloWorld</h1>
</div>
My solution for now are just two simple css lines
white-space: nowrap;
float: initial;
The only thing i am still missing is that the text is always visible if it reaches over the div boundaries. Maybe someone knows a trick to that but this is no urgent...
Since you don't know how long the content would be you could perhaps use text-overflow:ellipsis combined with white-space:nowrap and for your problem
the text is always visible if it reaches over the div boundaries
you could use overflow:hidden. When all this combined together. You'll get this
div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
margin auto;
}
<div class="col-4">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
Is there any way to text wrapping into two or more columns in HTML only with CSS?
I have continous text with p tags only like this:
<div id="needtowrap">
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Nulla ullamcorper diam arcu, ...</p>
<p>In libero diam, facilisis quis urna nec, ...</p>
<p>Sed varius et mi quis dictum. ...</p>
</div>
I wan to wrap this text into two columns at 50% of the text, like in Microsoft Word or LibreOffice, etc.
It is possible?
See the "column" rule:
http://www.w3schools.com/css/css3_multiple_columns.asp
As you can see, it's a CSS3 rule, and so you might not find browser support as complete as you'd like..
MDN:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
Breakdown of browser support:
http://caniuse.com/#feat=multicolumn
More reading, examples etc:
http://css-tricks.com/guide-responsive-friendly-css-columns/
(fairly comprehensive)
Multi-column layout in CSS with the columns property and related properties is rather well supported in modern browsers. At the very simplest, you would set just columns: 2 on the div element. In practice, you additionally need vendor prefixed versions for reasonable browser coverage:
#needtowrap {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
#needtowrap p {
margin: 0;
}
#needtowrap p + p {
text-indent: 1em;
}
<div id="needtowrap">
<p>Lorem ipsum dolor sit amet, ...
Well we need some real content too.
Otherwise this looks rather dull.</p>
<p>Nulla ullamcorper diam arcu, ...
And some more text to make this look like a paragragh.</p>
<p>In libero diam, facilisis quis urna nec, ...
By the way, fake Latin is not good fill text.
It behaves differently from the texts you will really use.</p>
<p>Sed varius et mi quis dictum. ...
But I digress.</p>
</div>
The example uses ”literary paragraph” formatting: instead of default vertical spacing between paragraphs, the first line of each paragraph except the first one is indented a bit. In multi-column rendering, this works much better than the default p formatting (which reflects defaults of office automation software rather than typographic traditions).
There are many other things to consider. As a rule, multi-column text usually looks much better when justified on both sides. This in turn makes hyphenation more or less a necessity.
so, for aside, please see here what I mean: http://ejfox.github.io/sStory/
One article, 2 css columns, in the first column I have the article with text and pictures, in the second column I put aside elements. Those aside elements are either text or images and they resemble the asides of the newspapers.
I am using zurb foundation, so I created a row with two columns. I have the article in the first column. I would like to put asides in the second column, but only after a specified point.
For instance:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
tincidunt ut laoreet dolore [here]
magna aliquam erat volutpat.
I want the aside to go after the [here] position.
So, the question is, is it possible, using a 2 columns layout with zurb foundation, to put elements in the second column at points specified in the first column?
The most straight-forward way of doing this in a way that will also give you predictable responsive behavior is to make a separate row for each paragraph you want the aside to relate to.
See jsFiddle: http://jsfiddle.net/vr4C2/1/
<div class="row">
<div class="large-6 columns">
<p>Story info relating to the aside</p>
</div>
<div class="large-6 columns">
<h5>Aside</h5>
<p>Your aside info</p>
</div>
</div>
How can I display negative numbers in right to left textbox, with the minus on the left of the number?
Current state: 1-
Desired state: -1
On your textbox you just need to reset the direction, and align the text to the right:
BODY {
direction: rtl;
}
#test {
direction: ltr;
text-align: right
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit.<br />
<input type="text" id="test" value="-109309" />
</div>
This is a general issue with RTL/LTR when it comes to contexts in UI.
Short answer: The best approach is to dedicate numerical inputs and string inputs to separate textboxes. Numbers for most RTL languages (not all, beware!) are LTR, and strings are RTL, and splitting the context allows you to define your inputs properly.
Example -
Place: <input type="text" dir="rtl" />
Temperature: <input type="number" dir="ltr" />
Note that W3C recommends setting the language in the html markup rather than the CSS, which is also better for accessibility and screen readers. Adding a lang="" attribute is also recommended, if possible.
There are several good reasons to split textboxes for strings and numbers separately when possible, especially for RTL/LTR:
This is usually a good UX decision, because it makes it clear to your user what they are expected to type.
You get a clear distinction in your code (or whatever analyzes the form fields) about what is a string and what is a numberical input, for whatever calculations or display concerns.
When you display the results, you can make sure the number and text are displayed correctly (using <span dir="ltr">...</span> or dir="rtl" when relevant)
Defining an input as numerical allows mobile devices to load the number pad rather than the full keyboard, which is a bonus for UX.
I know this question is several years old, but I hope this can help with the new considerations (and some technology updates since then, especially mobile) to anyone interested in supporting RTL or mixed directions in their forms.
I am in the middle of a web app and we're just about to start with a cache-layer that features memcache and disk-based cache.
We just questioned ourself - what level/amount of formatting should we use on the stored cache data?
Let say that we have a database table called articles. Articles table have a number of columns including headline and content.
If we we're about to store this as an array, it would look like this:
array (
'headline' => 'Brilliant news - sunshine all week',
'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a
semper mi. Aenean rutrum ultrices mauris sed dictum. ');
Or, the pre-formatted HTML version:
<div class="article">
<h1>Brilliant news - sunshine all week</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a
semper mi. Aenean rutrum ultrices mauris sed dictum. </p>
</div>
Pros and cons
Obviously, the pre-formatted html version increases the size of each cached datablock, since it includes a number of html tags. Also, there will be some headache included if the data were about to be formatted in different ways (I don't think that we will do this though). The option for that is of course to instead store multiple versions of each article in the cache.
So, what's common sense to do in our case? Let the HTML be rendered each time based upon the array that are retrieved from memcache, or just output the pre-formatted html?
I think it all depends on performance you need but I would use array version as it give possibility to play with content before rendering. Also building HTML having content is usually quite cheap when compared to getting content itself.