Any tips on styling image layout with the {%img ... %} plugin?
I'm ok with left and right but I'd really like to have all images in a row vertically for example and can't quiet figure out how to style things.
I thought perhaps add a <div class="right"> around a bunch on {% img ... %} but that seems to mess with the HTML too much.
Thanks in advance for any pointers
ps, I saw this question but it didn't answer my question exactly
In markdown, you can write tables using the following syntax
-----------------
| A | B |
| :---: | :---: |
| C | D |
-----------------
The two points on each side of the horizontal lines define the alignment of your cells:
centered: :--:
left: :---
right: ---:
You can use as many dashes as you want in the middle.
I used this technique to align images as a table in this blog post (search for "Nil" inside). It looks like this:
using this code:
| Nil | Inline / list | Table |
| :---: | :---: | :---: |
| {% img /images/2013-02-04-nil.png 36 92 Nil line numbers %} | {% img /images/2013-02-04-inline.png 62 92 Inline line numbers %} | {% img /images/2013-02-04-table.png 72 92 Table line numbers %} |
Related
I want to display "cards" in a line (for ex. 4 cards on each line). Each card is a div that contains a title (a span). My main problem is that the height of the title will change regarding the number of lines required to display the whole title.
So if I have a title that needs 2 lines to be displayed, the cards that contains itself will be shifted compared to the ones where the title can be displayed in only one line.
In such case, I get something like that:
+-----+
+-----+ | ABC | +-----+
| ABC | | DEF | | ABC |
+-----+ +-----+ +-----+
| | | | | |
| | +-----+ | |
+-----+ +-----+
Here is a live demo: http://plnkr.co/edit/eO9MwDyhFQg3BriMjikJ?p=preview
How can I solve that, i.e. I want all the cards to have the same height, and of course perfectly aligned.
Thanks
Just add vertical-align on the class title for spans:
.title {
vertical-align:top;
}
For default is baseline that makes the span align change based on the lenght of another baseline text inline-block elements.
You can also add this to the xxx class and works
Check this Demo http://plnkr.co/edit/X8vmBasqq3lZslMylSjI?p=preview
is this what you mean?
i have replaced display inline block with float left
http://plnkr.co/edit/xvP2ElSyEV1oXHSkV4Fb?p=preview
I have a box which contains an image, which has float:left set, and textual contents.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
I'd rather have it the following way (at least for considerably short lists, let's assume the list is short for now)
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)
However, in case of any long list items (longer than the small width of the content field),
the float is cleared.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won't fit. Lastly, the float is cleared.
Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?
Put the list inside a DIV that is also floated left with a defined width.
Try a plain overflow:hidden on your list - this should do the trick.
See the example.
I am starting an application that will use HTML / CSS. While I'm fairly familiar with the two technologies, I am having problems creating my default layout. Basically, I want the following:
|-------------------------------------------------------------|
| |
| This section will be as large as the content that it holds |
| |
|-------------------------------------------------------------|
| |
| |
| This section will take up the remaining available space. |
| No matter what. If more space is required, scroll only this |
| content. |
| |
| |
|-------------------------------------------------------------|
| |
| This section will be as large as the content that it holds |
| |
|-------------------------------------------------------------|
How do I use HTML / CSS to acomplish this?
This ought to do it: http://jsfiddle.net/ratbum/TUytU/4/
Using HTML5 and CSS, we will call the top section <header> and the bottom, <footer>, for semantic reference. We will also call the center section of your content <article>.
If you set both the <header> AND <footer> to position: fixed; only the center section or <article> will scroll. Check out my result in the jsfiddle linked below. Easy peasy!
Example:
http://jsfiddle.net/codesushi156/5wc25/4/
I have a list that looks like this
--------------------
| | |
| 1 | 2 |
| | |
| 3 | 4 |
| | |
| 5 | 6 |
| | |
--------------------
(it's a simple <ul> with <li>'s)
the container of this list, let's call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.
How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can't add any classes to these list items :(
I tried with margin-right: 10px on the <li>'s and margin-right: -10px on the <ul> but that doesn't work :)
An example with margin-right.
edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/
Not terribly elegant, but simple enough.
what is the use of a "PRE" tag in (X)HTML
It's for displaying data/code/art where you want all your spaces and newlines to be displayed as is, and want your columns to line up. So you can do stuff like this:
+-----+------------------+--------+------------+
| id | session_key | length | expires |
+-----+------------------+--------+------------+
| 263 | SNoCeBJsZkUegA7F | 86400 | 1257401198 |
| 264 | UoVm3SZRmPHnac4V | 86400 | 1257405561 |
| 262 | bjkIOWBhI1qxcrWr | 86400 | 1257401189 |
+-----+------------------+--------+------------+
without "pre" or "code" or some such, this looks like this:
+-----+------------------+--------+------------+
| id | session_key | length | expires |
+-----+------------------+--------+------------+
| 263 | SNoCeBJsZkUegA7F | 86400 | 1257401198 |
| 264 | UoVm3SZRmPHnac4V | 86400 | 1257405561 |
| 262 | bjkIOWBhI1qxcrWr | 86400 | 1257401189 |
+-----+------------------+--------+------------+
It is used to demonstrate pre-formatted text, where new-line breaks are relevant. For instance, ascii art ;-) or program code. Well, for program code the CODE element is better.
The PRE element represents a character cell block of text and is suitable for text that has been formatted for a monospaced font.
The PRE tag may be used with the optional WIDTH attribute. The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation.
Hypertext Markup Language - 2.0 specs from W3C
Have you ever looked an article posted in code project site ? If you didn't take a look at it this http://www.codeproject.com/KB/game/Hangman_game.aspx. From the article the yellow section or the one with collapse and expand code snippet are pre taged. It helps to preserve the data the way it is written or presented as it is without distorted.