SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    I want my 4th arrow! garlinto's Avatar
    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
    	}
    HTML:
    Code:
    <div class="cell">
      <a class="span" href="....">
        <span class="cell">
        <b><span style="color: red">1100R</span>
        &nbsp;&nbsp;&nbsp;1980-1998&nbsp;&#190; &amp; 1 Ton</b><br />
        <span>Without overload springs</span>
      </span></a>
    </div>
    The <span> statement in red is what I want to align right.
    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."


  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this:
    CSS
    Code:
    span.alignRight {
     text-align: right;
    }
    HTML
    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>

  3. #3
    killall -9 lusers
    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.

  4. #4
    I want my 4th arrow! garlinto's Avatar
    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."


  5. #5
    I want my 4th arrow! garlinto's Avatar
    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."


  6. #6
    killall -9 lusers
    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>?
    Looking at the URL you gave in your first post, I am having a difficult time figuring out exactly what part of the page you are reffering to here. The only place I get any hover effect is in the menu at the top-right containing the text "Installation - a Pictoral" and in links in the main body, but these are just your standard underline/overline and background changes on the a tag (it looks like). Keep in mind, I only have access to a Linux box here at h...

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

  7. #7
    killall -9 lusers
    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?

  8. #8
    I want my 4th arrow! garlinto's Avatar
    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."


  9. #9
    gingham dress, army boots... silver trophy redux's Avatar
    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.org
    re·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

  10. #10
    I want my 4th arrow! garlinto's Avatar
    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.org
    Thanks, redux. I'm downloading right now...
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."



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
  •