I need to have small font-size for an unorder list that is inside jumbotron div class. I tried to style it with Css, but none works.
This is the code that need to be smaller:
HTML:
<div class="jumbotron">
<h3>Informazioni di debug del servizio deployato:</h3>
<hr>
<h4><ul style="list-style-type:disc">
<li>ID: {{ processDefinition.id }}</li>
<li> Name: {{ processDefinition.name }}</li>
<li>Deployment ID: {{ processDefinition.deploymentId }}</li>
<li>Category: {{ processDefinition.category }} </li>
<li>URL: {{ processDefinition.url }}</li>
</ul></h4>
<hr>
</div>
EDIT: Yes i know is an error i forget to delete it and is here only because i do many edit and try before post here :)
PS: But why -2 votes?
I think the problem may be that the entire list <ul> is in the header <h4>. Try adding it separately, because the default list is assigned according to the size of the text header <h4>, and add the css properties for ul element:
ul li {
font-size: 12px;
}
Your mistakes:
You cannot have <ul> inside a <hX> tag.
For the list-style-type: disc to be visible, you need to add margin-left to the <li> or padding-left to the <ul>.
For getting a smaller size, use font-size: 0.75em or something similar:
Corrected Code:
<div class="jumbotron">
<h3>Informazioni di debug del servizio deployato:</h3>
<hr>
<ul style="list-style-type: disc; padding-left: 20px; font-size: 0.75em;">
<li>ID: {{ processDefinition.id }}</li>
<li> Name: {{ processDefinition.name }}</li>
<li>Deployment ID: {{ processDefinition.deploymentId }}</li>
<li>Category: {{ processDefinition.category }} </li>
<li>URL: {{ processDefinition.url }}</li>
</ul>
<hr>
</div>
I think you can do on this way:
.jumbotron h3 hr h4 ul li a{
font-size: 0.1rem
}
Or adding a class on the jumbotron to change onlye the font-size:
<div class="jumbotron small-text">
<h3>Informazioni di debug del servizio deployato:</h3>
<hr>
<h4><ul style="list-style-type:disc">
<li>ID: {{ processDefinition.id }}</li>
<li> Name: {{ processDefinition.name }}</li>
<li>Deployment ID: {{ processDefinition.deploymentId }}</li>
<li>Category: {{ processDefinition.category }} </li>
<li>URL: {{ processDefinition.url }}</li>
</ul></h4>
<hr>
.small-text h3 hr h4 ul li a{
font-size: 0.1rem
}
or
.small-text{
font-size: 0.1rem !important;
}
Related
I have a dropdown in BS4 navbar. The content goes out of the container on mobile device. I want to wrap the text through css.
Following code works:
HTML:
<div class="dropdown-menu" >
{% for department in object.departments.all %}
<a class="dropdown-item text-wrap" href="">
{{ department.name }}</a>
{% endfor %}
</div>
CSS:
.dropdown-menu {
width: 30vw;
}
But following code doesnt work:
HTML:
<div class="dropdown-menu" >
{% for department in object.departments.all %}
<a class="dropdown-item" href="">
{{ department.name }}</a>
{% endfor %}
</div>
CSS:
.dropdown-menu {
width: 30vw;
}
.dropdown-item{
text-wrap:normal;
}
I think you are looking to use the white-space property or possibly to use word-wrap or text-overflow.
I've not heard of the text-wrap property in css.
my problem is that the hight of the content isn't recognised which causes the body to be smaller than the content which leads to a lot more problems.
HTML:
<section id="contentbox">
{% for post in site.posts %}
<article>
<h2>
<a href="{{ post.url }}">
{{ post.title }}
</a>
</h2>
<time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date_to_long_string }}</time>
<p>
{{ post.caption }}
</p>
</article>
{% endfor %}
</section>
CSS:
#contentbox {
height: 100%;
}
article {
width: 45%;
float: left;
height: 120px;
padding: 2px 0 0 2px;
}
I have a bunch of articles listed but the section stays height:0
Put a clear fix element after your floating elements.
E.g.: <div style="clear: both;"></div>
It's a very common issue.
I am a bit new to CSS and have been struggling with why a selector has been applying to a classless div.
Here is my css code:
.page-header p, form{
font-family: 'Raleway', sans-serif;
float: right;
margin: 5px;
padding-top: 30px;
}
And here is my HTML code:
<div class="page-header">
{% if user.is_authenticated %}
<form action = "{% url 'logout' %}">
<button type="submit">Logout</button>
</form>
<form action = "{% url 'errandlist' %}">
<button type="submit">View my errands</button>
</form>
<p>Welcome {{ user.get_username }}.</p>
{% else %}
<form action = "{% url 'login' %}">
<button type="submit">Login</button>
</form>
<form action = "{% url 'signup' %}">
<button type="submit">Sign up</button>
</form>
<p>You are not logged in.</p>
{% endif %}
<h1>bingoHelper</h1>
</div>
<div>
{% block content %}{% endblock content %}
</div>
The first div is properly applying the page-header class. The problem is, the bottom div is somehow using the page-header class even though there is no class specified.
For example, in the following HTML file that shows the block content, the form is floating right and has the Raleway font:
{% extends "base.html" %}
{% block content %}
<h2>Sign up</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Sign up</button>
</form>
{% endblock content %}
Any help would be greatly appreciated!!
If you want to take effect your css to page-header div, Specify the class in the <form> tags. See below css code:
.page-header p, .page-header form{
font-family: 'Raleway', sans-serif;
float: right;
margin: 5px;
padding-top: 30px;
}
You css code:
.page-header p, form{
font-family: 'Raleway', sans-serif;
float: right;
margin: 5px;
padding-top: 30px;
}
is applying the css to the p element inside your div with class .page-header AND form elements.
Remove the , form from your css, so it only applies to div elements with class .page-header
UPDATE
To have it apply to only form inside of div with class .page-header:
.page-header p, .page-header > form {
font-family: 'Raleway', sans-serif;
float: right;
margin: 5px;
padding-top: 30px;
}
I have a html block like:
<div id="sidebar">
<ul class="sidebar-menu">
{% for name in name_list %}
{% if name == 'abc' %}
<li class="sub-menu special">...</li>
{% else %}
<li class="sub-menu">...</li>
{% endif %}
{% endfor %}
</ul>
</div>
The css for this block is:
#sidebar {
width: 210px;
height: 100%;
position: fixed;
background: #EFF0F6;
overflow-y: scroll;
}
Now i want to override the background color for list element with class special to black. But i am not able to override it. How to do that?
Note: The templating language is django's templating language.
Just use a more specific selector:
#sidebar .special {
background: #000;
}
Please try this:
ul.sidebar-menu li.special{background-color:#000000}
I have a script written in Python which will pass a list to a HTML file. I have a problem in displaying the elements in the html page. As per the code written below, the elements are displayed vertically down as a list. I wanted the elements to be displayed in a single line horizontally.
<!doctype html>
<html lang="en">
<body>
<div id="content">
{% for item in VOD1 %}
<li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</b></li>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
{% endfor %}
{% for item in VOD2 %}
<li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</li>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
{% endfor %}
</div>
</body>
</html>
I tried by adding a '-' after the '%' in the for loop to trim the white spaces but don't work. If I remove the line break then assets are displayed in a line but it's in a auto fit manner.3 assets details are displayed in each line instead of the whole details in a single line. Can someone please shed some light into this?
If I get you correctly, you want the <li> elements to be displayed inline rather than as block elements:
li { display: inline-block }
<ul>
<li>ID: 1</li>
<li>Title: foo</li>
<li><img src="//lorempixel.com/400/200"</li>
</ul>
Edit: as I think of it, you could also want each ID/Title as a header to the image, and every of those components horizontally aside each other. Like so:
div, li { display: inline-block }
img { display: block }
<div>
<ul>
<li>ID: 1</li>
<li>Title: foo</li>
</ul>
<img src="//lorempixel.com/400/200">
</div>
<div>
<ul>
<li>ID: 2</li>
<li>Title: bar</li>
</ul>
<img src="//lorempixel.com/400/300">
</div>