CSS Help & Resources Page 20

Started by seeker November 16th, 2009 5:38 PM
  • 175331 views
  • 902 replies

Uecil

Unknown.
Seen March 20th, 2023
Posted May 7th, 2021
2,567 posts
13.5 Years
I've never been too sure on this, but I would like to make the width of this:


Smaller. Is there any way of doing that?



o



Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
You use the overflow CSS code and set it to hidden so it turns out like this :)


For the sound BB code you need to set the width to 60px if you just want to get the control buttons.

[cd=overflow:hidden; width:60px;][sound=Itsumo No Fuukei]http://www.fileden.com/files/2010/10/22/2999413/Suzumiya%20Haruhi%20OST%20-%20Itsumo%20no%20fuukei_%28new%29.mp3[/sound][/cd]

Uecil

Unknown.
Seen March 20th, 2023
Posted May 7th, 2021
2,567 posts
13.5 Years
You use the overflow CSS code and set it to hidden so it turns out like this :)


For the sound BB code you need to set the width to 60px if you just want to get the control buttons.

[cd=overflow:hidden; width:60px;][sound=Itsumo No Fuukei]http://www.fileden.com/files/2010/10/22/2999413/Suzumiya%20Haruhi%20OST%20-%20Itsumo%20no%20fuukei_%28new%29.mp3[/sound][/cd]
That's perfect! thank you :D
I shall try that now.



o



Age 37
Male
With My Wife, Reshiram!
Seen March 8th, 2014
Posted January 4th, 2014
992 posts
12.3 Years
I know nothing about CSS, but I want my signature to cycle through different texts one at a time similar to the userbars this member has http://www.pokecommunity.com/member.php?u=255550

I want each of my links to cycle through one at a time like the user bars gameplayer56 has (in the signature of this member)

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
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

Playhouse Pokemon

Male
Earth
Seen 1 Week Ago
Posted December 7th, 2021
2,456 posts
13.3 Years
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~

THE HOST IS BROKEN

Seen April 13th, 2016
Posted April 12th, 2016
4,163 posts
14.2 Years
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


There was nothing. Followed by everything. Swirling, burning specks of creation that circled life-giving suns. And then we reached to the light.

Impo

Playhouse Pokemon

Male
Earth
Seen 1 Week Ago
Posted December 7th, 2021
2,456 posts
13.3 Years
...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

Shape the future!

Age 28
Male
Seen April 12th, 2014
Posted August 20th, 2013
783 posts
12.6 Years
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 have fallen from the Land of Magic. I am Stardust Witch Meruru!"
Combat Arms | Raptr | Hummingbird | Last.fm

donavannj

Age 32
Male
'cause it get cold like Minnesota
Seen 4 Hours Ago
Posted 1 Week Ago
22,513 posts
18.2 Years
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.
whoops

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
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)

[center][css-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("http://i1096.photobucket.com/albums/g329/Jarooda/Signatures/twiggysigback2.jpg"); width: 592px; height: 342px;"][css-div="position: relative; top: 0px; left: 0px"][img]http://i1096.photobucket.com/albums/g329/Jarooda/Signatures/sigshadowinset.png[/img][/css-div][css-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=http://www.pokecommunity.com/blog.php?u=243899][color=#ffffff]diaries of a quadruped[/color][/URL] :: [URL=http://www.pokecommunity.com/member.php?u=73941][color=#ffffff]paired with kip[/color][/URL] :: [URL=https://twitter.com/#!/AxAxAxew][color=#ffffff]twitter[/color][/URL][/size][/center][/css-div] [css-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=http://www.pokecommunity.com/showthread.php?t=269655][color=#ffffff]starters[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=264197][color=#ffffff]cute[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=268621][color=#ffffff]dragons[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=269280][color=#ffffff]water[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=266169][color=#ffffff]snivy[/color][/url] :: [url=http://www.pokecommunity.com/showthread.php?t=270023][color=#ffffff]egg swap iv[/color][/url][/size][/center][/css-div][css-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][/css-div][/css-div][/center]

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
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

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
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

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years

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

Age 34
Male
Colorado
Seen June 25th, 2022
Posted July 14th, 2020
152 posts
14.5 Years
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

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
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

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
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

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
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

Playhouse Pokemon

Male
Earth
Seen 1 Week Ago
Posted December 7th, 2021
2,456 posts
13.3 Years
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

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
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

Playhouse Pokemon

Male
Earth
Seen 1 Week Ago
Posted December 7th, 2021
2,456 posts
13.3 Years


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

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
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

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
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