Welcome, guest! Login
Close

Login to Your Account


  |  » Forgot your password?
Join

Notices

Basic HTML Question - Spacing Between Lines

 
Tools Search
  #1  
Old
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  
Old
Prince of Content
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  
Old
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.
Join ABW to remove this sponsored message.
  #4  
Old
OPM Queen
Join Date: January 4th, 2006
Location: Rolling Hills of Ohio
Posts: 1,707
Send a message via AIM to Kristin Kinsey Send a message via Yahoo to Kristin Kinsey Send a message via Skype™ to Kristin Kinsey
style="margin:20px; margin-top:5px; ">
Quote:
< 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  
Old
ABW Ambassador
Join Date: September 20th, 2005
Location: OKC
Posts: 1,219
Send a message via AIM to PatrickAllmond Send a message via MSN to PatrickAllmond Send a message via Yahoo to PatrickAllmond
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  
Old
.
Join Date: January 18th, 2005
Posts: 2,973
style="margin:20px; margin-top:5px; ">
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.
Join ABW to remove this sponsored message.
  #7  
Old
general fuq
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  
Old
Pimp Duck
Join Date: January 18th, 2005
Location: Take off eh?
Posts: 3,080
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  
Old
Affiliate/AM Moonlighter
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.
Join ABW to remove this sponsored message.
  #10  
Old
Pimp Duck
Join Date: January 18th, 2005
Location: Take off eh?
Posts: 3,080
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  
Old
Affiliate/AM Moonlighter
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  
Old
Affiliate Manager
Join Date: July 21st, 2006
Location: Fort Wayne, IN
Posts: 2,838
Send a message via Skype™ to Matt McWilliams
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
Join ABW to remove this sponsored message.
  #13  
Old
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  
Old
Affiliate/AM Moonlighter
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  
Old
ABW Ambassador
Join Date: September 20th, 2005
Location: OKC
Posts: 1,219
Send a message via AIM to PatrickAllmond Send a message via MSN to PatrickAllmond Send a message via Yahoo to PatrickAllmond
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
Join ABW to remove this sponsored message.
  #16  
Old
Affiliate Manager
Join Date: July 21st, 2006
Location: Fort Wayne, IN
Posts: 2,838
Send a message via Skype™ to Matt McWilliams
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  
Old
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  
Old
ABW Ambassador
Join Date: September 20th, 2005
Location: OKC
Posts: 1,219
Send a message via AIM to PatrickAllmond Send a message via MSN to PatrickAllmond Send a message via Yahoo to PatrickAllmond
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
Join ABW to remove this sponsored message.
  #19  
Old
Lite On The Do, Heavy On The Nuts
Join Date: January 18th, 2005
Location: Winter Park, FL
Posts: 6,928
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  
Old
Crazy like a fox
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  
Old
Lite On The Do, Heavy On The Nuts
Join Date: January 18th, 2005
Location: Winter Park, FL
Posts: 6,928
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.

:-)
Join ABW to remove this sponsored message.
  #22  
Old
The slot machine that IS paid!
Join Date: January 18th, 2005
Location: Small Town in Tennessee
Posts: 5,207
Send a message via AIM to Billy Kay Send a message via Yahoo to Billy Kay
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
__________________
http://billykaymusic.com
Reply
 

Tools Search
Search:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Newbie question: inserting html data h2oguyofnh WebMerge (Fourthworld.com) 4 October 6th, 2004 04:00 PM
HTML Question Doug247 Midnight Cafe' 1 July 23rd, 2004 09:48 PM
Basic Dreamweaver Question Doug247 Programming / Datafeeds / Tools 3 March 22nd, 2004 01:59 AM
cj websettings basic question reflections Commission Junction - CJ 1 September 22nd, 2003 05:39 AM
FrontPage 2000 HTML Question tmargulis Programming / Datafeeds / Tools 2 July 12th, 2002 06:51 PM

X

Welcome to ABestWeb.com

Create your username to jump into the discussion!

ABestWeb.com is the largest affiliate marketing community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?



Content Relevant URLs by vBSEO ©2011, Crawlability, Inc.