How do I align CSS bullets to the outer text but keep the text displaying as a block?
This is what I've tried but none of them do what I want.
.list_container {
max-width:300px;
text-align:left;
margin:10px 10px;
font-size:12px;
}
.list_container ul {
lit-style-type:disc;
padding:0;
margin:0;
}
.list_span {
display:inline-block;
}
.list_span2 {
padding-left:5px;
}
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:outside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</div>
What I am trying to achieve is this:
Use padding-left on the ul - I used 0.8em as a value:
.list_container {
max-width:300px;
text-align:left;
margin:10px 10px;
font-size:12px;
}
.list_container ul {
list-style-type:disc;
padding-left:0.8em;
}
.list_span {
display:inline-block;
}
.list_span2 {
padding-left:5px;
}
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:outside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</div>
One solution would be to give those li's a class (I called it .left) and use the ::before psuedo to adjust the spacing. It should look something like this:
li.left::before {
content: "";
margin-left: -.6em;
}
See it here:
.list_container {
max-width: 300px;
text-align: left;
margin: 10px 10px;
font-size: 12px;
}
.list_container ul {
lit-style-type: disc;
padding: 0;
margin: 0;
}
.list_span2 {
padding-left: 5px;
}
.list_span {
display: inline-block;
}
li.left::before {
content: "";
margin-left: -.6em;
}
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:outside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</div>
<hr/>
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:inside;">
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
<li><span class="list_span2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</div>
To be absolutely sure that you get alignment whatever the font size and other spacing we need to position the disc ourselves.
This snippet does this by removing the default browser style and instead putting the disc on via its Unicode character in a before pseudo element.
The li elements are given a margin (in this demo 1em but it could be anything you want) and the pseudo element is given that margin negative.
.list_container {
max-width: 300px;
text-align: left;
margin: 10px 10px;
font-size: 12px;
}
.list_container ul {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: 1em;
}
.list_container ul li {
position: relative;
}
.list_container ul li::before {
content: '\2022';
position: absolute;
margin-left: -1em;
}
<div class="list_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul style="list-style-position:outside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
Related
Given this HTML:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
</div>
I would like a nice dingbat in place of very last horizontal rule, and a blank line for the first one.
However, consider this HTML:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Here, there should be a blank line for the hr, and no dingbat.
I was thinking I would put the dingbat in the content after each hr, then remove the content for any HR followed by a p:
hr {
border: 0;
text-align: center;
}
hr::after {
content: "❧"
}
hr::after + p {
content: "";
}
That last rule, of course, doesn't work. :)
How do I set the ::after content only when followed by a p? Or, is there a way to select only the last occurrence of the hr if it has no following element?
Someone will point out to you, correctly, that there is no previous sibling selector, but you don't need one for this.
You can simply apply the dingbat to hr only when it's the last child like so:
div {
margin-bottom: 1em;
border: medium solid;
padding: 0 0.5em;
}
hr {
border: 0;
text-align: center;
}
hr:last-child::after {
content: "❧"
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr />
</div>
You can simplify and only consider the p element without hr:
Not for the last
p:not(:last-child)::after {
content: "❧";
display:block;
text-align:center
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Only for the last:
p:last-child::after {
content: "❧";
display:block;
text-align:center
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Why I have problem with text width in Firefox and IE, because, on slider I have caption and set overflow in Firefox and IE displays letter mor than Chrome.
font-weight is 300
https://jsfiddle.net/8j1qb3o9/
div {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
font-size: 20px;
text-shadow: 1px 1px 3px #000000, -1px -1px 3px #000000;
}
<div>
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet
consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt
ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit am consectetur adipiscing
elit sed do eiusmod tempor incididunt ut labore.
</div>
div {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
font-size: 20px;
text-shadow: 1px 1px 3px #000000, -1px -1px 3px #000000;
}
Notice how I added the -moz- and -ms- tag. -moz- is so you're able to use it in firefox and -ms- is for internet explorer internet explorer.
More info about -moz- -webkit- and -ms- here: CSS What are -moz- and -webkit-?
I am using bootstrap to do some collapsing and toggling of tabs and content. I will link the entire code at the bottom of this. Now, for right now the page I am working on is a static twig page. I was having trouble getting some linking to work in twig so I pulled the code to a plain html page just to see what happens. Basically, I have a Hide which basically collapses/hides the active tabbed content. Now, the problem is, in twig(with symfony 2) if I do that it goes to the home route. If I do href="/pagename" it just reloads the same page and I dont want it to do that. How do I get what it is working in plain html to work in my twig file?
p.s.: It's best to copy paste the code in your code editor because jsfiddle and codepen did not work properly for this code for some reason.
p.s.2: What I am trying to accomplish is on page load to have 4 links, and upon clicking one of them for new content/div element to appear. If I click on one of the other 3 links the div that is visible changes accordingly (bootstrap's dynamic tabs). Each of the 4 divs/tabs have a Hide link which upon clicking needs to close the collapsed tab/div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#one">One</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#two">Two</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#three">Three</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#four">Four</a></div>
</div>
<div class="row">
<div class="tab-content">
<div id="one" class="tab-pane">
<h3>Content One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
<div id="two" class="tab-pane">
<h3>Content Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
<div id="three" class="tab-pane">
<h3>Content Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
<div id="four" class="tab-pane">
<h3>Content Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right">Hide</p>
</div>
</div>
</div>
</div>
</body>
</html>
Change your href="" to href="#" and see if that works out for you. ;-)
I try to insert a link into bold text in reStructuredText but failed.
This is my rst source:
**Lorem ipsum dolor sit amet, `consectetur <http://www.example.com>`_
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.**
but I got:
<strong>Lorem ipsum dolor sit amet, `consectetur <http://www.example.com>`_
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</strong>
I want to get this:
<strong>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</strong>
At the moment it seems that this is not possible: see the Docutils FAQ, specifically the question "Is nested inline markup possible". The answer basically states that nested inline markup is on the to do list, so it will eventually be possible to do what you ask in the question, and provides a couple of work arounds (which they state are not recommended).
Since the workarounds are not recommended perhaps for the time being you could just do something like:
**Lorem ipsum dolor sit amet,** `consectetur <http://www.example.com>`_
**adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.**
Of course your link would not be bold, but at least it will be a valid link.
Not exactly the HTML you ask for, but it creates a link inside of a fully bold text:
.. _consectetur: http://www.example.com
.. |consectetur| replace:: **consectetur**
**Lorem ipsum dolor sit amet,** |consectetur|_
**dolor elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.**
will produce:
<strong>Lorem ipsum dolor sit amet,</strong>
<strong>consectetur</strong>
<strong>dolor elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong>
One further workaround would be to mark the whole paragraph as bold, if applicable.
.. class:: bold
Lorem ipsum dolor sit amet, `consectetur <http://www.example.com>`_
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
I've made a Shpinx extension xxlink.py
which registers Docutils roles :stlink: and :emlink:.
reST
`example <https://example.org>`__
:stlink:`example <https://example.org>`
:emlink:`example <https://example.org>`
emited HTML
<p><a class="reference external" href="https://example.org">example</a>
<strong><a class="reference external" href="https://example.org">example</a></strong>
<em><a class="reference external" href="https://example.org">example</a></em></p>
result
example example example
Now I don't have to define 2 extra text substitutions for every single em/strong link.
Suggestions are welcome.
Here is my markup:
<div id="why-us">
<span class="heading">Why Us?</span>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Here is my CSS:
#why-us { float: left; }
#why-us span.heading { font-size: 13pt; color: #3A3A3A; display: block; }
#why-us div.section { float: left; width: 400px; margin-right: 50px; }
#why-us div.section p { font-size: 9pt; }
How can I make it only apply margin-right: 50px; to each div.section EXCEPT for the last one? Can this be done in pure CSS only? I don't ideally want to specify a ".last" class, nor use pseudo classes as the site needs to work in all browsers.
EDIT: Is there any nicer way of doing this? As I am now generating the code using PHP, which means I have to add extra code to make it check for the last DIV. I know that isn't too bad but still I would prefer a more elegant solution :)
You could override the CSS in the last div, as in:
<div id="why-us">
<span class="heading">Why Us?</span>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="section" style="margin-right: 0px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
It's really ugly but I think it should work.
You could use child selectors as follows:
#why-us div.section:last-child{
margin-right:0;
}
Example: http://jsfiddle.net/Br2DG/