 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / May 2005Hanging indents for links separated by <br>
Maybe there is a simple trick here, and I'm not spotting it... Is there a guru of CSS hanging around here who can help out? The page in question has a multi-column table with a list of links in each column. Because links are added and deleted separately in each column, it would be exceedingly awkward to use a separate table row for each link. Therefore, within each column the links are separated by <br> tags. However, the automatic line wrap for long link descriptions causes them to appear to be two or more separate links. This makes it hard to pick out the proper links. A natural solution would be to use a hanging indent so that the first line of each actual link will stick out to the left. I thought I could do that with the usual hanging indent trick of a left margin and a negative text indent in the CSS, though it seems to be a bit unusual to do it to the A tag. However, what actually happens is that the first A tags in each TD do the right thing, but the later A tags ignore it. It seems like I can't associate the left indent with each A tag separately? Because this is an intranet page, I can't link directly to it, but this is a (sanitized) version of the links in one column. <TD valign="top"> <DL> <DT>Category1 Description <DD>links <DT>Category2 Description <DD><A href="http://server1.com/link1">1st link description</A><BR> <A href="http://server2.com/link2">2nd link description</A> <DT>Category3 Description <DD><A href="http://server3.com/link3">3rd link description</A> <DT>Category4 Description <DD><A href="http://server4.com/link4">4th link description</A> <DT>Category5 Description <DD>links </DL> </TD> Here is the CSS snippet that fails: <STYLE type="text/css"> <!-- A{ text-indent : -1pc; left : 1pc; } --> </STYLE> Suggestions or explanations will be greatly appreciated... However, now that I've written it out, I suspect the real problem may be that you can't get away with that kind of manipulation within the scope of a DL. There's probably a completely different and much better way to do it? > left : 1pc; I've no idea what you are trying to do as you've made it particularly difficult for us to find out, but this may help: http://www.w3.org/TR/CSS21/visuren.html#position-props Pay particular attention to the "Applies to" information. Upload an example if you want further help (substitute the data if needed).  SignatureSpartanicus >> left : 1pc; > [quoted text clipped - 5 lines] > Upload an example if you want further help (substitute the data if > needed). My apologies, though I felt that I had made some effort to describe the problem clearly... I thank you for your reference, though it is well known. I'm not quite clear why you felt the "Applies to" might be a key here, but I am not using positioned elements here, so it seems inapplicable. (I may have included some incorrect results from an earlier experiment?) Not sure if this will help clarify the problem, but upon reflection, I had a different idea around this slightly different statement of the problem: My goal is to increase the separation between the listed links, while leaving the separation within a link unchanged when the long link description is wrapped to a new line. This approach does not require a hanging indent, but only tinkering with the leading. Specifically, I tried this combination of styles: <STYLE type="text/css"> <!-- BODY{ line-height : 200%; } A{ line-height : 100%; } --> </STYLE> This actually works quite a bit better than the previous attempts with hanging indents. The general leading of the page is spread out to 200%, and within the links, the leading is back to 100%. Unfortunately, the line break represented by a <br> tag is still not recognized as a place to insert the non-A leading of 200%. The two consecutive A tags are given the normal leading of 100%. Anyway, thanks for your attempt (and the other attempts from other posters) to be helpful. While I still believe there is probably an elegant CSS method for achieving the desired results, I was able to get an acceptable approximation of the desired effect by adding another level of list with a <UL style="list-style-type : none"> tag, treating each of the links as a list element. Unfortunately, this has frequently been my experience with CSS, in that the time required to find a good solution is too long relative to the time for a rough-and-ready approximate solution... >>> left : 1pc; >> [quoted text clipped - 11 lines] >am not using positioned elements here, so it seems inapplicable. (I may have >included some incorrect results from an earlier experiment?) Only you can know, it's your code. The point is that specifying box offsets as in the code you posted doesn't work on non positioned elements. We need a url to a minimised test case with actual content so that we can check if you are using appropriate markup. Only then can we supply proper advice on the css to use to get the desired presentation. >Unfortunately, this has frequently been my experience with >CSS, in that the time required to find a good solution is too long relative >to the time for a rough-and-ready approximate solution... Web authoring used to be something that many people did by trial and error, and copying and pasting. The bar has been raised substantially, both in the technical correctness of the technologies used, and in the available options. Not something to complain about imo. Unavoidably modern web authoring does now require investing time to master the skills. SignatureSpartanicus <snip> >> Unfortunately, this has frequently been my experience with >> CSS, in that the time required to find a good solution is too long [quoted text clipped - 6 lines] > modern web authoring does now require investing time to master the > skills. I'm not really disagreeing with you on this, but I am actually using a "high-powered" HTML editor that is supposed to make the capabilities of styles more available at any level. I was using the default, which is at the page level, but the same tool easily supports external CSS files or individual items through a reasonably intuitive interface that has allowed it to remain as the top HTML editor in Japan for many years. I admit that I'm only a dabbler (though I've been dabbling for many years), but I still feel like CSS is beyond the point of diminishing returns when you consider the amount of effort required to achieve the desired effects. That's probably "aggravated" by my strong focus on content over format, even though I think the basic idea of separating content from the visual representation is a good one... (As a prevert (sic) of sorts, I perhaps naturally tend to JavaScript-based solutions.) As it actually turned out, I rethought the problem yet one more time, and came up with a much better solution without the extra level of <UL> that required the repositioning. I had forgotten that you can have multiple <DD> tags under each <DT>, and one link per <DD> works very well for my purpose here. Another nice side effect is the elimination of the unpleasant <BR> tags, but now I'm completely out of the CSS domain. I think (hope) this is a minimal solution: <DL> <DT>Cat 1 Description <DD>Link 1 [<A> tags omitted for clarity] <DD>Link 2 <DT>Cat 2 Description <DD>Link 3 <DD>Link 4 <DD>Link 5 ... </DL> >>> Unfortunately, this has frequently been my experience with >>> CSS, in that the time required to find a good solution is too long [quoted text clipped - 16 lines] >feel like CSS is beyond the point of diminishing returns when you consider >the amount of effort required to achieve the desired effects. Although css makes a lot of sense from a technical perspective, it is to difficult to use for design oriented folk. Current authoring tools do a poor job at shielding the aforementioned from the technical aspects of web authoring in general, and css in particular. Until that changes quality web authoring requires a technical expertise. >That's >probably "aggravated" by my strong focus on content over format, even though >I think the basic idea of separating content from the visual representation >is a good one... (As a prevert (sic) of sorts, I perhaps naturally tend to >JavaScript-based solutions.) HTML, CSS and client side scripting should have very little overlap in what they are used for. >As it actually turned out, I rethought the problem yet one more time, and >came up with a much better solution without the extra level of <UL> that [quoted text clipped - 14 lines] > ... ></DL> It's not possible to say for sure given that you continue to use bogus content instead of supplying a url showing the real content and context, but I suspect use of incorrect markup to achieve a certain presentational effect, not the way to go. SignatureSpartanicus <snip> > It's not possible to say for sure given that you continue to use bogus > content instead of supplying a url showing the real content and > context, but I suspect use of incorrect markup to achieve a certain > presentational effect, not the way to go. Okay, I have to ask why you think it's incorrect markup? Insofar as it is quite reasonable for a term to have several definitions, it seems to make perfect sense to allow multiple <DD> tags under one <DT>, and the browsers clearly know how to lay them out appropriately. Having said that, I'll admit that I don't like the way this particular HTML editor implements it. You either have to switch to the HTML view and work directly on the tags, or you have to put a temporary <DT> element before each to-be-adjacent <DD> tag and then delete the temps. It seems like the natural implementation would be a sticky mode for <DL> input, and two consecutive <Enter>s would result in consecutive <DD> tags (with a third closing the DL). On the other hand, it's a pretty minor nit, considering that I'm pretty sure that most people don't use DLs in the first place... >> It's not possible to say for sure given that you continue to use bogus >> content instead of supplying a url showing the real content and >> context, but I suspect use of incorrect markup to achieve a certain >> presentational effect, not the way to go. > >Okay, I have to ask why you think it's incorrect markup? Instead of me guessing the nature of your content, prove me wrong and supply a url with some real content. SignatureSpartanicus <snip> >> Okay, I have to ask why you think it's incorrect markup? > > Instead of me guessing the nature of your content, prove me wrong and > supply a url with some real content. Why is it that common courtesy seems so rare in the contemporary newsgroups? (I actually suspect some of it has to do with excessive anonymity.) You (Spartanicus) have a funny way of trying to be helpful. You are trying to be helpful, aren't you? And yet for some strange reason, I don't feel motivated to prove anything to you. It's not that I think you are wrong, but you do seem to be socially inept, and possibly fixated on CSS as your ultimate tool of choice. For today's specific purpose, I reject CSS, so perhaps the rejection of your tool makes you feel a need to become so defensive? Reminds me of the joke about the kid with the new hammer who suddenly sees everything as a nail. And why did you cut away the following relevant part of the original? "Insofar as it is quite reasonable for a term to have several definitions, it seems to make perfect sense to allow multiple <DD> tags under one <DT>, and the browsers clearly know how to lay them out appropriately." Was it too unclear for you? Or are you really (somewhat rudely) asking for a semantic justification? If so, easy enough. In this situation, the links can be regarded as definitions of the category by way of example. In that approach, multiple definitions of each categorical term are quite natural, and it is nice that the implementation of HTML agrees. Anyway, I've already stated that it's an intranet page. Perhaps your company is different, but my employer's intranet pages are not to be transferred to public Internet places. Or perhaps you have no intranet? I did go to a fair bit of trouble to prepare a sanitized version of the key HTML, but you apparently regard that as unsatisfactory. Well, there's just no satisfying some people. In conclusion, I think you have no actual reason for regarding my markup as "incorrect". I would ask you if you do have such a reason, but at this point the question would have to dismissed as rhetorical. On more relevant technical aspects, I found two of my colleagues who use Dreameaver, but neither of them use DLs. However, one of them let me test it on her machine to see how it worked there. Turns out that it requires the same kludgy approach to achieve the same results. I think Dreamweaver is the dominant HTML editor for English, and I do know HPB is dominant here, so it seems this is not an editorial issue per se. > Why is it that common courtesy seems so rare in the contemporary newsgroups? > (I actually suspect some of it has to do with excessive anonymity.) Don't count on it. Speaking for myself only of course, I'm as ill-mannered in real life as I am here :-) > You (Spartanicus) have a funny way of trying to be helpful. You are trying > to be helpful, aren't you? You (Shannon) have a condescending tone right there in that sentence. Are you socially inapt? (SCNR) > And why did you cut away the following relevant part of the original? > Was it too unclear for you? You're starting to sound like the rest of us - be careful not to get sucked in ;-) SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Twarres - Little Sister > > [quoted text clipped - 6 lines] > > Els, I´ve never seen you here as ill-mannered! You made me love you being so helpful. >>You (Spartanicus) have a funny way of trying to be helpful. You are trying >>to be helpful, aren't you? [quoted text clipped - 4 lines] > > probably >>And why did you cut away the following relevant part of the original? >> [quoted text clipped - 8 lines] > > Peter >You (Spartanicus) have a funny way of trying to be helpful. You are trying >to be helpful, aren't you? This is a discussion group, not a help desk. Post something here and we discuss it's implications, if that turns out to be helpful then that's a bonus. >For today's specific purpose, I reject CSS Then there is no reason to discuss it here. >And why did you cut away the following relevant part of the original? I'm not going to waste my time second guessing the nature of your data when you can clear the issue up definitively by providing a sample of it. >I've already stated that it's an intranet page. Then strictly speaking it is off topic here. Usually it is an irrelevant distinction since the requirements for a quality intranet document are typically no different from a www document. >my employer's intranet pages are not to be transferred to >public Internet places. A sample of the content would suffice, substitute the content by a semantic equivalent if every scrap is considered sensitive. "Definition" doesn't cut it since it doesn't allow scrutiny of your markup. SignatureSpartanicus > The page in question has a multi-column table with a list of links in each > column. Because links are added and deleted separately in each column, it [quoted text clipped - 13 lines] > Because this is an intranet page, I can't link directly to it, but this is a > (sanitized) version of the links in one column. [snip code] > Here is the CSS snippet that fails: > [quoted text clipped - 6 lines] > --> > </STYLE> That snippet fails even before I try it out: <!-- --> is for remarks, not for style rules. What is a pc? And what is 'left' supposed to do? If you can't show the real page, why don't you upload a working example to some server somewhere? Without seeing the rest of the CSS it's difficult to guess what is happening. > Suggestions or explanations will be greatly appreciated... However, now that > I've written it out, I suspect the real problem may be that you can't get > away with that kind of manipulation within the scope of a DL. A lot of manipulation is possible within a DL. > There's probably a completely different and much better way to do it? Have link descriptions that don't need wrapping? ;-) SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Human League - Together in Electric Dreams > What is a pc? pica <http://www.w3.org/TR/REC-CSS2/syndata.html#length-units> SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) >> What is a pc? > > pica <http://www.w3.org/TR/REC-CSS2/syndata.html#length-units> I did think of pica, but I never knew it could be used in HTML/CSS. Learned something new :-) SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Fleetwood Mac - Need Your Love So Bad > That snippet fails even before I try it out: > <!-- --> is for remarks, not for style rules. Only in XHTML. In HTML, the content of style elements is CDATA[1], not PCDATA. Since they're not parsed, <!-- and --> do not delimit comments inside <style> (and <script>[2]) tags. Only clients that do not recognize <style> tags will continue to parse the contents and treat <!-- --> as comment delimiters. Of course, anyone using clients that don't recognize <style> and <script> tags to browse today's web shouldn't be surprised to see their contents rendered. --- [1] <http://www.w3.org/TR/html401/sgml/dtd.html#StyleSheet> [2] <http://www.w3.org/TR/html401/sgml/dtd.html#Script> SignatureSteve There is a foolish corner in the brain of the wisest man. -Aristotle >> <!-- --> is for remarks, not for style rules. > [quoted text clipped - 3 lines] > <style> tags will continue to parse the contents and treat <!-- --> as > comment delimiters. Right, I keep learning new stuff :-) I didn't know of the existence of clients that don't recognize <style> and <script> element tags. SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - I don't mind your requests for additional information. I don't mind your complaints that you find my description of the problem too difficult to follow. I don't mind your ignorance, though it means your comments are unlikely to be helpful. I do mind your rudeness. > I don't mind your requests for additional information. I don't mind your > complaints that you find my description of the problem too difficult to > follow. I don't mind your ignorance, though it means your comments are > unlikely to be helpful. I do mind your rudeness. Without quoting the parts of my message that you are replying to, it's hard for me to understand which bit you found rude. I just read my reply again, and I honestly don't see any rudeness in it. WRT ignorance: I asked what a pc was, cause I didn't know pica was an option. So, not knowing one thing makes me too ignorant to be helpful? Can you please explain what you mean? SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.