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>
Related
so I have been wracking my brain and trying different options to get this to work, but I can't seem to get anything to do what I want.
I am trying to indent the first line of paragraphs on a web page using
p {
text-indent: 3em;
}
However, I am also displaying information in a formatted manner, and the font needs to be displayed:
Description: Pargraph 1.
Paragraph 2...so on.
Label 2: ...
I would like to not indent the paragraphs that start with the bold-faced labels; because it throws formatting and alignment off and just generally does not look that good.
Is there anyway to stylize the P tag but exclude any tags that are also tagged with B or strong so that only paragraphs that do not start with a bold-faced character/word get indented?
I attempted to use
p:not(b)
and
p:not(strong)
but they didn't seem to work, I'm assuming because b and strong are not div ids/classes and won't work?
EDIT: To clarify, this is for a page on a Tumblr blog. The way Tumblr handles its customization; the blog itself has its own CSS Style sheet/html that can be edited. Then, additional pages can be added that can either be made entirely from scratch (losing some functionality because they no longer tie to the css of the main blog) or using a 'standard' layout that pulls and connects it to the css sheet of the main blog.
On the main blog, you can edit the displaced text in boxes and such with the classes as suggested:
p class=class name {
css
}
But in a standard layout page, the text editor is an extremely simplistic HTML editor; so you cannot specify a specific class for individual paragraphs and all text gets entered as:
<p> <strong> Description: </strong> Paragraph 1 </p> <br/>
<p> Paragraph 2 </p>
And it uses strong instead of b for bold; and em for italics.
Check the below snippet as an illustration of my comment above.
If your b or em are inside the p, then we may need different method. Please share your code for further discussion.
.bold {
font-weight: bold;
}
p:not(.bold) {
text-indent: 3em;
}
<p class="bold">
Paragraph
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo sapiente et expedita dicta vero natus nobis laudantium a voluptatum alias qui blanditiis perferendis, neque, nisi vel quibusdam doloribus id veniam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo sapiente et expedita dicta vero natus nobis laudantium a voluptatum alias qui blanditiis perferendis, neque, nisi vel quibusdam doloribus id veniam.
</p>
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>
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.)
These are the steps to reproduce the problem (tested with Chrome 53.0.2785.101 and Chromium 53.0.2785.143, both 64 bits, in Linux and Mac)
Copy this simple HTML code and paste it in a new file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--uncomment this. It has no effect in chrome device mode (part of dev tools). It doesn't contain initial-scale=1 on purpose -->
<!--meta name="viewport" content="width=device-width"-->
<title>Initial Scale</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio in illo nisi totam eaque ipsam asperiores est nemo dolor ab commodi corporis nostrum voluptas sint corrupti quo obcaecati dolores expedita.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas facere odio fuga aliquam velit perferendis cum ut officiis ex quia delectus sint alias soluta saepe libero dolor odit exercitationem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aut possimus facere necessitatibus nam cumque repudiandae itaque recusandae minus hic exercitationem soluta officia voluptates neque quia maxime voluptatum eaque sed!
</p>
</body>
</html>
Open it with Google Chrome in Device Mode. Emulate any terminal, or even use the responsive mode.
What I expect: Tiny text. Because of the effect explained in this video: The browser will default the width to 980px (typical desktop browser width)
What I get: the text has normal size. Check screenshot
So, first question: Why am I not seeing the text small, like is explained in the video?
UPDATED: My guess: Is Chrome doing font boosting?
Now, second experiment. Just uncomment the meta viewport tag. The aim is to reproduce this zooming effect, caused by the lack of initial-scale=1. So, open the web page in the iPhone 5 emulator, and use portrait/landscape modes.
What I expect: the zoom effect explained in the link. The width of the screen has changed in landscape mode, so, without initial-scale=1, I should see the text zoomed.
What I get: the text keeps the same size in both, portrait and landscape modes. But I'm not applying the initial-scale=1 modifier...
Check screenshots
So, second question: why don't I need initial-scale=1 to make the text look nice in landscape mode?
In this example, it happens as I expect:
Text is tiny at first (no meta viewport)
If I add the meta viewport complete, everything fits properly.
I think it just has something to do with the way that you're formatting those HTML comments.
Without tag:
With tag:
Try adding a space between the <!-- and --> comment delimiters and the comment text.
I don't know the spec that well but I think that your comment format is valid, but for some reason it's causing a bug.
Also note that I'm setting both width and initial-scale which is how the best practices doc recommend it. However, it's working for me when I only set width as you did:
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.