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

M

midori0x

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.
 
E

Els

Anyone at all? I'm dyin here...
Click to expand...

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.
 
E

Els

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.
Click to expand...

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.
Click to expand...

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>
Click to expand...

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 said:
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.
Click to expand...

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.
 
M

midori0x

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.
Click to expand...
 
M

midori0x

You mean what is generally know as a 3-column layout?
Click to expand...
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.
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.
Click to expand...
Boggling my mind why I got the same block style behavior.
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
Click to expand...
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]
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
Click to expand...
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
Click to expand...
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.
 
E

Els

Boggling my mind why I got the same block style behavior.
Click to expand...

:)

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)
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>.
Click to expand...

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]
Click to expand...

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! :))
 
M

midori0x

[email protected] said:
Boggling my mind why I got the same block style behavior.
Click to expand...

:)

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)
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]
Click to expand...

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! :))
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to detect Which image id="" was clicked ? 22
I need help making a zooming function 11
"input-group-text" help 7
Help with code 0
Buttons lining up 1
Help needed with thank you message 5
I need help fixing my website 2
Help needed with code 5

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 460

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top