• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

CSS Help & Resources

donavannj

donavannj

22,953
Posts
19
Years
    • 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

    Student Linguist
    193
    Posts
    10
    Years
    • donavannj said:
    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?
    Click to expand...

    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

    donavannj

    22,953
    Posts
    19
    Years
    • 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 :).
    Click to expand...

    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.
     
    Last edited:
    Charlie Brown

    Charlie Brown

    [font=lato]coolcoolcool[/font]
    4,240
    Posts
    12
    Years
    • 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

    Hybrid Trainer

    2,096
    Posts
    15
    Years
    • 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
    Members:
    text
    text
    text
    text
    text
    text
    text
    text
    text
    Members:
    text
    text
    text
    text
    text
    text
    text
    text
    text
    Members:
    text
    text
    text
    text
    text
    text
    text
    text
    text
     

    Etherion

    Guest
    0
    Posts
    Spoiler:
     
    Last edited:
    Tsutarja

    Tsutarja

    27,751
    Posts
    14
    Years
    • gio7sm said:
    Spoiler:


    I dont know whats wrong! Why are there two boxes?
    Click to expand...
    Are you by chance using the WYSIWYG editor on the forum? Check your User CP options just to make sure.
     
    Gigadweeb

    Gigadweeb

    [b][i]The Black Swordsman[/i][/b]
    319
    Posts
    9
    Years
    • 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

    Tsutarja

    27,751
    Posts
    14
    Years
    • 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.
    Click to expand...
    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

    Ooka

    [font=Maven Pro][color=#A75EE2]Cosmic[/color][/fon
    2,626
    Posts
    16
    Years
    • 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.
    Click to expand...

    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. :)
     
    Last edited:
    donavannj

    donavannj

    22,953
    Posts
    19
    Years
    • gio7sm said:
    Spoiler:
    Click to expand...

    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

    Guest
    0
    Posts
    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.
    Click to expand...

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

    StormGamer25

    Yes, I liek mudkips. I may or may not secretly be
    141
    Posts
    9
    Years
    • Seen Jul 21, 2021
    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

    Tsutarja

    27,751
    Posts
    14
    Years
    • 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?
    Click to expand...
    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

    Yes, I liek mudkips. I may or may not secretly be
    141
    Posts
    9
    Years
    • Seen Jul 21, 2021
    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:
    Click to expand...
    Oh, great! Thanks for the help!
     

    Flannery Lue

    Soul Sister
    31
    Posts
    11
    Years
    • 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)

    HPtfvKT.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

    Tsutarja

    27,751
    Posts
    14
    Years
    • 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)

    HPtfvKT.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.
    Click to expand...
    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! :)
     
    You must log in or register to reply here.
    Back
    Top