Advertiser Content

CSS Help & Resources Page 35

Started by seeker November 16th, 2009 5:38 PM
  • 130492 views
  • 897 replies

AlphaLuxray

Serious Punch!

Male
Seen October 4th, 2017
Posted July 12th, 2017
76 posts
2.4 Years
Oh shoot, thanks. xP Typos get me every time.

EDIT: Now I've run into a different problem. It seems vertical-align is not working for me (I double checked my semicolons this time too).

Taken straight from my sig, sans vertical-align:
Spoiler:
[css-div=height:37px; width:128px; float:left; vertical-align:middle; background-color:#000000;]The Prism League[/css-div]

The Prism League

~kaito~

baby really hurt me

Male
maryland
Seen June 30th, 2018
Posted May 6th, 2018
55 posts
2.3 Years
i had a question - how do you make the width of my sig smaller? it's probably super obvious/easy, but idk tbh.

here's the code of it if you need it -

Spoiler:
[ css-div="border: 1px inset ; background-color: #C7D9D2; background-image: none; color: #000000; Padding-left: 1px;" ][ css-div="Float: right; padding-right: 8px;" ]

[ URL="http://twitter.com/Kaito_IDF" ][ IMG]http://i.imgur.com/bE5n1YD.png[ /IMG][ /URL]
[ URL="http://instagram.com/kaito_ice.65/"][ IMG]http://i.imgur.com/7JRyTat.png[/IMG][/URL] [ /css-div]
[ COLOR=#C7D9D2]aaaaaaaaaaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG]
[ COLOR=#C7D9D2]a[/COLOR][ FONT=georgia][ I]togekiss; #468 - the jubilee pokemon[/I][/FONT]
[ COLOR=#C7D9D2]aaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div]
im waiting for it, that green light, i want it

Christos

Male
Seen 14 Hours Ago
Posted 14 Hours Ago
6,364 posts
13.3 Years
i had a question - how do you make the width of my sig smaller? it's probably super obvious/easy, but idk tbh.

here's the code of it if you need it -
Add "width: 500px" (adjust accordingly) in css-div. If you want to center it, add "margin: 0 auto" as well. Also, you can post CSS code without having to use spaces if you wrap them in [html] tags!

[css-div="width: 500px; margin: 0 auto"]stuff[/css-div]

~kaito~

baby really hurt me

Male
maryland
Seen June 30th, 2018
Posted May 6th, 2018
55 posts
2.3 Years
Add "width: 500px" (adjust accordingly) in css-div. If you want to center it, add "margin: 0 auto" as well. Also, you can post CSS code without having to use spaces if you wrap them in [html] tags!

[css-div="width: 500px; margin: 0 auto"]stuff[/css-div]
i tried it out, but i don't quite know where to put it. >.<
im waiting for it, that green light, i want it

Christos

Male
Seen 14 Hours Ago
Posted 14 Hours Ago
6,364 posts
13.3 Years
i tried it out, but i don't quite know where to put it. >.<
Just add them in your first css-div. Like this:

[ css-div="width: 500px; margin: 0 auto; border: 1px inset ; background-color: #C7D9D2; background-image: none; color: #000000; Padding-left: 1px;" ][ css-div="Float: right; padding-right: 8px;" ]

[ URL="http://twitter.com/Kaito_IDF" ][ IMG]http://i.imgur.com/bE5n1YD.png[ /IMG][ /URL]
[ URL="http://instagram.com/kaito_ice.65/"][ IMG]http://i.imgur.com/7JRyTat.png[/IMG][/URL] [ /css-div]
[ COLOR=#C7D9D2]aaaaaaaaaaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG]
[ COLOR=#C7D9D2]a[/COLOR][ FONT=georgia][ I]togekiss; #468 - the jubilee pokemon[/I][/FONT]
[ COLOR=#C7D9D2]aaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div]

~kaito~

baby really hurt me

Male
maryland
Seen June 30th, 2018
Posted May 6th, 2018
55 posts
2.3 Years
Just add them in your first css-div. Like this:

[ css-div="width: 500px; margin: 0 auto; border: 1px inset ; background-color: #C7D9D2; background-image: none; color: #000000; Padding-left: 1px;" ][ css-div="Float: right; padding-right: 8px;" ]

[ URL="http://twitter.com/Kaito_IDF" ][ IMG]http://i.imgur.com/bE5n1YD.png[ /IMG][ /URL]
[ URL="http://instagram.com/kaito_ice.65/"][ IMG]http://i.imgur.com/7JRyTat.png[/IMG][/URL] [ /css-div]
[ COLOR=#C7D9D2]aaaaaaaaaaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG]
[ COLOR=#C7D9D2]a[/COLOR][ FONT=georgia][ I]togekiss; #468 - the jubilee pokemon[/I][/FONT]
[ COLOR=#C7D9D2]aaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div]
thank you so so so so much <3 <3 <3
im waiting for it, that green light, i want it

Spyro

Seen October 5th, 2018
Posted July 26th, 2018
2,379 posts
3.5 Years
Hello!
I was wondering if I can do tables in CSS?
Right not in my Trade Shop I have 2 columns that showcase Pokémon Sprites. But they're not all the same size, so often the Pokémon in the two columns will be offset. I wanted to add rows, that would adjust to the size of the sprites, but I'm not sure if it's possible, and most things I've copy pasted from the web don't seem to work.

Tsutarja

Age 24
Male
Tampa, FL / Richmond, VA
Online now
Posted 8 Minutes Ago
25,045 posts
9.3 Years
Hello!
I was wondering if I can do tables in CSS?
Right not in my Trade Shop I have 2 columns that showcase Pokémon Sprites. But they're not all the same size, so often the Pokémon in the two columns will be offset. I wanted to add rows, that would adjust to the size of the sprites, but I'm not sure if it's possible, and most things I've copy pasted from the web don't seem to work.
Hi there! Based off of my findings, I do not think tables are within the limits of what PC allows for CSS, sadly. :(

Spyro

Seen October 5th, 2018
Posted July 26th, 2018
2,379 posts
3.5 Years
Hi there! Based off of my findings, I do not think tables are within the limits of what PC allows for CSS, sadly. :(
Oh well... :c
Thank you very much for your help and your time! :)

Venia Silente

Inspectious. Good for napping.

Male
on the second floor's nest
Seen 2 Days Ago
Posted 1 Week Ago
801 posts
10.7 Years
Hello!
I was wondering if I can do tables in CSS?
Right not in my Trade Shop I have 2 columns that showcase Pokémon Sprites. But they're not all the same size, so often the Pokémon in the two columns will be offset. I wanted to add rows, that would adjust to the size of the sprites, but I'm not sure if it's possible, and most things I've copy pasted from the web don't seem to work.

No table instructions within PokéCommunity's BBCode parser set, but you can achieve a similar effect with css-div and a lot of work. Effectively you need to make use of newlines and nested css-divs with specified widths and heights to get a similar effect to that of a table, and apply to those the properties "display: table-row" or "display: table-cell" depending on their context.


Otherwise you won't be able to get either rows or columns to align.



----


I have provided an example below of what can be done. As you will see, the browser will take care of itself to align the table structure (rows and columns), provided you follow some instructions:


* You must specify all table content (that is, all rows and columns) within a single line, in the sense that you must place no blank lines whatsoever between a closing /css-div and the opening of the next css-div.
* You must specify the the opening css-div with the property "display: table;" which sets the browser to organize everything else, by setting the browser to process the div as a HTML's <table>.
* Similarly, you must then specify a level of css-divs with the property "display: table-row;" to imitate HTML's <tr> element which opens a table row.
* Then you must specify the next level as a css-div with the property "display: table-cell;" to imitate HTML's <td>, which hosts the actual table cell content.
* The css-divs of the first row must contain "(min/max)width: ..." properties, which set up the cell widths for the rest of the table. In this case I've set up the first column to 10% of the width of the table, the second column grow between 25% and 40% according to requirements, and the 3rd column to span the rest of the available space.
* Each "table-cell" div must contain either a "left: 0;" or a "right: 0;" property, which tells the browser to not set up separating space between the cells.
* Be wary that if you include images, borders, spoilerblocks or some sort of floating content, content might overflow and break the table.
* With this model, at least for what I know, it is not possible to create table cells that span more than one row or column.



Row 1, Column 1 with some content.
Row 1,
Column 2
with some content.
Row 1, Column 3 with some content
Row 2, Column 1 with some content.
Row 2, Column 2 with some content
Row 2, Column 3 with some content





I recommend you use post quote in order to examine the code and copy it verbatim -warts and all- to a text editor in order to perform the modifications you want. Test often.


I'm sure a seasoned PC guru will come in and improve on this code, but at least I hope for a first attempt at organizing your content it helps.
Venia Silente - Consulting Worldbuilder
Background... some day.
Fic stuff~

SWC Entries
: Playfield 2009 : Misaimed for Life 2014 : As They Were 2016 : Simpler than Magic 2017 : Beyond Today 2018 :

Other Releases
: Pseudo-Legendary : Silly human, romance is for Nidoran! (Valentine's : Tricks of the Love Fast (Valentine's) : Overlord (meow~) :
»»More in profile link or wiki link««

The Meta Journey!
Nidoran : Carnivine


Tsutarja

Age 24
Male
Tampa, FL / Richmond, VA
Online now
Posted 8 Minutes Ago
25,045 posts
9.3 Years
-snip-
Hi there!

If you perhaps want to write up a more detailed tutorial on how to make tables using PC's CSS, I would really appreciate it! It'll be linked in the OP as well. :)

(PS you can use the BB code as well to show the raw code)

Venia Silente

Inspectious. Good for napping.

Male
on the second floor's nest
Seen 2 Days Ago
Posted 1 Week Ago
801 posts
10.7 Years
Hi there!

If you perhaps want to write up a more detailed tutorial on how to make tables using PC's CSS, I would really appreciate it! It'll be linked in the OP as well. :)

(PS you can use the BB code as well to show the raw code)

I'd love to, will try to take the time to write it up, will likely ask for some advice.


(And oh? It seems I have not checked all the format tags as I thought I did! :p )
Venia Silente - Consulting Worldbuilder
Background... some day.
Fic stuff~

SWC Entries
: Playfield 2009 : Misaimed for Life 2014 : As They Were 2016 : Simpler than Magic 2017 : Beyond Today 2018 :

Other Releases
: Pseudo-Legendary : Silly human, romance is for Nidoran! (Valentine's : Tricks of the Love Fast (Valentine's) : Overlord (meow~) :
»»More in profile link or wiki link««

The Meta Journey!
Nidoran : Carnivine


Lize

Forever paired with machomuu

Age 22
Female
Seen 1 Week Ago
Posted 3 Weeks Ago
571 posts
3.1 Years
Regarding tables, might as well work with a grid-like system, depending on what kind of content you want to use it for. In the case of an art shop or gallery, I'd actually prefer a grid over a table. Probably because tables are generally only used for (and should only be used for) data.

I'm not entirely sure how and if a grid system would work very well in posts, though, considering the different kind of widths on all the themes, because generally a grid needs to be in a fixed width. Could always work with a minimum though.

Actually, think I might have a look and see if i can do anything.

edit: i need to check dates more... argh..
Shadows will scream that I'm alone...

donavannj

Age 28
Male
'cause it get cold like Minnesota
Seen 18 Minutes Ago
Posted 1 Day Ago
22,199 posts
14.3 Years

Row 1, Column 1 with some content.
Row 1,
Column 2
with some content.
Row 1, Column 3 with some content
Row 2, Column 1 with some content.
Row 2, Column 2 with some content
Row 2, Column 3 with some content



That was actually way cleaner than the code I messily assembled when I built some "tables" of my own using PC's CSS in the past. Just wanted to commend you for that.
whoops

Lize

Forever paired with machomuu

Age 22
Female
Seen 1 Week Ago
Posted 3 Weeks Ago
571 posts
3.1 Years
Row 1 content #1
Row 1 content #2
Row 1 content #3
Row 1 content #4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante metus. Fusce lorem libero, euismod ac turpis non, fermentum consequat tellus. Cras auctor eros quis lorem laoreet scelerisque. Mauris at eros mi. Proin venenatis ante fermentum, pellentesque urna ac, consectetur tellus. Donec porttitor eget ante nec euismod. Proin ac semper ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sit amet metus vitae enim lacinia cursus. Fusce scelerisque condimentum magna sed suscipit. Maecenas laoreet tellus ac gravida imperdiet. Aenean vitae risus vel metus efficitur ullamcorper ac ac nulla. Maecenas tincidunt vulputate leo ut porta. Duis a neque bibendum, molestie velit id, fringilla dolor. Nullam sed ipsum sit amet nibh tincidunt tristique.
Row 2 content #2
Row 2 content #3
Row 2 content #4


Just quickly drafted this in a couple minutes... would definitely need some adjustments because i probably overlooked some things but yeah, %-based grid with flex for positioning, I'd say this would be the way to go.
Shadows will scream that I'm alone...

Impo

Playhouse Pokemon

Male
Earth
Seen May 5th, 2019
Posted November 24th, 2018
2,453 posts
9.4 Years
Would anyone here have any idea if it's possible to have partial rounded borders?

https://jsfiddle.net/impo/se9tL7ds/26/

Here's a jsfiddle of what I have - I'm trying to get another rounded border, but green, to go over the grey border based on the %EXP to the next level - trying to get it to work statically before I figure out the dynamics in code

Radiating

Male
Minnesota
Seen 3 Weeks Ago
Posted December 21st, 2018
5,787 posts
2.4 Years
I've never used CSS, so I don't know where to start.

So I want to code links into sections of my signature (on the right side), how would I get two separate links on my signature picture? (Or would I need to use BB code?)

Tsutarja

Age 24
Male
Tampa, FL / Richmond, VA
Online now
Posted 8 Minutes Ago
25,045 posts
9.3 Years
I've never used CSS, so I don't know where to start.

So I want to code links into sections of my signature (on the right side), how would I get two separate links on my signature picture? (Or would I need to use BB code?)
|#TeamTrivia|Paired with Soapie❤|

You mean like this right?

Radiating

Male
Minnesota
Seen 3 Weeks Ago
Posted December 21st, 2018
5,787 posts
2.4 Years
|#TeamTrivia|Paired with Soapie❤|

You mean like this right?
Yes, but is there a way to get the text on the right side of my signature? (One on the top right and the other on the bottom right)

Tsutarja

Age 24
Male
Tampa, FL / Richmond, VA
Online now
Posted 8 Minutes Ago
25,045 posts
9.3 Years
Yes, but is there a way to get the text on the right side of my signature? (One on the top right and the other on the bottom right)
See, I did it to the left because honestly the text would have clashed with the colors. The code Johnny has is what you're asking for, but I'm not sure how you'd feel about the clashing colors.

Radiating

Male
Minnesota
Seen 3 Weeks Ago
Posted December 21st, 2018
5,787 posts
2.4 Years
|#TeamTrivia|Paired with Soapie❤|

You mean like this right?

Just tell me what you want and where lmao
Can you put one near the top right and the other one near the middle right?

See, I did it to the left because honestly the text would have clashed with the colors. The code Johnny has is what you're asking for, but I'm not sure how you'd feel about the clashing colors.
I'll just change the font color.

Radiating

Male
Minnesota
Seen 3 Weeks Ago
Posted December 21st, 2018
5,787 posts
2.4 Years
Actually Johnny it's fine, I think I'll just use Tsutarja's code for now.

Thanks
Advertiser Content