I want to divide into 3 sections.
<li>
<font size="1">
<div>${comment.postingDate}</div>
<div>LikeLove</div>
<div><span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</div>
</font>
</li>
But I think this is wrong design. I am new to html so was wondering how to achieve this efficiently.
The last line of the comment must look like
Date Like Love Here should be sign with count.
As per my observation you are looking for the last line in Image.
remove font tag
<div class="col">${comment.postingDate}</div>
<div class="col">
LikeLove
</div>
<div class="col">
<span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</div>
with style
.col{position:relative;float:left;top:0}
I think this will do
I think i got what i was looking for.
<li>
<font size="1">
<span>${comment.postingDate}</span>
<span>
Like
Love</span>
<span class="pull-right">
<span class="badge"><i class="icon-thumbs-up"></i><span class="like-count">1</span></span>
<span class="badge badge-important"><i class="icon-heart"></i><span class="love-count">1</span></span>
</span>
</font>
</li>
Related
I'm trying to get a small Bootstrap (4) badge next to a big title. What i've tried:
<h1>Product <span class="badge badge-primary">Version 1</span></h1>
and
<h1>Product></h1>
<span class="badge badge-primary">Version 1</span
What I want:
What is the easiest way to achieve this?
A cleaner approach would be to use the Bootstrap 4 utility classes that have been provided:
<h2 class="h3 d-inline-block">Product</h2>
<span class="badge badge-primary align-top">Version 1</span>
Output
Reading Material
display
vertical-align
Something like
<div>
<h1 style="display: inline-block">Product</h1>
<span class="badge badge-primary" style="vertical-align: top">Version 1</span>
</div>
might do the trick.
You should use the first version:
<h1>Product <span class="badge badge-primary">Version 1</span></h1>
And apply the following styles on .badge
font-size: 10px;
vertical-align: top;
top: 10px; //depends on your font-size
position: relative;
In addition to the accepted answer, if you're using Bootstrap, you can also control the size of the badge using the css "text-small", "text-medium" or "text-large". Example:
<div>
<h1 style="display: inline-block">Product</h1>
<span class="badge badge-primary text-medium" style="vertical-align: top">Version 1</span>
</div>
I have an HTML document that has a lot of elements that have the style class .ps-label. I have a style I need to apply to all of them except one element. That element is found in a div that looks like this:
<div class="ps_box-edit psc_disabled psc_has_value g3form-hdr-formid" id="win5divG3FORM_WRK_G3FORM_ID">
<div class="ps_box-label" id="win5divG3FORM_WRK_G3FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G3FORM_WRK_G3FORM_ID">415</span>
</div>
There are two ids in the div that change. They are #win5divG3FORM_WRK_G3FORM_ID and #win5divG3FORM_WRK_G3FORM_IDlbl. The number will differ, based on a couple of different conditions. Because of this, I have to do pattern matching if I want to use this id.
How can I select all elements with the class .ps-label except for the one that is inside that div?
I have tried the following selector, but it isn't quite right.
.ps-label:not([id$="divG3FORM_WRK_G3FORM_ID"]) { }
It doesn't work because it doesn't refer to the span that has the label. It refers to the parent. How can I exclude the child of a div that has that specific id?
I've tried using the child selector > to get the descendent of the the div with that id, but my syntax must be wrong, because Chrome doesn't accept it as a valid selector:
.ps-label:not([id$="divG3FORM_WRK_G3FORM_ID"] > div > span) { }
What am I doing wrong with this? Is this even possible?
I would add one rule that targets all the .ps-label then another that targets your exception
.ps-label{
color:red;
}
/* exception rule*/
#win5divG4FORM_WRK_G4FORM_IDlbl .ps-label {color:blue;}
<div class="ps_box-edit psc_disabled psc_has_value g3form-hdr-formid" id="win5divG3FORM_WRK_G3FORM_ID">
<div class="ps_box-label" id="win5divG3FORM_WRK_G3FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G3FORM_WRK_G3FORM_ID">415</span>
<div class="ps_box-label" id="win5divG4FORM_WRK_G4FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G4FORM_WRK_G4FORM_ID">416</span>
<div class="ps_box-label" id="win5divG5FORM_WRK_G5FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G5FORM_WRK_G5FORM_ID">417</span>
</div>
another option could be to use this
div.ps_box-label:not(#win5divG4FORM_WRK_G4FORM_IDlbl) + .ps_box-value{
color:green;
}
<div class="ps_box-edit psc_disabled psc_has_value g3form-hdr-formid" id="win5divG3FORM_WRK_G3FORM_ID">
<div class="ps_box-label" id="win5divG3FORM_WRK_G3FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G3FORM_WRK_G3FORM_ID">415</span>
<div class="ps_box-label" id="win5divG4FORM_WRK_G4FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G4FORM_WRK_G4FORM_ID">416</span>
<div class="ps_box-label" id="win5divG5FORM_WRK_G5FORM_IDlbl">
<span class="ps-label">Form ID</span>
</div>
<span class="ps_box-value" aria-disabled="true" id="G5FORM_WRK_G5FORM_ID">417</span>
</div>
its a sample HTML and I want to get links with mechanize-firefox,which is in <div class="testclass2"> not from others, how can I do it?
<div class="testclass1">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link1</span>
</a>
</span>
</div>
<div class="testclass2">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link 1</span>
</a>
</span>
<ul class="SelectList">
<li class="SelectItem">
<a class="SelectLink">link 2</a>
</li>
</ul>
</div>
You can use $mech->xpath to do that. All you need to do is build the right xpath expression to get all a tags under class="testclass2".
my #links = $mech->xpath('//div[#class="testclass2"]//a');
The expression is the most tricky thing about it. The // means anywhere under where you are. This is like div.testclass2 a in CSS.
In my code I am using bootstrap and adding words to go with the glyphicons. My words are within the span tag and have this awkwardly large space when it is just a normal space.
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View"/>
<h5><span class="glyphicon glyphicon-file"> View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
Here is a jsfiddle example http://jsfiddle.net/zbyztda8/
If any of the solution doesn't work, try removing the font-family. I think the spacing is due to font 'Glyphicons Halflings' . Better way is to have text in separate span without any styling and different span for glyphicon.
HTML:
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View" />
<h5><span class="glyphicon glyphicon-file"> View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
<br/>
<div class="first-draft view">
<h4>First-Draft</h4>
<img src="img/view.png" alt="City View" />
<h5><span class="glyphicon glyphicon-file"></span><span>View Report</span></h5>
<h6><span class="glyphicon glyphicon-unchecked"> Compare</span></h6>
</div>
Demo: http://jsfiddle.net/zbyztda8/2/
See the last section which doesn't have font-family in span tag.
Im using the following code and currently the text and the button is in different side of the
screen,the text is above the button ,I want the both of them be in parallel
how should I do that?
<h4>my text</h4>
<div class="text-right">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
Sounds like this is how you want it
http://jsfiddle.net/xv5rP/
<h4 style="display:inline">my text</h4>
<div class="text-right" style="float:right">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
Add style="display:inline" to your <h4> and <div>
<h4 style="display:inline">my text</h4>
<div class="text-right" style="display:inline">
<i class="glyphicon glyphicon-ok"></i> New
<br />
</div>
you cant give heading tags, because they take the whole line within itself and anything else after it is showed in the next line. So try some other tag of better use span to style it.
dont use <p> either.