Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Text Formatting

  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Exclamation Text Formatting

    Hi, I have yet another question ( I am coming back to coding from a break, I'm forgetting all my knowledge).

    If I am making a div that has a smaller 'bar' shaped div inside it repeatedly stacked on top of each other which will serve as a shop, how can I format the text like this -

    -----------------------------------------------------------------------------
    | Shop Item 1 Cost: 500 gold |
    | Shop Item 2 Cost: 700 gold |
    | |
    |----------------------------------------------------------------------------

    I can only remember making <p> tag for text, but if I want to make seperate paragraphs on the same line how can I do that as the example above shows?

    Please post any questions or confusions with my post below

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    The p tag itself is a block level element, so you would have to define it as display: inline, then float the pieces left I believe.
    Web Design Portfolio 1 | Web Design Portfolio 2
    --------------------------------------------------------------------
    *Reminder to self. Validate code - then ask forum questions.

  • #3
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Do you mean something like this

    Code:
     
            <style type="text/css">
                #itemsWrapper{
                    width: 200px;
                    border: 1px solid red;
                    overflow: hidden;
                }
                .shopItem{
                    width: 49%;
                    float: left;
                }
                .itemCost{
                    text-align: right;
                    width: 49%;
                    float: right;
                }
            </style>
    Code:
     
            <div id="itemsWrapper">
                <div class="shopItem">
                    Shop Item 1
                </div>
                <div class="itemCost">
                    Cost: 500 gold
                </div>
                <div class="shopItem">
                    Shop Item 2
                </div>
                <div class="itemCost">
                    Cost: 700 gold
                </div>
            </div>

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    34
    Thanks
    0
    Thanked 3 Times in 3 Posts
    This might be a cleaner solution. Less style heavy and more dependent on the length of your items. The background colors were just added so you could see where the containers are.

    Code:
    <style type="text/css">
    #wrapper {
    width: 420px;
    padding: 3px;
    float: left;
    background-color: #f2f2f2;
    }
    
    p.item {
    width: 200px;
    float: left;
    background-color: #e8e8e8;
    margin: 2px;
    }
    </style>
    
    <div id="wrapper">
    <p class="item">Shop Item One</p>
    <p class="item">Shop Item One</p>
    <p class="item">Shop Item One</p>
    <p class="item">Shop Item One</p>
    <p class="item">Shop Item One</p>
    </div>

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    michaelbt2 have great solution. please use that one.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •