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.
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 2 years ago.
Improve this question
Introductory HTML student, I'm trying to learn how to make multiple line breaks without having to type multiple <br /> when using a WYSIWYG editor.
The solutions I've read so far suggest adding two spaces to the end of a line prior to moving to to the next line and this will create a space between paragraphs.
However when I attempt to add two spaces at the beginning of an empty line and press enter to move to the next, my output preview does not show that I'm creating additional blank lines.
The goal is to be able to add up to 4 blank lines between some paragraphs in the output content to help meet a formatting goal. My current best working solution is to type 4 <br /> in a row like this:
<!-- content here then four spaces to create white space before next content -->
<br />
<br />
<br />
<br />
<!-- next content -->
Is there another solution when writing in markdown to get a similar result?
The goal is to be able to easily create multiple (at least 4) line breaks when desired between paragraphs. Easily here means without having to type out <br /> or <br> every time I want to do this.
Any help is appreciated, and -if applicable-:
deeper understandings of how this process works,
recommendations on your fav literature, blogs, or documentation regarding this topic, and
any advice & anecdotes from a more experienced viewpoint about how you think about this kind of issue now, as opposed to how I am thinking about it in a more novice state.
depending on the WYSIWYG editor if you can access the CSS you could play with:
br { display:block; margin-top:10px; line-height:22px; }
increase the 10px and the 22px line-height to your convenience...
other than that I don't know... don't really see the downside of
(yes they can be on the same line)
it's just copy&paste after all?
Since you can change HTML code in this WYSIWYG editor (you did not specified which one it is), then you can also use style="" (CSS). Just make margin on paragraphs. You can use pixels (px) value, but if you wanna have value based on current font size then "em" will be better solution.
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis aliquid adipisci alias vel. Odit consectetur saepe velit vel distinctio enim ipsam aperiam eaque, reiciendis itaque officiis ad fuga dolorem!</p>
<p style="margin-top: 3em">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis aliquid adipisci alias vel. Odit consectetur saepe velit vel distinctio enim ipsam aperiam eaque, reiciendis itaque officiis ad fuga dolorem!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis aliquid adipisci alias vel. Odit consectetur saepe velit vel distinctio enim ipsam aperiam eaque, reiciendis itaque officiis ad fuga dolorem!</p>
Im working on a html newsletter for my company and encountered a problem here.
Now i wrote some code, to get articles from our page's rss feed to the newsletter like title, thumbnail and summary.
<div class="col-xs-18 col-sm-6 col-md-3" >
<div class="thumbnail">
<!--#image name="image" #--><img src="http://cloud-files.crsend.com/img/noimage.png" style="width:300px; " /><!--#/image#-->
<div class="caption" style="text-align:center;">
<!--#html name="title" #--><h4>Thumbnail label</h4><!--#/html#-->
<!--#html name="description" #--><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat.
Consectetur, culpa itaque odio similique suscipit</p><!--#/html#-->
<p>Button Button</p>
</div>
</div>
Now what happens. I load the rss, select the article and it perfectly aligns on the left thumbnail, title and summary downwards. Now when i select a new Article it appears below but i want it to show on the right site. I know the solution when writing them directly in one code but those are getting loaded seperately.
P.S. Im very new to html and css so sorry if i made some plain mistakes.
For email templates, it is better to use <table> rather than <div>. Email templates always need inline css and some of the properties like float are not supported. So it is difficult to construct a structure using <div> in email template. But it is easy with <table>
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 have a question about ensuring good document structure when the visual design doesn't call for explicit headings.
Take the following example HTML for a homepage.
<header>
<h1>Our Brand</h1>
<p>Tagline</p>
</header>
<section class="company">
<h2>Our Company</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus error hic, aliquid assumenda sed optio, praesentium repellendus numquam laudantium esse molestias minima cum mollitia fugiat? Eum impedit deserunt aliquid ratione.</p>
</section>
<section class="values">
<h2>Our Values</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Officia reiciendis illum temporibus. Praesentium repellat, iste officiis?</li>
<li>Quos facere enim officiis, recusandae inventore veritatis id.</li>
<li>Iste deleniti doloremque dignissimos, voluptate obcaecati velit optio.</li>
<li>Ut non enim, dolore saepe minus soluta illum?</li>
<li>Enim iure odit soluta laboriosam quis cupiditate eveniet.</li>
</ul>
</section>
<section class="team">
<h2>Our Team</h2>
<h3>Marketing</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
<h3>Social</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
<h3>PR</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
</section>
In this markup, there is a clear heading structure (i.e. h1 > h2 > h3).
But let's say it's been agreed that the 'Our Team' <h2> heading doesn't need to be shown as it is implied by the visual design. However, it is important for good document structure (for accessibility reasons).
Do we...
Show the 'Our Team' <h2> heading for screen readers and search engines using a '.visuallyhidden' class? (i.e. one which hides content off-screen)
Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.
Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.
Sidenote,
I've noticed that gov.uk (often hailed as a good accessibility site) do this. They are hiding a <h1> for their 'All Categories' heading. Also, they are hiding a <h2> in the footer for 'Support Links'
https://www.gov.uk/browse/benefits
Hiding the headings seems sensible but i've seen a lot of people posting about how Google will treat this as a black-hat SEO tactic.
I assume it would take a lot more than a couple of hidden headings to trigger any penalisation from Google, but maybe doing it on <h1>s would be a problem.
Any thoughts on this issue would be appreciated!
I would not worry about SEO penalties here. Years of addressing what you are trying to address suggest the effect is either none or negligible.
In your example, the <h2> has no content, it leads directly to the <h3>. In that scenario I always like to add some content so it isn't a hard visual / audio jump. As it is, if I navigate by heading in my screen reader, then I get no content under that <h2>, so it might already feel a bit odd.
Anyway, if you think you truly do not need the "Teams" text (visually or otherwise), then you could just remove it altogether and elevate the others to <h2>.
So from your three options:
Show the 'Our Team' <h2> heading for screen readers and search engines using a .visuallyhidden class? (i.e. one which hides content off-screen)
Meh. In my opinion, either there is content there to support it or there isn't. In your example, there is no content to support it. If you do decide to visually hide the text, don't do it off-screen as that can jack with RTL translations, look at a clipped text instead (there are many examples, that just happens to have a recent bit of tweaking).
Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.
Do this one. I tend to agree in principle that Teams warrants its own heading. But to do that you need content under the Teams <h2>, in my opinion. If no content will go there and you remove the Teams <h2>, then this is your next best option.
Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.
Nope. That is a WCAG failure for most auditors (I will fail it).
As far as the outline is concerned,
the heading <h2>Our Team</h2> does two useful things in your context:
it makes clear what "Marketing", "Social", and "PR" refer to (otherwise it would not be clear that these sections contain lists of team members)
it groups the three sections under one outline entry (otherwise they would be on the same level like "Our Values" etc., which wouldn’t make sense)
Visually hiding the heading fulfills both jobs. I would do this, but only if it’s really not possible to show the heading (which is typically always preferable), of course.
An alternative that fulfills the second job (grouping the entries), but not the first one (giving a useful label), is to use section elements explicitly (which is, by the way, recommended to do anyway):
<section class="team">
<h2>Our Team</h2>
<section>
<h3>Marketing</h3>
</section>
<section>
<h3>Social</h3>
</section>
<section>
<h3>PR</h3>
</section>
</section>
Now you could omit the h2 without changing the outline (except for the label, of course), so the three sections are still grouped, conveying that they belong together.
(Of course this only works for user agents that implement the outline algorithm.)
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>