This is difficult to explain
I have a div tag that includes many p tags. These p tags are varying font sizes up to 250.
I would like the text to wrap the larger font sizes. For instance, if I have a paragraph with the work "ok" with a font size of 250, I want the other paragraph tags to wrap around it instead of having one line like it is now.
This must remain a single div tag containing multiple p tags.
Here are images explaining what I mean:
http://imgur.com/0ED1cS6
I should add, the order of the other paragraphs do not matter, they can be completely random just as long as there are multiple lines wrapping the larger fonts, so the last paragraph can be at the top. Whichever can fit the most text in the smallest area is what I am looking for.
I have put an example on jsfiddle, asdf, qwer, sd, and ds should be stacked on top of each other beside test
http://jsfiddle.net/rfcy2f15/1/
Sorry about my english and I'n not sure that I understand you but this could help you: http://jsfiddle.net/4kLyxgpx/
p {
display: block;
line-height: 100%;
margin: 0;
}
And HTML:
<div>
<p style='font-size: 100px;display: inline; float:left;'>test</p>
<p style='font-size: 20px;'>asdf</p>
<p style='font-size: 12px;'>qwer</p>
<p style='font-size: 10px;'>sd</p>
<p style='font-size: 10px;'>ds</p>
<p style='font-size: 40px;'>csd</p>
<p style='font-size: 10px;'>werw</p>
</div>
Related
I'm trying to get the site text right next to site-title. My code right know is
<p>
<block><div style="background-color:#993383; color:#ffffff; font-style: normal; ">
<span class="nowrap"><h3 id="site-title"><b>TEXT GOES HERE</b></h3></span> <span class="nowrap"><h5 id="site-text"> TEXT GOES HERE</h5></span>
</div></block>
</p>
Im not sure if the code class="nowrap" is correct, so i'm hoping you can help me out!
I am not sure whats inside your .nowrap class. You can make text side by side in many ways like,
.nowrap
{
display: inline-block;
}
fiddle
if you are wondering why? text is occupying two lines not one. The reason is h3 is a block level element so it breaks the line. In order to show them side by side Via CSS you can do by adding display: inline-block.
Are H1,H2,H3,H4 tags block or inline elements?
I've read that headers shouldn't be used as subtexts to other headers for HTML5 in order to have a nice outline.
for example:
<h1>Frustration</h1><br />
<h2>The life of developers</h2>
Rather, it could be written like this instead:
<h1>Frustration
<br />
<span style="font-size: 0.67em">The life of developers</span>
</h1>
The problem is that I have no control on the line-height of the subtext. It takes on the line-height of the H1 and that always seem a little too far.
I realize could do something like:
h1+.subtitle
to target the same thing, but I'd just like to know whether there is any way for the second option above to let me manipulate a paragraph with two different line-heights.
EDIT:
I'm using the latest version of Firefox.
As I continue to look for a solution, I'm beginning to wonder if this is a silly question to be asking, seeing as the browser has no reason to think the user would want separate line-heights within the same tag--especially when there are alternatives like using block elements with a negative margin-top.
You could do this:
<h1>
<span class="mainText">Frustration</span>
<span class="subText">The life of developers</span>
</h1>
h1 .mainText {
display: block; /* this prevent the need for the <br/> */
/* additional style for the main header text */
}
h1 .subText {
/* styling for the subtext */
}
You could also do this (which is easier I guess):
<h1>text
<div>subtext</div>
</h1>
h1 div {
font-size: 0.67em
}
The subtext will have a lower line height. See this jsfiddle for the latter one: http://jsfiddle.net/wLD35/
HTML have bothered me since HTML1 emerged.
One thing is about line breaks.
http://jsfiddle.net/LhDFs/2/
<p>1</p>
<p>2</p>
<p>br1</p>
<br/>
<p>br2</p>
<p>p1</p>
foo
<p>p2</p>
<p>pp1</p>
<p>foo</p>
<p>pp2</p>
p tag has 1 line between the element.
Is it impossible to have 2 blank lines between <p>?
It appears <br/> or space symbol doesn't work for that.
Well, of course, it's possible to use <br/> instead of <p>, but now I tweak Markdown, especially gfm, so I need to preserve paragraph structure.
I short, it's way too strange that we never be able to have 2 blank lines as long as we stick on <p>.
What I consider is
foo
bar
2 blank lines:instead of
foo
bar
3 blank lines with p tag structure.
EDIT:
Well, what I intended is to have consistent structure of P tag, but thanks to everyone, I've got a hint that I can prepare multiple classed p tag with CSS hack.
This is truly hacky on first thought, but I think I can manage it. Appreciated to all comments.
EDIT2:
I thought we have solution for this, but it seems not;
I post another:
It seems impossible to have 2 blank lines between p tags Without modification of the original elements
White space in your mark up (new lines, spaces) will not show up on the front end of a website.
This:
<p>example</p>
<p>example</p>
Is the same as:
<p>
example
</p>
<p>
example
</p>
On a website, both those examples will appear exactly the same.
To control spacing, padding, margin and position on the front end of a website we use css:
HTML
<p>
example
</p>
CSS
p {
padding-left: 20px;
}
Here is a demo showing different paragraph margins controlled by css:
HTML
<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>
CSS
p.noMargin {
margin: 0;
}
p.doubleMargin {
margin: 2em 0;
}
Demo
If I understand you correctly it seems to be working for me.
But one thing is the correct syntax for line break is:
<br>
<br />
Or style it like one of these
<p style="margin-bottom: 10px;">text</p>
<p style="line-height: 200%;">text</p>
A line height in percent of the current font size
Try this:
<br />
<br />
nbsp means "non-breaking space".
I am trying to make a simple home page and I am getting slightly different line heights between tags. Here is the HTML ` Justin is the lead engineer for
<p>and also this         and Justin also </p>
<img id="brabble" src="img/brabble.png">
<p>to make products work </p>`
and here is a picture
Your image is getting in the way of text formatting because it's not the same size as your text. You have several options, the most effective will be to put the image in its own span, and give that span an explicit height of 1em, with an overflow:visible:
<P>lalalala <span class='imagewrapper'><img ....></span> more text</p>
with style:
.imagewrapper {
display: inline-block;
height: 1em;
overflow: visible;
}
See http://jsfiddle.net/UG5us/
The image causes a line box to become taller than specified by the line height of the surrounding element. To avoid this, scale the image down and/or set its vertical position.
I have to increase the size of a word in a middle of a normal font-size sentence.
<p class="call">To book a consultation click here or call NOW</p>
How can I enlarge the NOW word in CSS? If I create new paragraph the word will go to the new line.
Any advice appreciated.
<p class="call">To book a consultation click here or call <span class='bigger'>NOW</span></p>
with CSS
.bigger { font-size:200%; }
Decide why you want it to be bigger (the point is HTML is to describe semantics, not presentation, so you need to think about this sort of thing)
Write appropriate semantic markup
Apply CSS
Perhaps:
<p class="call">To book a consultation click here or call <em>now</em></p>
and in your stylesheet:
em { /* or .call em, but you should aim for consistency in your styling */
font-style: normal;
font-size: 120%;
text-transform: uppercase;
}
This will also work
<p> This is some <b> TEXT </b><p>