I'm trying to create a paginator which inserts an ellipsis in the middle. My issue is the ellipsis ends up at the end of the row instead of in the middle like I'm placing it in the code. What am I doing wrong?
<div>
<div class="pagination">
1
2
3
<img src="/static/svg/ellipsis-h-solid.svg" style="width: 15px">
13
14
15
</div>
<p style="margin-left: 10px;">30 trades</p>
</div>
EDIT:
I also tried setting display: inline and display: inline-block but it still appears at the end
<div class="pagination">
<a href="?page=1" >1</a>
<a href="?page=2" >2</a>
3
<img src="/static/svg/ellipsis-h-solid.svg" style="width: 15px; display: inline;">
<a href="?page=13" >13</a>
<a href="?page=14" >14</a>
<a href="?page=15" >15</a>
</div>
in my computer the img appears in 4th place, I strongly believe your anchor has good previous styling which disturbs the img placement, I beleive your anchor is sorted using either javascript or CSS style
please check that you have any CSS style like this, add the img tag also for that CSS
{
display: flex;
flex-direction: row;
}
may be try to manually give order like this example (optional)
:nth-child(1) { order: 2; }
.pagination,
.pagination img {
float: none;
}
I think you should check the float property.
Related
I'm trying to use an image as a link but only one image can be clicked and the other images aren't working as links. I use text-center class
my HTML code:
<div class="foot text-center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>
and my css file only has for "foot" class:
.foot{
height: 100px;
background-color: #401BE6;
}
what is the problem?
u need to define a display: block; on that <a href=''> element
Inline elements can't be aligned center unless we use the display: block property on them so apply the display: block property to the anchor elements
I hope I interpreted your desired final outcome.
https://jsfiddle.net/vLk8gtjs/30/
Make your buttons inline instead of vertically stacked.
Therefore: create a new class and class each link. I changed the bg to make it easier for me to work with
.img_links {
text-align: center;
display: inline-block;
width: 32%;
}
This aligns links within your div footer box.
I'm not sure why your links aren't working. Try this solution out and leave a comment if your images are displayed, but not clickable.
OPTION ONE
.foot.text-center {
display: block;
text-align: center;
}
OPTION TWO (INLINE CSS)
<div class="foot text-center" align="center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>
Using only HTML and CSS, when I use the a tag it is prefixing it with an _
I was thinking I had used the content tag some where, but to my surprise, it persists in a JSFIDDLE
<section>
<h3>Activity</h3>
<a href="#">
<div class="activity">
<div>Some</div>
<div>> 198 days?</div> <!-- why does this render as _> 198 days? -->
<div>Progressing</div>
</div>
</a>
<br />
> does not have underscore despite having >
</section>
CSS
.activity {
background: #3ea18f;
clear: both;
margin-bottom: 2%;
border-radius: 4px;
padding-left: 10%;
}
.activity div {
width: 33%;
display: inline-block;
}
RESULT
Removing the a tag resolves the issue but, I need the a tag
Likewise, removing the CSS .activity div also removes the _ but obviously I need the style
Same issue persists if I use <div>> 198 days?</div>
I don't know it this behaviour is intended or if it is a rendering bug.
In front of the div with the _ there is a space because you have a new line, and if you add an outline around all elements (updated fiddle) you see that the _ is between the two elements.
If you add another element (next fiddle) you see that there is another _. So the underscore appears between all inline-block elements in the row.
The problem is not related to >.
To get around this problem without changing the rest of the appearance you might add text-decoration to none to the surrounding a.
You don't have a > does not have underscore despite having > in front because there is no space between the <a href="#"> and the > does not.
<section>
<h3>Activity</h3>
<a href="#">
<div class="activity"><div>Some</div><div>> 198 days?</div><div>Progressing</div>
</div>
</a>
<br />
> does not have underscore despite having >
</section>
https://jsfiddle.net/y4zpgkfe/
http://exfluor.com/productsMain.html
I can't seem to get the boundary of the clickable link area to stay within the bounds of the <div> it is making a link(11 buttons linking to product categories). Even with using a class to specify the width, it spans the entire width of the <td> it is in. I've run out of options.
<a href="bycategory.php?cat=anhydrides">
<div class="category" align="center">
Anhydrides<br><img src="images/cat/anhydrides.jpg" alt="">
</div>
</a>
Use block display:
.catTable a {
...
display: block;
}
To set element's witdth it must have block or inline-block display. Also consider setting overflow: hidden.
Add word-wrap: break-word property to your as. It will break your links appropriately. You should pay attention though: You will not get automatic hyphenation from this. For that you would have to look into some library like hypenator
See this fiddle as an example: http://jsfiddle.net/8Lrhr22u/
Your HTML is not valid. You can't put div into a (well you can but it's not reliable). Instead try to improve markup a little (span instead of div):
<a href="bycategory.php?cat=hydrofluorocarbons">
<span class="category" align="center">Hydrofluorocarbons<br>
<img src="images/cat/hydrofluorocarbons.jpg" alt="">
</span>
</a>
However it's not really necessary, since setting a to display: inline-block should fix the issue:
.catTable a {
display: inline-block;
}
I have the following code. Only part of the image is clickable.
HTML
<div class="row">
<div class="col-md-4 text-center">
<div class="portfolio-item">
<a>
<img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>
</div>
</div>
</div>
CSS
.btn -> bootstrap CSS class
.row -> bootstrap CSS class
.col-md-4 -> bootstrap CSS class
.text-center -> bootstrap CSS class
.img-portfolio {
margin: 0 auto;
}
.project-img-responsive {
display: block;
max-width: 50%;
height: auto;
}
.portfolio-item {
margin-bottom: 25px;
}
The problem is only with chrome. Works fine in mozilla.
What property am I missing out or getting wrong?
Hello try to add attribute Href
<a href="#" >
<img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>
it works with me .
If #DStruOne's suggestion doesn't work trying adding display: inline-block to your anchor element.
a { display: inline-block; }
If you want to trigger a modal, then maybe move
data-toggle="modal" data-target="#project-modal"
to your anchor tag. In my opinion you shouldn't add '.btn' class to your image. Try moving it to anchor tag too.
Given that the JS fiddle works fine, I suspect another (invisible) element on the page is overlapping your image. I managed to fix a problem similar to this by setting the z-index and position (because the first won't work without the second) of the <a> tag...
position: relative;
z-index: 100;
I have following code
<div class="expense"><img class="money"/><span class="total"></span></div>
This produces the div and puts the image on one line and the content in span tag on other line. How can I put those on the same line?
css: display: inline-block or display: inline
You could also do:
<div class="expense" style="display:table-row">
<img class="money" style="display:table-cell" />
<span class="total" style="display:table-cell"></span>
</div>
It's not the neatest, but it's another option
You can use vertical-align : super to span.
You could use flex:
.expense {
display: flex;
align-items: center;
}