How do i get this piece of HTML working so the text vertically aligns to the top of the image icon and continues to wrap below?
Here's what i have so far:
<div style="width:300px;">
<i class="icon-twitter icon-4x"></i> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit adipiscing elit adipiscing elit adipis Lorem ipsum dolor dolor</span>
</div>
https://jsfiddle.net/xe9zD/
Any help is much appreciated.
Thanks
If you are using the default bootstrap css, it includes helper classes to float left and right. if you add the class pull-left to your icon, it will float it left.
<i class="icon-twitter icon-4x pull-left"></i>
EDIT: And that also gives it a nice margin so it does not butt up against the text. Its part of your font awesome css file.
Add this CSS rule:
.icon-twitter.icon-4x {
float:left;
}
JSFiddle example
Working DEMO
use float left
.icon-twitter icon-4x
{
float: left;
}
if it is directly coming from live css then
<i style="float:left;" class="icon-twitter icon-4x"></i> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet, consectetur adipiscing elit adipiscing elit adipiscing elit adipis Lorem ipsum dolor dolor</span>
Related
so i have these 2 rows of text displaying in an info box....but one row has an icon and the next one doesnt. i'm not exactly sure how to align the words so that the second row without the icon is indented correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info">
<i class="alert-icon-info alert-icon"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</div>
it comes out like this
EDIT: also using bootstrap...if that helps
No need to wrap everything in divs, I would suggest just wrapping your copy in a span and using flexbox to align your items.
HTML Edit:
<div class="alert alert-info my-alert">
<i class="alert-icon-info alert-icon"></i>
<span class="alert-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</span>
</div>
CSS edit:
.my-alert {
display:flex;
flex-direction:row;
}
JSFiddle here: https://jsfiddle.net/visioncreative/ufu6Lcud/3/
Great documentation on Flexbox at CSS-Tricks here, https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you are able to make a custom stylesheet, you should try display: flex;.
Creating container span for your text and then setting them to stand on the same line with flexbox is pretty easy then.
.alert {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="alert alert-info">
<i class="alert-icon-info alert-icon"><!--WARNING : remove the image, it's only there to demonstrate that it's working--><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Info_icon-72a7cf.svg/1024px-Info_icon-72a7cf.svg.png" width="20"/><!--END OF WARNING--></i>
<span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span>
</div>
See here for a complete guide : A Complete Guide to Flexbox
I'm trying out some things with a material designe framework but some things just won't work.
Here is what i got:
screenshot
But I want the text to start on the top and stay there so the text won't jump into another line like in the picture.
I hope you guys can help me.
<p><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
I would use a table, like this:
<table><tr><th><img src="yourimgsrc.jpeg"></th><th><p>Your text here</p></th></tr></table>
This prevents your problem, because the two rows (<th>) end on the same height
I believe this is what you are looking for. You will have to have both, the IMG and the text in one <div> and then surround both of them in a separate <div>
#header{
display:flex;
flex-direction:row;
}
#column1{
display:flex;
flex-direction:column;
}
#column2{
display:flex;
flex-direction:column;
padding-left: 20px;
}
<div id="header">
<div id="column1"><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140"></div>
<div id="column2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
</div>
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.
For the life of me I am unable to get these twitter bootstrap buttons to text wrap onto multiple lines, they appearing like so.
I cannot post images, so this is what it is doing...
[This is the bu] tton text
I would like it to appear like
[This is the ]
[button text ]
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Any help would be much appreciated.
Edit. I have tried adding word-wrap:break-word; but it is not making any difference.
Edit. JSFiddle http://jsfiddle.net/TTKtb/ - You will need it expand the right column so the panels sit next to one another.
Try this: add white-space: normal; to the style definition of the Bootstrap Button or you can replace the code you displayed with the one below
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
I have updated your fiddle here to show how it comes out.
You can simply add this class.
.btn {
white-space:normal !important;
word-wrap: break-word;
}
FWIW, in Boostrap 4.4, you can add .text-wrap style to things like buttons:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow
You can add these style's and it works just as expected.
.btn {
white-space:normal !important;
word-wrap: break-word;
word-break: normal;
}
I need to add a custom class to every anchor tag found within h1 tags, leaving all other anchor tags untouched.
At the moment I have:
$content = preg_replace("/(<h1.*?<a.*?)/i","$1 class=\"mystyle\"",$content);
The problem with the above is that it only adds my class to the first anchor found in any h1 header and I'm really struggling to figure out how to correct this.
To clarify,
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
Becomes,
<h1><a class="mystyle" href="page.html">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1><a class="mystyle" href="page.html">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit.</h1>
Bit of a regex beginner so apologies if this is a really stupid question,
I have searched for hours and hours trying to get this on my own so I hope someone can help!
Cheers
Done with the help of $xpath->query('//h1//a');