SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    No line spacing with CSS

    Hi,

    If I want a single line spacing I use <p> and </p> tags like anyone else.

    I cannot workout what to do if I want no space. How can I get:

    Line 1 is here.
    Line 2 is here.
    Line3 is here.

    I'm stuck! What CSS do I use?

    Matt.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,m

    I already answered this in your other post. Just remove the margin and adjust the line-height.

    Example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0;
        line-height:1.0;
        background:red;
        border-bottom:1px solid #000;/* for testing*/
    }
    </style>
    </head>
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>
    You can see that there is no spacing between the elements at all.

    I'm guessing that you mean something else or are suffering with a particular browsers issue somewhere so we need more details.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes - I thought I could apply the same concept you suggested earlier but it is not working properly in this instance:

    PHP Code:
    <div class="cart">
       <p>
       <ul class="cart1">
     <?php   $num=mysql_num_rows($result); 
    if(
    $num 2)
    {
        while(
    $row mysql_fetch_array($result)){
         
    $totalQuantity += ($row["quantity"] * 1);
         
    $totalCost += ($row["quantity"] * $row["price"]);}
         echo 
    "<li>";
         echo 
    $totalQuantity;
         echo 
    "Items</li>";
         echo 
    "<li>Total Cost: ";
         echo 
    number_format($totalCost2"."",");
         echo 
    "</li>";
    }
    else
    {
        
     while(
    $row mysql_fetch_array($result)){
         echo 
    "<li>";
         echo 
    $row["shortname"];
         echo 
    $row["quantity"];
         echo 
    "Item";
         echo 
    "</li>";
         
    $totalCost += ($row["quantity"] * $row["price"]);}
         echo 
    "<li>";
         echo 
    "Total Cost: ";
         echo 
    number_format($totalCost2"."",");
        echo 
    "</li>";}
         
    ?>
        
        View Cart
        </ul>
        </p>
        
        </div>
    Does the technique still work amongst PHP code??

    When I look at View Source on the output of a browser I get:

    <div class="cart">
    <p>
    <ul class="cart1">
    <li>2460LT1Item</li><li>3760T1Item</li><li>Total Cost: 50.00</li>
    View Cart
    </ul>
    </p>

    </div>


    2460LT1Item

    and

    3760T1Item

    appear on the same line!!??

    Matt.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - I've found the problem. You said to use <p> and define that within CSS.

    I defined a tag called <p2> instead. The reason I did this is because I do not want zero line spacing for the whole template file!

    It works with using <p> tags but it does not work when I use <p2> tags!

    How can I have single and no-line spacing within the same web page?

    Matt.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Don't confuse PHP with html and CSS. They are completely different applications.

    All a browser understands is html and css and that is all that the browser receives as you can see from view source. You should work with html and css until you have the design looking like you want and then convert it into PHP or whatever afterwards.

    The code you have above is invalid as you can't nest a ul inside a p element. P elements can only contain inline elements such as spans, anchors etc. There seems to be no reason to wrap it all up in a p element anyway so remove it.

    Do you want all those list items to be on the same line? If so you will need to float them to the left. If not you need do nothing as they will automatically start under each other.

    Be aware that the ul with have default padding and margins that you will need to zero.

    I'm a little confused as to what you want it to look like but I think I covered most things

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MatthewBOnline View Post
    OK - I've found the problem. You said to use <p> and define that within CSS.

    I defined a tag called <p2> instead. The reason I did this is because I do not want zero line spacing for the whole template file!

    It works with using <p> tags but it does not work when I use <p2> tags!

    How can I have single and no-line spacing within the same web page?

    Matt.

    You can't make up your own tag names in html lol There is no element called a p2 so remove them.

    If you need to be specific then you would add classes to the elements concerned or target them via context (assuming they are unique within that context).

    e.g. This will target all p element within the div called "cart"
    Code:
    <div class="cart">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    Code:
    .cart p{margin:0}

    Or:

    This will only target the selected element:
    Code:
    p.special {margin:0}
    Code:
    <div class="cart">
        <p>test</p>
        <p class="special">Only this one is targeted by the above rule</p>
        <p>test</p>
        <p>test</p>
    </div>


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
  •