My image is higher than my div, how do I tell my div to resize if something inside it is bigger? Here's my code:
<div {% if editable %}style="overflow-wrap: break-word; border-color: grey; border-style: solid; border-radius: 25px"{% else %}style="border-color: grey; border-style: solid; border-radius: 25px"{% endif %}>
<h4>{{ new.header }}</h4>
<p><img src="{{ new.file.url }}" style="max-width: 250px; float: left; height: auto">{{ new.text|safe }}</p>
<p align="right">Дата: <strong>{{ new.added }}</strong></p>
{% if editable == True %}
<a href="{% url 'create_news' %}?news_id={{ new.pk }}" style="display: inline; float: right; padding-right: 5px; margin: 0">
<button type="submit" class="btn btn-warning">изменить</button>
</a>
<form onsubmit="return confirm('Вы точно хотите удалить новость?');" method="post" style="display: inline; float: right; padding-right: 5px; margin: 0" action="{% url 'news_delete' news_pk=new.pk %}">
{% csrf_token %}
<button type="submit" class="btn btn-danger">удалить</button>
</form>
{% endif %}
</div>
The image is floated, so it can go out of its parent container. To avoid that, you can add overflow: auto to the parent container (i.e. the div your HTML example code starts with) That way, the whole floated image will be inside its parent and the border will go around it.
I've tried clearfix as Ahmed Tag Amer suggested, it worked.
Related
I'm trying to have a drop down menu within a navbar; however, it only displays until the limit of my navbar when, ideally, id like it to be "in front" of the navbar so to speak.
Dropdown is cut off
I am new to html and CSS so my exploration is somewhat limited. I have implemented one of bootstrap's navbar's and also used their dropdown button html. I expected this to work okay but, as stated, the dropdown seems to be bound within the navbar (assuming this is because it is within the navbar div?) I have also attempted to follow w3schools guide but I didn't succeed with that either.
Sidenote: because of the limited visibility, the "my account" button logs the user out, this is intentional for now lmao.
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="logo" href="/"><img src="static/Logo_2.png" alt="Logo"></a>
<div class="navbar-nav">
{% if not session["id"] %}
<a class="nav-link" href="login">Log In</a>
{% endif %}
{% if session["id"] %}
<a class="nav-link" href="languages">Languages</a>
<a class="nav-link" href="faq">FAQs</a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Account
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="logout">My Account</a></li>
<li><a class="dropdown-item" href="logout">Log Out</a></li>
</ul>
</div>
{% endif %}
</div>
</div>
</nav>
{% if get_flashed_messages() %}
<header>
<div class="alert alert-primary mb-0 text-center" role="alert">
{{ get_flashed_messages() | join(" ") }}
</div>
</header>
{% endif %}
<main class="container-fluid py-5 text-center">
{% block main %}{% endblock %}
</main>
</body>
.navbar {
height: 100;
overflow: hidden;
}
.navbar-nav {
align-items: baseline;
display: flex;
float: right;
gap: 3em;
}
.nav-link {
color: black;
display: flex;
float: right;
}
.nav-link:hover {
color: red;
}
.btn-secondary {
background: none;
border: none;
color: black
}
.btn-secondary:hover {
background: none;
border: none;
color: red;
}
.logo {
display: flex;
scale: 0.4;
transform-origin: left;
}
your example should be cut down to just the minimum that displays the issue. you have extra classes, some ASP-like code, etc - none of that is needed and just makes it harder to diagnose.
the issue appears to be that your submenu is contained inside the top-level .navbar element, but you are constraining that to have a height of 100 (and you should include the metric here - 100px? 100cm?) with overflow being hidden. this means that the submenu gets cut off.
you could just remove those constraints.
a better solution would involve a rewrite, so the submenu items are positioned absolutely, in a relatively-positioned placeholder. there are examples of this online. example: https://gist.github.com/SamWM/901853
{% if not session["id"] %}
Log In
{% endif %}
{% if session["id"] %}
Languages
FAQs
Account
My Account
Log Out
{% endif %}
...
Remove the "overflow: hidden;" style from .navbar css, so your code should be-
.navbar {
height: 100;
}
i'm trying to use htmx's infinite scroll but it doesn't work properly
<body>
<div class="container">
{% block content %}
<div
{% if products.has_next %}
hx-get="?page={{ products.next_page_number }}"
hx-trigger="revealed"
hx-swap="afterend"
{% endif %}
>
{% include 'includes/cards.html' %}
</div>
{% include 'includes/sidebar.html' %}
{% endblock content %}
</div>
</body>
when i scrolled down product cards sliding to right slightly
and gets smaller on mobile like this
and this:
to this :
can you guys help me understand what im doing wrong please?
i also tried https://infinite-scroll.com/
its perfectly working.
Edit:
views.py
def shop(request):
anabanner = AnaBanner.objects.all()
gender = Gender.objects.all()
categories = Category.objects.all()
colors = Color.objects.all()
materials = Material.objects.all()
query = request.GET.get('query','')
products = Product.objects.all().order_by('-pk')
if query:
products = products.filter(
Q(name__icontains=query)|
Q(sub_name__icontains=query)
).distinct()
paginator = Paginator(products, 8)
page = request.GET.get('page')
cards.html
{% load static %}
{% block content %}
<body>
{% for product in products %}
<div class="product-card">
<a href="{% url 'productpage' product.slug %}"><div class="main-images">
<img id="black" class="black active" loading="lazy" src="{{product.imageURL}}" alt="blue">
</div></a>
<div class="shoe-details">
<span class="shoe_name">
<a href="{% url 'productpage' product.slug %}"><p style="display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 16px;
font-weight: 500;
color: #161616;width: 100%;overflow: hidden;/* white-space: nowrap; */text-overflow: ellipsis;">{{product.name}}</p></a>
</span>
</div>
<div class="price">
<span class="price_num">{{product.price|floatformat:2}}TL</span>
</div>
</div>
{% if product.stock > 0 %}
<div class="button">
<div class="button-layer"></div>
<button name="ekle"
href ="#"
hx-get="{% url 'add_to_cart' product.id %}"
hx-target="#menu-cart-button"
hx-swap="outerHTML"
class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
</div>
{% else %}
<div class="button">
<div class="button-layer"></div>
<button name="ekle"
href ="#"
hx-get="{% url 'add_to_cart' product.id %}"
hx-target="#menu-cart-button"
hx-swap="outerHTML"
class="btn btn-outline-secondary add-btn update-cart">Sepete Ekle</button>
</div>
{% endif %}
</div>
{% endfor %}
</body>
{% endblock %}
cards.css ( i tried deleting paddings it didnt work. )
.product-card {
display: inline-block;
position: relative;
left: 100px;
top:150px;
max-width: 355px;
width: 100%;
border-radius: 25px;
padding: 20px 30px 30px 30px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
overflow: hidden;
}
While practicing Django, I want to mess around with CSS. In this case, I am creating a login page. The login form is currently appearing at the top-left corner of the page. How to I modify to make it right in the center? I am not good with CSS and could use some pointers.
Here are my django files. I try to manipulate the panel-default but it does not work.
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet">
</head>
<body>
<div id="header">
<span class="logo">My Page</span>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
login.html (which extends the base.html)
{% extends "base.html" %}
{% block title %}Log-in{% endblock %}
{% block content %}
<div class="panel panel-default">
<h1>Log-in</h1>
<form method="post">
{{ form.as_p }}
{% csrf_token %}
<p><input type="submit" value="Log in"></p>
</form>
</div>
{% endblock %}
base.css
#import url(http://fonts.googleapis.com/css?family=Muli);
body {
margin:0;
padding:0;
font-family:helvetica, sans-serif;
}
.panel-default{
position: absolute;
top: 50%;
left: 50%;
}
#header {
padding:10px 100px;
font-size:14px;
background:#12c064;
color:#fff;
border-bottom:4px solid #1cdf78;
overflow:auto;
}
Add to .panel-default this CSS- transform: translate(-50%, -50%)
and if you didn't give the parent element of .panel-default CSS position: relative; yet, please do it first.
Align the panel to the center this way:
.panel{
margin: 0px auto;
}
If it doesn't work, then wrap your login form with div tags and align the new div to the center using the the margin property above.
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 am trying to decrease the height of the table cells by using the following CSS, but it is not working.
.table tr>td.vert-align{
vertical-align: middle;
height: 5px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #eaebec;
}
This is my HTML code:
<td class="vert-align">
{% if post.url %}
<h4><a href="{{ post.url }}" style="margin-left: 15px;"> <img src="{{post.image}}" height="70" width="70"/>
{{ post.title }}</a><span style="margin-left: 15px;" class="domain">
({{ post.domain }})</span></h4>
{% else %}
<h4>{{ post.title }}<span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}
<ol class="post-info">
<div class="btn-group btn-breadcrumb">
<span class="btn btn-default">{{ post.moderator.username }</span>
<span class="btn btn-default">{{ post.pub_date | date }}</span>
<span class="btn btn-default">{{post.views}}</span>
discuss
{{post.category}}
</div>
</ol>
</td>
I'm trying to display title/image/domain name in one line that fits nicely to the table, but right now height of the table is too long it just looks odd. I tried height:5px but it won't work
I see no use of a table in your code, but the problem might be caused by you having a ".table" selector instead of a "table" selector.
Dot means classname, no dot means html tag. Please give it a look and if this is not the answer post your whole html code to get a better look at it.
You have already class for your td, so directly use it in your selector.
.vert-align{
vertical-align: middle;
height: 5px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #eaebec;
}
Update:
Decrease the height of your image which is inside the td to decrease the height of cell.