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>
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I'm making a website using HTML5 and don't know which semantic element to use for the first page content the user sees first (full viewport height and width). I've read that the <header> element should be used for introductory stuff like website title and navigation. I don't even have that in my site, instead I have something like this, basically the first part of the website where you can see what it is about and links to some contact stuff.
It is a single page site, but if I had more pages, they would not have that content and I would probably make a navbar and put it in a <header>. With <main> I'd like to cover more stuff than only this.
Maybe an even different element? I don't know, it's like the combination of a <header>, a <section> and a <main>.
What do you think would be best?
Edit: This is not the entire page I have shown on the image. It is just the part that shows up first when you open the website, there is also content under it. I wanted to know what element to wrap over the thing in the image.
Here is the code (deleted classes and changed text to dummy text):
<header>
<address>
123 456 789
</address>
<div>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh nibh, egestas eget justo maximus, consectetur ultricies ante. Quisque facilisis pellentesque sagittis. Donec iaculis tellus nisl, vitae sodales ipsum ornare id. Suspendisse potenti. Curabitur eu ornare quam. Fusce laoreet vitae quam at ornare. Etiam quis malesuada magna.</p>
Button
</div>
</header>
Is this OK?
(the phone icon on the bottom right has position: fixed and is outside the header)
This is honestly a matter of opinion.
Personally I wouldn't bother at all with sectional elements on such a small site, since it really just adds noise. It won't be helping, say, a blind person or a search engine crawler to understand better, because there's just not that much to understand.
However I admire your effort. I would put "heading" in header, the phone stuff in "footer" (even though it's at the top) and the rest in main.
Edit: Considering that this is just the top of your page, I believe considering it the header is reasonable. The code you posted is certainly valid html.
So i have read this topic: Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
But i still have some problems:
My code ( i have shortened it a bit, but i think nothing important is missing):
<div class="row justify-content-center">
<div class="col-lg-8 col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="col-lg-4 col-md-10 justify-content-center" >
/*My login div*/
</div>
So, what i want to happen: on small screens i want my Login div be almost as wide as a screen (10/12 and centered), PLUS i want it float on the top of the screen, before the text. I assume i have to add something like pull-sm-12 to my Login div and something like push-sm-10 to my Text div, but it doesn't work, my div just float beyond screen borders.
Bootstrap 4 has moved to a full flexbox model, so the push/pull utilities are no more. They are replaced by the "order" utilities. (Hint: The documentation seems to be out of date. Even though the class names start with order in the documentation, they actually start with flex, i.e. flex-first, not order-first.) Anyways, based on what you described, I think the following code will get you mostly there.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-sm-wrap flex-md-nowrap justify-content-sm-center justify-content-md-start">
<div class="flex-sm-last flex-md-unordered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="flex-sm-first flex-md-unordered" >
Login box
</div>
</div>
Unfortunately, the Stack Overflow snippet functionality doesn't really let you play with responsiveness. It's all defined widths, apparently. You should copy the code somewhere else to play around with it.
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Recently started learning HTML/CSS and it's my first attempt to build a website using Bootstrap. However, I've gotten stuck and don't know where to search for a problem. There should be 3 rows in one line but I don't know why the last one appears in a lower line...
Thanks in advance :)
Website photo
HTML photo
Your 4th div isn't closed, same for the second paragraph; presumably your third as well. Also, you're putting 3 "row" divs in a row, this is not necessarily how bootstrap should be used (you want to use columns ("col-...") instead).
First of all
I see you're using Bootstrap 2, if your website is a new project, I recommend you to use the last version of Bootstrap (currently 3.3.6), because your version is older and unmaintaned.
The problem
That's happened because you're misusing the grid system, rows are for grouping columns (.span* in Bootstrap 2), and each row is divided in 12 columns, don't need to use a row every time you need a column.
That way, your markup structure for a 3 columns row (in Bootstrap 2), should be something like this:
<div class="container">
<div class="row">
<div class="span4">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus at cumque esse quam quaerat maiores.</p>
</div>
<div class="span4">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus at cumque esse quam quaerat maiores.</p>
</div>
<div class="span4">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus at cumque esse quam quaerat maiores.</p>
</div>
</div>
</div>
In Bootstrap 3 is the same, you only have to change the classes .span* for .col-*-*
Each column have a inner padding, so you don't need to delegate columns in order to separate your content, in other cases you can use the offset classes.
A few tips
Tips about grid system that you can find in the documentation of Bootstrap 3, that also works for you.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4 (That would be .span4 on your case).
I hope I have been helpful,
Regards.
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.