SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question about css etiquette margin/p/padding

    I always get into these situations were I see the 8 ways to do something and think, what is the best practice to achieve the look i want?

    right now I want a thin vertical rule to run to the left of my main content paragraphs.

    so i have p {border-left: 1px solid #a49b84}

    I have to add padding to the p, to displace the line appealingly from the text.

    I generally understand you want to separate paragraphs from each other with margin, but here if I do that the border breaks. if I use padding, though, the margins don't collapse and some other wonkiness happens.

    I'm somewhat tempted to use two breaks between every consecutive paragraph, which actually gives me closest to the look I want. But breaks are not really for that.

    So I could put the paragraphs in a containing div, like 'entry' that has the border, but i envision the line being broken by certain elements like asides and images..

    I'm leaning toward the later solution right now, but just wondering what you cssheads might think?

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,821
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    I do not understand "asides"?

    I would go for the latter solution with this CSS
    [CSS]

    .edit {border-left:solid 1px #123; padding-left:0.42em}
    .edit img {margin-left:0.42em; border:0 /* may not be necessary */}
    [/CSS]

    I thnk there should be no need to add specific CSS parameters to your paragraphs.



    .

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cutcopypaste View Post
    right now I want a thin vertical rule to run to the left of my main content paragraphs.

    so i have p {border-left: 1px solid #a49b84}
    As you saw that places the border just alongside the paragraphs. If you want the border on the container holding all the paragraphs then that is where you need to apply it and not to the paragraphs themselves.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Since we do not have all the specifics of your page structure and how images and other elements will effect it I am assuming that you want the vertical rule beside the paragraphs only.

    I would suggest wrapping the p tags in a div too. If you have images within or between any p tags in that div then the left border will obviously continue past them too.

    if I use padding, though, the margins don't collapse and some other wonkiness happens.
    If you just want the left border on the p tags only then you could use paddings. You can simulate collapsing margins by setting a top or bottom padding only, but then the border would reflect that. I guess that is what you called "wonkiness".

    You could set the top and bottom paddings the same and then simulate collapsing margins by using a negative margin where p tags follow one another. That could be done with a class where it was needed.

    Maybe if you showed us an example of your layout we could nail down an effective solution.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here is an example of how to handle the various obstacles by using classes on the p tags.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
     
    <style type="text/css">
     
    body {
        background: #fff;
        font-size:100%;
    }
    #wrapper {
        width:800px;
        margin:0 auto;
        padding:10px;
        overflow:hidden;/*contain inner floats*/
        background:#DDD;
    }
    .image {
        float:left;
        width:200px;
        height:100px;
        margin:10px;
        background:lime;
    }
    p {
        margin:0;
        padding:0 10px 10px;
        border-left:1px solid #000;
        overflow:hidden;/*prevent border from sliding under floats*/
    }
    p.collapse {padding-bottom:0;}
    p.no-vert-pad {margin:10px 0; padding:0 10px;}
     
    </style>
    </head>
    <body>
     
    <div id="wrapper">
        <p>Lorem ipsum dolor sit amet consectetuer ullamcorper sagittis dui neque at. Pulvinar sollicitudin tristique semper pellentesque et Pellentesque id Nam eros quis. Sed leo tristique scelerisque ipsum sit condimentum ac massa ante dictumst. Vestibulum semper wisi eros massa Morbi ante metus convallis et eget. Turpis nec at fames amet eu eget dolor morbi justo tempus. Tortor urna at Phasellus elit in consectetuer ac mauris.</p>
        <p class="collapse">Nam eget porta orci lacus et vitae consectetuer consectetuer condimentum pellentesque. Id eu ligula porttitor Vivamus ante eu netus ac montes Ut. Odio et eleifend Nullam Donec ac lobortis euismod nunc et et. Quis massa tortor et arcu sollicitudin elit Cras pretium quis metus. Aenean Nunc Cras nec tortor Vestibulum Quisque Sed tristique cursus vitae. Justo Morbi auctor tincidunt lobortis ipsum ipsum orci wisi eget.</p>
        <div class="image">Floated Image</div>
        <p class="no-vert-pad">Sed parturient Integer at pellentesque lacinia Morbi pede sem Suspendisse diam. Id tincidunt Proin sed interdum aliquam tempus urna tellus orci libero. Justo metus diam sed eros adipiscing metus rutrum eros tristique elit. Natoque congue convallis habitant nec eget ullamcorper interdum justo nulla Pellentesque. Semper faucibus quis orci adipiscing sed vestibulum elit pellentesque at Curabitur. Pellentesque nibh Curabitur tortor risus.</p>
        <p class="collapse">Morbi cursus ut leo parturient auctor eu fames dignissim neque mauris. Sollicitudin nibh lorem Donec condimentum vel malesuada risus eros justo sed. Vivamus Phasellus tempus interdum semper quis Morbi ornare justo elit urna. Lorem suscipit consequat hac consequat Nam amet pellentesque nec elit tellus. Cras et congue urna tempus sed metus risus et id nec. Curabitur euismod mollis Curabitur risus quis neque eget lacinia Curabitur condimentum. Proin Aenean.</p>
    </div>
     
    </body>
    </html>

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey, thanks for the ideas, guys.. it's based on what is on www.whatisdamon.com, but i am in the process of making things look a little better in general with different types of content and incorporating a blog design into the rest of it. Right now its in a transitional phase as I toy around with some options. (right now most of the lines have been taken out bc i put in an entry class with a border but haven't added it to many pages yet) i am definitely feeling like my code is often a little bit not as elegant as it should be, but that's what learning is for..

    i'm kind of worried that my number of divs is getting out of hand


Bookmarks

Posting Permissions

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