SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: Aligning as span element
-
Jan 21, 2003, 11:50 #1
- Join Date
- Jun 2002
- Location
- Riding the electron wave
- Posts
- 372
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Aligning as span element
I know that there is no "align" attribute for a <span> element, so I am wondering how I can get a <span> to align. I have a <div> class, in which I have my span contained, like so:
Code:div.cell { text-align: left; cursor: pointer; font-size:8pt; width: 220px; margin-bottom: 2px; padding:2px 10px 0px 0px } span.cell { cursor: pointer; display: block; text-align: left; font-size:8pt; border:1px solid black; margin-bottom: 2px; padding:2px 10px 2px 0px }
Code:<div class="cell"> <a class="span" href="...."> <span class="cell"> <b><span style="color: red">1100R</span> 1980-1998 ¾ & 1 Ton</b><br /> <span>Without overload springs</span> </span></a> </div>
I know that a <p> element is not alowed in a <span>; a <br> is. However, there is no "align" attribute for a <br>, either. And yes, I am aware that I have the <div> set to align left, but I only want the first <span> to align left; I want the second one to align right. Can it be done? Is there a better way to do this? Page can be viewed HERE.
What do you guys think?Ducharme's Axiom: "If you view your problem closely
enough, you will recognize yourself as part of the problem."
-
Jan 21, 2003, 12:02 #2
Try this:
CSS
Code:span.alignRight { text-align: right; }
Code:<div class="cell"> <a class="span" href="...."> <span class="cell"> <b><span style="color: red">1100R</span> 1980-1998 ¾ & 1 Ton</b><br /> <span class="alignRight">Without overload springs</span> </span></a> </div>
-
Jan 21, 2003, 12:57 #3
- Join Date
- Oct 2002
- Location
- Cincinnati, Ohio, USA
- Posts
- 390
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Technically, you shouldn't be able to change the alignment of an inline element such as a span. Alignment is only supposed to affect block level elements.
Since you are separating these two spans with a line break, why not just put them in paragraphs instead? A 'p' is a block level element and you can apply alignment to it. If you don't want a line-space between the two, just adjust the margin/padding on these paragraphs to get the effect you want.
-
Jan 21, 2003, 13:00 #4
- Join Date
- Jun 2002
- Location
- Riding the electron wave
- Posts
- 372
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'd pull my hair out if I had any...
Vinnie,
Thanks for the post. I tried it and it still didn't work. So I thought that maybe I had some other classes/id's that could be overriding that directive, and after lifting many of the other containers' align attributes, I still could not get them to align. I even made an "align: left" class for the first <span>, and that didn't even work.
An interesting aside is that I have a <span class="cellpkg"> just under each <span class="cell"> that is 'text-aligned: right', and they all work fine. They are also in the same <div> as the other <span> elements I want to align. But I can't quite see what's going on. Any more input would be appreciated.Ducharme's Axiom: "If you view your problem closely
enough, you will recognize yourself as part of the problem."
-
Jan 21, 2003, 13:14 #5
- Join Date
- Jun 2002
- Location
- Riding the electron wave
- Posts
- 372
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
about <p>'s
KILLALLDASH9,
sorry, posted before I saw your post. I was using <p>'s to get that effect before, however, when I converted my code to XHTML1.0, I had to remove them from the code, since these span's I am trying to align are inside yet another span with "diplay: block". The W3C validator would not validate my code with <p>'s inside the top-most <span>, for obvious reasons.
The reason I want to keep everything in an outer <span> because I can nest everything in an anchor, and have my hover effects apply to the whole <span>, so that even the border changes color on mouseover. I know I can't nest a <div> in an anchor, but is there a way to get the same effect with a <div>?Ducharme's Axiom: "If you view your problem closely
enough, you will recognize yourself as part of the problem."
-
Jan 21, 2003, 13:45 #6
- Join Date
- Oct 2002
- Location
- Cincinnati, Ohio, USA
- Posts
- 390
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Re: about <p>'s
Originally posted by garlinto
The reason I want to keep everything in an outer <span> because I can nest everything in an anchor, and have my hover effects apply to the whole <span>, so that even the border changes color on mouseover. I know I can't nest a <div> in an anchor, but is there a way to get the same effect with a <div>?
Nevermind, I forgot my wife's computer has windows on it. I checked your site and see what you are talking about now. That hover effect does not work *at all* on Mozilla 1.2/Linux (can't say for Mozilla/Netscape on windows or mac).
On the other hand, have you checked your page in a browser like Lynx? Those spans make the navigation impossible to read (also the special chars for fractions) Not that you are necessarily worried about text-only browsers, but supporting them is in the spirit of XHTML, so you should give it some thought. (The rest of the page looks pretty good in Lynx)
The reason your one set of spans *is* aligned to the right is because your stylesheet specifies that 'span.cellpkg' is a block-level element (display:block).
-
Jan 21, 2003, 13:48 #7
- Join Date
- Oct 2002
- Location
- Cincinnati, Ohio, USA
- Posts
- 390
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Also, you were having trouble with putting a div inside of an anchor. Did you try subclassing those anchors as block level elements?
-
Jan 21, 2003, 13:58 #8
- Join Date
- Jun 2002
- Location
- Riding the electron wave
- Posts
- 372
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the input...
killalldash9
Thanks for the direction...no, I never did think to add "display: block" to the link class I am using. I'll try that and see what happens.
As far as those other browsers are concerned: Can I just download off the net? What's the url?
This may be a little off-thread here, but I have wondered if there was one program that you could load your page into to see how it would display in each popular browser type, including older browser versions. What a useful tool that would be. Got any ideas, or what do you guys do?Ducharme's Axiom: "If you view your problem closely
enough, you will recognize yourself as part of the problem."
-
Jan 21, 2003, 15:00 #9
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i have multiple browsers installed on my machine at work (NS4.79, NS6, NS7, Mozilla1.2, Phoenix0.5, Opera5, Opera6, Lynx, IE5.5SP2 and IE6 on a different machine)...
a link that may be useful http://browsers.evolt.orgre·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Jan 21, 2003, 16:09 #10
- Join Date
- Jun 2002
- Location
- Riding the electron wave
- Posts
- 372
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by redux
a link that may be useful http://browsers.evolt.orgDucharme's Axiom: "If you view your problem closely
enough, you will recognize yourself as part of the problem."
Bookmarks