I have an html file a part of which is as follows:
<ul>
{% for tree in tree}
<li> <a href="{{ url_for('fruits', tree_id=tree.id) }}">
{{ tree.tree_name }} - {{ tree.tree_year }}
</a>
<span class="hyphen"> - </span>
<a href="{{ url_for('stats', tree_id=tree.id) }}">
stats
</a></li>
{% endfor %}
</ul>
and the corresponding .css is as follows:
.hyphen{ margin-left:80px; margin-right:80px }
But the span tag doesn't seem to have any effect at all. I want to give space before and after the hyphen but it isn't working. Why so?
A span is by default an inline element, inline elements can't have vertical padding / margin.
To fix this you can do two things,
the first is to give the element display: block but this is most likely not what you want as it was inline before.
Then there's display: inline-block as noted by D4V1D which will give you the ability to style that span like a block level element.
Add
.hyphen {
display: inline-block;
}
to your <span>.
You can't set width, height and vertical margin and padding properties to elements which aren't block elements.
Related
I'm trying to generate fixed-width buttons with the name of a file wholly contained within each. The following works, but seems pretty crude. On the plus side, it is nicely responsive to window width.
(It's possible that Bootstrap 3 is causing the problems? )
{% for attachment in attachments %}
<div class="fixwidth"> {{attachment.date}}
<a href="{{ attachment.attachment_file.url }}">
<!-- File icon on a styled link button: -->
<button type="button" class="btn fixwidth">
<span class="glyphicon glyphicon-file"/>
<!-- the following seems to be the only way to keep an over-long filename without spaces inside the button area! -->
<div class="in-button">{{ attachment.filename }}</div>
</button>
</a>
</div>
{% endfor %}
and the css
div.fixwidth {
width: 200px;
display: inline-block;
}
div.in-button {
width: 60px;
display: inline-block;
overflow-wrap:break-word;
}
button.fixwidth {
width: 80px;
white-space: normal;
overflow-wrap: break-word ;
}
What I don't like is that three fixed widths seem necessary. 200px for the containing div, without which the buttons won't line up if the number of files exceeds the capacity of one line. 80px, to set a button size leaving enough space for the date. And 60px to prevent the filename overflowing outside the confines of the button, should it lack any spaces and needs breaking by overflow-wrap. Experimentally, this sums to need to be 20px less than the button width.
Anyone able to suggest a better way?
(It's not a Django question. Django just generates this html for a multiple of attachments )
I put ckeditor widget to my post form with {{ form.content }} and I need to change its style display: inline-block to display:block.
Here you can see the code which I need to change
I have an html list element that renders blogposts as a list.
<ul class="posts">
{{ range .Data.Pages -}}
<li>
<span class="postlist_container">
{{ .Title }}
<time class="pull-right post-list" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> </span>
</li>
{{- end }}
</ul>
The blogposts are written in markdown (well Rmarkdown) and I specify a source image that should appear in the list.
---
thumbnail: "/post/source/image_tn.jpg"
---
I managed to get the image rendered alongside the title of the post with adding an tag inside the list.
<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">
This is not ideal since there is a bullet point, then title, date and image. What I would like is that the image replaces the bullet point.
I have read about using CSS for this, but the examples always use an absolute path to one image, e.g.
.posts {
list-style-image: url("source/image.jpeg");
}
Is there a way to refer to the image from the Param.thumbnail inside the markdown file?
This didn't work:
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
Any help would be greatly appreciated.
To make your CSS style sheet use the markdown, you need to include it inside the HTML templates.
insert once inside your template the rule(s) you want to update on the fly (best is to insert inside <head>, but anywhere else will work
<style>
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>
instead
<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">
Best is to read about the template tutorial from blogdown
https://bookdown.org/yihui/blogdown/templates.html#a-minimal-example
The partials/ directory is the place to put the HTML fragments to be reused by other templates via the partial function. We have four partial templates under this directory:
header.html main defines the <head> tag and the navigation menu in the <nav> tag.
if you read further, you can see that the {{ partial "head_custom.html" . }} is the file (head_custom.html) where you might insert
<style>
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>
Instead of using list-style-image, why don't you use one of the pseudo elements? Like so!
li{
position: relative;
padding-left: 5px;
}
li::before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}") no-repeat center center;
}
Hope this helps.
I am building new website and I've run into a little problem.
When I added next to my div and after the div end, but the hover does not work on the div. When I delete <a href"about.php"> and </a> the hover works.
Here is HTML code:
<div id="centerbox">
<div class="profile"></div>
<a style="display:block" href="about.php"><div class="about"></div></a>
</div>
</div>
And here is CSS Code
#centerbox {
width:988px;
height:462px;
margin-top:8.7%;
margin-right:auto;
margin-left:auto;
}
.about {
width: 150px;
height: 150px;
display: block;
margin-left:15.8%;
margin-top:-150px;
background:url(/images/about1.png);
background-repeat:no-repeat;
}
This problem is that the div is a block element and the a tag is an inline element. A block element cannot go inside of an inline. You'll need to change your <div> to a <span> or something that is inline.
When an block element is inside the inline the browser will usually try to fix it by moving it out of the inline element.
If you need the effect of the block element on say the <span> mentioned above you could add display:block to the span.
See this post for further clarification
Make the .hover on your (a) tag rather then the class you are applying it to that should probably work :)
I solved it. I changed the <a style="display:block" href="about.php"><div class="about"></div></a> to <div class="about" onclick="window.location = 'about.php';">
You don't want to store a div inside of an ref tag. You can give that ref tag a class though which will give it styling for that class
I'm having issues with a little feature on my site's products' page 'tools' bar. I want to have it float to the right of my site's breadcrumb navigation, making it inline with the breadcrumb navigation. But it's going to the next line.
Here's what it looks like:
<div id="breadcrumbsForStore">
<h5>
Home
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
{{ page.name }}
</h5>
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
</div>
And here's the CSS:
#breadcrumbsForStore{width:960px; font-family: futura; text-align:left;margin:20px 0px 25px 0;padding:0px 0 5px 0;clear:both; margin-left: auto; margin-right: auto; text-transform:uppercase;}
#breadcrumbsForStore h5{font-size:10px; font-family: futura;}
#breadcrumbsForStore h5 a{color:#525252; border-bottom:0px dotted #0d0d0d; letter-spacing:1px; padding: 10px 3px 10px 3px;}
#breadcrumbsForStore h5 a:hover{color: #0d0d0d;}
ul#shoptools{float:right; display:inline;}
ul#shoptools li{float:left; display:inline;}
Here's where the problem is (it says "SIZE GUIDE / FILTER:")
http://shopmoonfall.bigcartel.com/products
Change your html like this:
<div id="breadcrumbsForStore">
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
<h5>
Home
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
{{ page.name }}
</h5>
</div>
The H5 element is display:block style by default. If you add a style to make it inline, like
h5 {display: inline-block}
then floating elements will show next to it.
Fiddle here:
http://jsfiddle.net/t84yU/
(note I changed your width from 960 px to 560 px also, just to make it more readable)
I'm not 100% clear on what your trying to do but the way you nested the <h5> is kinda ugly.
If you want the <ul> on the same line as the <a> tags you should include the <ul> in the <h5> tag.
If you don't want to include the <ul> in the <h5>, make sure the <h5> is display: inline; also. All elements on the "line" must be display: inline/inline-block; for it to appear on one line. Headers are display: block; by default so the <h5> is pushing down the unordered list.