1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help, stupid wordpress post desing

Discussion in 'Blogging' started by kimomalcolmx, Oct 26, 2013.

  1. kimomalcolmx

    kimomalcolmx Regular Member

    Joined:
    Apr 11, 2011
    Messages:
    271
    Likes Received:
    77
    Hello
    I need some help, I searched all over the place but cant manage to find how to add vertical lines in wordpress post or page, here is a example of what i want
    Sin título.jpg
    I can increase indent but then the next line of text is bellow
    I am shore it is a stupid thing I am missing. if anyone can help it would be nice
    thanks
     
  2. michaelr1988

    michaelr1988 Regular Member

    Joined:
    Apr 25, 2011
    Messages:
    470
    Likes Received:
    307
    Location:
    UK
    I am not the best designer out there but I would do it by either using a table or in css give each paragraph a separate div id and position accordingly.
    You could also add a columns plugin that may do the job for you.
    also see this: http://wordpress.org/plugins/easy-columns/
     
    • Thanks Thanks x 1
    Last edited: Oct 26, 2013
  3. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,362
    Likes Received:
    5,424
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Easiest way?

    HTML
    Code:
    <div class="container">
    <div class="box number1">
    <p>text</p>
    </div>
    <div class="box number2">
    <p>text</p>
    </div>
    <div class="box number3">
    <p>text</p>
    </div>
    <div class="box number4">
    <p>text</p>
    </div>
    </div>
    
    CSS
    Code:
    .box {
    float: left;
    margin-right: 15px;
    }
    
    .container {
    width: 500px;
    }
    
    Something like that.
     
    • Thanks Thanks x 3
  4. kindarthur

    kindarthur Jr. VIP Jr. VIP

    Joined:
    Nov 27, 2011
    Messages:
    2,220
    Likes Received:
    332
    You have done good job.. Thanks for sharing.. I will make use of this for sure..

     
    • Thanks Thanks x 1
  5. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    Use http://cssdesk.com/ and in the upper-left box called HTML, fill the following code (I've modified my friend TreeOfL1's above-given codes slightly) --------->


    <div class="container">
    <div class="box number1">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="box number2">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="box number3">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="box number4">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    </div>


    -----------

    In the bottom-left box called CSS, fill the following -------->

    .container {
    width: 100%;
    }

    .box {
    float: left;
    padding: 0 2.5% 0 2.5%;
    width:20%;
    height: auto;
    }

    p
    {
    font-family: arial;
    font-size: 14px;
    }

    @media all and (max-width: 420px) {
    .container, .box {
    float: none;
    width: auto;
    border-bottom:1px solid red;
    }
    }

    ----------------------

    Play with the code as much as you wish, experiment with some more html/css, and learn and enjoy html/css basic programming!

    Reduce the width of the browser slowly, and go all the way slowly of course (well, don't reduce too much, may be reduce the browser width up to a certain extent, for example, approx. 200px width), and see what happens in the right-hand (result) box.

    Clicking on the left-arrow that is next to the HTML box at the top, you can hide the HTML and CSS boxes and keep only the result box visible.

    Enjoy!


    P.S.:
    From one learner to another... :D. If there are any/many mistakes/errors please forgive the student. lol
     
    • Thanks Thanks x 2
    Last edited: Oct 28, 2013
  6. bartosimpsonio

    bartosimpsonio Jr. VIP Jr. VIP Premium Member

    Joined:
    Mar 21, 2013
    Messages:
    8,895
    Likes Received:
    7,484
    Occupation:
    ZLinky2Buy SEO Services
    Location:
    ⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
    Home Page:
    Or use bootstrap and divide the 12 column grid into 4 x 3 cols.

    <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    </div>
     
  7. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    Of course, you can also add your graphic boxes inside the html and css codes and align + reposition them (while the browser width reduces and changes in formatting begin to appear) whichever way you wish. Look for auto-resizing and re-positioning those image boxes also. It's quite simple actually... :). Google is your friend.
     
    Last edited: Oct 28, 2013