Problems with a gap

Discussion in 'HTML & Website Design' started by poliking, Oct 10, 2007.

  1. #1
    Hey everybody!
    I have a space problem that is haunting me. A draft of the website I'm designing is at http://www.lucidcitypictures.com

    See on the right hand side tab under "Upcoming Films" (<div id="colOne">) how there is a gap between the bottom of the pictures and their text? I don't want the gap! I've tried taking out the picture and there's a gap between the two text types. I've tried eliminating spaces and changes text types and so on. But nothing is working.

    I'd really appreciate any help anyone could give me on this. Thanks so much.

    JP
     
    poliking, Oct 10, 2007 IP
  2. jBud

    jBud Peon

    Messages:
    387
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    that because you're using <p> the gap is there by default, varies in size from browser to browser to control that just add
    p {
    margin:0;
    }
    Code (markup):
    to your css or do it inline that should do the trick
     
    jBud, Oct 10, 2007 IP
  3. jBud

    jBud Peon

    Messages:
    387
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    sorry wrong one but the same rule applies to all h1 h2 h3 etc....
    just give them a margin class and it'll go away
     
    jBud, Oct 10, 2007 IP
  4. jBud

    jBud Peon

    Messages:
    387
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Me again i took a closer look at your code here's another problem
    <h3>Lost Until You're Found<a href="http://www.lostuntilyourefound.com" target="_blank"><img src="images/pictures/lostuntilfound_thumb.jpg" title="Check out the official site for Lost Until You're Found" border="1" height="133" width="200"></a></h3> 
    Code (markup):
    that is wrong you shouldn't put images in your H tags do it like so:
    <h3>Lost Until You're Found</h3>
    <a href="http://www.lostuntilyourefound.com" target="_blank"><img src="images/pictures/lostuntilfound_thumb.jpg" title="Check out the official site for Lost Until You're Found" border="1" height="133" width="200"></a> 
    Code (markup):
     
    jBud, Oct 10, 2007 IP
  5. poliking

    poliking Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    jBud you're awesome. It's fixed.
    Thanks!!! Big time.

    Quick newb question: Does margin add that space on top and bottom or just bottom?
     
    poliking, Oct 10, 2007 IP
  6. jBud

    jBud Peon

    Messages:
    387
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    both but if you do not specify the margins it'll get inherited from the top level, or if there is none it defaults to the browser settings for that particular object.
    If you want total control over the margins you can use something like this:
    h1 { /* h1 p or any other element */
    	margin-top: 5px;
    	margin-right: 1px;
    	margin-bottom: 5px;
    	margin-left: 10px;
    }
    Code (markup):
     
    jBud, Oct 10, 2007 IP