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.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Tabbed spacing HTML/CSS Best practice?

    Hi

    I was wondering what the best practice is to do tabbed spaces in HTML / CSS for stuff like menus, opening times, contact detail etc.

    If I "paste special" in dreamweaver it kind of works, although not accross browsers and it is just adding loads of &nbsp tags for every space... Not a good method I am sure.

    How would you line this up for example so it was tabbed:


    Email: enquiries@ecofrost-uk.com

    Phone: 01274 649720

    Mobile: 07531712315

    Address: 4 Mendip Way
    Bradford
    West Yorkshire
    BD12 0ED

    Would you make 2 divs?

    This is how it looks at the moment, the address is not lined up properly:

    http://vicarscafebistro.co.uk/website/contact.html

    This is the horrendously messy code I have at the moment

    Code:
    <div class="text"> 
    <p><img src="Contact.jpg" alt="Contact us" width="139" height="37" /></p> 
    <p>&nbsp;</p> 
    <p>Email:&nbsp;&nbsp;&nbsp;          <a href="mailto:enquiries@ecofrost-uk.com">enquiries@ecofrost-uk.com</a></p> 
    <p>&nbsp;</p> 
    <p>Phone:&nbsp;         01274 649720</p> 
    <p>&nbsp;</p> 
    <p>Mobile:&nbsp;         07531712315</p> 
    <p>&nbsp;</p> 
     
    <p>Address:&nbsp;      4  Mendip Way<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Bradford<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  West Yorkshire<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  BD12 0ED</p> 
    <!-- end .text --></div>
    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,208
    Thanks
    7
    Thanked 268 Times in 267 Posts
    To me, it fits within the definition of "tabular data" and I would put it in a table.

    Dave

  • Users who have thanked tracknut for this post:

    mzpresto (02-10-2013)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Cool yeah I can do that, I was just trying to avoid tables at all costs, and wondered if there was a CSS way, but I guess for some stuff you just need tables

    What are the DT and DD tabs? I heard something about them once?

    Thanks

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,208
    Thanks
    7
    Thanked 268 Times in 267 Posts
    Quote Originally Posted by mzpresto View Post
    Cool yeah I can do that, I was just trying to avoid tables at all costs, and wondered if there was a CSS way, but I guess for some stuff you just need tables
    Not the right move, IMO. Tables are a fundamental part of html, not something to be avoided at all costs. They should be used when you are displaying tabular data, and they should be styled with css.

    What are the DT and DD tabs? I heard something about them once?

    Thanks
    Definitions lists - you could get the layout you want with a definition list, but semantically I don't think you've got a list of "definitions" here.

    Dave

  • Users who have thanked tracknut for this post:

    mzpresto (02-10-2013)

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks tracknut, I thought I was failing by using tables and going for the easy way out lol!

    I'll add them to a table, it makes sense

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    Really depends on the exact "look" or "format" you need. If you want the second column to be aligned in every row (starting from the same horizontal position), using the table is the easiest way. But since using tables in html are generally frowned upon, you can use div's with with width's that you need. That's probably the best way, and you won't have to worry about tabbed spaces since you can set the paddings.

  • Users who have thanked alliv105 for this post:

    mzpresto (02-10-2013)


  •  

    Posting Permissions

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