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.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 57
  1. #1
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post

    <&nbsp> vs. Divs

    Hey guys, I have been working with websites for some time now and I was wondering if a few of you could weigh in on something. Here is an example of some text on a site I just finished up here:

    Code:
    <p>This is the end of a normal paragraph and just simple text...</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p class="bold2">Why People Feel "Disconnected"</p>
    <p>&nbsp;</p>
    <p>And then this is where the text will continue from this point after the header blah blah...</p>
    What I am wondering is whether o not it matters that i use so many "<p>&nbsp;</p>" - do you think I would be better of creating a div buffer to space out the text instead of repeating 4 no break space (or whatever they mean)?

    The site is W3C validated and so technically there is no functionality issue here - I just want to know if there is a "proper" or "preferred" choice among veteran/experienced developers. Obviously my first concern was everything displaying correctly, but since that's all a-ok I'm curious what other methods people are using.

    It's a simple question I know, but I'm very interested in learning more about others real-world experiences. There are so many things I keep learning and re-learning in an attempt to do things professionally, so it is important. Thanks very much,
    AJ

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Neither. Just give a bottom margin to the paragraphs. CSS is for presentation, HTML is for structure.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    But that would apply the same space under the text to EVERY paragraph, you know? If you look on the page there are certain spaces between the end of some paragraphs and the next header that need to be larger than normal.

    I'm wondering a way to do this without adding a top margin to the header too.
    Thanks for the quick response,
    AJ

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by ajhauser View Post
    But that would apply the same space under the text to EVERY paragraph, you know? If you look on the page there are certain spaces between the end of some paragraphs and the next header that need to be larger than normal.

    I'm wondering a way to do this without adding a top margin to the header too.
    Thanks for the quick response,
    AJ
    And? Just give classes to the elements and assign them different margins. This poor design on your part. If you needed the extra space you should have used margins in the first place.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    CSS is for presentation, HTML is for structure
    In your sig you have a link to an article on divs over tables that I read. Aren't tables HTML, and aren't you suggesting using divs for the structure of sites or do you mean something else by that?

  • #6
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    Maybe a better question would be, in what instance is a

    "<p>&nbsp;</p>" or even just "&nbsp;"

    useful or necessary?
    Last edited by ajhauser; 02-26-2008 at 04:40 AM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Tables are used for data thats it, not page layout. As to your second question, there isn't one. Use margins in CSS to create vertical or horizontal space between elements. You should learn to use semantics when coding. This you have not done at all in your current site.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    ajhauser (02-26-2008)

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <p class="first">This is the end of a normal paragraph and just simple text...</p>
    <p class="bold2">Why People Feel "Disconnected"</p>
    <p>And then this is where the text will continue from this point after the header blah blah...</p>
    Code:
    p {
    margin: 0;
    padding: 0 0 12px 0;
    }
    p.first {
    margin: 0;
    padding: 0 0 40px 0;
    }
    
    p.bold2 {
    font-weight: 900;
    }
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    ajhauser (02-26-2008)

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ajhauser View Post
    Code:
    <p>And then this is where the text will continue from this point after the header blah blah...</p>
    Where's the header you mention? This is the where the idea behind standards-based web design comes into play; that is, HTML is for content and CSS is for presentation.

    Mark up the content as what it is, and the question of where to apply the CSS is more easily answered:

    Code:
    <p>This is the end of a normal paragraph and just simple text...</p>
    
    <h2>Why People Feel "Disconnected"</h2>
    <p>And then this is where the text will continue from this point after the header blah blah...</p>
    Code:
    h2 {
     margin: 1.5em 0 0 0;
    }
    
    p {
     margin: 1em 0;
    }
    Hope this helps…

  • Users who have thanked rmedek for this post:

    ajhauser (02-26-2008)

  • #10
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    Hmmm... yeah I have never heard of web semantics - I will have to apply that to the next site. Are there any browser or bandwidth advantages that come along with designing semantically, such as faster load times, or is it just good practice?

    This is great though thanks, this was the purpose of the post - I want to do things right.

    harbringerOTV thank you for the nice post as well - that is what I was thinking too.

    rmedek I am using the tag "<p class="bold2">" for my headers, but you are saying to use the "h" tags so they are more easily identifiable? That would make sense.

    I see you put "1.5em" in the code you added in - could you explain that a bit? I have looked into using ems as a way to make fonts more uniform across many browsers - but I do not understand exactly their use. ACtually, I don't understand them at all - which probably means I should be using this instead of point size I'm guessing.

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I actually didn't look at your site. rmedek putting the h2 in there is best. It's a heading yet a sub heading of the pages main idea.

    Need to add a UL to my page. Help please!

    something I wrote earlier.

    In your case the p.bold2 is really such a heading.

    As for em's, I'll leave that for someone else to chime in. I need to hit the hay if this is still going when i awake I'll chime in.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ajhauser View Post
    rmedek I am using the tag "<p class="bold2">" for my headers, but you are saying to use the "h" tags so they are more easily identifiable? That would make sense.
    I'm saying use the "h" tag because the "h" stands for "heading."

    If you have a heading, use a heading tag; if you have a table, use a table tag; if you have a paragraph, use a paragraph tag; if you have a list, use a list tag; etc., etc.… A list of pretty much all available HTML elements can be found here: http://www.w3schools.com/tags/default.asp

    I've found that when people are starting w/ CSS they spend way too much time worrying about how things will look and thus gloss over the most obvious part of standards-based web design: HTML is for content. CSS is for presentation. HTML is the noun; CSS is the adjective.

    As far as using ems, well…one thing at a time. But this article is a classic and should get you started: http://clagnut.com/blog/348/

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by rmedek View Post
    If you have a heading, use a heading tag; if you have a table, use a table tag; if you have a paragraph, use a paragraph tag; if you have a list, use a list tag; etc., etc.… A list of pretty much all available HTML elements can be found here: http://www.w3schools.com/tags/default.asp
    You know, I want to clarify this a bit.

    The reason why you would use a heading tag is not so much that the piece of text is a heading. I mean, it is, but more importantly, by using the heading tag you are defining the text as a heading element.

    This:

    Code:
    <p>Here is some text.</p>
    …defines the text as a paragraph.

    This:

    Code:
    <p class="bold">Here is some text.</p>
    …defines the text as a paragraph.

    This:

    Code:
    <p class="heading">Here is some text.</p>
    …defines the text as a paragraph.

    This:

    Code:
    <div class="hugeboldheading">Here is some text.</div>
    …defines the text as nothing at all, other than it happens to be in a block-level element. (<div> and <span> are empty elements with no semantic value)

    This:

    Code:
    <h2>Here is some text.</h2>
    …defines the text as a second-level heading.

    Okay, got that out of my system.
    Last edited by rmedek; 02-26-2008 at 08:23 PM. Reason: code typo

  • Users who have thanked rmedek for this post:

    ajhauser (02-27-2008)

  • #14
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    HA! I figured it was a whole other can of worms - well thank you all for your very helpful posts. I will check out those links on ems. I have to re-ask though - the main advantage(s) of designing semantically is just that it makes sense?

    I mean, it makes sense to me now that you say it and with those examples rmedek. It's like using the proper punctuation in an essay for the simple fact that it is correct - you wouldn't use an "!" to end a statement, etc.

    But are there other advantages as well? Bandwidth? Anything?

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ajhauser View Post
    But are there other advantages as well? Bandwidth? Anything?
    Google "web standards" and duck. Better speed, faster maintenance, improved accessibility, platform independence, etc.


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

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