Two paragraphs in the same line - html

Is it possible to put two <p> in the same line? I've tried setting the margin to 0, put it still won't work. Does anybody have an answer to this?
Thanks!

That's what inline-blocks are for. Assign display: inline-block and a width less than 50% to the paragraphs to get the desired result
.myclass {
display: inline-block;
width: 47%;
padding: 1%;
}
<p class="myclass">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>
<p class="myclass">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>

The paragraph <p> tag is a block level element where as the span <span> tag is an inline level element.
If you want to make the paragraph tag inline you may do this:
p {
display:inline;
}
.spacer-text {
margin-top:15px;
margin-bottom:5px;
text-decoration:underline;
}
<div>Two paragraph tags:</div>
<div><p style="color:olivedrab;">VoilĂ ! In view, a humble vaudevillian veteran, cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. </p><p style="color:rebeccapurple;">However, this valorous visitation of a by-gone vexation, stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition.</p></div>
<div class="spacer-text">A nicer approach would be two spans:</div>
<div><span style="color:firebrick;">The only verdict is vengeance; a vendetta, held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous.</span><span style="color:peru;">Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honor to meet you and you may call me V</span></div>

Related

CSS: making certain div sections NOT full width

I'm working on this website: docksteaderlending.ca.
I had several text blocks in the page that I didn't want to be full width, so I used this piece of css:
div.textwidget{
width: 500px;
margin-right: auto;
margin-left: auto;
}
div.textwidget {
max-width: 500px;
margin: auto;
}
However, this changed all the text blocks. Initially it wasn't a big deal, but I've realized it's messed up the text blocks I have in the footer.
I'm quite new to css/html so i'm not sure how I can exclude certain text blocks.
I tried replacing textwidget with the name of the text block (ex. text-2) but that hasn't worked.
All help is appreciated, thank you!
Just apply a class to the text blocks which you want to be affected and set up a CSS rule for that class (not for the textwidget class)
div.myclass {
width: 500px;
margin-right: auto;
margin-left: auto;
}
div.myclass {
max-width: 500px;
margin: auto;
}
<div class="myclass">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
<div class="notmyclass">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
Let me see if I understand the title "making certain div sections NOT full width"... You are trying to get different widths from a certain DIV? If so, I think what you should be doing is have multiple child divs inside THAT div and give them different width. Let me know if I understood right so I can give my best on helping out!

Inline element does not accept margin-top or bottom

Why the inline elements ignored margin top and bottom?
just accept margin right and left?
span {
margin-top:20px;
margin-bottom:20px;
}
Inline, by definition, doesn't have top or bottom margin. What you'll want to use is display: inline-block. The height for inline is determined by the contained objects only.
Edit: Here's the relevant spec.
Just because it's inline. Inline elements cannot have any top and bottom margins (and also no top or bottom padding):
span {
margin: 30px;
padding: 20px;
color: red;
}
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. <span>Donec pede justo,</span> fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
</p>

Placing text under right aligned image in Wordpress

On my Wordpress blog, I have right aligned the images when inserting them, where the body text wraps around them perfectly. I would however like to include text underneath the images such as "Click Here to Order".
I tried adding the order link html as a caption to the image media but that didn't seem to work. I also tried wrapping the image in a DIV and putting the link below it but it didn't group them as desired.
What would be the best way to accomplish this?
<h2>Best Mixers</h2>
[table id=2 /]
<h2><a name="kitchenaid"></a>Kitchenaid</h2>
<img class="alignright size-medium wp-image-1323" src="https://website.com/mixer-300x300.jpg" alt="Kitchenaid Mixer" width="300" height="300" />
I Hope Help You:
img {
width: 300px;
}
#divPic {
float: right;
margin-left:10px;
}
#divPic h3 {
text-align: center;
background: #000;
color:orange;
margin:0;
padding: 0;
}
<div id="wrapper">
<div id="divPic">
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
<h3>Click Here to Order</h3>
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec
</div>
</div>
Did you try
<div class="alignright">
<img><br>
text
</div>
(Note the <br>)
I'm not sure what Wordpress' various CSS rulesets (referred to by the class attribute) do, but your objective is to group the image and its caption together in a <div> and have that "object" (rather than just the <img>) float to the right.

Make multiple texts in one paragraph html [duplicate]

This question already has answers here:
How do you make div elements display inline?
(20 answers)
Closed 6 years ago.
Trying to get these two div's in one paragraph, does anyone have a solution?
<div class="boxed">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
<div class="boxed">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
From what I understand of your question, you want to insert two <div>'s in a single <p>?
If so its quite simple:
<p>
<div id="div1"></div>
<div id="div2"></div>
</p>
This obviously wraps two <div>s in a single <p> (paragraph). Then just add the inline css class to your <div>s:
css style for inline:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
Now just add the inline class to both your divs:
<div id="div1" class="inline">test</div>
<div id="div2"class="inline">test</div>
Output:
testtest
Hope that helps

Text from textareas into database makes <br>

When I insert text from a textarea into the database, it will insert the text with enters. No enters, but hard enters, and every enter is on the end of the textbox line. So for example this will be the text in the database:
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa.
Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet
nec, vulputate eget, arcu. In enim justo, rhoncus
ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium. Integer
tincidunt.
Cras dapibus. Vivamus elementum semper
nisi. Aenean vulputate eleifend tellus. Aenean leo
ligula, porttitor eu, consequat vitae, eleifend
ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus. Phasellus viverra nulla
ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi. Nam eget
dui.
Instead of
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
How is that possible and can I remove the hard breaks from the textarea?
Try str_replace("\r\n", "", $string)
Would replace be of use here:
SELECT REPLACE('www.mysql.com', 'w', 'Ww');
-> 'WwWwWw.mysql.com'