im using smarty engine i need little help my lists are showing gaps when some season has more episodes than the last one so it shows gap i want it to auto adjust gap when some season has more episodes than last one. here is my smarty code.
<div class="seasons">
{foreach from=$episodes key=id item=val name=episode_loop}
{if !isset($lastSeason)}
<div class="tv_container">
<h2>Season {$val.season}</h2>
{elseif $lastSeason != $val.season}
</div>
<div class="tv_container" style="float: left;">
<h2>Season {$val.season}</h2>
{/if}
<ul class="listings episodeListings">
<li class="">
{if $global_settings.seo_links}
<a class="link" href="{$baseurl}/{$routes.show}/{$val.perma}/season/{$val.season}/episode/{$val.episode}" title="{$val.episodetitle}">{if $val.episodetitle}
<span class="epnum">({$val.episode.embeds|#count} links)</span>
<span class="">{$val.episodetitle|truncate:50:"...":true}</span>{/if}</a>
{else}
<a class="link" href="{$baseurl}/index.php?menu=episode&perma={$val.perma}&season={$val.season}&episode={$val.episode}" title="{$lang.show_episode_title|replace:'#season#':$val.season|replace:'#episode#':$val.episode}">{$lang.show_episode_title|replace:'#season#':$val.season|replace:'#episode#':$val.episode}<div class="left">
{foreach from=$val.languages item=flag key=k}
<img src="{$embed_languages[$flag].flag}" style="margin-right: 5px;"/>
{/foreach}
</div> </a>
{/if}
</li>
</ul>
{assign var=lastSeason value=$val.season}
{/foreach}
</div>
<div class="clear"></div>
</div>
Here an fiddle example i want season season 14 to auto adjust under season 17 its just an example some times seasons have 12 episdes and other 20 so it make a huge gap i just want to auto adjust every season under the next season no matter how many episodes it have.
Is this the type of layout that you want to achieve?
EDIT2: another dirty way that could work (but it is not pretty) is to have 2 divs floated, but output all content into one column (with the same width as it will be in two columns after) and then use javascript to check the height of each season and place it in the correct of column: keep track of the height of the height so far and place it in the "shorter" one.
That way the "flow" of the document would still be kinda in order.
EDIT: i just saw that that is not what the goal was. sorry for the wrong solution and someone from the more experienced people can tell me if i should keep it here anyway or remove it...
My guess/understanding of a problem is that you want to have the seasons aligned vertically - so that all the seasons start in the same height and when for example one season has 10 parts on the left side and another season next to it has 20, there will be a blank space under the left "column" (season with only 10 episodes) and then the 2 next seasons will start verticaly aligned.
see the updated fiddle for a better idea what the result looks like
If that is the result you are looking for, all you have to do is clear the floats, a simple way of doing that is adding a div between the columns that should be grouped together
<div class="clear-floats"></div>
and then in css add this
.clear-floats { clear:both; }
considering you have a fix width of one column i'm guessing that you don't always want to have 2 columns only but it should be "as many as fit" to the screen width?
If that is the case my first guess would be to make some javascript to get screen width and divide it by width of one column and then insert this "clear divs" after every n-th column.
But i'm sure there is a better way that some will (hopefully) point out
hope that helps at least a bit
Related
I'm using a gatsby html5up template, and I'm attempting to fix an issue with the block posts not stacking properly. Depending on the screen size, there are gaps because of the different lengths of text each post has. I'm only guessing this is the reason, because I went through and made all the images the same size. I've tried making each of the paragraphs the same height, but that didn't fix it. What do I need to do to fix it so that it won't leave gaps?
My gallery code:
<article className="6u 12u$(xsmall) work-item" key={i}>
<div className="articleDiv">
<a
className="image fit thumb"
href={obj.source}
onClick={e => {
e.preventDefault();
this.toggleLightbox(i);
}}
>
<img src={obj.thumbnail} />
</a>
<h3>{obj.caption}</h3>
<p>{obj.description}</p>
</div>
</article>
Here's the html of the page for one of the posts:
<article class="6u 12u$(xsmall) work-item">
<div class="articleDiv">
<a class="image fit thumb" href="/static/15Fullsize-95788b0c2a3cd7f5b7be5197b162af0b.jpeg"><img src="/static/15Thumbnail-3f93874146f2072572920b9eb793a1cf.jpeg"></a>
<h3>2005 Chevrolet Equinox LT AWD</h3>
<p>Local vehicle with heated leather, moonroof, and lots more. Completely checked out, serviced, and inspected. Only $4,995. Gets around on the ice fantastic.</p>
</div>
</article>
Here is a screenshot in developer to show the way the articles do not match up.
This library for layout probably uses CSS float to build a grid, and you probably have to use clearfix somewhere.
If that is true, the space below the card appears because that card is higher than others (we can see that text has three lines while other cards have two lines).
Trying to make sure that the columns are all floated to the left while not having huge gaps between the rows.
Here's the HTML:
<div class="row hide-for-small">
<div ng-repeat="module in modules">
<div class="medium-6 large-4 columns">
<div class="modBoxContainer">
<div class="modBox">
<div class="modHeading">
<h1><span class="modNumber">{{ module.part }}</span> {{ module.title }}</h1>
</div>
<ul>
<li ng-repeat="section in module.sections">
<a ng-href="#/education/{{ module.url }}/{{section.number}}/01"><strong>Part {{ section.number | number:0 }}: </strong>{{ section.title }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
And as for css it's your average columnar layout through foundation or the like. Columns are fine until they're all different height just as in the picture. I have tried applying n-th child to .modBox and .modBoxContainer but a lot of times it won't even recognize the n-th child rule if used with :nth-child(n+smth)...
How could I assign 1 height to the first three columns and different height to the rest of them? I've tried applying height: auto, height: 100%, combined with min-height or just height rules specified.
Sorry, can't recreate much of the code in JSFiddle or such as it's a huge project I'm working on, but suggestions would be nice. But some suggestions would be great to try as I'm running dry on ideas.
Here's the screenshot of the problem:
NOTE: This solution only works for modern browsers (IE9 and up)
For selecting the first three elements, you can do
nth-of-type(-n+3)
Source
http://www.w3schools.com/cssref/sel_nth-of-type.asp
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
inside a div containing class span9 there are 3 child div containing span4 class, which proves it is possible to make row of 12 columns inside 9 columns. Even this 12 columns does not cover the 100% width of 9 columns.
<div class="span9">
<div class="span4 col-sm-offset-2" id="uniform-requiredMonth">
<span>June</span><select name="data[User][dob][month]" id="requiredMonth" class="span3 text" style="opacity: 0;">
</select>
</div>
<div class="selector span4 col-sm-offset-2" id="uniform-requiredDay"><span>8</span><select name="data[User][dob][day]" id="requiredDay" class="span3 text" style="opacity: 0;">
</select>
</div>
<div class="selector span4 col-sm-offset-2" id="uniform-requiredYear"><span>2015</span><select name="data[User][dob][year]" id="requiredYear" class="span3 text" style="opacity: 0;">
</select>
</div>
</div>
it does not make sense to me. Any help will be appreciated. Thanks in advance.
Layoutit code generator
Use the above code generator which will give you an easy way to nest columns. Start by deleting the Hello World jumbotron, then add a 6 6 grid(from the grid system side menu) then a nested 4 4 4 grid in each. The downloadable output code will show the nesting which is easy to see. Note the clearfix tags are just clearing any floating commands used in surrounding code, the grid divisions menu choices(in the side bar itself) can be over written ie the 2nd one down is 6 6 so just delete them and add 3 3 3 3 (with space as the divider), if you then add this to the two 6's as initially given above you end up with 8 columns of 1.5 width great.
Also in Chrome browser, you can right click and inspect elements (CTRL+Shift+I) and see padding and margins in a diagram on the right hand side which I find very cool.
I have a table within another table, that look like below. What I want is to have the +0 all line up vertically. I have them float:right. The problem is there is a small gap, as you can see, between the two tables, making the +0 of the inner table indent inward a bit. Is there a way to take out these gap?
EDIT Image is taken down by OP
Make sure you have no spacing/padding in the HTML:
<table border="0" cellspacing="0" cellpadding="0">
...
</table>
and in the CSS:
table, th, td { margin: 0; padding: 0; }
This shoud work.
Not to be smug or unhelpful, but you shouldn't really be using tables for that layout anyhow. This looks more like an unordered list than table data (i.e. a spreadsheet).
If you're using tables for anything other than displaying multiple rows of data where each row has the same number of columns, you're kludging layout and content into a mess that will continually give you headaches further down the road.
You could accomplish by nesting a child list inside the parent like this:
<ul class='post'> <!-- outer list -->
<li>
<img src='profile.jpg' alt='profile' />
<span class='name'>Thing Pham:</span>
<span class='rating'>+0</span>
<p>Hey hey</p>
<ul class='comments'> <!-- inner list -->
<li>
<img src='profile.jpg' alt='profile' />
<span class='name'>Thing Pham:</span>
<span class='rating'>+0</span>
<p>Hey there</p>
</li>
<li>
<img src='profile.jpg' alt='profile' />
<span class='name'>Thing Pham:</span>
<span class='rating'>+0</span>
<p>What do I see next?</p>
</li>
</ul> <!-- /inner list -->
<a class='comment-link' href='#'>Comment</a>
</li>
</ul> <!-- /outer list -->
Then use CSS to give everything the appropriate properties for layout.
That said, my guess is that your outer table has a padding on the right which is causing the inner tables to be pushed in the same amount as the "+0" in the outer table. If you give the outer table padding-right:0; it should solve the problem, but the "+0"s will then be butted right up against the right border. You can shift them back by giving a right margin or right padding to whatever element they're in.
You can also specify border-collapse:collapse; (or remove the right border on the inner tables) to get rid of the 'double border' effect that might happen when the padding is removed.
I'm creating templates for a Django project, and I need to create a three column table in HTML, using just CSS, rather than a <table> element.
The reason, apart from any ideological opposition to tables, is that the report needs to be viewed on both desktops as well as handheld devices such as BlackBerry. On handhelds, rather than trying to force three columns on a minuscule screen, the objective is to break up the table into a series of consecutive paragraphs.
Previously, I'd hacked a quick/dirty template out using the Less framework (http://lessframework.com/).
{% for category in article_list_categorised %}
<h2 class="first">{{ category.grouper }}</h2>
{% for item in category.list %}
<h3 class="two first">{{ item.firms.all|join:", " }}</h3>
<h4 class="two">{{ item.subject }}</h4>
<p class="seven">
{{ item.abstract }}
</p>
<h4 class="one">{{ item.source_publication }}</h4>
<h4 class="one">{{ item.publication_date }}</h4>
<h4 class="one">Page: {{ item.page_number }}</h4>
{% endfor %}
{% endfor %}
<footer>
<p class="four off-four">
{% now "l, jS F Y" %}
</p>
</footer>
On screen, this gives a three column table, containing a list of articles. For each article (row), we have:
First column contains the firm name
Second column contains the subject and article abstract
Third column contains the source publication, the publication date and the page number.
And when displayed on the BlackbBerry browser, it breaks up the columns in consecutive paragraphs, on top of each other.
Now, I want to move away from using Less to doing the markup/CSS from scratch.
I found another StackOverflow question asking something similar:
How to create three columns in css
and the advice from there is basically to use <ul> and <li>. I've hacked out something like this, two rows, three columns:
<ul>
<li> <!-- First row -->
<ul>
<li>Deutsche Bank, Goldman Sachs JBWere</li>
<li>Costs</li>
<li>
<p>AAP</p>
<p>June 28, 2010</p>
<p>Page: 3</p>
</li>
</ul>
</li> <!-- End of first row -->
<li> <!-- Second row -->
<ul>
<li>Deutsche Bank</li>
<li>Plans</li>
<li>
<p>Bloomberg</p>
<p>June 29, 2010</p>
<p>Page: 1</p>
</li>
</ul>
</li> <!-- End of Second row -->
</ul>
My question is, is this optimal, or is there perhaps a more streamlined hierarchy I could go for, or any tags I can strip out of the above?
Also, the article referenced in the above question talks about three columns, with one row. I need three columns, with a new row for each article.
What's a good way of CSS styling the above, to give three columns, with each set on a new row, and still have it display as consecutive paragraphs on handhelds?
Using an unordered list is not a BAD method, and the benefit of this is that devices or browsers with CSS disabled (yep, you'll be surprised) will degrade gracefully into a legible list. If you wanted the above to display in a 3 column layout with each row on a new "line" I would try something like this for your css:
First give your ul an ID attribute, so in our case we'll call it <ul id="fakeTable">, and then we can style our li elements to act as table cells:
#fakeTable, #faketable li{
list-style-type:none; //no bullets etc
margin:0;
padding:0;
}
#fakeTable{
width:800px; //you could set it to any width really, just an example
}
#fakeTable li{
display:block;
float:left;
clear:none;
width:200px;
padding:0 11px 0 11px;
}
Now assuming your <ul> is 800px wide, the <li> elements will wrap to the next line from 4 to 6, 7 to 9 etc as there is no more space to float a 4th one on each row.
If you do not have a set width, convert the widths to %, you could have the <li> width set to 33% - with no <li> padding of course - which will give you a width of 99% across 3 <li> elements, so no space for a 4th, and it will wrap to the next line!
I'd go for 3 divs, each containing one column, give them a min-width and a max-width, and display: inline-block. If the screen is large enough to accommodate them next to each other, they'll be laid out as 3 columns, otherwise, they'll stack. You'll need some extra hacks for IE 6 (maybe 7 too) because it doesn't support inline-block.
Create multi-column layout with div is very simple but you should pay attention to the followings:
Sum of width of element column (including margin and padding) must < 100% (or width of the main column in pixel).
Using float:left (or right) to ensure the column appear side-by-side
Using a clear element to ensure the margin attribute of below elements
Example:
<div id="main">
<div class="col 1st-col">
</div>
<div class="col 2nd-col">
</div>
...
<div class="clr"></div>
</div>
.col {float: left;}
.1st-col {width: 30%; margin-left: 1%}
....
.clr {background: url('empty.gif');} /* empty.gif is a gif image (1px x 1px transparent) */
This surely works on every browser. Div .clr to fix the height of div.main in FF, Chrome, IE6. The attribute display: inline-block doesn't work in IE.