[tw5] Re: Vertically centering an icon and text in the same cell of a table
Hello again. I solved my problem with localizing the CSS to specific areas to a higher degree. I was aware I can provide CSS class names to be associated to the table. By simply using the class names I can localize the CSS to the table. It is somewhat similar to the method of using 'id=' and for all intents, the effect is the same. Thank you all. I am not soliciting any more input on this matter. Anything you care to add is always welcome. On Thursday, March 14, 2019 at 10:23:01 AM UTC+1, John Thornton wrote: > > Thank you, S. S. The problem I have with that solution I mentioned > before. I am doing this in TiddlyWiki, and I have not seen a way to use the > 'id' form of CSS selectors, because I have not seen how to tag an element > in a TiddlyWiki table with and 'id'. Maybe it is obvious and something I > missed, but without that 'id', I can't use CSS that uses that form of > selector. > > Thank you all for your patience. You all have provided a solution that is > usable in my wiki. At this point I am just increasing my knowledge and > options. > > On Thursday, March 14, 2019 at 9:16:52 AM UTC+1, S. S. wrote: >> >> Try the id attribute as shown here : >> https://www.w3schools.com/html/html_id.asp > > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f4b407b1-dd0b-4a88-b880-fc158b26c125%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Thank you, S. S. The problem I have with that solution I mentioned before. I am doing this in TiddlyWiki, and I have not seen a way to use the 'id' form of CSS selectors, because I have not seen how to tag an element in a TiddlyWiki table with and 'id'. Maybe it is obvious and something I missed, but without that 'id', I can't use CSS that uses that form of selector. Thank you all for your patience. You all have provided a solution that is usable in my wiki. At this point I am just increasing my knowledge and options. On Thursday, March 14, 2019 at 9:16:52 AM UTC+1, S. S. wrote: > > Try the id attribute as shown here : > https://www.w3schools.com/html/html_id.asp -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/277543b3-fa9f-46ff-987f-6c00d4c9d87c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Try the id attribute as shown here : https://www.w3schools.com/html/html_id.asp -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/993938cb-fbdb-4afb-b372-85c8889486f0%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Thank you, Subi 54. It will take me a bit to understand that snippet and
how to use it.
On Thursday, March 14, 2019 at 9:12:04 AM UTC+1, Subi 54 wrote:
>
> Use something like this perhaps:
>
> ```
> <$list filter="[rank[tabimgcss]]">
> [data-tiddler-title^="<$view field=title/>"] img {
> vertical-align: middle;
> }
>
> ```
>
> Just put `rank` in field of the riddles which contain the tables and use
> `tabimgcss` as the value.
>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/92f13e86-cf7c-4462-9adc-a888728cf761%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Maybe the first example here might help: https://www.w3schools.com/html/html_id.asp -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b13672e3-f873-412f-bc9f-63908491c306%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Use something like this perhaps:
```
<$list filter="[rank[tabimgcss]]">
[data-tiddler-title^="<$view field=title/>"] img {
vertical-align: middle;
}
```
Just put `rank` in field of the riddles which contain the tables and use
`tabimgcss` as the value.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/e43393ee-5d9d-41a1-be26-2aef3a6a54fd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Thank you, Oxydum. It worked and makes sense in its consistency with the
HTML embedded CSS markup. I do not understand it, though. To me, the image
seems centered and the text seems not to be centered. It seems
counter-intuiitive that changing the centering on the image changes the
positioning of the text.
Another thing bothers me with that solution. The alignment change will be
on all images. I really would only like to have that change affect images
in the table cells, and even the cells of onlly certain tables. It there an
easy CSS selector that would accomplish this? in the HTML version, the CSS
is all embedded. That is a painful way of doing things, for sure. In that
implementation, I could not figure out how to add CSS on a wiki-wide basis
(PBworks). Both in PBworks and TiddlyWiki I know I could add CSS at a page
level, which would limit its scope and still present a cleaner, more
manageable appearance. I have worked through a CSS tutorial. The kind of
mechanism that could work is limiting the scope of the img {} CSS affect
with and 'id' selector. I could not figure out how to do that in
TiddlyWiki. If I could limit the img {} CSS effect to only tables or table
cells, that would also limit its scope to close to 100% of the cases I
would desire it.
Thank you all for any additional advice.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/4b390894-78ba-4e1b-9e1c-3d3e80796d29%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw5] Re: Vertically centering an icon and text in the same cell of a table
Hi John,
try a CSS :
> img {vertical-align: middle;}
Best wishes
Le mercredi 13 mars 2019 16:54:40 UTC+1, John Thornton a écrit :
>
> I have table data that consists of and Icon followed by some text. The
> text height is less than the icon height, and the appearance is that the
> bottom of the icon is resting on the line drawn by the bottom of the text.
> I have with HTML and embedded CSS style statements been able to accomplish
> an alignment where the two entities seemed aligned vertically.
>
>
>
>
> src="https://tiddlywiki.com/favicon.ico; alt="" />My
> favorite (1)
>
>
>
>
> I have not figured out how to achieve this alignment in TiddlyWiki table
> cells.
>
> This is the example of what I have with no adjustments:
>
> |itemName|k
> | Created from the following Recipe(s) |<|<|<|h
> | Blacksmith's Bench |<|<|<|
> |!Ingredients|!Produces| !Crafting Time | !XP Gained |
> |Abysmal Eye (1) | {{Abysmal Daggers Icon External}} Abysmal Daggers (1) |
> ? | ??? |
> |Branch (5) |~|~|~|
> |Iron Bar (10) |~|~|~|
> |Thick Leather (5) |~|~|~|
> | |[img[https://tiddlywiki.com/favicon.ico]] text | | |
>
> The CSS I have added to get that output is:
>
> center { display:block; text-align:center; }
>
> .itemName thead td { background-color:brown; color:white; font-size:150%; }
>
> .craftingTableName { background-color:green; color: yellow;
> font-size:130%; Padding:0; margin: 0, auto; }
>
> .cell { /* compensating the cell padding */ margin:-1px -7px; padding:1px
> 7px; }
>
>
>
>
> The tables get a bit busy with a single cell having a few of these kind of
> elements stacked vertically using to cause the line breaks.
>
> Thank you.
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/23f5a936-8f62-4dd2-bfd3-cf9d77827907%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
