I need help centering the second line of my paragraph. I don't know what to do because I'm new to HTML and CSS but I did try to create two "p" and give the second one a "text-align: center" however it was too far from the first line and I feel like there must be a better way to achieve what I want.
This is the HTML sheet:
.p_music2 {
color: #000;
font-family: "PT Sans Narrow", sans-serif;
font-size: 2rem;
margin: 2.5rem 6rem;
}
<p class="p_music2">
Upgrade today to get your favorite music, movies, TV shows, and
podcasts. You can join youTunes and stream — or download and play
offline — over 70 million songs, ad‑free.
</p>
Wrap the text that you want to center in a <span></span> and then set that span to display: block; text-align: center;.
display: block; will cause that block of code to break out of the flow of the rest of the sentences, and allow you to center it.
.p_music2 {
color: #fff;
font-family: "PT Sans Narrow", sans-serif;
font-size: 2rem;
margin: 2.5rem 6rem;
background: #000;
}
.p_music2 span {
display: block;
text-align: center;
}
<p class="p_music2">Upgrade today to get your favorite music, movies, TV shows, and <span>podcasts. You can join youTunes and stream — or download and play</span> offline — over 70 million songs, ad‑free.</p>
I would recommend to create a parent <div> element class with the property text-align:center and inside that element add your <p> HTML elements with the corresponding text. Then set the styles properties of those two elements separately one for the parent music2 and another for all your <p> elements so you can have control over the margins of the <p> elements.
html{background:blue; color: #fff;font-family: "PT Sans Narrow", sans-serif;font-size: 2rem;padding:50px;}
.music2 {
text-align:center;
}
.music2 p{
margin: 0px;
}
<div class="music2">
<p>
Upgrade today to get your favorite music, movies, TV shows, and
podcasts. You can join youTunes and stream — or download and play
offline — over 70 million songs, ad‑free.
</p>
<p>
second paragraph..... offline — over 70 million songs, ad‑free.
</p>
</div>
Related
I have a multi-line address in my footer and need lines to break at certain screen widths.
I have each line set in a <span> tag with a class and then allocated either block or inline-block in CSS.
For some reason a couple of lines are no longer behaving as they should and I cannot work out why.
Regardless of what I set a particular line to, it always appears in a line on its own, which is not what I want. And another 2 lines break when they should, 768px, but a gap between the lines appears.
HTML
<span class="address">FEAST THAILAND</span>
<span class="address1">10 NAEBKHEHART ROAD HUA HIN</span>
<span class=“address2”>(Inside The Memory Hua Hin) </span>
<span class="address3">PRACHUAP KHIRI KHAN, 77110 THAILAND</span>
<span class=“address4”>+66 (0) 32 510 207</span>
<span class="address5">OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span>
<span class="address6"><strong>PRIVACY POLICY</strong> <strong>TERMS & CONDITIONS</strong></span> <span class="address7"><strong>WAIVER & RELEASE OF LIABILITY</strong></span>
<span class="address8"><strong>©2017</strong> ALL RIGHTS RESERVED</span>
<span class="address9">TAT License No. 14/02344</span>
CSS
.address,
.address1,
.address2,
.address4,
.address6,
.address7 {
font-size: 11px;
font-weight: normal;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
display: inline-block;
color: #000000;
}
.address3,
.address5,
.address8,
.address9 {
font-size: 11px;
font-weight: normal;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
display: block;
color: #000000;
}
Obviously that's just the standard CSS without the media query, but .address4, which has display: inline-block; should be sitting alongside .address3, which has display: block; Any suggestions why it is not?
When the media query comes into play at 768px, .address7 drops down below .address6, which is what I want, but a line of space appears between the 2. Again, any ideas why?
Is this the best way to handle breaking lines where required, or is there a better way? I have even tried using with a class added as well as trying another method found here:
CSS
#media only screen and (max-width: 414px){
.address2 {
font-size: 10px;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
color: #000000;
display: block;
}
.address2:after {
content:"\a";
white-space: pre;
}
}
This last part with the .address2:after I thought should have moved the line after .address2 to the next line at 414px, yet it did not.
Any suggestions as to the best way to handle breaking the lines where I want?
cheers
One issue with display:block is that those elements always are displayed on a line of their own, no matter what the surrounding elements look like; be it display:inline or not.
So to answer your questions: an inline-block span next to a block span will not sit next to it on the same line. And two block spans with in between will each be on their own line, with another line in between where the are (this will look like a blank line).
To solve the whole issue, I'd start with simplifying it down to this:
div.addressblock {
text-align: center;
}
div.addressblock span {
font: normal 11px 'Lato', sans-serif;
letter-spacing: 1.5px;
display: inline-block;
color: #000000;
}
div.addressblock a {
font-weight:bold;
padding:0 .5em}
<div class="addressblock">
<span>FEAST THAILAND</span>
<span>10 NAEBKHEHART ROAD HUA HIN</span>
<span>(Inside The Memory Hua Hin) </span>
<span>PRACHUAP KHIRI KHAN, 77110 THAILAND</span><br>
<span>+66 (0) 32 510 207</span>
<span>OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span><br>
<span>PRIVACY POLICY
TERMS & CONDITIONS
WAIVER & RELEASE OF LIABILITY</span>
<span><b>©2017</b> ALL RIGHTS RESERVED</span><br>
<span>TAT License No. 14/02344</span>
</div>
With actual breaks where you want the line breaks to be, and all the spans turned into inline-blocks to avoid unwanted breaks inside them, and let the page flow do the rest.
If you then want other things to happen at certain screen widths, you can always add some extra CSS.
I have a page where I want to represent a URL to the student (but not have browser defaults, like changing to a pointer on hover, etc), and I am losing my styles by wrapping the text in div. I have
index.html:
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
styles.css:
body {
background: #f0f0f0;
width: 80%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: 35px;
margin-bottom: 60px;
}
p {
font-size: 20px;
font-family: sans-serif;
}
.cl {
margin: 38px;
padding: 25px;
background: #f8f8f8;
font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
font-size: 12px;
}
.fake-url {
color: blue;
}
Most recently I had tried using .fake-url in the div,
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
and after that I did
p, p div {
font-size: 20px;
font-family: sans-serif;
}
I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.
And as someone mentioned above, you have an extra ; inside the div's class
<div> elements don't belong inside <p> elements. Browsers usually rework this so that the <p> element is closed just before the <div> element and then opened again just after. This effectively splits your paragraph into two pieces, one before the <div> and one after.
Instead, use a <span> or, more appropriately, a <a> element.
MDN has an entry that mentions this. Specifically, in the section marked "Tag omission", it mentions that if an opening <p> element is followed by an opening <div> element then the paragraph is implicitly closed.
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
Just removing the ; from the class name in the div will fix it.
I have a block of text in paragraph element with the following css:
p {
text-align: justify;
text-align-last: left;
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
Here is the text:
DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.
The result looks like this:
What I dislike is the spacing between 'today's operational and fiscal' line. I want to move the 'a' down a line and the 'help' down a line to spread out the word density.
The problem:
When add a <br /> before the word 'a' and the word 'help' I get the following:
Now the left edge of the text block is not flush.
The Question:
How can I force the words to be on the next lines without adjusting the size of the text block?
Browsers are crap at fine-tuned typography. Full justification makes text HARDER to read for users and, in general, should be avoided.
Different browsers and operating systems will render the text slightly differently and there is no guarantee that the text will wrap where you expect it anyway. You may end up fixing it for yourself and braking it elsewhere. Trying to micro-manage this is a fruitless exercise.
See: http://nedbatchelder.com/blog/200806/bad_web_typography_full_justify.html
I found a solution based on a comment by Jongware.
I used (word at end of one line)<nobr> (word at start of next line).
It stuck the two words together and both words were added to the second line, looks great.
A better solution would be to use multiple elements. Take the places you want line breaks and separate those sections into individual sections.
Once they are separate sections, they can be displayed in a column to look like they are all one element.
Text unaltered:
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.text {
width: 400px;
text-align: justify;
text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over a decade of field experience DRG is uniquely positioned to help customers succeed in today’s operational and fiscal environment.</p>
Using line breaks:
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.text {
width: 400px;
text-align: justify;
text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over <br/>a decade of field experience DRG is uniquely positioned to <br/>help customers succeed in today’s operational and fiscal environment.</p>
Using separate sections:
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.text {
width: 400px;
text-align: justify;
text-align-last: justify; /* not really the last line */
}
/* The last line of the last p, should use left alignment */
.text.last {
text-align-last: left;
}
<p class="text">DRG is Boston-based organization dedicated to supporting the unique needs of the defense and intelligence community. Founded in 2011 on the belief that innovative, high-quality solutions could be delivered quickly and affordably. With over</p><p class="text">a decade of field experience DRG is uniquely positioned to </p><p class="text last">help customers succeed in today’s operational and fiscal environment.
I would appreciate a little assistance working with Psuedo Selectors for an ID within CSS. I cannot seem to display the first line of an ID in small caps. A snippet of both my CSS and the corresponding HTML is included for reference.
#introtext {
margin: 0px 0px 20px 0px;
background: transparent;
font-face: "arial black";
font-size: 22px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1;
text-align: center;
}
#introtext:first-line {
font-variant: small-caps;
}
HTML:
<div id="introtext"><span id="introcap">H</span><span id="introtext.first">ere you will
find links to Scouting related websites and forms.</div>
Perhaps...
...your expectations are incorrect (and I know your code has an error). While I agree with the comments here that your code is working as expected, I am speculating you are attempting something different.
Did you want the first sentence in small caps?
I noticed in your code you have the "opening" tag of <span id="introtext.first"> but you failed to put the closing tag for that </span>. This is an error. However, if your intent is to have the whole first sentence to become small-caps, your code will still not work because the :first-line pseudo-element does not look at the first sentence, but the first-line (which varies based off of the container width).
Additionally
It is best to not use a . in an id, since the . is used for designating classes. And perhaps a class is what you really want anyway.
Finally, A Solution?
If my speculations about your goals are correct, then I recommend doing the following (keeping your #introtext css the same, but changing the html and :first-line code), as demonstrated in this FIDDLE.
HTML
<div id="introtext">
<span id="introcap">H</span><span class="first-sentence">ere you will find
links to Scouting related websites and forms.</span> More text to follow
in a second sentence. And a third. Blah. Blah.
</div>
CSS
.first-sentence {
font-variant: small-caps;
}
Although
It almost appears as though you intend this to be a header (since the text is centered), so maybe something like this is more semantic and also eliminates the need for your leading "H" to be separate (unless you want OLD browser support). Here is its demo FIDDLE.
HTML
<div>
<h2 id="introtext">Here you will find links to Scouting related websites
and forms.</h2> More text to follow in a second sentence. And a third.
Blah. Blah.
</div>
CSS
#introtext {
margin: 0px 0px 20px 0px;
background: transparent;
font-face: "arial black";
font-size: 22px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1;
text-align: center;
font-variant: small-caps; /*<-- moved this to here*/
}
#introtext::first-letter {
font-variant: none; /*<-- reset the pseudo-element to normal */
}
I have a heading (<h1>) that has a sort of tagline below it. (I used a <small> tag and set font-size to a certain percent so it lines up perfectly when I change font-size of the heading for smaller screens. I'm using em units, if that matters.)
At first, the <small> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.
Here's my code:
HTML:
<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }
And here's the before and after:
I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <br /> tag simply line breaks, but it inherits the line-spacing, and line-spacing: (value) does not work, nor do margins or padding.
What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.
The problem is caused by the default line height for the heading element. The default depends on the browser and on the font, but it tends to be about 1.1 to 1.3 times the font size. In any case, with a very large font size set, this creates a problem, because the line height value also sets the height of the second line. By CSS specifications, for a block element, line-height sets the minimum height of line boxes.
There are various ways around this. Setting display: block on the small element is one way, since then its default line height will be determined according to its own font size. Another way is to set a line height that is considerably smaller than the font size, e.g.
h1.banner { line-height: 0.5; }
You need to control the line-height css property (see W3 Schools) to make sure all browsers set the same height for each line.
It's actually advisable to do this to pretty much all elements containing text, which is why most people use CSS resets for production, which sets a default line-height across all elements.
In this case, the <span> and <h1> will likely have different line heights.
I'm sure the <br /> tag is doing nothing wrong, unless you've altered its properties with CSS which I would not advise.
There's also a shorthand version in case you're setting other font properties for the same element(s):
font: <font weight> <font size>/<line height> <font face>;
For example:
font: bold 12px/18px sans-serif;
Hope this helps.
Drop the <br /> and set the display of the <small> element to block.
http://cssdeck.com/labs/uoqfo4xw
<h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1>
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100;
display: block; }
An alternative is to set the span to display: block; and then adjust the line-height of the <h2> tag.
I would do this, instead of using a <br /> tag.
Ultimately the answer that works as the best solution is found here (3rd example):
http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
#cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.
Here's the solution:
HTML:
<header>
<h1 class="banner">Justin Wilson</h1>
<p>WEB + GRAPHIC DESIGNER</p>
</header>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd;
font-weight: normal;
margin: 1em 0 0 0;/*purely for display purposes, really*/ }
header > p {font-family: Helvetica, sans-serif;
font-size: 1.75em;
color: #888;
letter-spacing: 1px;
font-weight: 100;
text-align: center;
margin:0; }
And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).
http://cssdeck.com/labs/xysgkffs
Thanks for all the answers thus far.
UPDATED....
Change <small> to <p> in HTML and CSS and add line to the h1.banner > p
margin: 0 auto;
FIDDLE