I can't get a word to stay inline when I want to style it differently. How to solve?
p.SixtyFive {
font-size: 20vw;
text-indent: 0;
display: block;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
<p class="Intro">This page has</p>
<p class="SixtyFive">all</p>
<p class="Intro"> you want.</p>
I've tried different solutions.
Also, I've tried to solve it with browser tools by selecting the specific element. That's how I got the attributes/properties below the text-indent property.
Use a span tag (which is inline by default), don't end the p tag before the span (but only at the end) and delete the display: block and all other unnecessary stuff from your css class rule:
span.SixtyFive {
font-size: 20vw;
}
<p class="Intro">This page has <span class="SixtyFive">all</span> you want.</p>
you need to add display:inline to all the paragraph elements
html:
<p class="intro">This page has</p>
<p class="SixtyFive">all</p>
<p class="intro"> you want.</p>
css:
p.SixtyFive {
font-size: 20vw;
text-indent: 0;
display: inline;
}
p.intro{
display: inline;
}
As #Toastrackenigma correctly said, you should use a span tag;
span.SixtyFive {
font-size: 20vw;
text-indent: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
<span class="Intro">This page has</span>
<span class="SixtyFive">all</span>
<span class="Intro"> you want.</span>
When you use display: inline, you need to use it on the parent, i.e. the element that encloses what you want to inline.
p {
display: inline;
}
p.SixtyFive {
font-size: 20vw;
text-indent: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
<p class="Intro">
This page has</p><p class="SixtyFive">all</p><p class="Intro"> you want.
</p>
Related
So in the picture you can see that the number "5384" and the number "50" dont float to the same height. I know that the paragraphs both float to the exact top of the line but how do i get them to look like they're on the same height?
I don't want to use "margin-top: some pixels" because that wouldn't scale properly would it?
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings_cents {
font-size: 1.5rem;
margin: 0 0 0 0.3rem;
display: inline;
vertical-align: top;
}
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
This can easily be achieve using sup html tag
Read more about this tag here
p{
font-weight: bold
}
p sup{
font-weight: normal
}
<p class="savings">5.384 <sup>50</sup></p>
You can easily style that using tag or classes
Just add a parent element and use display: flex. You can check both elements height is same. You can use other flex properties to change the alignment if you want.
p{margin: 0;} /*resetting p margin*/
.savings-ctnr {
display: flex;
}
.savings {
font-size: 3rem;
}
.savings_cents {
font-size: 1.5rem;
}
<div class="savings-ctnr">
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
</div>
We can inspire from tag <sup>, make <span> with class savings_cents, wrap it with element with class savings and make something like this:
.up-small {
vertical-align: super; /*make element to be aligned with the superscript baseline of the parent*/
font-size: 50%; /*fits proportions*/
}
Example look into snippet
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings .savings_cents {
vertical-align: super;
font-size: 50%;
}
<p class="savings">5.384<span class="savings_cents">50</span></p>
I have a numbered list in a div on the left side of the screen. Just to the right of that div, I have another div with items that correspond with the numbered list. When the screen is minimized so the text in the first line wraps to the second line, I'd like the 2 from the numbered list move to the third line to match up with the Second Item entry.
I've tried out a couple different things (using actual numbered lists, using a single div, etc...) and couldn't get anything to work. Using a single div makes the most sense, but I want the numbered list in a separate bar on the left side. this can be seen in the linked fiddle. Any help is appreciated!
Below is how it views when not wrapped.
1 First Item
2 Second Item
Below is how it views currently when wrapped.
1 First
2 Item
Second
Item
Below is how I'd like it to view when wrapped.
1 First
Item
2 Second
Item
Here is the code:
<div class="xml-block">
<div id="xml-sidebar">
<p class="xml-number">1</p>
<p class="xml-number">2</p>
</div>
<div id="xml-group">
<p class="xml-symbol xml-list">Position of the first entry.</p>
<p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
</div>
In the following example, when the window is small enough that the text wraps, the number 2 from the list is not adjusted to stay with the Second Entry.
https://jsfiddle.net/b1Lpeffw/2/
You could use CSS counters for the line numbers instead. Not only will the number align with the code, but it simplifies your code quite a bit so you don't have to have a separate element with line numbers in your markup.
html {
background-color: #272822;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#xml-group {
padding: 0;
counter-reset: count;
}
#xml-group:before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3em;
height: 100%;
background-color: #1C1C18;
margin: 0;
padding: 0;
border-right: 1px solid #505050;
}
.xml-list {
font: 18px Monospace;
color: #FFFFFF;
text-decoration: none;
padding: 0;
margin: 0;
position: relative;
padding: 0 0 0 4rem;
}
.xml-list:before {
counter-increment: count;
content: counter(count);
font: 18px Monospace;
color: #505050;
text-decoration: none;
position: absolute;
left: 0;
width: 3em;
text-align: center;
}
.xml-text {
color: #EA9200;
}
li.xml-text-indent1 {
margin-left: 1.5em;
}
li.xml-text-indent2 {
margin-left: 3em;
}
li.xml-text-indent3 {
margin-left: 4.5em;
}
li.xml-text-indent4 {
margin-left: 6em;
}
.xml-symbol {
color: #C177FF;
}
.xml-list li p {
margin: 0;
padding: 0;
}
<body>
<div class="xml-block">
<div id="xml-group">
<p class="xml-symbol xml-list">Position of the first entry.</p>
<p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p>
</div>
</div>
</body>
In HTML, headings are denoted with <H>(1,2,3,4,5,6) tag.
My question is regarding following HTML code:
<div class="pure-u-1-1 pure-u-lg-3-3">
<h3><form:label path="gen">Registrer Bruker</form:label></h3>
</div>
Instead of writing <H3>, i want to write property of class in CSS ; which gives same font size (look and feel); as of heading HTML gives. Also is there predefined property for same in CSS?
The answer is no, however you might hack the styles. Most browsers will try to use these styles
(Taken from: w3schools)
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h4 {
display: block;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Are there predefined property for same in CSS; which gives same look and feel as H gives?
No.
The default style of a heading is (in most browsers) exactly that: a collection of different CSS rules coupled with an Hn selector (and stored in the browser stylesheet).
There isn't a (plain CSS) way to automatically copy all of those rules.
You could use the Inspector tool that comes in the developer tools built into most browsers to examine a heading and look at the default rules for it, and then copy those rules to your own (author) stylesheet.
There may be some variations between browsers, so you'll generally want to set the Hn rules explicitly too.
Question: is there predefined property for same in CSS?
No
You can try like this:
h3{
display: block;
}
h3 {
font-size: /*Font size similar to h3*/ ;
}
Think a good practice is let h<1-6> keep their default styles. And then add a class to add additional styles. Just seems cleaner to me, and you are not hacking the "master styles." Pros and Cons I'm sure.
<h1 class="h1">Hello CSS</h1>
I need the ///////// to appear after the heading text, the heading may vary for each block.
Output :
tag ///////////////
Contact ///////////
HTML
<div class="exp-tags exp-left-detail-block">
<h4><span>Tags</span></h4>
</div>
<div class="exp-tags exp-left-detail-block">
<h4><span>Contact</span></h4>
</div>
CSS
.exp-left-detail-block h4 > span{background:#fff;padding:0 12px 0 0;position:relative;}
.exp-left-detail-block h4 > span:after{
content: "////////////////////////////////////";
color: #e4e4e4;
position: absolute;
display: block;
left:0;
right: 0px;
top: 5px;
width: 500%;
height: 28px;
font-size: 15px;
font-style: italic;
}
jsFiddle
Demo
Remove position: absolute and disply:block from your pseudo css
If you want these two properties, you can use without pseudo. Just to that dom.
There is some text whose formatting I would like to render in HTML. Here is an image:
Note the gray lines with the bullet points and the paragraph numbers. The bullets should be centered on the page and the numbers should be justified right.
I've been trying to think of how to do this in HTML and am coming up blank. How would you capture this formatting?
You can use the :before and :after psuedo-elements to great effect here:
http://jsfiddle.net/yNnv4/1/
This will work in all modern browsers and IE8+. If IE7 support is required, this answer is not for you :)
#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}
About the counter properties:
https://developer.mozilla.org/en/CSS_Counters
http://www.w3.org/TR/CSS21/syndata.html#counter
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
It's not possible to (automatically) increment the bullets.
However, it can be done with some dubious repetition:
http://jsfiddle.net/N4txk/1/
p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */
(alternatively, :nth-child can be repeated in the same way: http://jsfiddle.net/N4txk/ - but it won't work in IE8; there will only be two bullets)
There is an upper limit on the number of bullets it would be sensible to have, so I think it would be acceptable to copy and paste that as many times as required.
How about something like this?
http://jsfiddle.net/6eTCf/
<div class="separator">
* <div class="page_number">1</div>
</div>
.separator{
margin: 5px 0 5px 0;
color:gray;
position:relative;
text-align: center;
}
.page_number{
position:absolute;
right: 3px;
top: 0;
}
I would float the number right and center the remaining contents (the bullet points). If you give the remaining contents an equal left and right margin larger than the numbers are wide, the contents will be centered.
I would wrap the whole thing in a div, then use relative/absolute positioning between the wrapper and the paragraph number div to get the numbers on the right-hand side like that.
Here's a fiddle showing how to do it.
There are a couple ways I can think of.
Add a <div> between the paragraphs, then add two <p>'s: <p class="dot"></p> and <p class="pnum">1</p>.
Style the <div> to the width of the the paragraphs, and set in the CSS the following:
.dot{ text-align: center; }
.pnum{ float: right; }
There are several ways I can think of:
Float + absolute position (I'll let the purists explain this one)
Old style table (I'll explain this since it's the easiest):
If the total width of the area is, say, 300px
<table><tr>
<td width="30"></td>
<td width="240" align="center">bullets</td>
<td width="30" align="right">number</td>
</tr></table>
Many people prefer using pure CSS, but I like my tables, they just work for me
`#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;``
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}`