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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    310
    Thanks
    86
    Thanked 3 Times in 3 Posts

    A few CSS problems

    Hi All,

    I'm completely stuck on two (pretty simple) things that I can't get my head around, and one other general question:

    The first problem is my <p> tags. The text appears way beneath each other when I want it with a very small gap in-between the paragraphs. Can someone help?

    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">
    <html><head>
    <title>Testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <style>
    
    .left {
    float:left;
    display:inline;
    width:300px;
    height:200px;
    background:#EEEEEE;
    border: 1px solid #CCC;
    }
    
    .left:hover {
     float:left;
     display:inline;
     border: 1px solid #FFED97;
     width:300px;
     height:200px;
     background:#FFFDF2;
    }
    
    .left p {
      font-family:verdana;
      font-size:0.90em;
      margin-bottom:2px;
      color: #333;
    }
    
    	img.the_image {
    	display:inline;
    	float:left;
    	padding:6px;
    	}
    
    </style>
    
    
    <div class="left">
      <img src="image.png" width="62" height="62" class="the_image"/>
      <p>» Add a News Item</p>
      <p>» Add a News Item</p>
      <p>» Add a News Item</p>
    </div>
    
    </body>
    </html>
    2) The second one is another simple one, say I have another style named .right and all of the styles are the same, rather than writing them out again can I say they are the same styles? IE something like:


    Code:
    .left:hover, right:hover {
     float:left;
     display:inline;
     border: 1px solid #FFED97;
     width:300px;
     height:200px;
     background:#FFFDF2;
    }
    
    .left p, right p {
      font-family:verdana;
      font-size:0.90em;
      margin-bottom:2px;
      color: #333;
    }
    3) Say all the styles were the same .left and .right, apart from one thing the background colour on .right, what's the best practice for this, just stating the new background in the style like:

    Code:
    <div class="right" style="background:#FFF;"></div>
    Many Thanks

    Chris

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    For your first question. Try to reset the margins and padding of p element:
    Code:
    p{margin:0px;padding:0px;}
    Or alternatively, use CSS reset:
    Code:
    *{margin:0px;padding:0px;}
    For your second question. This is'nt a problem, but I would like to point out that you were describing right class, but the CSS you've shown might prove you missed something:
    Code:
    .left:hover, .right:hover {
     float:left;
     display:inline;
     border: 1px solid #FFED97;
     width:300px;
     height:200px;
     background:#FFFDF2;
    }
    
    .left p, .right p {
      font-family:verdana;
      font-size:0.90em;
      margin-bottom:2px;
      color: #333;
    }
    You can do the way you did in #3, but you can also do the same in your CSS:
    Code:
    .right{background:#fff;}
    Hope it keeps you going.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    STFC, 1) you can set the line height (http://www.w3schools.com/css/pr_dim_line-height.asp. You have a margin at the bottom of your ".left p" - was that wanted if you want to bring them closer together?

    2) yes (check your syntax)

    3)
    .left:hover, right:hover {
    float:left;
    display:inline;
    border: 1px solid #FFED97;
    width:300px;
    height:200px;
    background:#FFFDF2;
    }

    .right {
    background-color: your choice;
    }
    The styles and attributes are additive unless they are duplicated in which case last home wins. Generally it is better not to hard code in the page as you lose flexibility.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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