SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table-less design -- div vs. span

    What's the difference between <div> and <span>? Are both useful for table-less design? I'm trying to pick up on this new method and was wondering about this.
    $slider = 'n00b';

  2. #2
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Div is a block-level element(like p), while span is an inline element(like b).
    The difference is that block-level elements begin in a new line and force the next element to begin in a new line also, while inline elements don't do that.
    Also, a block-level element can have as a parent only another block level element. Therefore you can't nest a div inside a span, but you can do the opposite. (according to the W3C rules)

  3. #3
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, so I'm trying to go table-less. I'm trying to make a little static box in the upper left corner that will contain the typical

    Member Login
    Username [text input]
    Password [text input]
    Login button

    Using div's and span's together I should probably use a div for the overall box (to be able to size and position it, and give it color) and then use span's inside it to get the elements to position, as I would with a table. -???-

    I'm very new to the CSS layout thing, am I picking up on it alright?

    Also, I read in another thread that the vertical-align property only works with inline elements, but I just tried it with a span and it still won't vertically center the text within it. Any thoughts?
    $slider = 'n00b';

  4. #4
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, for the overall box is better if you use div. Inside it you can put spans divs or whatever else is needed to accomplish what you want.

    Vertical-align should work with span. Try this to see what i mean:
    <p>Something <span style="vertical-align: 20px;">Inside span</span> something more</p>

  5. #5
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I may be daft, but that aligns things outside the span. How to I valign the text inside the span?
    Code:
    <p>Something
    <span style="vertical-align: text-top; background-color: #CCCCCC; height: 50px;">Inside span</span>
    something more</p>
    <p>Something
    <span style="vertical-align: middle; background-color: #CCCCCC; height: 50px;">Inside span</span>
    something more</p>
    <p>Something
    <span style="vertical-align: text-bottom; background-color: #CCCCCC; height: 50px;">Inside span</span>
    something more</p>
    $slider = 'n00b';

  6. #6
    SitePoint Member
    Join Date
    Jun 2002
    Location
    Miami Fl
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do believe this would be exactly what you are looking for here.

    I've used some of this same code myself. It works nicely without resorting to using tables.
    -= Eric

  7. #7
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a small group of CSS-devoted sites like ALA that I'm familiar with and I've looked through their content many a time. None of them offer anything in relation to this vertical centering quandry.

    Though I did find this at bluerobot.com:
    Many a talented web designer has struggled with CSS-based centering. Though CSS vertical centering eludes us, two techniques for horizontal centering...

    [emphasis mine]
    So I guess there's my answer.
    $slider = 'n00b';

  8. #8
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My workaround/solution BTW is to use top padding to push the text down a touch.

    Another BTW in regards to that is that Mozilla doesn't handle padding well at all when working with nested div/span elements. Becomes a bit confusing working things out so they display right in both browsers.
    $slider = 'n00b';


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
  •