#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    Prague
    Posts
    3
    Rep Power
    0

    Question How to do margin notes with css [problems with overlaping]


    I want to implement margin notes with CSS. I want small notes in the margin which are vertically aligned with the lines in the main content box. The problem is when the notes are longer or there are many of them - THEY OVERLAP! [or at least i did not find any solution so they do not]. If the note is long [compared to the content] i would like something like that:


    Code:
      very    long   |  See NOTE in the margin, for this short line.
      margin  note   |
      is here  and   |
      it should be   |
      rendered ok    | 
                     |
      second  note   |  Here it continues, so there is a plenty of 
      in margin      |  empty space above this paragraph - this is 
                     |  because we do not want margin notes to overlap.
    I have been trying to find a solution myself and google the net, but unsuccesfully. There is a page about the problem at http://hem.fyristorg.com/g-force/test/notes.htm where you can find what i mean. Nevertheless at the bottom of the page they just say that the notes may overlap and give no solution to the problem.

    Unitl now i have tried tricks with float [but IE does not support clear: very well], with negative margins, and with display:table-xxx. The latest one is a solution to some extend, but you must enclose your text in several divs to let it work. I would like the solution with clean html code, so ideally one could do something like:

    Code:
    <p> <div class="note">here is the text of the note</div>See NOTE in the margin, for this short line. </p>
    or maybe [dt for notes, dd for text - looks strange, but quite ok for my pages]

    Code:
    <dl class="text_with_notes">
    <dt>here is the text of the note</dt>
    <dd>See NOTE in the margin, for this short line. </dd>
    ....
    </dl>

    I would prefer clean CSS solution [no tables], but the must is that it works in most browsers [Mozzila, Opera, IE, Netscape>ver4 at least].

    Thank you very much for any ideas in advance ... I will test any new idea, I need just a hint.
  2. #2
  3. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    i believe if you have a clear width definition in your css and/or wrap: virtual, it should not overlap out of the boundaries of your margins...
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    Prague
    Posts
    3
    Rep Power
    0
    Sorry I do not understand exactly - I hope that you have understood my problem. The problem is not any kind of horizontal overlapping, the problem is overlapping of two notes, if the content of the first of them is too long. In all my solutions this is the last thing I should solve ... everything else works fine.

    Please look at the link given in the first post - here you will SEE what is exactly my problem.

    BTW: do you mean HTML wrap? or css?

    Thanks for your answer anyway, I hope that I made myself clear now, or in case, that I just did not understand your answer, please elaborate on it little bit.

    Thanks Jakub
  6. #4
  7. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    oooo, ok, well, thats all based on how much you wanna write.
    what id suggest is having a note thats too long to be displayed have a link on it that opens a mini window that contains the rest.

    [[[terminal]]]
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I believe floats are the path to take. IE does mess up, but that's expected of an obsolete, non-compliant, PoS browser. Moz and Opera do work nicely. I think with a little experimenting, that IE could be made to work right in the particular, if not the general case.

    For the general case, with the IE screw-up, see my Margin notes test. For a page-specific hack for IE, see version 2.

    Hope these examples will spark a solution for your page(s).

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    Prague
    Posts
    3
    Rep Power
    0

    better but still not enough


    Thanks guys for your posts!!

    But there are still problems, with the solution ...

    I want this
    Code:
      very    long   |  See NOTE in the margin, for this short line.
      margin  note   |
      is here  and   |
      it should be   |
      rendered ok    | 
                     |
      second  note   |  Here it continues, so there is a plenty of 
      in margin      |  empty space above this paragraph - this is 
                     |  because we do not want margin notes to overlap.
    but kk5st's solution gives this

    Code:
      very    long   |  See NOTE in the margin, for this short line.
      margin  note   |
      is here  and   |  Here it continues, so there is a plenty of 
      it should be   |  empty space above this paragraph - this is
      rendered ok    |  because we do not want margin notes to overlap. 
                     |
      second  note   |
      in margin      |  
                     |
    In the terminology of kk5st's code, I would like to insert

    <div class="clearing"> &nbsp; </div>

    automatically after each "main" div [and again I do NOT want to add this to the source, because I consider anything which implies the neccesity of including a presentational information as a bad solution].

    I tried to tweak the solution, so it works, but i dod not succeed. For example one can say that we will do the "main" class also floated to left. But than it is sometimes rendered UNDER the note, which is not good, we would need to put it a width: 100%-12em which is not possible, so we could for example put width:15% to .note and 75% to .main, but it makes width notes dependent on the size of the browser window, which looks ugly with narrover windows.

    In fact I think that there is NO solution for the source coded as in kk5st's code - which was also my original intention and is the cleanest solution.

    So I got he idea of the source code in this style:

    Code:
     <div class="section">
       <div class="note">Very long margin note is here. It should be rendered OK.</div>
    
          <p>This is a short line/section.</p>
    </div>	
    
    <div class="section">
     <div class="note">Second margin note.</div>
    
      <p>Here it continues. There should ......
    
    </div>
    
    .....
    which could quite fit the usage of notes at my pages. I thing, there could be solution for such a markup [I played with big margin of .section and big negative margin of .note, but I could not reach the solution either]

    If there is no solution for this type of code, I am willing to add anothet div around the content of each section [excluding the note], but it would be the limit of what I think is reasonable.

    Aby ideas on that?

    PS: I think that IE might be obsolete, but as it is used by many users, the final solution should work with IE as well. But for the beginning it is ok to find the nonIE-compatible solution, which can be hacked later on.
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    My first trial, which Moz, etc. render correctly, if viewed in IE, gives the spacing you desire. Since most, if not all, printed matter do not add spacing in the main content to match margin notes or sidebars, I hacked a version that even IE would render properly (as I saw it). That was version 2.

    Since you do want the breaks, I hacked another version that provides them. Even though you consider the use of clearing divs to be inelegant, it is a necessary hack for that PoS browser that 90&ndash;95% of the viewers use.

    In a compliant world, one would simply style ".main br {clear: both;}" and use <br /> at the end of your content section. IE does not handle "clear" well. Since it does recognize a clearing div, that's what we must use. It isn't as elegant as a simple <br />, but it is not structurally or syntactically wrong.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo