SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with padding/margin problem

    http://www.geocities.com/deronsizemore/portfolio2.htm

    If you look down to The Amish Barn section of this page, you will see that The Amish Barn is farther apart from Deronsizemore.com version 1 than Deronsizemore.com version 1 is from Natural Choices.

    I have the same padding on the divs?

    Can someone take a look at this for me and see if you can figure it out?

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Suggest you try removing the bottom margin from your <div class="text">. This margin is being added to the bottom margin of your <div class="wrap">.

    In order to see this, add one-pixel borders to all of your <div>s. You'll see what I mean.
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Deron,

    While I don't want to disagree with Kevin , the problem actually lies somewhere else.

    The distance between your elements is constant its just you are measuring in the wrong place. You are measuring from your floated image which is in fact removed from the flow and will not come into play unless you clear it. If you look at the distance between your text and the following text then the distances are the same. 20px padding and 20px margin putting them 40px apart.

    To make things consistent you simply need to make sure the images are cleared and then the distance from image to text will then be constant.

    Code:
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    Code:
    	<div class="wrap"> 
    	  <div class="title"><strong>The Amish Barn</strong></div>
    	  <div class="top"><span class="topleft"><a href="http://www.theamishbarn.com" target="_blank">View 
    		Website</a> | <a href="theamishbarnscreenshot.php" target="_blank">View 
    		Image</a></span></div>
    	  <img src="http://www.geocities.com/deronsizemo...hbarnthumb.gif" alt="Screenshot for The Amish Barn website" class="pic" /> 
    	  <div class="text">The Amish Barn site was my senior project at Morehead State 
    		University. This site was designed to give customers an idea of what the 
    		Amish Barn has to offer as they have "The Best Amish Craftsmen in Three 
    		States" making their funiture.</div>
    		<div class="clearer"></div>
     </div>
    Add in the exact place for all your other similar blocks as well.

    You will notice that I have changed your id to a class because you can only use an id uniquely once (as I'm sure you know by now).

    Also it is bad practice to have paragraphs of text that have no paragraph containers. You have bare text and separated them with breaks. This is semantically bad and also makes it harder to control as breaks vary between browsers wheras the p element is more consistent once you set the padding and margins explicitly.

    One last thsng you have set a size in the style as 600 ! 600 what - you must specify a unit (px etc). Luckily the browser is ignoring it because its the wrong size anyway,

    I'll leave you to find where it is.

    Hope that helps.

    Paul

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for everything...even things I don't ask help for.

    I knew that you can only have one div that is unique, but don't know why I didn't practice that. I also knew to use the <p> tag, but must have been another brain fart.

    Is it still alright to use the <br /> tag when I add the <p> tag? Or should I just eliminate them? If I take them out, what do I use in their place?


    -Deron

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Deron,

    Well the only time I use a break tag is for a one off line break which seaves me writing a special class on the p.

    If its just the odd break then thats ok but when you use it repeatedly in simialr situations then you may as wel use a class and style the p tag instead.

    You can set the margin on the bottom od the p tag to whatever you want. In your case you had two breaks separating the text well you could just style that particular p tag or all of them if needed and just give the appropriate margin bottom.

    This means that later on you can change the spacing between the elements from your css alone and it isn't hard coded with break tags.

    Semantically a break shouldn't be used to end a paragraph a p tag should end a paragraph.

    If you want single line breaks then you can either style the p tag with a class for that occasion or think about the structure again. Is there some other html element that would be more suited. A lot of people use breaks for lists when there is a very good list tag waiting to be used. (Or DD DL tags for data definitions etc.)

    Most times when you use a break tag there is probably something better suited to the job

    Paul

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay...I will think about that. Basically styling a p tag all I need ot do is something like this??

    <p class="paragraph1">this is some text....this is some text....this is some text.</p?

    Then in the CSS:

    .paragraph1 {

    }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Thats the general idea but if you target carefully then you can avoid getting into classitus.

    If the paragraph is encapuslated in a nother style then you can use that to target all the p's in that section and just apply a class to the odd one that needs something different it.
    e.g.
    Code:
    #text p {margin:0}
    Paul

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for example...the paragraphs in the website above, I can enclose them with <p> tags. They are all inside the text div. I can style it like #text p {margin:0} or whatever, but like where I used the <br> tag...I want to get rid of that right? So wouldn't I need different classes for the <p> tags? Like for the first paragraph have a specific class then for the second paragraph have another specific class so I could set the margins and get that effect of having a <br> in there?

    I guess something like this:

    Code:
    <div id="text">
       <p class="paragraph1">this is some text, this is some test!!</p>
       <p class="paragraph2">this some more text, this is some more text!!</p>
    </div>
    Then have the CSS something like:

    Code:
    .paragraph1 {
    margin-bottom: 4px;
    }

    EDIT: I read it again...I think I got you now. Basically you're saying just use the #text p {} so you don't have a bunch of classes in the CSS...then if I did want a break, instead of using <br> just have another <p> and go ahead and give the second one or whatever one I want to be broke from the original paragraph a class and style it accordingly? That eliminates the need for a <p class="paragraph1"></p> and a <p class="paragraph2"></p> and so on?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    hey - you've got it

    I've got nothing against breaks but if you are using them consistently in the same place then a better solution should be available and more controillable.

    Paul


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
  •