Road
beyond salvation
- 767
- Posts
- 15
- Years
- Aomori, Japan
- Seen Apr 5, 2019
OHH this makes perfect sense! I got it to work perfectly!! Apologies for the long explanation required, but thanks a ton for the help! c:
CSS Help & Resources
- Thread starter abnegation
- Start date
The thing I can't work out now is how to position the text inside the image, by default it is placed underneath the image.
tokyodrift
[i]got me looking for attention[/i]
- 4,532
- Posts
- 12
- Years
- Age 30
- he/him
- Seen Mar 8, 2024
Mind posting what you have so far?
First of all you want to fill in that transparent background in your image:
then you want to create a div with that as the background image:
Lucario
Code:[PLAIN][cd="width:653px;height:141px;background-image:url('http://i.imgur.com/BJfd5q8.png');"]Lucario[/cd][/PLAIN]
as you can see your text is now overlayed on the image.
to position and format the text you'd then replace 'Lucario' with something like:
Code:[PLAIN][cd="text-align: center;letter-spacing: 1px;"][cd="color: orange;font-size: 1.7em;padding-top: 20px;"]Lucario[/cd][cd="a;color: white;font-size: 1.25em;padding-top: 25px;"][URL="#"][COLOR="Blue"]Blog[/COLOR][/URL] | [URL="#"][COLOR="blue"]Soundcloud[/COLOR][/URL] | "[quote of the day]"[/cd][/cd][/PLAIN]
which would give you this:
LucarioBlog | Soundcloud | "[quote of the day]"
to center this just wrap it intags
Thanks!
Trev
[span="font-size: 8px; color: white;"][font="Monts
- 1,505
- Posts
- 11
- Years
- Age 27
- Seen Nov 15, 2023
Diagonal Floating Headers
Here's a quick example of a neat little feature I found when working on my thread.
Hamlet
Act III, Scene 1To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to, 'tis a consummation
Devoutly to be wish'd. To die, to sleep.
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to, 'tis a consummation
Devoutly to be wish'd. To die, to sleep.
Code:
[*CENTER][*css-div="background-color: white; border: black 4px solid; border-radius: 20px; width: 800px; padding: 30px; position: relative;"]
[*cd="background-color: black; color: white; border: transparent; border-radius: 20px; width: 250px; padding: 15px; position: absolute; float: left; transform: rotate(-15deg); top: -15px; left: -85px;"][*SIZE="6"]Hamlet[/SIZE][/cd][*SIZE="6"]Act III, Scene 1[/SIZE]
[*left]To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to, 'tis a consummation
Devoutly to be wish'd. To die, to sleep.[/LEFT][/div][/center]Some notes on using it:
- Use "top" to adjust the position vertically and "left" to adjust the position horizontally.
- Because of the tag surrounding the entire CSS, the header will always anchor in the center. This is, in my opinion, the best way to use these headers. You can, however, put thetag around just the [cd] containing the header if you want the rest of the CSS to be in a different position.
[*] The text can be treated like a separate entity by using BBCode within the confines of [cd][/cd]. You can, for example, align the text to the left while keeping the entire header centered.
[*] It's always best to try and cover the corner for a cleaner look. However, you can adjust the positioning to make it look more banner-like.
[*] A fixed width on the [cd] will almost always look better, unless you increase the value of "padding." Note that this will require editing of "left" to keep the header overtop the corner, however.
[*] Add newlines in your post between CSS boxes to keep the header from overlapping into the previous box's border.
If you mess around with the [cd]'s positioning, you can probably move it to other places on the CSS if you really want to.
Last edited:
AlphaLuxray
Serious Punch!
- 76
- Posts
- 7
- Years
- Seen Oct 5, 2017
Hi! I've run into an issue trying to stack div's within each other, most notably that the interior one's background color does not seem to be parsing.
Here's the code:
And the finished product:
Here's the code:
Spoiler:
And the finished product:
Spoiler:
Flowerchild
fleeting assembly
- 8,709
- Posts
- 13
- Years
- She/Her
- Hyperspace
- Seen Apr 23, 2024
You used a colon following your height:250px rather than a semicolon, so anything after that won't parse.
AlphaLuxray
Serious Punch!
- 76
- Posts
- 7
- Years
- Seen Oct 5, 2017
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:
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:
Last edited:
AlphaLuxray
Serious Punch!
- 76
- Posts
- 7
- Years
- Seen Oct 5, 2017
So, not sure if my question was missed because I edited it on, but it still stands. I'm sure it's something simple I'm just not thinking of. xP
AlphaLuxray
Serious Punch!
- 76
- Posts
- 7
- Years
- Seen Oct 5, 2017
Alright, perfect. Thanks.
- 6,355
- Posts
- 18
- Years
- Seen Apr 16, 2020
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!
[HTML][div="width: 500px; margin: 0 auto"]stuff[/div]i tried it out, but i don't quite know where to put it. >.<
- 6,355
- Posts
- 18
- Years
- Seen Apr 16, 2020
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]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]
[ /css-div]
Spyro
[title=Free 6iv Dittos!][url=https://www.reddit.co
- 2,457
- Posts
- 8
- Years
- Seen Oct 5, 2018
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.
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
[title=Free 6iv Dittos!][url=https://www.reddit.co
- 2,457
- Posts
- 8
- Years
- Seen Oct 5, 2018
Venia Silente
Inspectious. Good for napping.
- 1,231
- Posts
- 15
- Years
- on the second floor's nest
- Seen yesterday
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.
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.