CSS Help & Resources

[Hybrid Trainer]

Sorry to say Justin but the way that person does it is by turned the userbars into a gif.

The closest thing you can do to get it like that with CSS is to create a box and have people manually scroll it.
It can be done like this:

Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll

You set the box's width and height and then the overflor code makes it scroll when the text hits the box's limit.

[cd=width:300px; height:30px; overflow:auto;]Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll[/cd]

 

[Impo]

does anyone here know how to make css appear side by side? All I've got is this:

RADIANT YELLOW BUILDING

The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

SERENE BLUE
BUILDING

The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

NETTLE RED
BUILDING

The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

​

And I want it to be side by side, so I can add another css box under all three. Any help is appreciated, thanks.

 

[Mew~]

I had a similar problem before. Just add this to each css coding 'display:inline-block;' if your too lazy then just quote this post and steal the code. xD;
​

RADIANT YELLOW BUILDING

The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

SERENE BLUE
BUILDING

The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

NETTLE RED
BUILDING

The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

​

 

[Impo]

...wow, thank you so much :D !

...is there a way to put spaces inbetween? I'll mess with the code anyway, thank you :) !

I had a similar problem before. Just add this to each css coding 'display:inline-block;' if your too lazy then just quote this post and steal the code. xD;
​

RADIANT YELLOW BUILDING

The Radiant Yellow's are known for being very happy and positive trainers. They enjoying battling even if they do not win, and are always glad to see their Pokemon on the battleground and never get angry at them for losing. They converse with Pokemon in a childish way, often by playing games or offering treats. They are humble in defeat, but also in victory, always thanking their opposition. They are also very comforting, consoling people and Pokemon when they need it.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

SERENE BLUE
BUILDING

The Serene Blues are known for their quiet and calm nature. In battles, Blues are rather quiet, but they show their Pokemon affection by means other than words. Rumors say that some Blues can speak to their Pokemon telepathically, and that is why they don't speak much. When in the face of adveristy, Blues remain calm and think of a plan while remaining cool-headed. Blues are also known for being rather cunning and smart, often planning and analysing things in their silence. They can be seen as quietly considering all options before choosing, and are very dextrous.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

NETTLE RED
BUILDING

The Nettle Reds are a very intimidating and loud household. They enjoy battling as a form of fitness and a way to connect with their Pokemon. They are proud when they win, and have a very conspicuous way of showing it. They enjoying training all kinds of Pokemon to learn how they battle, and they use that information against opponents. The Reds have a prone to having very short tempers, but their Pokemon and peers often oversee it. Due to their nature, their Pokemon often inherit some of their traits, which show both on and off the battleground.

1 Member
0 Total House Points
0 Total Wins
0 Total Draws
0 Total Loses
0 Total Upgrades
MVP
MWP

​

wow, thanks so much

but now the boxes are all next to each other, and not spaced like they were before.
Do you know how to fix that :s ?

Wait, I fixed that. But now, how do I give them spaces inbetween :/ ?

 

[Purple Materia]

Centering three divs?

I'm trying to have a three-column website, where the columns are completely center.

It's driving me crazy trying to center them! I know I'm doing something wrong, obviously, but I can't figure it out. I am a little new to coding websites, though, so keep that in mind.

Spoiler:

    body {
    background: url('img/bg.png') repeat #FFFFFF;
    color:#000000;
    font: 10px Verdana, Tahoma, Arial;
    line-height: 18px;
    margin:0;
    padding:0;
    text-align:center;}
    
/* CSS for DIVs and the like */

    #container{
    margin:0 auto;
    width:1024px;}

    #t-left-blogs{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}
    
    #t-middle-aboutme{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;
    float:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}
    
    #t-right-twitter{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:3%;
    background:#FFFFFF;}

    #banner{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;}
    
/* CSS for Images */

    img.floatRightClear { 
    float: right; 
    margin: 3px;}
    
/* Links and text */

    h1{font: 18px Verdana, Tahoma, Arial;}
    
    a  img{
    outline:none;
    border:none;}

    a:visited { 
    color: #00697c; 
    text-decoration: none;}

    a:link{
    color: #00697c; 
    text-decoration: none;}

    a:active{
    color: #00697c; 
    text-decoration: none;}

    a:hover {    
    color: #003741;}

HTML

Spoiler:

<!--
    
    DIV PREFEXES:
    t - The tables that hold content
    b - The bottom of the page that holds 
        the games and music stuff
-->
<body>
<div id="container">
<div id="top-navbar">Projects / About Me / Contact Me</div>
<div id="banner"><center><img src="img/banner.png"/></center><br><br></div>
  <div>
      <div id="t-left-blogs"><font size="5">Recent posts.</font><br><br>
                                Blog entries go here.</div></div>
                                
      <div id="t-middle-aboutme"><font size="5">Hello. I'm a nerd.</font><br><br>
                                 This is an introduction.</div>
      

               
      </div>
      <div id="t-right-twitter"><font size="5">Recent tweets.</font><br><br>
                                These are tweets.
      </div> 
    </div>
</div>
</body>
</html>

Thanks in advance!

@Impo - Try using "margin-left" and "margin-right".

 

[donavannj]

I'm trying to have a three-column website, where the columns are completely center.

It's driving me crazy trying to center them! I know I'm doing something wrong, obviously, but I can't figure it out. I am a little new to coding websites, though, so keep that in mind.

Spoiler:

    body {
    background: url('img/bg.png') repeat #FFFFFF;
    color:#000000;
    font: 10px Verdana, Tahoma, Arial;
    line-height: 18px;
    margin:0;
    padding:0;
    text-align:center;}
    
/* CSS for DIVs and the like */

    #container{
    margin:0 auto;
    width:1024px;}

    #t-left-blogs{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}
    
    #t-middle-aboutme{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;
    float:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:5px;
    background:#FFFFFF;}
    
    #t-right-twitter{
    font: 11px Verdana, Tahoma, Arial;
    float:left;
    text-align:left;
    padding:10px;
    width:250px;
    height:auto;
    border-style:solid;
    border-width:1px;
    margin-left:3%;
    margin-right:3%;
    background:#FFFFFF;}

    #banner{
    font: 11px Verdana, Tahoma, Arial;
    text-align:left;}
    
/* CSS for Images */

    img.floatRightClear { 
    float: right; 
    margin: 3px;}
    
/* Links and text */

    h1{font: 18px Verdana, Tahoma, Arial;}
    
    a  img{
    outline:none;
    border:none;}

    a:visited { 
    color: #00697c; 
    text-decoration: none;}

    a:link{
    color: #00697c; 
    text-decoration: none;}

    a:active{
    color: #00697c; 
    text-decoration: none;}

    a:hover {    
    color: #003741;}

HTML

Spoiler:

<!--
    
    DIV PREFEXES:
    t - The tables that hold content
    b - The bottom of the page that holds 
        the games and music stuff
-->
<body>
<div id="container">
<div id="top-navbar">Projects / About Me / Contact Me</div>
<div id="banner"><center><img src="img/banner.png"/></center><br><br></div>
  <div>
      <div id="t-left-blogs"><font size="5">Recent posts.</font><br><br>
                                Blog entries go here.</div></div>
                                
      <div id="t-middle-aboutme"><font size="5">Hello. I'm a nerd.</font><br><br>
                                 This is an introduction.</div>
      

               
      </div>
      <div id="t-right-twitter"><font size="5">Recent tweets.</font><br><br>
                                These are tweets.
      </div> 
    </div>
</div>
</body>
</html>

Thanks in advance!

@Impo - Try using "margin-left" and "margin-right".

I see at least two excess closing </div> tags without opening pairs, causing at least one of your divs to close early.

 

[Legendary Silke]

Hmm...

OK, here's the deal:

My signature appears correctly in IE7/8/9, Chrome, and the Android browser. However, when rendered in Firefox, it somehow appends extra padding to the bottom, causing the signature area to have a vertical scrollbar.

How should I fix it? Or is the issue on the forum side? (No extra padding appears in the signature preview or in this post)

[PLAIN][center][div="position: relative; top: 0px; left: 0px; font: 10pt "Trebuchet MS", Helvetica, sans-serif; border-style: solid; border-width: 4px; border-color: black; background-image:url("https://i1096.photobucket.com/albums/g329/Jarooda/Signatures/twiggysigback2.jpg"); width: 592px; height: 342px;"][div="position: relative; top: 0px; left: 0px"][img]https://i1096.photobucket.com/albums/g329/Jarooda/Signatures/sigshadowinset.png[/img][/div][div="position: relative; top: -342px; letter-spacing: 1px; color: #ffffff; width: 592px; height: 24px; background-color: #7e9a3b; opacity: 0.85; filter:alpha(opacity=85);"][center][size=3][URL=https://www.pokecommunity.com/blog.php?u=243899][color=#ffffff]diaries of a quadruped[/color][/URL] :: [URL=https://www.pokecommunity.com/members/73941][color=#ffffff]paired with kip[/color][/URL] :: [URL=https://twitter.com/#!/AxAxAxew][color=#ffffff]twitter[/color][/URL][/size][/center][/div] [div="letter-spacing: 1px; position: relative; top: -62px; color: #ffffff; width: 592px; height: 24px; background-color: #7e9a3b; opacity: 0.85; filter:alpha(opacity=85);"][center][size=3][url=https://www.pokecommunity.com/threads/269655/][color=#ffffff]starters[/color][/url] :: [url=https://www.pokecommunity.com/threads/264197/][color=#ffffff]cute[/color][/url] :: [url=https://www.pokecommunity.com/threads/268621/][color=#ffffff]dragons[/color][/url] :: [url=https://www.pokecommunity.com/threads/269280/][color=#ffffff]water[/color][/url] :: [url=https://www.pokecommunity.com/threads/266169/][color=#ffffff]snivy[/color][/url] :: [url=https://www.pokecommunity.com/threads/270023/][color=#ffffff]egg swap iv[/color][/url][/size][/center][/div][div="letter-spacing: 1px; position: relative; top: -62px; color: #ffffff; width: 592px; height: 14px; background-color: #3F4C1D; opacity: 0.85; filter:alpha(opacity=85);"][center][size=1]signature art by kip[/size][/center][/div][/div][/center][/PLAIN]

diaries of a quadruped :: paired with kip :: twitter​

starters :: cute :: dragons :: water :: snivy :: egg swap iv​

signature art by kip​

 

[Hybrid Trainer]

It seems to be a forum problem twiggy. I can see what you mean on firefox it adds quite a bit of margin to the bottom causing it to scroll but after I changed from the default delibird theme to Flames of Simplicity the scroll bar was gone.
Looks like there isn't much you can do about it :x

 

[Legendary Silke]

It seems to be a forum problem twiggy. I can see what you mean on firefox it adds quite a bit of margin to the bottom causing it to scroll but after I changed from the default delibird theme to Flames of Simplicity the scroll bar was gone.
Looks like there isn't much you can do about it :x

The problem seems to also appear with The Stand Nexus, so I have a feeling that the scrollbar implementation is problematic or something.

So what to do if a signature moderator sees the signature using Firefox?

 

[Hybrid Trainer]

So what to do if a signature moderator sees the signature using Firefox?

Technically you aren't breaking any rules so if it were me who was judging it I would let it slide but really it depends on who's judging it. Some will let it be because it's a problem on the forum styles side, some will make you change it because it's a problem on the forum styles side.
I think if you are forced to change it then you could remove the credit part at the bottom and maybe add it in as a title over kips name?

 

[Petie]

While not the most elegant solution, you could force the scrollbar to be hidden by adding overflow: hidden; to your CSS. It should have no effect on any of the working browsers and since the scrollable content is white space in Firefox, you won't be missing anything there either.

 

[Legendary Silke]

While not the most elegant solution, you could force the scrollbar to be hidden by adding overflow: hidden; to your CSS. It should have no effect on any of the working browsers and since the scrollable content is white space in Firefox, you won't be missing anything there either.

That seems to be the best solution to work around the FF issue - the extra padding is now invisible and inaccessible, the scrollbar disappeared, and FF users are now none the wiser.

 

[Tsutarja]

Question of curiosity, but how do I get a transparent rectangle overlayed on top of a background with a scroll box inside the transparent rectangle? I'm not too experienced with CSS as a whole.

 

[Hybrid Trainer]

Well as for the transparent bit Zach you can either set the background image as a semi-transparent colour . The other way is to make the box transparent using this code:

opacity:0.4

Or

filter:alpha(opacity=40)
(for IE8 or earlier)

The transparency code also makes everything inside the box transparent too though so personally I'd go with the background image.

As for the scroll box bit you just set the height/width to how big you want to be and then use this code

overflow: auto;

 

[Impo]

I'm in a little bit of trouble. What I want to do is have some rotating text on the outside of my signature, but even time I do it the text goes far far away.

This is what I mean:

3,600+

Paired to DragonOmega and Shining Raichu

Does anyone know how to fix this?

 

[Hybrid Trainer]

I've had this problem quite a lot Impo "/
So far from what I've seen the only way to fix it is to use positioning codes such as "left:0px;", "right:0px;", "top:0px;" and "bottom:0px;" to position it in the correct place like so.

3,600+

Paired to DragonOmega and Shining Raichu

I'm assuming that's what you were trying to do but idk :x

I don't use rotation that much though so if there's another, easier way of doing this please do share :3

 

[Impo]

3,600+


Mario Kart 7 Sig Collab

Paired to DragonOmega and Shining Raichu

​

Wow, that's amazing! Thank you so much :D !
But I kinda edited my signature a small touch, and I tried subtly adding it in to the equasion, but then I messed up again /facepalm

I want it all to be on the right side of the page, with everything in the Toad thing centered. Would it be too much to ask if you could help with that :x ?

 

[Legendary Silke]

Wow, that's amazing! Thank you so much :D !
But I kinda edited my signature a small touch, and I tried subtly adding it in to the equasion, but then I messed up again /facepalm

I want it all to be on the right side of the page, with everything in the Toad thing centered. Would it be too much to ask if you could help with that :x ?

You might want to remove a couple of extra returns/enters at the bottom of the sig, by the way. That should remove the scroll - if not, insert "overflow: hidden;" to the first div block.

Maybe we can do a reboot of the thread at this point... should we? I think a bit of extra information about all the fancier stuff should be in there. XD

 

[Impo]

.. I don't currently have any visible scroll on my screen. The line spacing for the enters is 4px, I think that's why.

 

[Hybrid Trainer]

Ok I think that's done it. What I've done is created a box and set it to relative using the position: code. I've also added on a bit of a margin to the right so that the text isn't poking out the side :3

3,600+


Mario Kart 7 Sig Collab

Paired to DragonOmega & Shining Raichu

.

Maybe we can do a reboot of the thread at this point... should we? I think a bit of extra information about all the fancier stuff should be in there. XD

Or failing that we could just get a mod/the original poster to add stuff in? xD