Results 1 to 22 of 22
  1. #1
    ABW Ambassador
    Join Date
    January 18th, 2005
    Location
    Nunya, Business
    Posts
    23,680
    Basic HTML Question - Spacing Between Lines
    Working on new site navigation and had a question about spacing between lines.

    Using just BR at the end it and it looks like

    Auto
    Baby
    Clothing
    Computers
    etc.

    Using just P at the end and it looks like

    Auto

    Baby

    Clothing

    Computers

    etc.

    And this site is just basic html.

    What is the best way to get something in between?

    I've found this works:

    < IMG SRC= "pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" VSPACE="2"> <BR>

    By adding that in between, where you can change the VSPACE # changing the spacing.

    I can add that after each link in my category navigation.

    Is that the best way? Are their other ways? Thanks

  2. #2
    Prince of Content Vinny O'Hare's Avatar
    Join Date
    January 18th, 2005
    Posts
    3,126
    did you try br br just a thought
    Vinny O'Hare - OPM - Contact Info email: vinny at teamloxly.com ~ 702-582-6742 Twitter

  3. #3
    ABW Ambassador
    Join Date
    January 18th, 2005
    Location
    Nunya, Business
    Posts
    23,680
    Yeah, when I do that it looks like a < P >

    Too much space in between the different categories, using BR looks a little tight. Trying to get the spacing something in between. The way I posted above works and looks fine in IE and Firefox but I don't know if that's the best way.

    What I posted above that works came from the bottom (last paragraph) of this page:
    http://www.webstyleguide.com/type/space.html
    Last edited by Trust; September 24th, 2006 at 06:44 PM.

  4. #4
    OPM Queen Kristin Kinsey's Avatar
    Join Date
    January 4th, 2006
    Location
    Rolling Hills of Ohio
    Posts
    1,707
    < IMG SRC= "pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" VSPACE="2"> <BR>
    This is what I have always used for spacing in my designs ... a transparent pixel, it works extremely well, just set the height and width and it will do what you want
    KK

  5. #5
    ABW Ambassador PatrickAllmond's Avatar
    Join Date
    September 20th, 2005
    Location
    OKC
    Posts
    1,219
    You could also use a table and play with the cell padding and cell spacing. The amount of HTML does not change, and you don't have to much with putting images in there.
    ---
    This response was masterly crafted via the fingers of Patrick Allmond who believe you should StopDoingNothing starting today.
    ---
    Focus Consulting is where I roll | Follow @patrickallmond on Twitter
    Search Engine Marketing | Search Engine Optimization | Social Media | Online Video

  6. #6
    .
    Join Date
    January 18th, 2005
    Posts
    2,973
    Quote Originally Posted by patrick24601
    You could also use a table and play with the cell padding and cell spacing. The amount of HTML does not change, and you don't have to much with putting images in there.
    That's what I do, usually using "cellspacing" instead of "cellpadding" because cellspacing give me more precision.

    I'm sure there must be a CSS (Cascading style sheets) solution to this, but I've never even tried.

  7. #7
    general fuq mrbshouse's Avatar
    Join Date
    January 17th, 2005
    Location
    Argieville
    Posts
    1,381
    I think the cell padding will effect the look and feel on all sides of the table, where as there should be a vertical height that might have a better effect...provided a table works for the need.

    following SEO best practices defining the categories as h2 or h3 should effect the spacing too.

    For navigation, i've tried to use gifs instead of text (looks less programed) with alt tags for the seo needs

  8. #8
    Pimp Duck popdawg's Avatar
    Join Date
    January 18th, 2005
    Location
    Take off eh?
    Posts
    3,188
    Make a file called style.css
    In it, put the following lines (just an outline, play as you like)


    div.navmenu {
    font-size:11px;
    line-height: 25px;
    font-family: arial;
    color: #000000;
    }
    Save it.

    In your html or whatever page, put the following line in between the <*head> and <*/head> tags:

    <*link rel="stylesheet" type="text/css" href="style.css">

    Then, where ever the code is for your Nav links, place the following:

    <*div class="navmenu">
    LINKS HERE LIKE SO<*br>
    Auto<*br>
    Baby<*br>
    Clothing<*br>
    Computers<*br>
    <*/div>

    That's just a quick un, hopefully it helps.

    edited to add:

    That's using an external stylesheet.
    You can also skip the style.css and the include line and just do something like this. Just put the code somewhere on your page after the <*body> tag and before you do the <*div class="">:
    <*style>
    div.navmenu {
    font-size:11px;
    line-height: 25px;
    font-family: arial;
    color: #000000;
    }
    <*/style>

    I should have just said that, it's easier but I am in the habit of doing it with the external stylesheet. Sorry
    ================================================================
    Been away, now I'm back. Not as much, but I'm back & starting from scratch. Where I was, was fantastic. Where I am now, less so. Things have changed, become harder. So have I. Game ON!!!
    ================================================================

  9. #9
    Affiliate/AM Moonlighter dflsports's Avatar
    Join Date
    January 17th, 2005
    Posts
    874
    edited to say, hahaha, Popdawg must have posted the same time I did, I tried keeping it simple

    Time to look into CSS try something like

    <p style="margin:3px;"><a href="link">link</a></p>
    <p style="margin:3px;"><a href="link">link</a></p>
    <p style="margin:3px;"><a href="link">link</a></p>
    <p style="margin:3px;"><a href="link">link</a></p>

    ypu can adjust the margin:3px to adjust the spacing.

  10. #10
    Pimp Duck popdawg's Avatar
    Join Date
    January 18th, 2005
    Location
    Take off eh?
    Posts
    3,188
    or like dfl said
    So many ways.
    Although, using margin like that would add a 3px margin to the sides as well wouldnt it? and they are trying to adjust the vertical height (line height)
    ================================================================
    Been away, now I'm back. Not as much, but I'm back & starting from scratch. Where I was, was fantastic. Where I am now, less so. Things have changed, become harder. So have I. Game ON!!!
    ================================================================

  11. #11
    Affiliate/AM Moonlighter dflsports's Avatar
    Join Date
    January 17th, 2005
    Posts
    874
    yeah, you can do margin-top: 3px; as well or margin-bottom, margin-right and margin-left.

  12. #12
    Affiliate Manager Matt McWilliams's Avatar
    Join Date
    July 21st, 2006
    Location
    Fort Wayne, IN
    Posts
    2,838
    I got all excited about halfway down this thread that it had not been answered perfectly yet...then alas comes popdawg with the answer.

    I remember someone doing the same for me on the same question about a year ago on a different forum, so I have yet to forget it
    Matt McWilliams
    Call Me At: (317) 825-8826 | Follow Me On Twitter: @MattMcWilliams2 | Connect With Me On LinkedIn

  13. #13
    Internet Cowboy
    Join Date
    January 18th, 2005
    Posts
    4,662
    CSS rocks!!! Trust, pick up a book on CSS if you don't use it already. It will change the way you design forever. I use the CSS Cookbook becuase it has lots of pre-made solutions that you can copy and customize for your site. CSS is as simple or as powerful as you need it to be.


  14. #14
    Affiliate/AM Moonlighter dflsports's Avatar
    Join Date
    January 17th, 2005
    Posts
    874
    No need for a book, there are tons of great sites and lots o free CSS tips online. One of my personal favorites, http://www.cssplay.co.uk/ Stu Nichols has some really great example and all are free to use.

    I was turned onto CSS a few years ago and use it for 80-100% most all my site designs. One of the nice things about CSS besides alot less html code is how easy it is to make little changes to link colors, font sizes and other text formatting. One stylesheet and you update all your pages to the new style.

  15. #15
    ABW Ambassador PatrickAllmond's Avatar
    Join Date
    September 20th, 2005
    Location
    OKC
    Posts
    1,219
    Please go the CSS route. And getting a book is not a bad idea. As great as the web is there are times when a good old book is the best thing to use. Sometimes the web overwhelms me because there are too many answers. To me that is also why "googling" something just gets you more confused than when you started.

    But this is just my opinion. I could be wrong !
    ---
    This response was masterly crafted via the fingers of Patrick Allmond who believe you should StopDoingNothing starting today.
    ---
    Focus Consulting is where I roll | Follow @patrickallmond on Twitter
    Search Engine Marketing | Search Engine Optimization | Social Media | Online Video

  16. #16
    Affiliate Manager Matt McWilliams's Avatar
    Join Date
    July 21st, 2006
    Location
    Fort Wayne, IN
    Posts
    2,838
    We started using CSS pretty much exclusively primarily for affiliate cobrands. It made life a lot easier to just assign the same CSS for each one and then change the image or whatever as I pleased...

    Now what I REALLY love is when an affiliate uses external CSS and I can pretty much ride down easy street...yeah I'm lazy like that.
    Matt McWilliams
    Call Me At: (317) 825-8826 | Follow Me On Twitter: @MattMcWilliams2 | Connect With Me On LinkedIn

  17. #17
    ABW Ambassador
    Join Date
    January 18th, 2005
    Location
    Los Angeles
    Posts
    4,053
    Doesn't get easier than an automatic CSS list/link generator

    http://www.accessify.com/tools-and-w.../list-o-matic/

    And more, Listamatic

    http://css.maxdesign.com.au/listamatic/

    With regular HTML navigation in tables, the space between can be adjusted using CSS in the stylesheet to style the links themselves and then using <br> between links, like for left column.

  18. #18
    ABW Ambassador PatrickAllmond's Avatar
    Join Date
    September 20th, 2005
    Location
    OKC
    Posts
    1,219
    And... as I was sitting here reading the response in Gmail this context sensitive add showed up. I cannot vouche for it at all.

    www.opencube.com - Pure CSS list based menus from the Internet's leading menu company
    ---
    This response was masterly crafted via the fingers of Patrick Allmond who believe you should StopDoingNothing starting today.
    ---
    Focus Consulting is where I roll | Follow @patrickallmond on Twitter
    Search Engine Marketing | Search Engine Optimization | Social Media | Online Video

  19. #19
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,929
    CSS is the way to do it for sure.
    Creating DIV containers with standard styling is super easy once you do it once.
    And if you have paragraphs within the DIV that need separate spacing, CSS allows you to assign classes that would apply to the DIV plus any P's within that DIV as you desire.
    Once you learn it, it's really easy to implement and to update whenever you want to change things.
    If you point every page to your external CSS style sheet, then style changes just need to be made in one single location (in the style.css page you create).

  20. #20
    Crazy like a fox suzigeek's Avatar
    Join Date
    January 18th, 2005
    Posts
    1,096
    You can also use <ul> and <li> for setting it up as an unordered list instead for <br>...but br is prolly less code. For some reason I always use ul for my menu's (in combo w/CSS).
    Suz~~GearGirl~~

  21. #21
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,929
    CSS can be used to control the line height in a DIV or a P as I said, plus in an LI, UL and even OL.

    Here's a page with a dynamic example where you type in the line height value in a mocked up CSS file and it shows you the results.

    :-)

  22. #22
    The slot machine that IS paid! Billy Kay's Avatar
    Join Date
    January 18th, 2005
    Location
    Small Town in Tennessee
    Posts
    5,226
    First choice is css DIV. Change the setting in the css file, and all your pages update at same time

    If you DO use the spacer graphic, Instead of height=1 vspace =10,

    just change the height to 12 and get rid of vspace. If you have 100 lines like this, it's 100 less commands (vspace=) a browser has to read

+ Reply to Thread

Similar Threads

  1. Basic newbie question - where's the help?
    By Marisa Wright in forum Commission Junction - CJ
    Replies: 3
    Last Post: October 5th, 2009, 07:46 PM
  2. basic question
    By home1234 in forum Couponer's Corner
    Replies: 0
    Last Post: August 28th, 2007, 02:58 PM
  3. Question About Line Spacing
    By Mr. Sal in forum GoldenCAN
    Replies: 2
    Last Post: March 9th, 2007, 05:59 PM
  4. Basic Question
    By unclejesse in forum Search Engine Optimization
    Replies: 0
    Last Post: May 23rd, 2004, 03:08 PM
  5. Basic Dreamweaver Question
    By Doug247 in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: March 22nd, 2004, 01:59 AM

Posting Permissions

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