My goal: to produce a basic image gallery that can be printed to PDF from the browser as a 3col x 4row grid in a 8.5" x 11" portrait layout. The image URL and a short description are fed from a django app, so I'll neither know how many images will be viewed nor the file names for them.
The code that follows is based on http://www.w3schools.com/css/css_inline-block.asp
It produces an image gallery whose result can be seen as a screenshot here:
Image Gallery Screenshot
My question: is there a way to make the boxes stay in a fixed grid? Some of the boxes are being pushed out of place, but I'm not sure why. If there's a better solution, I hope you'll point me to it.
Thanks!
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
width: 150px;
height: 180px;
margin: 1px;
border: 1px solid #73AD21;
}
.text-box {
font-size: 9px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<h3>Section 14: Attachments</h3>
{% for inspectionfeedback in inspection.inspectionfeedback_set.all %}
{% if inspectionfeedback.feedback_image.path == "" %}
{% else %}
<div class="floating-box">
<img src="{{ inspectionfeedback.feedback_image.url }}" style="width:140px;" alt=" " >
<div class="text-box">
{{ inspectionfeedback.feedback_inspection_item }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</body>
</html>
You are using inline-block, and the text is sometimes 3 lines or 2 or even four lines. The inline-block tries to level the text to "baseline" which in turn messes up your grid.
Possible solutions:
use display: block;, and float: left; etc.
use a table :(
use flex-box (if you are ok with css)
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 want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/
I'm using Jekyll and Liquid for my website.
I've been completely stuck on using liquid in the CSS to compile correctly. I'm trying to use different colors for the borders of each page, and have the default set to black.
I appreciate any insight y'all may have.
#splash {width: 100%; height: 10%;}
#splash background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}
<div id= "splash"> </div>
You need to 2 rows of --- at the top of your file for it to compile correctly.
Source: https://jekyllrb.com/docs/assets/
You also need to add { around your css code for the background-color.
---
---
#splash {
width: 100%; height: 10%;
}
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
}
Alternatively you can just merge the 2 CSS statements like so:
---
---
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
height: 10%;
width: 100%;
}
Linked stylesheets are not meant to be page-specific, so this is not the right way to go. I would also NOT merge page-specific and website-specific CSS. Adding an id in the websites stylesheet for every page you create (now and in the future) seems unlogical too.
My advice is to create a layout file in the _layout directory, called page.html. Make it look like this:
<html>
<head>
<!-- website-specific CSS goes here -->
<link rel=stylesheet href="style.css" type="text/css">
<style>
/* page-specific CSS goes here */
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}black{% endif %};
}
</style>
</head>
<body>
<div id="splash"></div>
</body>
</html>
Add your website-specific/normal CSS to your stylesheet. The page-specific CSS in the head will overwrite this. Then create a index.md file like this:
---
accent: red
layout: page
---
content
Note that you do not have to set the layout in every page when you set defaults, see: front matter defaults.
The paper-shadow component is not sizing down to fit a div that has display: table-cell on it. I am not sure if this is a bug or a problem with my usage. I am posting here before I submit an issue on the github page to see if you guys also think this is an issue and not a usage problem.
<div id="in" class="section-container">
<h4>In:</h4>
<button class="in-button" on-click="{{ clearInRow }}">Clear</button>
<button class="in-button" on-click="{{ removeInRow }}">-</button>
<button class="in-button" on-click="{{ addInRow }}">+</button>
<core-list id="in-inputs" data="{{ data.in }}" height="39"
style="overflow: hidden; min-width: 324px;" on-core-activate="{{ itemSelected }}">
<template>
<div class="{{ {selected: selected} | tokenList }}">
<paper-input-no-error value="{{ in[0] }}"
class="in-paper-input"
on-change="{{ inChanged }}"></paper-input-no-error>
<paper-input-no-error value="{{ in[1] }}"
class="in-paper-input"
placeholder="Value"></paper-input-no-error>
</div>
</template>
</core-list>
<paper-shadow z="1"></paper-shadow>
</div>
.section-container {
border-radius: 2px;
overflow: hidden;
display: table-cell;
vertical-align: top;
padding: 10px;
}
.section-container > h4 {
display: inline;
}
Here is a screenshot of what is happening. https://www.dropbox.com/s/jtmeboxdjwyph38/Screenshot%202014-08-19%2009.44.43.png
The paper-shadow is the line across the middle of the screen.
I should also mention that how I am using the paper-shadow worked perfectly fine before I just recently did a bower update on all the components. That seemed to break how I am using it. I do not know what version I was previously running, however, I am now running 0.3.5.
Turns out you must add a position: relative to the parent div in order for the shadow to show up. This will fix the problem.
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.