Right now the text is like this:
Lorem ipsum dolor sit amet consectetur adipiscing
elit vitae orci elementum dictum
I want to be like that:
Lorem ipsum dolor sit amet consectetur adipiscing
elit vitae orci elementum dictum
I want the second text line to start where the first line starts.
the first text line is aligned to right.
try this out. May be helpful
<p>Lorem ipsum dolor sit amet consectetur adipiscing<br>
<span>elit vitae orci elementum dictum</span></p>
<style>
p { float: right; }
span { float: left; }
</style>
Another simple way of doing it is using 2 p tags
In HTML:
<p class="text">Lorem ipsum lorem ipsum</p>
<p class="author">Author</p>
In Css:
.text{
font-size: 15px;
}
.author{
font-size: 12px;
color: grey;
}
Related
I have an interesting layout issue in CSS. My scenario: Imagine a standard paragraph of text with justified alignment. The last word, however, is the authors name, which needs to be aligned to the right border. Depending on the length of text and the width of the paragraph, this could require a longer distance between the last word of the text and the author's name. It could also happen that the paragraph fills the last line completely, and then the author's name should appear one line below, and still aligned to the right.
I have an image here that illustrates this behavior, see the footnotes:
See that in the first footnote the author ("Der Herausgeber") is aligned to the right, but remains in the last line of the text, while in the second footnote the author ("D. H.") jumps one line down, due to text length.
I have tried to emulate this with the following HTML/CSS:
p {
width: 350px;
text-align: justify;
}
span.author {
display:inline-block;
text-align:right;
max-width:100%;
font-style: italic;
white-space: nowrap;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <span class="author">The Author</span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa. <span class="author">The Author</span></p>
So far, the author comes as a separate element, and it jumps to the next line as a separate unit (no wraps allowed). But I have problems aligning it to the right border. I have tried min-width and max-width, which did not work. I have also tried to approach this with flexbox, but until now I did not come even close to a solution. Maybe the HTML code needs to be modified as well. Is there any hint you could give me?
You can try something like this using float:right
p {
width: 350px;
text-align: justify;
}
span.author {
display:inline-block;
text-align:right;
font-style: italic;
white-space: nowrap;
float: right;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <span class="author">The Author</span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa. <span class="author">The Author</span></p>
just set float: right; to author span tag
p {
width: 350px;
text-align: justify;
}
span.author {
display:inline-block;
text-align:right;
max-width:100%;
font-style: italic;
white-space: nowrap;
float: right;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <span class="author">The Author</span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa. <span class="author">The Author</span></p>
You want something like this? I separated the .author from the p
p {
clear: both;
width: 350px;
text-align: justify;
margin-bottom: 0;
}
.author {
display: inline-block;
float: right;
max-width: 100%;
font-style: italic;
white-space: nowrap;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p><span class="author">The Author</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa. </p><span class="author">The Author</span>
I am trying to achieve a layout similar to the attached image. It looks fine and as how I want it when displayed in a browser, but when I test on a mobile/tablet device the spacing of the p tags ends up not correctly displayed- I assume this is due to me using hard coded widths in my span tags and the p tags taking up more than one line.
Is it possible to achieve the attached image layout in a responsive manner? If so how do I go about doing this?
I have tried using % and EM in place of px with similar results.
The HTML that I have written so far is:
<h2>Lorem Ipsum </h2>
<p>
<span style="display:inline-block; width: 50px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
<p>
<span style="display:inline-block; width: 100px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
</br>
<h4>
<span style="display:inline-block; width: 200px;"></span>
or
</h4>
</br>
<p>
<span style="display:inline-block; width: 50px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat
</p>
<p>
<span style="display:inline-block; width: 100px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
</br>
<h2>
<span style="display:inline-block; width: 550px;"></span>
Lorem Ipsum
</h2>
<p>
<span style="display:inline-block; width: 600px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
</p>
<p>
<span style="display:inline-block; width: 663px;"></span>
Lorem Ipsum
</p>
<p>
<span style="display:inline-block; width: 650px;"></span>
Lorem ipsum dolor sit amet
</p>
First of all, you better walk this way to achieve something similar to what you want:
.indent-1 {
margin-left: 2.5%;
}
.indent-2 {
margin-left: 5%;
}
.indent-3 {
margin-left: 7.5%;
}
.indent-4 {
margin-left: 10%;
}
.indent-5 {
margin-left: 12.5%;
}
.indent-6 {
margin-left: 15%;
}
.indent-7 {
margin-left: 17.5%;
}
.indent-8 {
margin-left: 20%;
}
.indent-9 {
margin-left: 22.5%;
}
<h2>Lorem Ipsum </h2>
<p class="indent-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<p class="indent-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h4 class="indent-3">or</h4>
<p class="indent-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat</p>
<p class="indent-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h2 class="indent-6">Lorem Ipsum</h2>
<p class="indent-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</p>
<p class="indent-8">Lorem Ipsum</p>
<p class="indent-9">Lorem ipsum dolor sit amet</p>
CodePen using LESS: http://codepen.io/anon/pen/MweYma
JSFiddle using CSS: https://jsfiddle.net/c80p3pyx/1/
If you need to make sure your paragraphs do not wrap, just add
p { white-space: nowrap; }
to your CSS. This way your paragraphs will always stay in one line, but lines that do not fit the screen width will cause the browser to show (or make available at least) a horizontal scrollbar, which in almost all cases you will want to avoid. The only other option on "too-long" paragraphs is to either shorten the text, or to use a smaller font.
I can't figure this one out. I have a heading (H1) and a colored bar on the right side of the heading. The bar should always cover the area between end of the heading and end of the content area. Something like that:
LOREM IPSUM ================================================
LOREM IPSUM DOLOR SIT AMET =================================
At this point, everything works fine. HTML:
<h1>LOREM IPSUM</h1><hr/>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet.</p>
and CSS:
h1 { float: left; margin: 0 10px 0 0; font-size: 18px; }
hr { display: block; border-top: 18px solid green; }
.clear { clear: both; }
See jsfiddle
Problem is that this approach doesn't work with multiline heading, it would be perfect to have something like this (so the colored bar appears on the last row):
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
PROIN SAGITTIS DICTUM RISUS A DAPIBUS ========================
Any ideas? :-)
What about this approach on jsfiddle
HTML:
<h1><span>LOREM IPSUM<br />TEST</span></h1>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris odio magna, rhoncus sed leo et, dapibus adipiscing metus. Donec cursus dignissim ipsum sit amet suscipit.</p>
CSS:
h1 {
float: left;
margin: 0 10px 0 0;
font-size: 18px;
display:block;
background:green;
width:100%;
padding:0;
}
h1 span {
background:#FFF;
padding-right:10px;
display:inline-block;
}
.clear { clear: both; }
I'm having a big trouble... i cant make a div grow with content...
i've got this HTML to fix it here... but i cant do that... can someone help me with this...??
I Uploaded the link here: http://efdutra.com/help
The div that i need to grow, well.. you will see the Lorem Ipsum getting over the footer... :p
There is some part of the html:
<div id="boxes">
<div id="boxFinal">
<div id="linksBoxFinal">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
</ul>
</div>
<img id="barraFinal" src="img/barraBoxFinal.png" />
</div>
</div>
And here the css:
#boxes{
margin:0;
padding:0;
position:relative;
float:left;
height: 100%;
width: 100%;
overflow: none;
}
#boxFinal{
margin:15px 0 0 8px;
padding:0;
float:left;
position:relative;
width:100%;
max-height:100%;
overflow:inherit;
}
Can someone please help me...?
Having played around with your styles I see a lot of things wrong. Firstly you do not need to float everything left. next you need to add lis to around you anchor tags in the ul. third you need to remove the absolute positioning of #lineBoxFinal. If you use the following styles (replacing your existing ones) then the footer should work properly
//line 241
#linksBoxFinal ul {
margin: 5px 0 35px 15px;
z-index: 3;
}
//line 262
#barraFinal {
position: relative;
margin: 0 110px;
z-index: 2;
clear: both;
}
Thats because position:absolute on div[.linksBoxFinal]>ul
Thats would be in #linksBoxFinal ul on line 241 in your style.css
.
.
try this:
<ul style="position:relative;">
(also, remove the not so needed margin bottom)
as to your question about putting an li inside an anchor, i believe the answer is no. Anchors cannot house block level elements.
I have tried coding the HTML layout in the image below, but as a result does not seem to be working correctly. Any help with the error would be appreciated.
HTML:
<header>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
</header>
<section>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
</section>
CSS:
body {
font-family: 'open sans';
text-align: center;
color: #333;
}
section {
display: block;
}
h1, h2 {
font-weight: 300;
}
Desired Layout:
You should split your section into two, by headings, so that you can float them separately:
<header>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
</header>
<section>
<article>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
</article>
<article>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
</article>
</section>
And for your CSS:
body {
font-family: 'open sans';
text-align: center;
color: #333;
}
section {
display: block;
overflow: hidden;
}
section > article {
box-sizing: border-box;
float: left;
width: 50%;
}
h1, h2 {
font-weight: 300;
}
I recommend using box-sizing: border-box because it will not break the layout when you add padding to the <article> element.
See fiddle here - http://jsfiddle.net/teddyrised/XPGb7/
Wrap your content in left & right containers as:
<header>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
</header>
<section>
<div class="left">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
</div>
<div class="right">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
</div>
</section>
And apply the following style
body {
font-family: 'open sans';
text-align: center;
color: #333;
}
section {
display: block;
}
h1, h2 {
font-weight: 300;
}
.left, .right{
width: 50%;
}
.left{
float: left;
}
.right {
float: right;
}
Working example:
http://jsbin.com/aragem/1/
You will need to wrap your section into two div blocks:
<section>
<div>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur.
<br>Curabitur at rhoncus orci. Lorem ipsumm.</p>
</div>
<div>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur.
<br>Curabitur at rhoncus orci. Lorem ipsumm.</p>
</div>
</section>
So you can apply the following style:
section > div {
display: inline-block;
width: 45%;
}
http://jsfiddle.net/samliew/8XJ7F/3/
this will work :
html :
<header>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra rutrum tem <br> por. Curabitur at rhoncus orci. Donec ante velit, scelerisque vitae tincidunt sit amet.</p>
</header>
<section>
<div class="left">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
</div>
<div class="right">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur. <br> Curabitur at rhoncus orci. Lorem ipsumm.</p>
</div>
</section>
css :
body {
font-family: 'open sans';
text-align: center;
color: #333;
}
section {
display: block;
}
h1, h2 {
font-weight: 300;
}
.left, .right{
width: 50%;
}
.left{
float: left;
}
.right {
float: right;
}