I DON'T LIKE SPAM!! er...I mean <span> some help needed..

Discussion in 'HTML' started by midori0x@yahoo.com, Sep 23, 2008.

  1. Guest

    I was trying to use the span tags inline feature so I could line up
    three boxes, maybe eventually six. I was starting with two boxes to
    the absolute left and right of the page that would be for show, think
    something like a long greek column or some wallpaper going down both
    sides of the page. In the center I wanted a simple paragraph, but once
    I add the paragraph the right span gets pushed down underneath the
    paragraph. When I was using the div tag I thought that was why I was
    having this problem, because div is more for block I believe.

    The span tags that contain the background liners:
    <span class="spanleft"></span>
    <span class="spanright"></span>

    The styling for the two liner spans
    span.spanleft {
    border: solid;
    border-width: 1px;
    border-color: black;
    width: 7%;
    height: 90%;
    background-image: url(wallppr.jpg);
    float: left; }

    How do I go about this, I was a bit unsure about div, but looking at
    the way span works it seemed like a sure thing.
    , Sep 23, 2008
    #1
    1. Advertising

  2. Guest

    Anyone at all? I'm dyin here...
    , Sep 24, 2008
    #2
    1. Advertising

  3. Els Guest

    wrote:

    > Anyone at all? I'm dyin here...


    It's better of you quote what you are replying to, as it increases the
    number of people that will understand what you are talking about.

    I found your other post though, will reply to that one.

    --
    Els http://locusmeus.com/
    Els, Sep 24, 2008
    #3
  4. Els Guest

    wrote:

    > I was trying to use the span tags inline feature so I could line up
    > three boxes, maybe eventually six. I was starting with two boxes to
    > the absolute left and right of the page that would be for show, think
    > something like a long greek column or some wallpaper going down both
    > sides of the page.


    You mean what is generally know as a 3-column layout?

    > In the center I wanted a simple paragraph, but once
    > I add the paragraph the right span gets pushed down underneath the
    > paragraph. When I was using the div tag I thought that was why I was
    > having this problem, because div is more for block I believe.


    spans are inline elements, divs are block level elements, yes. But
    that's not what causes the problem, as by giving a span float:left or
    float:right, you make it behave like a block level element.

    > The span tags that contain the background liners:
    > <span class="spanleft"></span>
    > <span class="spanright"></span>


    Definitely use <div> instead of span there. You are creating columns,
    and I think you will want to use headers and paragraphs in them. They
    are not allowed inside <span>.

    > The styling for the two liner spans
    > span.spanleft {
    > border: solid;
    > border-width: 1px;
    > border-color: black;
    > width: 7%;
    > height: 90%;
    > background-image: url(wallppr.jpg);
    > float: left; }
    >
    > How do I go about this, I was a bit unsure about div, but looking at
    > the way span works it seemed like a sure thing.


    Well, you use <div> instead of <span>, float one of them left, the
    other right, and, important: put the stuff you want to be in the
    middle, between the floated columns visually, *after* both the floated
    divs.

    Height will probably not have much effect. 90% will be 90% of the
    parent's height. Since you have not shown a URL with your test case, I
    don't know whether you have set any height to the <body> element.
    It's better to let the height adjust itself, by its content. That way
    you'll avoid the contents spilling over the bottom border when there's
    more than you catered for.

    --
    Els http://locusmeus.com/
    Els, Sep 24, 2008
    #4
  5. Guest

    On Sep 23, 1:37 pm, wrote:
    > I was trying to use the span tags inline feature so I could line up
    > three boxes, maybe eventually six. I was starting with two boxes to
    > the absolute left and right of the page that would be for show, think
    > something like a long greek column or some wallpaper going down both
    > sides of the page. In the center I wanted a simple paragraph, but once
    > I add the paragraph the right span gets pushed down underneath the
    > paragraph. When I was using the div tag I thought that was why I was
    > having this problem, because div is more for block I believe.
    >
    > The span tags that contain the background liners:
    > <span class="spanleft"></span>
    > <span class="spanright"></span>
    >
    > The styling for the two liner spans
    > span.spanleft {
    > border: solid;
    > border-width: 1px;
    > border-color: black;
    > width: 7%;
    > height: 90%;
    > background-image: url(wallppr.jpg);
    > float: left; }
    >
    > How do I go about this, I was a bit unsure about div, but looking at
    > the way span works it seemed like a sure thing.
    , Sep 24, 2008
    #5
  6. Guest

    On Sep 24, 1:25 pm, Els <> wrote:
    > wrote:
    > > I was trying to use the span tags inline feature so I could line up
    > > three boxes, maybe eventually six. I was starting with two boxes to
    > > the absolute left and right of the page that would be for show, think
    > > something like a long greek column or some wallpaper going down both
    > > sides of the page.

    >
    > You mean what is generally know as a 3-column layout?

    Yeah, like that Holy Grail tutorial. I saw it in another thread,
    but I was still curious about the span tag offering me more
    columns.
    > > In the center I wanted a simple paragraph, but once
    > > I add the paragraph the right span gets pushed down underneath the
    > > paragraph. When I was using the div tag I thought that was why I was
    > > having this problem, because div is more for block I believe.

    >
    > spans are inline elements, divs are block level elements, yes. But
    > that's not what causes the problem, as by giving a span float:left or
    > float:right, you make it behave like a block level element.
    > When I read that I must have sighed "oh" for about half a minute.

    Boggling my mind why I got the same block style behavior.
    > > The span tags that contain the background liners:
    > > <span class="spanleft"></span>
    > > <span class="spanright"></span>

    >
    > Definitely use <div> instead of span there. You are creating columns,
    > and I think you will want to use headers and paragraphs in them. They
    > are not allowed inside <span>.
    > Yeah I wasn't planning to have anything inside of them, I wanted them to just

    be bordered boxes with a background image assigned to them on each
    side for
    decoration. A thin, repeating background going down the sides of the
    page This
    is why I was saying eventually six boxes lined up in a row.
    [lining background] [left menu] [paragraph] [right content] [lining
    background]

    > > The styling for the two liner spans
    > > span.spanleft {
    > > border: solid;
    > > border-width: 1px;
    > > border-color: black;
    > > width: 7%;
    > > height: 90%;
    > > background-image: url(wallppr.jpg);
    > > float: left; }

    >
    > > How do I go about this, I was a bit unsure about div, but looking at
    > > the way span works it seemed like a sure thing.

    >
    > Well, you use <div> instead of <span>, float one of them left, the
    > other right, and, important: put the stuff you want to be in the
    > middle, between the floated columns visually, *after* both the floated
    > divs.
    > That did it! Out of all the hair brained stuff I tried I didn't even think to

    do that, it worked perfectly. I was wondering how that worked because
    I don't think there's a "float middle" attribute. Been having a ball
    playing
    around with the divs now that they are lining up just right.
    > Height will probably not have much effect. 90% will be 90% of the
    > parent's height. Since you have not shown a URL with your test case, I
    > don't know whether you have set any height to the <body> element.
    > It's better to let the height adjust itself, by its content. That way
    > you'll avoid the contents spilling over the bottom border when there's
    > more than you catered for.
    > Yeah I was using the height attribute to make the side panels take up

    90% of the screen vertically. It seemed to be working okay, when I
    tested
    my page in different resolutions be it 640x480 or 1440x900 it always
    filled
    the screen. Thanks a million for all your incredibly helpful tips and
    anything
    else you feel like offering.
    > --
    > Els http://locusmeus.com/
    , Sep 25, 2008
    #6
  7. Els Guest

    wrote:
    > On Sep 24, 1:25 pm, Els <> wrote:
    >> spans are inline elements, divs are block level elements, yes. But
    >> that's not what causes the problem, as by giving a span float:left
    >> or float:right, you make it behave like a block level element.
    >> When I read that I must have sighed "oh" for about half a minute.

    > Boggling my mind why I got the same block style behavior.


    :)

    One more advice on how to reply: leave a blank line between what you
    are replying to, and your own reply. As you see above, the first line
    of your reply, looks like I wrote it, as it still has "my" level of
    indent. (makes it easier to see where you replied)
    (have fixed that for the rest of this post, to make things easier)

    >>> The span tags that contain the background liners:
    >>> <span class="spanleft"></span>
    >>> <span class="spanright"></span>

    >>
    >> Definitely use <div> instead of span there. You are creating
    >> columns, and I think you will want to use headers and paragraphs
    >> in them. They are not allowed inside <span>.

    >
    > Yeah I wasn't planning to have anything inside of them, I wanted
    > them to just be bordered boxes with a background image assigned to
    > them on each side for decoration. A thin, repeating background
    > going down the sides of the page This is why I was saying
    > eventually six boxes lined up in a row. [lining background] [left
    > menu] [paragraph] [right content] [lining background]


    Okay, I see what you're trying to do, but this method will get you in
    trouble later. Say, you will have content in the middle. Like, actual
    text as in paragraphs, like you're planning. What if that text ends up
    higher than the window height on any computer screen? With your
    current set up, the likeliest outcome would be that the page scrolls
    so you can read the rest of the text, but the background images in the
    set height columns, will not extend that low. You will see the bottom
    of the columns go up, and the text appearing on its own without the
    'lining backgrounds'.

    How would I get the background extend on both ends to go as far as
    needed? Nested divs.
    One outer div, full width, with background image for left outer
    lining. One div inside of that, full width too, with a background
    image for right outer lining. Then one inside of that again, with
    margins left and right, for the left inner lining.
    And so on, till you have the most inner div for the text.
    (this all depends on how your background should scale of course; for a
    fixed width page, one background would cover all, and only one extra
    outer div would be needed.)

    With nested divs, when the middle div gets higher due to its content,
    the ones around it will grow with it, so your backgrounds will always
    reach to the bottom of your content.

    (hope that made sense without an example! :))

    --
    Els http://locusmeus.com/
    Els, Sep 25, 2008
    #7
  8. Guest

    On Sep 25, 12:26 am, Els <> wrote:
    > wrote:
    > > On Sep 24, 1:25 pm, Els <> wrote:
    > >> spans are inline elements, divs are block level elements, yes. But
    > >> that's not what causes the problem, as by giving a span float:left
    > >> or float:right, you make it behave like a block level element.
    > >> When I read that I must have sighed "oh" for about half a minute.

    > > Boggling my mind why I got the same block style behavior.

    >
    > :)
    >
    > One more advice on how to reply: leave a blank line between what you
    > are replying to, and your own reply. As you see above, the first line
    > of your reply, looks like I wrote it, as it still has "my" level of
    > indent. (makes it easier to see where you replied)
    > (have fixed that for the rest of this post, to make things easier)
    >
    > >>> The span tags that contain the background liners:
    > >>> <span class="spanleft"></span>
    > >>> <span class="spanright"></span>

    >
    > >> Definitely use <div> instead of span there. You are creating
    > >> columns, and I think you will want to use headers and paragraphs
    > >> in them. They are not allowed inside <span>.

    >
    > > Yeah I wasn't planning to have anything inside of them, I wanted
    > > them to just be bordered boxes with a background image assigned to
    > > them on each side for decoration. A thin, repeating background
    > > going down the sides of the page This is why I was saying
    > > eventually six boxes lined up in a row. [lining background] [left
    > > menu] [paragraph] [right content] [lining background]

    >
    > Okay, I see what you're trying to do, but this method will get you in
    > trouble later. Say, you will have content in the middle. Like, actual
    > text as in paragraphs, like you're planning. What if that text ends up
    > higher than the window height on any computer screen? With your
    > current set up, the likeliest outcome would be that the page scrolls
    > so you can read the rest of the text, but the background images in the
    > set height columns, will not extend that low. You will see the bottom
    > of the columns go up, and the text appearing on its own without the
    > 'lining backgrounds'.
    >
    > How would I get the background extend on both ends to go as far as
    > needed? Nested divs.
    > One outer div, full width, with background image for left outer
    > lining. One div inside of that, full width too, with a background
    > image for right outer lining. Then one inside of that again, with
    > margins left and right, for the left inner lining.
    > And so on, till you have the most inner div for the text.
    > (this all depends on how your background should scale of course; for a
    > fixed width page, one background would cover all, and only one extra
    > outer div would be needed.)
    >
    > With nested divs, when the middle div gets higher due to its content,
    > the ones around it will grow with it, so your backgrounds will always
    > reach to the bottom of your content.
    >
    > (hope that made sense without an example! :))
    >
    > --
    > Els http://locusmeus.com/


    I think I got the gist of that, I think I can diagram your
    instructions until I've got it all down.
    Thanks for the tip about replying, sorry you had to sort through that
    mess.
    , Sep 26, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    529
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,724
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    470
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    253
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    447
    Wang, Jay
    May 25, 2004
Loading...

Share This Page