I am tying to apply an offset to a column in twitters bootstrap framework using this code
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
Unfortunately the column is not getting affected by the offset class.
Every other class is working.
What am I doing wrong?
I am pretty sure that you just want to update your version of bootstrap to the latest version. I was able to view your code in an mvc project and it displayed right for me. Here is another question with references to the offset class and bootstrap versions: SO question.
I can't see any other reason why your code would not work unless you have another class in a css file that has an alternate definition for one of your class names.
Related
I am using Bootstrap 4. I have a simple two column layout. The right column has a table of contents, the left column has a lot of markup with paragraphs, lists, images, and so on. I would like the content of the left column to use the whole width (of both columns) where the table of contents (which takes less vertical space) ends.
Like wrapping around an image except this is wrapping around a <div> with lots of stuff inside.
Is this possible (whether or not you think its a good idea?)
this is what I would do: float (yes, float in Bootstrap-4) the div to the right side while having the col-6 class present there as well;
Is it a good idea? The customer is always right. Having said that, many people in Communications/Marketing departments have a history of working with print... so they may push for this to be implemented for a variety of reasons...
Look forward to your feedback and the 'real' answer like many professors reveal after a student gives it a shot :)
.myDiv {
border: 1px solid red;
float: right; margin-left:5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<div class="col-6 myDiv">
<h2> Right hand zone (6 col at the start) </h2>
I am using Bootstrap 4. I have a simple two column layout. The right column has a table of contents, the left column has a lot of markup with paragraphs, lists, images, and so on. I would like the content of the left column to use the whole width (of
both columns) where the table of contents (which takes less vertical space) ends. Like wrapping around an image except this is wrapping around a with lots of stuff inside. Is this possible (whether or not you think its a good idea?)</div>
<h1>Continued text (6 col at the start and then all width) </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? Where can I get some? There are many variations of passages of Lorem
Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything
embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris...</p>
<h3>continuing...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus
Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<h3>continuing further...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... 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). Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
Is there a way to display the anchor or link in a post using the_excerpt. In the wordpress editor i have a placed an anchor tag in the beginning of the post. It works correctly when i view the full article. But it does not work when using excerpt.
Here is an image of the post. I even highlighted the word
http://i255.photobucket.com/albums/hh140/testament1234/anchortag_zpsf77fbef2.jpg
And here is the code when i checked the view source. As you can see the link facebook.com turns into a paragraph instead of an anchor link.
<div class="content">
<!--TEXT -->
<p>www.facebook.com Nullam dictum eleifend neque facilisis pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus mollis tincidunt. Donec tincidunt, augue ullamcorper pharetra porta, metus turpis volutpat urna, nec [...]</p>
<a class="readmore" href="http://localhost/wordpress/sample-post-14/"><span>Full Article</span></a>
</div>
How can i solve this? If i replaced the_excerpt with the_content it will display the contents of that post.
The problem is that by default the_excerpt function disable all the HTML tags. That's why all the links disappears.
You will may be need to custom the content returned by the_excerpt function and allow the link tags for example. This tutorial show you how to do this.
echo $post->post_excerpt; // this will return you the excerpt of the current post
I'm using PIE to achieve some cross-browser CSS3 effects (gradient backgrounds, rounded corners, drop shadows, etc), but it's messing up my jquery accordion something awful.
Basically when PIE inserts its css3-container elements into the DOM, the jquery accordion code can't recover, because it's expecting the accordion container to be filled exclusively with an alternating list of H3 and DIV elements.
Has anyone found a way to make these two tools play nice together?
Instead of CSS PIE use pie.js the simple benifit that pie.js gives you is that you decide when to apply pie classes you can find a nice documentation on how to use pie.js here . Simply by the javascript way the pie will be applied after the code is executed by jQuery hence it should NOT mess with the markup. [though i am going to test it ]
And your code with pie should look something like
$('.accordion').accordion({
parameter:value;
});
$('.pieElement').each(function(){
PIE.attach(this);
});
Another method of doing this is by using gutters , while programming mobile webapps because of webkit i found out how useful gutters can be especially with polyfills .
Using gutters your code can look like
<div id="accordion">
<h3><span class="gutter">Section 2</span></h3>
<div>
<div class="gutter">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</div>
then apply your PIE CSS3 on gutters , from what i have read about PIE it seems that it applies a VML markup inside the parent of the element and if so using gutters the style will be applied without changing your markup.
When I include \usepackage{Sweave} in the preamble of a beamer presentation, beamer ignores changes to font, e.g., \usepackage{helvet}.
Here is a minimal example:
\documentclass[professionalfonts]{beamer}
\usepackage[T1]{fontenc}
\usepackage{helvet}
\usepackage{Sweave}
\begin{document}
\begin{frame}
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
\end{frame}
\end{document}
The text is set in computer modern, rather than helvetica. If you comment out \usepackage{Sweave}, then the text is set in helvetica.
Thus my question: Is there a way to change fonts in beamer presentations that include Sweave content?
I realize that my example here does not include any actual, "Sweable" R code, but it seems to not matter, because the unwanted font-switching behavior appears to result from Sweave.sty. My bigger goal is to use pgfSweave with beamer, but I'm having the same problem there. I think I have tracked it down to \usepackage{Sweave}.
From the R-help mailing list, Roger Peng suggests
\usepackage[noae]{Sweave}
See http://tolstoy.newcastle.edu.au/R/e2/help/06/11/4803.html
Also see http://www.theresearchkitchen.com/blog/archives/118
Shot in the dark, here, but do you get the same result if you put \usepackage{helvet} after \usepackage{Sweave}? Sometimes order of package declarations matters in LaTeX.
Also, you may find a more knowledgeable audience at the TeX-LaTeX Stack Exchange.
Should we use all H1 to H6 in a website?
i use h1 to h2 usually. now how to judge and decide where to use H3 to h6.
should we use like this
h3 {display:inline}
<div id="content">
<h3> some text in bold:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h3> some text in bold:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
or this
span {font-weight:bold}
<div id="content">
<p><span> some text in bold:</span>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<p><span> some text in bold:</span>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</div>
to get result lke this
alt text http://easycaptures.com/fs/uploaded/226/1452064646.png
Both methods are W3C valid, with css i can achieve same look from both method so which is semantic and accessible?
If the text is functioning as a header level under the H2 level, it would be an H3. Rinse/repeat for H4 to H6.
XHTML is semantic -- use the tags based on what they mean. What they look like is your choice, including whether they are displayed as block elements or inline.
A heading is a title for a section of a page. It describes that section, in a few words.
There’s no simple rule to work out if a given bit of bold text in a document is best marked-up as a heading.
In the example you’ve given, it’s particularly hard to tell if the bold text should be a heading, because the text is meaningless placeholder text. “Semantic” just means “meaning”. The “most semantic” markup is the one that best communicates the meaning of the page. Because the placeholder text has no meaning, you can't choose how to mark it up.
One way to decide whether some text should be marked up as a heading is to imagine what the document would look like if the user could only see an outline of it, generated from its headings. E.g.
<h1>
<h2>
<h3>
<h3>
<h2>
<h3>
<h4>
<h2>
<h3>
Would the text make sense in the outline? Or is it not really a heading, but instead just in bold because the designer wanted to emphasise it?
When writing pages I try to think of it as writing a Book, if the content is related to the parent section in such a way to deserve its own section, then use H3, H4... otherwise you can use other html tags, such as a dd (Definition List) or ul (Unordered List).
Of course, if you are going for SEO, then always use your h1 and h2, for main content titles (or simply the information you want the user to find). And then, as previously stated before go for trying to make it feel like a book (publication).
You use them as you need them, just as you would with any other tag (outside of the obligatory tags: html, head, etc.) Use them when you need them, but use them properly.
You should note that search engines such as Google use header tags(H1) when processing pages for indexing and page rank etc.
See How Google is using HTML tags to enhance the search engine?
HTML is a markup language, which simplified means describing your content semantically. CSS is for styling your content, i.e. the visual part. Just like <p> means a block of text is a parapgraph <Hn> means a block of text is a heading.
Headings describe the structure of your document, a treelike data structure, if you will.
The Web Developer extension for Firefox has a nice feature that allows you to see your marked up document structure. You can find it under Information->Document outline.
From an accessibility standpoint don't use multiple levels of headings unless it makes sence for your content structure. For example the main document should have heading level one, main sections in the document should have heading level two, and subsections should have heading level three. Wikipedia does a good job of this, for an example see the following link that has both sections and subsections.
http://en.wikipedia.org/wiki/Database_normalization
If you intend for the content to be a subsection (i.e. a distinct separation, not merely a paragraph block) of the section you're in, use the next available heading level. Otherwise, just stick it in a paragraph. Unless absolutely necessary, avoid wrapping your elements in a div tag just for the sake of having a div tag. It's not semantic and may throw off search engine spiders.