for my website I'm trying to bring two td closer. They are so far apart, I've been trying to put the td with numbers and td with image together. This is the domain for my webiste:
If you check the code, you can see it's horrible which is probably why I'm having such a hard time trying to bring two td closer.
To be more clear, what I'm trying to do is
<table>
<td class="vert-align" style="padding:0;" >
<div class="votes">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
#and
<td class="vert-align">
{% if post.main_image %}
<h4 id="lineForUrl">
<a href="{{ post.url }}" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="{{post.get_image_url}}" class="img-rounded" alt="Cinque Terre" height="75" width="75"/><span id="title-font" title="{{post.title}}">
{{ post.title }}</span><span style="margin-left: 15px;" class="domain">({{ post.domain }})</span></a>
<span class="discuss" style="color:red;">enter</span>
<br />
<span class="post-info">
{% if user.is_authenticated %}
{{ post.moderator.user }}wrote
{% else %}
{{ post.moderator.user }}wrote
{% endif %}
#{{post.category}}</span>
</h4>
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>
</td>
</table>
#closer
Try this CSS line (if I have correctly understood your problem)
#cell td.vert-align:first-child { width: 40px;}
It will get your td with numbers and td with images closer
Related
I'm pretty set on using Material Design Icons for the simple fact that they have a lot more IT oriented icons so it just makes things much easier. I'd like to achieve something similar to FontAwesome's Fixed Width feature, which ensures there's an even space after the icon that remains consistent.
How icons currently look:
How I want the icons spaced:
As far as I can tell so far, however, MDI does not offer this (or I'm missing it), so what are some ways to achieve something similar efficiently without hacking with !important or setting unnecessary margins?
Store-Info CSS:
.heading-block {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1em;
margin: 5px 0;
}
.heading-content > .store-info p {
font-weight: 600;
font-size: 1em;
line-height: 10px;
margin: 1.7em 0;
}
.heading-content > .store-info {
margin-left: 1.5em;
}
Store Info HTML:
<div class="heading-content">
<div>
<span contenteditable="true" id="store-number" class="store-number">{{ store.store_number }} </span><span class="divider">/</span><span class="store-name">{{store.name}}</span>
</div>
<div class="store-info">
<p id="address_full"><span class="mdi mdi-map-marker"></span>{{ store.street_address }} {{ store.city }}, {{ store.state }} {{ store.postal }}</p>
<p id="address_pull_hidden" style="display:none;">{{ store.street_address }} {{ store.city }} {{ store.state }} {{ store.postal }}</p>
<p>
<span class="mdi mdi-earth"> </span>
{{ store.timezone }}
</p>
<p>
<span class="mdi mdi-phone"></span>
{{ store.phone }}
</p>
{% if not store.mpls_only %}
<p>
<span class="mdi mdi-phone-voip"></span>
{{ store.xo_tn }}
</p>
{% endif %}
{% if store.mpls_only %}
<p>
<span class="mdi mdi-phone-classic"></span>
MPLS Only
</p>
{% endif %}
<p>
<span class="mdi mdi-map-marker"></span>
<span id="local-time">00:00:00 am</span>
<span class="status open">{{ store.status }}</span>
</p>
<p class='store-closed' style="display: none;">
<span class="mdi mdi-map-marker"></span>
Close Reason: <span class="close_reason">{{ store.close_reason }}</span>
</p>
<p class="weather"><span class="mdi mdi-weather-cloudy"><span id="weather-main">Clear</span></p>
<a target='_blank' class="edit" href="/admin/stores/store/{{store.pk}}/change/">Edit information for Store {{store.store_number}}</a>
</div>
</div>
<br>
<div id="map-wrapper">
<div id="map-container" class="container">
<div id="map"></div>
<div id="pano"></div>
</div>
</div>
Thanks in advance, & worth noting I'm not much of a front end guy so if you see something that seems odd, feel free to mention it!
You can create a class to make that happen.
.mat-fw {
text-align: center;
width: 1.25em;
}
I seem to be having trouble to extend my background color for my 2 column layout. The user can add categories so the background color has to be able to adjust with the amount of categories the user wants to add in.
html file:
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
css file:
&--background {
background-color: $mainBackground;
padding-bottom: 2rem;
}
I feel like it has to do with the way I'm formatting my divs
Since you mentioned in comments that you are using floats, simply add a parent element that will have the background and then add something known as clearfix, at the end of it.
HTML:
<div class="parent--background">
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
<div class="clearfix"></div>
</div>
CSS:
.clearfix::after {
content: "";
clear: both;
display: table;
}
I am trying to set equal height for every single item in the list. Here as you can see in the picture some channels have companion channels(e.g CNN & HLN, BNN & CP24), they are having a different height setting as compared to the channels without any companion channels. How do I make it the same height? The second thing I am trying is to not have any channels get in the line of the alphabets(e.g the Cottage Life channel gets more to the left which gets in the line of the alphabets). Also how do I put a space between rows, I tried putting in which didn't work(e.g after the A head and its channels row i need to put a blank space).
<div class="container col-lg-8" style="float:Left">
<ul class="w3-ul w3-card-4" *ngFor="let head of channelDisplayHeads" style="clear:both">
<h1 align="center" style="background-color:#0083BC;">
<font color="white">{{ head }}</font>
</h1>
<ul *ngFor="let channel of channelList">
<li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
<div *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
<img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}">
</div>
<ng-template #noCompChannel>
<img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}">
</ng-template>
<br>
<span class="w3-left">
<mark>
<font size="1">{{ channel.cbsCode }}</font>
</mark>
</span>
<span class="w3-right">
<font size="2">{{ channel.pickCode }}</font>
</span>
</li>
</ul>
</ul>
</div>
I have a Jekyll collection document in the collection coding:
---
title: 'iOS iConify'
rawname: iosiconify
image: {{site.img}}/z-iosiconify.png
layout: post
link: https://iosiconify.github.io/
---
Hi!
I'm trying to render all of the documents in the collection coding on an html page, and I have the following code:
{% for post in site.coding %}
<tr id="{{ post.rawname }}-desktop">
<td id="left">
<a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
<img src="{{ post.image }}">
</a>
</td>
<td id="right">
<h2>{{ post.title }}</h2>
<h4>{{ post.content }}</h4>
</td>
</tr>
{% endfor %}
I'm referencing a lot of my custom front matter variables in it, such as {{ post.rawname }}. However, when the page builds the only part that works is {{ post.content }}.
Here is the rendered HTML:
<tr id="-desktop">
<td id="left">
<a href="" target="blank" id="-desktop-a">
<img src="">
</a>
</td>
<td id="right">
<h2></h2>
<h4><p>Hi!</p>
</h4>
</td>
</tr>
Do you have any idea why none of the custom front matter variables are working and how I can get them to work?
There is an error in Front-matter that prevents Jekyll to correctly processing it, displaying only the content.
This line image: {{site.img}}/z-iosiconify.png should be image: z-iosiconify.png.
Then when displaying the documents preppend site.img like {{ post.image | prepend: site.img }}.e.g.:
{% for post in site.coding %}
<tr id="{{ post.rawname }}-desktop">
<td id="left">
<a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
<img src="{{ post.image | prepend: site.img }}">
</a>
</td>
<td id="right">
<h2>{{ post.title }}</h2>
<h4>{{ post.content }}</h4>
</td>
</tr>
{% endfor %}
Hello I have two contents in my table, so two boxes that contain contents in html. I want to reduce the distance between these two boxes, but I realized size of one box is too big that they are just white space. I'm having trouble reducing that size. can someone please help me with this?
so, cell x and cell y that's in same row to be located closer.
<table class="table">
<tr id="cell">
---------------------------------------------------------------(one cell)
<td class="vert-align">
<div class="voting-space">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>
</td>
--------------------------------------------------------------------(the other cell)
<td class="vert-align">
{% if post.url %}
<h4 id="line">
<img src="{{post.image}}" height="85" width="85"/><span id="title-font">{{ post.title }}</span>
<span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
<span class="discuss" style="color:red;">토론장 입장</span>
<br />
<span class="post-info">{{ post.pub_date | timesince }}전/{{ post.moderator.username }}작성/<i class="fa fa-eye"></i>{{post.views}}/{{post.category}}</span>
</h4>
{% else %}
<h4>{{ post.title }}<span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}
For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".