CSS Help & Resources

donavannj · May 2, 2015

Spoiler:

Your issue is that you were specifying width and height in your post background DIV, and the content was spilling out because you weren't telling the DIV what to do with the overflowing content. Spoiler shows what content looks like with the width and height specifications removed from the post background DIV.

If you want the post to fit in the 850x300 area you specified, you need to add "overflow:auto" or "overflow:scroll" (preferably the former) to the DIV's properties.

Clear as mud?

BurningLanguages · May 2, 2015

donavannj said:
Spoiler:

Grass Club

Image by SaintNaruto

Introduction
Welcome to the Grass Club! We're excited to have you come and browse around, there are many great things about this club. First of all we work to achieve closeness and familiarity with every member of the club. The Grass Type and it's many beauties is what brings us all together. Any and all visitors are welcome and feel free to chat with us! I believe that the Grass type is able to teach us that there is always sunshine after the darkest (and much needed) storms. Let's grow together.

Grass Club Code of Conduct
1. Obey all of the forum rules, of course!
2. Remember the Golden Rule! Treat others the way you would want to be treated. If we master this we will have no worries.
3. Do your best to enjoy this club to the fullest, this will also promote activity among us as a whole.
4. Responding to the Topic of the Week is NOT mandatory. It's simply there to promote discussion if you're having trouble with what to say.
5. Is listing "have fun" as a rule kind of counter-intuitive? :P

Club Application
Username:
Favorite pokemon (only 1, Grass type or any other):
Reason for joining:
Answer the current topic (optional):

Grass Type Pokemon

Members List
- BurningLanguages

- Aryca

User Bars
If anyone is capable of making user bars you are more than welcome to make some for us :).

Topic of the Week
Who is your favorite Grass type Gym Leader and why?

Your issue is that you were specifying width and height in your post background DIV, and the content was spilling out because you weren't telling the DIV what to do with the overflowing content. Spoiler shows what content looks like with the width and height specifications removed from the post background DIV.

If you want the post to fit in the 850x300 area you specified, you need to add "overflow:auto" or "overflow:scroll" (preferably the former) to the DIV's properties.

Clear as mud?

Thank you! I am currently learning how to code so I am still a little confused as to what exactly you're talking about. However, if I look at ti again and simply substitute the image for something else then I think I'll get it. Thanks a ton :).

donavannj · May 2, 2015

BurningLanguages said:
Thank you! I am currently learning how to code so I am still a little confused as to what exactly you're talking about. However, if I look at ti again and simply substitute the image for something else then I think I'll get it. Thanks a ton :).

I'll bold the area that was mucking it up when I get to a pc again, but the image itself was not the problem. It was the fact that you told the portion of the code that contains the background image to only be a certain size. And, on top of that, you didn't tell that portion of the code what to do with content you put inside it that didn't fit inside the tiny little box you told it to be.

That was the issue.

EDIT - Your outer DIV: [cd="background-color:brown; background-image:url('http://www.my-iguru.com/ipad/assets/images/ipad-wallpapers/abstract/ipad-wallpaper-electric-blue.png'); width: 850px; height: 300px;border:10px solid #000000; padding: 25px;"][/cd]

The part that was causing it to spill out from that outer DIV: width: 850px; height: 300px

You were telling the content to fit inside a box that size, and the content you made for the Grass Club was too big for that box and was spilling out, as that's the default behavior for content that doesn't fit inside a box specified by CSS.

Charlie Brown · May 7, 2015

Hey everyone, would someone be able to help me with setting up CSS so I have four scrolling boxes side-by-side? The code I'm using for the scrolling boxes is below, though I'm not sure how to make it so I have four separate scrolling boxes each with their own text, side-by-side.

Members:
text
text
text
text
text
text
text
text
text

[cd=width: 200px; padding-left: 40px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; background-color: #fef0dd; height: 150px; overflow: auto][SIZE="4"][B]Members:[/B][/SIZE]
text
text
text
text
text
text
text
text
text
[/cd]

Hybrid Trainer · May 9, 2015

I'm pretty sure there is another way to do this but I've always done it by using the Float tool. You can do it either left or right,but you'll have to use the clear function if you want to put stuff around the boxes or it could mess up a little bit.

Members:
text
text
text
text
text
text
text
text
text

Charlie Brown · May 9, 2015

Hybrid Trainer said:
I'm pretty sure there is another way to do this but I've always done it by using the Float tool. You can do it either left or right,but you'll have to use the clear function if you want to put stuff around the boxes or it could mess up a little bit.

Thanks heaps, really appreciate it!

Etherion · May 12, 2015

Spoiler:

Tsutarja · May 12, 2015

gio7sm said:
Spoiler:

Welcome!
Hello PC! And welcome to Mabuhay!
A fan club for Filipinos and Pinoys at heart! This club is founded upon to celebrate and acknowledge the essence of being a true Filipino. I think the importance of being a Filipino is the beautiful traits that the we have, they say we are like bamboos, strong and sturdy. We are survivors and if we were to be put in such places, it´s easy for us to adapt! We may love foreign things and maybe even aspire to be one but it is undeniably true that wherever we go, whatever happens the filipino essence is still in us!
This club is open to all! For true Filipinos and to those who are interested in learning our culture! Remeber, Pinoy ako, pinoy tayo!
Join na! Tara!

Rules!

Respect the opinion of others

Be active! (you could win an Emblem)

Please stay on topic of current discussion

All PC and FC forum rules apply here!

Start topics only when activity is low! Or when there is high demand for it

Maka-diyos, maka-tao, mamakakalikasan, at makabansa

Sign Up!
True Pinoys

Spoiler:

HTML:

☀Username: ☀Skype: (optional) ☀Location: (optional) ☀Topic Answer:

Pinoys at Heart

Spoiler:

HTML:

☀Username: ☀Skype: (optional) ☀Why do you want to join?

Ang lupang hinirang

Sign Up!
Members

Ang lupang hinirang
[/center]

I dont know whats wrong! Why are there two boxes?

Are you by chance using the WYSIWYG editor on the forum? Check your User CP options just to make sure.

Etherion · May 12, 2015

Tsutarja said:
Are you by chance using the WYSIWYG editor on the forum? Check your User CP options just to make sure.

Using the standard editor option

Etherion · May 17, 2015

still need help ~_~

Gigadweeb · Jun 5, 2015

I'm curious as to whether I could add a shadow to my signature or not (the full thing, not just the text)> Would look a bit nicer.

Tsutarja · Jun 5, 2015

Gigadweeb said:
I'm curious as to whether I could add a shadow to my signature or not (the full thing, not just the text)> Would look a bit nicer.

It's essentially the same thing as a text shadow, but instead it's called a box shadow. If you take your text-shadow code, and replace it with box-shadow you should be good to go! :)

Ooka · Jun 5, 2015

Gigadweeb said:
I'm curious as to whether I could add a shadow to my signature or not (the full thing, not just the text)> Would look a bit nicer.

You can, you'd just have to add this:

Code:

filter: drop-shadow(0 0 12px rgba(0, 0, 0, .3));

Though that overflow: hidden; would need to be removed for the shadow to show entirely. Keep in mind this isn't as well supported as the standard box-shadow:; property but it will let the shadow form to your background image.

If you can't get it working feel free to post the code here. :)

donavannj · Jun 5, 2015

gio7sm said:
Spoiler:

Welcome!
Hello PC! And welcome to Mabuhay!
A fan club for Filipinos and Pinoys at heart! This club is founded upon to celebrate and acknowledge the essence of being a true Filipino. I think the importance of being a Filipino is the beautiful traits that the we have, they say we are like bamboos, strong and sturdy. We are survivors and if we were to be put in such places, it´s easy for us to adapt! We may love foreign things and maybe even aspire to be one but it is undeniably true that wherever we go, whatever happens the filipino essence is still in us!
This club is open to all! For true Filipinos and to those who are interested in learning our culture! Remeber, Pinoy ako, pinoy tayo!
The pearl of the Orient

Rules!

Respect the opinion of others

Be active! (you could win an Emblem)

Please stay on topic of current discussion

All PC and FC forum rules apply here!

Start topics only when activity is low! Or when there is high demand for it

The chosen land

Sign Up!
True Pinoys

Spoiler:

HTML:

☀Username: ☀Skype: (optional) ☀Location: (optional) ☀Topic Answer:

Pinoys at Heart

Spoiler:

HTML:

☀Username: ☀Skype: (optional) ☀Why do you want to join?: ☀A question for the Pinoys: (as many as you like)

For God, for people

Member List
Members
Gio7sm ☀leader
Sniper ☀leader
For nature, for country

Topic List
Topics

Are you proud to be Filipino?

Does being a Filipino and talking to foreign people seem difficult?

What are your favorite Filipino dishes?

What do you the most about the Pilippines?

Pinoy ako! Pinoy tayo!

It's because you've kind of built it so there are two boxes.

Figure out which open and close tags pair with each other to identify the problem.

Etherion · Jun 5, 2015

donavannj said:
It's because you've kind of built it so there are two boxes.

Figure out which open and close tags pair with each other to identify the problem.

Someone else fixed it for me, its OK now....

StormGamer25 · Jun 9, 2015

I need help figuring out how put text that you can scroll down.

Code:

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa

How do i make sure the word code doesnt show over the text? Or should i be using a different code altogether?

Tsutarja · Jun 9, 2015

StormGamer25 said:
I need help figuring out how put text that you can scroll down.

Code:

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi exorcotcotcog ohohxxoohcohogcocgyocotctocot otcyococyocttocictotc8t8tff8tititcitcictixtitxit cictcitctiitcitcixfictxtciitc cogocttoctcoitcoctotcitcixtixtix tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f 585f84d4e4ed9e585e4ww4884e7d3d7 47373 37 I 447d8rx8txieufjdjsjskkaoa

How do i make sure the word code doesnt show over the text? Or should i be using a different code altogether?

Do you perhaps mean like this?

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa

Then yes, you would need to use CSS if you don't want to use the [code][/code] BB code.

Spoiler:

StormGamer25 · Jun 9, 2015

Tsutarja said:
Do you perhaps mean like this?

text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa

Then yes, you would need to use CSS if you don't want to use the [code][/code] BB code.

Spoiler:

[div="width:300px;height:175px;overflow:scroll;"]text.........................suushdhhdhzjsjjs (random text)ydudufooycyocogcigcitotciezirxi
exorcotcotcog
ohohxxoohcohogcocgyocotctocot
otcyococyocttocictotc8t8tff8tititcitcictixtitxit
cictcitctiitcitcixfictxtciitc
cogocttoctcoitcoctotcitcixtixtix
tticixritcotcoyccotcototccoyototccototccotirx8rftfiirccr8rf7rf8rc7dr8f
585f84d4e4ed9e585e4ww4884e7d3d7
47373 37 I 447d8rx8txieufjdjsjskkaoa[/div]

Oh, great! Thanks for the help!

Flannery Lue · Jul 16, 2015

Um. I was looking into making a CSS signature, and I was editing, and previewing it to check my results... untill the forums crashed for a bit. Then I went to that 'ww3schools' website, to use their editor thingy, to test my signature whilst the forums were offline.

Now that I have my finished result, I'm a bit confused at how to convert it into the BB Code version of CSS we have here. This is what I have:

HTML:

<div align="center">
<div style="background: url('http://i.imgur.com/5Ffpfl8.gif') center no-repeat; width: 480px; height: 272px;">
<div style="padding-top: 210px;">
<div align="center">
<a href="http://flanneryluemoore.imgur.com/"><img src="http://i.imgur.com/tDmjSy0.png"></a>
<a href="http://www.minecraftforum.net/members/Quavelen/"><img src="http://i.imgur.com/UHWqtab.png"></a> 
<a href="http://services.runescape.com/m=adventurers-log/profile?searchName=Quavelen"><img src="http://i.imgur.com/ERQRLsc.png"></a>
</div>
</div>
<div style="text-shadow: 0px 0px 8px silver; color: darkred;">
<div align="center">
<font size="4">
<font family="georgia">Love and Understand, Imagine and Believe. It will take you far.</a>
</div>
</font>
</font>
</div>
</div>
</div>
</div>
</div>
</div>

And this is what it would look like, with that HTML: (I recorded a .gif)

Those three little images; the Imgur, MineCraft, and RuneScape icons are clickable, and each of them lead to my profile pages. With the available CSS BB Code that I know of, I'm unaware as to how I can put those icons on top of the animated flames, and make them clickable. Could someone please point me in the right direction? I've fiddled around with it enough in the signature editor, that I'm at a loss.

Tsutarja · Jul 16, 2015

Flannery Lue said:
Um. I was looking into making a CSS signature, and I was editing, and previewing it to check my results... untill the forums crashed for a bit. Then I went to that 'ww3schools' website, to use their editor thingy, to test my signature whilst the forums were offline.

Now that I have my finished result, I'm a bit confused at how to convert it into the BB Code version of CSS we have here. This is what I have:

HTML:

<div align="center"> <div style="background: url('http://i.imgur.com/5Ffpfl8.gif') center no-repeat; width: 480px; height: 272px;"> <div style="padding-top: 210px;"> <div align="center"> <a href="http://flanneryluemoore.imgur.com/"><img src="http://i.imgur.com/tDmjSy0.png"></a> <a href="http://www.minecraftforum.net/members/Quavelen/"><img src="http://i.imgur.com/UHWqtab.png"></a> <a href="http://services.runescape.com/m=adventurers-log/profile?searchName=Quavelen"><img src="http://i.imgur.com/ERQRLsc.png"></a> </div> </div> <div style="text-shadow: 0px 0px 8px silver; color: darkred;"> <div align="center"> <font size="4"> <font family="georgia">Love and Understand, Imagine and Believe. It will take you far.</a> </div> </font> </font> </div> </div> </div> </div> </div> </div>

And this is what it would look like, with that HTML: (I recorded a .gif)

Those three little images; the Imgur, MineCraft, and RuneScape icons are clickable, and each of them lead to my profile pages. With the available CSS BB Code that I know of, I'm unaware as to how I can put those icons on top of the animated flames, and make them clickable. Could someone please point me in the right direction? I've fiddled around with it enough in the signature editor, that I'm at a loss.

I'm gonna attempt to see if I got this right...

Spoiler:

Hmm, is that what you needed? Here's the code to that right here:

Spoiler:

Hope this helps! :)

CSS Help & Resources

More options

donavannj

BurningLanguages

Student Linguist

donavannj

Charlie Brown

[font=lato]coolcoolcool[/font]

Hybrid Trainer

Charlie Brown

[font=lato]coolcoolcool[/font]

Etherion

Guest

Tsutarja

Etherion

Guest

Etherion

Guest

Gigadweeb

[b][i]The Black Swordsman[/i][/b]

Tsutarja

Ooka

[font=Maven Pro][color=#A75EE2]Cosmic[/color][/fon

donavannj

Etherion

Guest

StormGamer25

Yes, I liek mudkips. I may or may not secretly be

Tsutarja

StormGamer25

Yes, I liek mudkips. I may or may not secretly be

Flannery Lue

Soul Sister

Tsutarja