Science & Technology From the computer lab to the chemistry lab, or even the observatory, here's where we nerd out over all things science and technology!

Reply
 
Thread Tools
  #526    
Old February 17th, 2012 (7:41 AM).
Oryx's Avatar
Oryx Oryx is offline
CoquettishCat
  • Crystal Tier
 
Join Date: Mar 2011
Age: 24
Gender: Female
Nature: Relaxed
Posts: 13,204

You want the "overflow:auto;" tag in the css box that you'd like a scroll on. That will add one if the text spills over the height limit. :3

__________________



Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Reply With Quote

Relevant Advertising!

  #527    
Old February 18th, 2012 (4:39 AM).
何贤豪's Avatar
何贤豪 何贤豪 is offline
     
    Join Date: Jan 2012
    Posts: 258

    Hello!
    Can you help me a bit with CSS?
    I have this line of code...

    [*cough*cd="background-color: #6E4B3B; height: 200px; width: 500px; float: center"]
    My Friend Code:
    HeartGold | FC N/A | OT Jason | ID N/A
    My Past OTs and IDs:
    HeartGold | OT Jason | ID N/A
    SoulSilver | OT Jason | ID N/A
    Platinum | OT Jason | ID N/A
    [/*cough*cd]

    Get rid of the *cough* part, I did it so it won't be actual CSS.
    Whenever I use this code, I get this...


    My Friend Code:
    HeartGold | FC N/A | OT Jason | ID N/A
    My Past OTs and IDs:
    HeartGold | OT Jason | ID N/A
    SoulSilver | OT Jason | ID N/A
    Platinum | OT Jason | ID N/A

    What can I do to make it have the height and width I want?

    Thanks!

    Reply With Quote
      #528    
    Old February 18th, 2012 (4:58 AM).
    Twiggy's Avatar
    Twiggy Twiggy is offline

    You like dragons?

    • Crystal Tier
     
    Join Date: Dec 2010
    Location: Plushies.
    Gender: Male
    Nature: Hasty
    Posts: 5,926

    Quote:
    Originally Posted by Rainy Garden of Fire View Post
    Hello!
    Can you help me a bit with CSS?
    I have this line of code...

    [*cough*cd="background-color: #6E4B3B; height: 200px; width: 500px; float: center"]
    My Friend Code:
    HeartGold | FC N/A | OT Jason | ID N/A
    My Past OTs and IDs:
    HeartGold | OT Jason | ID N/A
    SoulSilver | OT Jason | ID N/A
    Platinum | OT Jason | ID N/A
    [/*cough*cd]

    Get rid of the *cough* part, I did it so it won't be actual CSS.
    Whenever I use this code, I get this...


    My Friend Code:
    HeartGold | FC N/A | OT Jason | ID N/A
    My Past OTs and IDs:
    HeartGold | OT Jason | ID N/A
    SoulSilver | OT Jason | ID N/A
    Platinum | OT Jason | ID N/A

    What can I do to make it have the height and width I want?

    Thanks!

    Use relative positioning on the block of text(s) that you want to move.
    You might want to put a wrapper div around the blocks of text.
    Then insert these two:

    Code:
    position:relative;top:(as needed)px;left:(as needed);

    You'll need to tweak a lot so you'll need the previews Try doing it in Firefox. Never use line breaks (enter/return) to position the blocks of text since different browsers can have different line heights, same goes with different fonts.

    float:center doesn't exist.

    Reply With Quote
      #529    
    Old February 18th, 2012 (7:39 AM).
    何贤豪's Avatar
    何贤豪 何贤豪 is offline
       
      Join Date: Jan 2012
      Posts: 258

      Quote:
      Originally Posted by ♪Twiggy♪ View Post
      Use relative positioning on the block of text(s) that you want to move.
      You might want to put a wrapper div around the blocks of text.
      Then insert these two:
      Code:
      position:relative;top:(as needed)px;left:(as needed);
      You'll need to tweak a lot so you'll need the previews Try doing it in Firefox. Never use line breaks (enter/return) to position the blocks of text since different browsers can have different line heights, same goes with different fonts.

      float:center doesn't exist.

      Sooo...how does it fit together?

      Reply With Quote
        #530    
      Old February 18th, 2012 (9:34 AM).
      Liliana Vess's Avatar
      Liliana Vess Liliana Vess is offline
      My Secrecy. My Advantage.
      • Platinum Tier
       
      Join Date: Nov 2008
      Location: «UK»
      Gender: Male
      Posts: 1,983

      Is that what you were looking for? From looking at your code you had a lot of un-needed BBcoding in there. I'd very strongly advise if you are using CSS then avoid using BBcoding where possible. For example when trying to make a font colour put in "color:#49648" into the css tag.

      [cd="background-color: #6E4B3B; height: 200px; width: 500px; text-align: center; color:#496489; font-family:Trebuchet MS;"]My Friend Code:
      HeartGold | FC N/A | OT Jason | ID N/A
      My Past OTs and IDs:
      HeartGold | OT Jason | ID N/A
      SoulSilver | OT Jason | ID N/A
      Platinum | OT Jason | ID N/A
      [/cd]

      My Friend Code:
      HeartGold | FC N/A | OT Jason | ID N/A
      My Past OTs and IDs:
      HeartGold | OT Jason | ID N/A
      SoulSilver | OT Jason | ID N/A
      Platinum | OT Jason | ID N/A

      __________________

      "I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
      -Szadek, Lord of Secrets

      Reply With Quote
        #531    
      Old February 18th, 2012 (8:06 PM). Edited February 18th, 2012 by 何贤豪.
      何贤豪's Avatar
      何贤豪 何贤豪 is offline
         
        Join Date: Jan 2012
        Posts: 258

        Quote:
        Originally Posted by Hybrid Trainer View Post
        Is that what you were looking for? From looking at your code you had a lot of un-needed BBcoding in there. I'd very strongly advise if you are using CSS then avoid using BBcoding where possible. For example when trying to make a font colour put in "color:#49648" into the css tag.

        [cd="background-color: #6E4B3B; height: 200px; width: 500px; text-align: center; color:#496489; font-family:Trebuchet MS;"]My Friend Code:
        HeartGold | FC N/A | OT Jason | ID N/A
        My Past OTs and IDs:
        HeartGold | OT Jason | ID N/A
        SoulSilver | OT Jason | ID N/A
        Platinum | OT Jason | ID N/A
        [/cd]

        My Friend Code:
        HeartGold | FC N/A | OT Jason | ID N/A
        My Past OTs and IDs:
        HeartGold | OT Jason | ID N/A
        SoulSilver | OT Jason | ID N/A
        Platinum | OT Jason | ID N/A
        Oh, I know that for the font colors...for the font type, I never use CSS to format that...Thanks a lot! And also...is it possible to use text-align: center for a line of CSS code that will be used for the whole post? And I have another question...how would you use the text family Lucida Console / Lucida Sans Unicode? I tried it and it won't work...

        Reply With Quote
          #532    
        Old February 18th, 2012 (8:21 PM).
        Twiggy's Avatar
        Twiggy Twiggy is offline

        You like dragons?

        • Crystal Tier
         
        Join Date: Dec 2010
        Location: Plushies.
        Gender: Male
        Nature: Hasty
        Posts: 5,926

        Quote:
        Originally Posted by Rainy Garden of Fire View Post
        Oh, I know that for the font colors...for the font type, I never use CSS to format that...Thanks a lot! And also...is it possible to use text-align: center for a line of CSS code that will be used for the whole post? And I have another question...how would you use the text family Lucida Console / Lucida Sans Unicode? I tried it and it won't work...

        Yes. Wrap the entire text block with a single div with that property.

        font-family:'Lucida Console','Lucida Sans Unicode',sans-serif (the single quotes need to be in there due to spaces in font names)

        Reply With Quote
          #533    
        Old February 19th, 2012 (5:29 PM).
        Owl's Avatar
        Owl Owl is offline
        • Crystal Tier
         
        Join Date: Jul 2009
        Age: 22
        Gender: Female
        Posts: 13,368

        Just wanted to ask quick question, what's the code for overlapping text? And shadow text (?) as well please. It's been a while since I've been here and I forgot them. x.x

        __________________

        Reply With Quote
          #534    
        Old February 19th, 2012 (5:36 PM).
        Oryx's Avatar
        Oryx Oryx is offline
        CoquettishCat
        • Crystal Tier
         
        Join Date: Mar 2011
        Age: 24
        Gender: Female
        Nature: Relaxed
        Posts: 13,204

        Quote:
        Originally Posted by Charizard★ View Post
        Just wanted to ask quick question, what's the code for overlapping text? And shadow text (?) as well please. It's been a while since I've been here and I forgot them. x.x

        To overlap text you can just position one div on top of another, unless I'm missing some code that idk about, haha.

        Text shadow is like this:

        text-shadow: right bottom fuzzy color

        "right" is how far to the right it is, "bottom" is how far down it is, "fuzzy" is obviously how sharp or not the shadow is, and color is obvious haha.

        __________________



        Theme * Pair * VM * PM

        Not all men...

        Are all men stupid?

        That's right.

        Reply With Quote
          #535    
        Old February 19th, 2012 (5:39 PM).
        Owl's Avatar
        Owl Owl is offline
        • Crystal Tier
         
        Join Date: Jul 2009
        Age: 22
        Gender: Female
        Posts: 13,368

        Quote:
        Originally Posted by Toujours View Post

        To overlap text you can just position one div on top of another, unless I'm missing some code that idk about, haha.

        Text shadow is like this:

        text-shadow: right bottom fuzzy color

        "right" is how far to the right it is, "bottom" is how far down it is, "fuzzy" is obviously how sharp or not the shadow is, and color is obvious haha.

        Not to be nitpicky or anything, but I remember there were more specific codes for doing the shadow and overlap. ._.

        Not trying to be rude by saying that x.x

        __________________

        Reply With Quote
          #536    
        Old February 19th, 2012 (5:42 PM).
        Oryx's Avatar
        Oryx Oryx is offline
        CoquettishCat
        • Crystal Tier
         
        Join Date: Mar 2011
        Age: 24
        Gender: Female
        Nature: Relaxed
        Posts: 13,204

        Well that is a very specific code for shadow. That's like...the tag for it, lol. How could you get more specific than text-shadow as a tag? o_O

        Overlap very well could be though, I don't know anything about that offhand so I definitely believe you that there might be an simpler way that idk about. XD

        Edit:

        Text shadows are shadowy

        That code is:

        [span="color:#CC99CC;text-shadow:2px 2px 2px #000;font-size:16px;font-family:Arial Black;"]Text shadows are shadowy[/span]

        __________________



        Theme * Pair * VM * PM

        Not all men...

        Are all men stupid?

        That's right.

        Reply With Quote
          #537    
        Old February 19th, 2012 (5:44 PM).
        donavannj's Avatar
        donavannj donavannj is offline
        • Moderator
        • Crystal Tier
         
        Join Date: Mar 2005
        Location: 'cause it get cold like Minnesota
        Age: 26
        Gender: Male
        Posts: 20,925

        Text-shadow is the proper code.

        There are other options for it besides the ones Toujours mentioned, but they relate to exactly where the shadow is placed relative to the original text.

        text-shadow: -2px 0px 2px #660000;

        The above gives us this:

        Test text.

        EDIT: Oh, you mean the overlap option? *goes to check W3C on it*

        EDIT 2: There is no element called overlap. :x

        __________________

        idol trash and game nerd

        Reply With Quote
          #538    
        Old February 19th, 2012 (5:46 PM).
        Owl's Avatar
        Owl Owl is offline
        • Crystal Tier
         
        Join Date: Jul 2009
        Age: 22
        Gender: Female
        Posts: 13,368

        Quote:
        Originally Posted by Toujours View Post
        Well that is a very specific code for shadow. That's like...the tag for it, lol. How could you get more specific than text-shadow as a tag? o_O

        Overlap very well could be though, I don't know anything about that offhand so I definitely believe you that there might be an simpler way that idk about. XD

        *facepalm* My bad, not using CSS coding for a while really made me confused .///.

        Thanks!

        Quote:
        Originally Posted by donavannj View Post
        Text-shadow is the proper code.

        There are other options for it besides the ones Toujours mentioned, but they relate to exactly where the shadow is placed relative to the original text.

        text-shadow: -2px 0px 2px #660000;

        The above gives us this:

        Test text.

        EDIT: Oh, you mean the overlap option? *goes to check W3C on it*

        Thanks Donny! :D

        __________________

        Reply With Quote
          #539    
        Old February 19th, 2012 (7:32 PM).
        Twiggy's Avatar
        Twiggy Twiggy is offline

        You like dragons?

        • Crystal Tier
         
        Join Date: Dec 2010
        Location: Plushies.
        Gender: Male
        Nature: Hasty
        Posts: 5,926

        In addition to the above values, there is a fourth value, the spread value, just like box-shadow. However support is really spotty for it for text-shadow, since right now only IE10 supports it properly. I wouldn't recommend it, but it can make the shadow thicker or thinner. you can also use it to outline text. You will have to do double declarations if you want it to work on everything, one without the spread value, then one with it. It has to be in this order because the latter is deemed invalid in older browsers. And putting the former value later will cause the newer browsers to use the fallback values instead.

        Reply With Quote
          #540    
        Old February 20th, 2012 (3:58 PM). Edited February 20th, 2012 by Owl.
        Owl's Avatar
        Owl Owl is offline
        • Crystal Tier
         
        Join Date: Jul 2009
        Age: 22
        Gender: Female
        Posts: 13,368

        Quote:
        Originally Posted by donavannj View Post

        EDIT 2: There is no element called overlap. :x

        So, it would be impossible to do this on PC? I remember doing something similar in my signature where the text went a bit higher onto my sig picture and the bottom one kind of overlapped onto it.

        __________________

        Reply With Quote
          #541    
        Old February 20th, 2012 (4:41 PM).
        Liliana Vess's Avatar
        Liliana Vess Liliana Vess is offline
        My Secrecy. My Advantage.
        • Platinum Tier
         
        Join Date: Nov 2008
        Location: «UK»
        Gender: Male
        Posts: 1,983

        Yea that's very possible. In fact I've seen multiple ways of doing it. I prefer to use the margin-top:-10px; code to make the text go upwards slightly when I'm trying to get text to go over whatever image I'm using. It also works with marrgin-bottom and margin-left and margin-right too.
        Example:

        SOMETEXT
        SOMEMORETEXT

        [cd=font-size:18pt; color:#333333]SOMETEXT[/cd][cd=margin-top:-13px; margin-left:18px; color:#666666;]SOMEMORETEXT[/cd]

        There is a more complex way of doing it which includes making a box that is postion:relative; and then positioning the text or images with the position:absolute; and the top:1px; bottom:1px; left:1px; and right:1px; codes. You can also add in a z-index:1; code as well to determine what is on top of what, giving something a lower number than another object will place it underneath. This methods quite good if you've already mocked up the signature in photoshop or something like that because then you can position it perfectly.
        A good example is Toujours' signature, she's always used this way to position the text over images or text over text. totally not avoiding making an example

        __________________

        "I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
        -Szadek, Lord of Secrets

        Reply With Quote
          #542    
        Old February 21st, 2012 (2:52 PM).
        Absol Absol is offline
        • Crystal Tier
         
        Join Date: Jan 2012
        Posts: 1,816

        What is the code to have multiple images side by side with text underneath each one? I have searched everywhere and I haven't seen anything like what I'm looking for. Any help is appreciated.

        Reply With Quote
          #543    
        Old February 21st, 2012 (3:16 PM).
        Liliana Vess's Avatar
        Liliana Vess Liliana Vess is offline
        My Secrecy. My Advantage.
        • Platinum Tier
         
        Join Date: Nov 2008
        Location: «UK»
        Gender: Male
        Posts: 1,983

        Well Eevee it depends on what you want really. From what you're saying I'm picturing just three images side by side with text underneath like this


        Text

        which is made using three IMG tags side by side and then using a line break and typing some text.

        [center][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img]
        Text[/center]

        But I'm guessing you were looking for something different? Care to explain more or show us an example so we can help a bit more?

        __________________

        "I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
        -Szadek, Lord of Secrets

        Reply With Quote
          #544    
        Old February 21st, 2012 (7:46 PM).
        Absol Absol is offline
        • Crystal Tier
         
        Join Date: Jan 2012
        Posts: 1,816

        What I am trying to do is fit inside this box...

        This is about the size box I want.

        these images with text underneath them.

        Eevee


        Vaporeon

        And so on...

        Reply With Quote
          #545    
        Old February 21st, 2012 (10:05 PM).
        donavannj's Avatar
        donavannj donavannj is offline
        • Moderator
        • Crystal Tier
         
        Join Date: Mar 2005
        Location: 'cause it get cold like Minnesota
        Age: 26
        Gender: Male
        Posts: 20,925

        Quote:
        Originally Posted by Iloveeevee View Post
        What I am trying to do is fit inside this box...

        This is about the size box I want.

        these images with text underneath them.

        Eevee


        Vaporeon

        And so on...

        You have the code necessary for the background. All you need to do basically is copy the BBCode Hybrid Trainer posted for the images, alter it to your needs, and put it inside the css-div you made before your text.

        __________________

        idol trash and game nerd

        Reply With Quote
          #546    
        Old February 22nd, 2012 (1:20 PM).
        Absol Absol is offline
        • Crystal Tier
         
        Join Date: Jan 2012
        Posts: 1,816



        Now how do you put their names underneath their images?

        Reply With Quote
          #547    
        Old February 23rd, 2012 (6:48 AM).
        Liliana Vess's Avatar
        Liliana Vess Liliana Vess is offline
        My Secrecy. My Advantage.
        • Platinum Tier
         
        Join Date: Nov 2008
        Location: «UK»
        Gender: Male
        Posts: 1,983

        Quote:
        Originally Posted by Iloveeevee View Post

        Now how do you put their names underneath their images?

        In the same way you did it with the pictures, put the text inside the cd tags like so.


        Eevee Vaporeon

        [cd="background-color:black;color:white;height:100px;width:200px;"][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
        Eevee Vaporeon
        [/cd]

        But if I may, I think this signature would look pretty good if you were to use the [twocolumn] tag so that they could be aligned better :3


        Eevee

        Vaporeon

        [cd="background-color:black;color:white;height:100px;width:200px; text-align: center;"][twocolumn][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG]
        Eevee
        [IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
        Vaporeon[/twocolumn]
        [/cd]

        __________________

        "I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
        -Szadek, Lord of Secrets

        Reply With Quote
          #548    
        Old February 24th, 2012 (6:58 PM).
        Cosmotone8 Cosmotone8 is offline
        silhouette of the past
           
          Join Date: Jan 2012
          Location: Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
          Gender: Male
          Nature: Careful
          Posts: 1,787

          I'm new at the whole CSS thing but after going through a couple tutorials I think I know enough to get by alright. But I've been learning about the HTML coding CSS. I checked in the FAQs and found out that HTML is not used but that BBCode is. What's the difference and how can I adjust to make it compatible.
          Sorry, I'm really new to this kind of stuff.

          __________________

          I'm a silhouette, asking every now and then
          Is it over yet? Will I ever feel again?
          I'm a silhouette, chasing rainbows on my own
          But the more I try to move on, the more I feel alone
          So I watch the summer stars to lead me home.

          Reply With Quote
            #549    
          Old February 24th, 2012 (7:17 PM).
          Liliana Vess's Avatar
          Liliana Vess Liliana Vess is offline
          My Secrecy. My Advantage.
          • Platinum Tier
           
          Join Date: Nov 2008
          Location: «UK»
          Gender: Male
          Posts: 1,983

          Well with the BBCode version you'll be making your own little pocket of CSS. For example if you were to make a heading out of CSS with the BBCode you'd set it out like this
          [cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd]

          This is a heading.

          The red bits are the BBCode, the green bits are the CSS coding and the blue bits are the body text :3
          [c*d=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/c*d]
          * are put in to stop the code going all screwy, obviously.

          It's possible for you to put a cd tag within a cd tag like so
          [cd=width:100%; background-color:white;][cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd][/cd]

          This is a heading.

          Do you understand a little better now?

          __________________

          "I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
          -Szadek, Lord of Secrets

          Reply With Quote
            #550    
          Old February 24th, 2012 (7:34 PM).
          Cosmotone8 Cosmotone8 is offline
          silhouette of the past
             
            Join Date: Jan 2012
            Location: Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
            Gender: Male
            Nature: Careful
            Posts: 1,787

            Yeah, Ill experiment with it a little bit and figure the rest out. Thanks!

            __________________

            I'm a silhouette, asking every now and then
            Is it over yet? Will I ever feel again?
            I'm a silhouette, chasing rainbows on my own
            But the more I try to move on, the more I feel alone
            So I watch the summer stars to lead me home.

            Reply With Quote
            Reply
            Quick Reply

            Sponsored Links
            Thread Tools

            Posting Rules
            You may not post new threads
            You may not post replies
            You may not post attachments
            You may not edit your posts

            BB code is On
            Smilies are On
            [IMG] code is On
            HTML code is Off

            Forum Jump


            All times are GMT -8. The time now is 1:37 PM.