6 Replies Latest reply on Nov 13, 2008 3:53 AM by Newsgroup_User

    no line break after display:block?

    Level 7
      (I hesitated long to ask this question since it seems to be on the
      level of "how can I stop people from grabbing my images?" but I cannot
      find a solution by myself.)

      On this page http://www.spinsister.nl/zandbak/Olga/visie.htm (I know, I
      hate the colours too) I have a very simple table layout with cells as
      menu buttons.

      I want the menu items to have a top and bottom border when hovered
      over, but then the whole text beneath the menu seems to jump.

      I found that a display:block carries a line break before and after. I
      suppose this causes the jumps for without the display:block everything
      stays where it is supposed to be.

      I don't like the display:inline effect here, so what else can I do?
      Thanks for your patience.

      --
      Groet,
      Adriana


        • 1. Re: no line break after display:block?
          Level 7
          display: block does'nt carry a line break before or after.

          What you need to do is move display: block; from your 'hover' css style
          and attach it to the a:link css style, as shown below and also give the
          a:link a border, the same color as your page background, as shown below.

          Its the added border on hover that displaces the text so you have to
          compensate for it by adding a border to the anchor.


          #contentTable td.navbar a:link, #contentTable a:visited, #contentTable
          a:active {
          color: #000;
          text-decoration: none;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 20px;
          border-top: 1px solid #C00;
          border-bottom: 1px solid #C00;
          display: block;
          }







          A.Translator wrote:
          > (I hesitated long to ask this question since it seems to be on the level
          > of "how can I stop people from grabbing my images?" but I cannot find a
          > solution by myself.)
          >
          > On this page http://www.spinsister.nl/zandbak/Olga/visie.htm (I know, I
          > hate the colours too) I have a very simple table layout with cells as
          > menu buttons.
          >
          > I want the menu items to have a top and bottom border when hovered over,
          > but then the whole text beneath the menu seems to jump.
          >
          > I found that a display:block carries a line break before and after. I
          > suppose this causes the jumps for without the display:block everything
          > stays where it is supposed to be.
          >
          > I don't like the display:inline effect here, so what else can I do?
          > Thanks for your patience.
          >
          • 2. Re: no line break after display:block?
            Level 7
            Thank you very much, Osgood!
            Very clever, setting the top and bottom border for the link to the same
            colour as the background.

            I did not make that up, about the line break, I found it in what I
            thought was a reliable source:
            http://www.w3schools.com/htmldom/prop_style_display.asp



            Osgood formuleerde op Wednesday :
            > display: block does'nt carry a line break before or after.

            > What you need to do is move display: block; from your 'hover' css style and
            > attach it to the a:link css style, as shown below and also give the a:link a
            > border, the same color as your page background, as shown below.

            > Its the added border on hover that displaces the text so you have to
            > compensate for it by adding a border to the anchor.


            > #contentTable td.navbar a:link, #contentTable a:visited, #contentTable
            > a:active {
            > color: #000;
            > text-decoration: none;
            > font-family: Arial, Helvetica, sans-serif;
            > font-size: 20px;
            > border-top: 1px solid #C00;
            > border-bottom: 1px solid #C00;
            > display: block;
            > }







            > A.Translator wrote:
            >> (I hesitated long to ask this question since it seems to be on the level of
            >> "how can I stop people from grabbing my images?" but I cannot find a
            >> solution by myself.)
            >>
            >> On this page http://www.spinsister.nl/zandbak/Olga/visie.htm (I know, I
            >> hate the colours too) I have a very simple table layout with cells as menu
            >> buttons.
            >>
            >> I want the menu items to have a top and bottom border when hovered over,
            >> but then the whole text beneath the menu seems to jump.
            >>
            >> I found that a display:block carries a line break before and after. I
            >> suppose this causes the jumps for without the display:block everything
            >> stays where it is supposed to be.
            >>
            >> I don't like the display:inline effect here, so what else can I do?
            >> Thanks for your patience.
            >>

            --
            Groet,
            Adriana


            • 3. Re: no line break after display:block?
              Level 7
              A.Translator wrote:
              > I did not make that up, about the line break, I found it in what I
              > thought was a reliable source:
              > http://www.w3schools.com/htmldom/prop_style_display.asp

              Right well I don't really understand much of what is spoken at the WC3
              (most is like some foreign language to me as is their validating
              machine). Seems to confuse me rather than help.

              Glad its sorted anyway.

              Normally in most circumstances its just about applying some basic logic.
              I think you can become overly concerned with what you read and it can
              sometimes hinder your progress.
              • 4. Re: no line break after display:block?
                Level 7
                W3 is right. But it's not really a 'line break' in the same way that a <br
                /> is. Since block tags fill the width of the container, any adjacent
                content is always forced to new lines.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "Osgood" <notavailable@thisaddress.com> wrote in message
                news:gff32o$rva$1@forums.macromedia.com...
                > A.Translator wrote:
                >> I did not make that up, about the line break, I found it in what I
                >> thought was a reliable source:
                >> http://www.w3schools.com/htmldom/prop_style_display.asp
                >
                > Right well I don't really understand much of what is spoken at the WC3
                > (most is like some foreign language to me as is their validating machine).
                > Seems to confuse me rather than help.
                >
                > Glad its sorted anyway.
                >
                > Normally in most circumstances its just about applying some basic logic. I
                > think you can become overly concerned with what you read and it can
                > sometimes hinder your progress.

                • 5. Re: no line break after display:block?
                  Level 7
                  Murray *ACE* wrote:
                  > W3 is right. But it's not really a 'line break' in the same way that a
                  > <br /> is. Since block tags fill the width of the container, any
                  > adjacent content is always forced to new lines.
                  >
                  So why cant the WC3 write a simple explanation as you have done? It's
                  not a line break, there aint no 'visual' break, it just forces the
                  content to a new line. <shrug>
                  • 6. Re: no line break after display:block?
                    Level 7
                    It gets a bit complicated if you consider a block tag with an explicit width
                    that is *less* than the width of the container. Content is still forced to
                    a new line, doncha know, even if it *could* have fit beside the block
                    tag....

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    ==================


                    "Osgood" <notavailable@thisaddress.com> wrote in message
                    news:gff6tq$3m9$1@forums.macromedia.com...
                    > Murray *ACE* wrote:
                    >> W3 is right. But it's not really a 'line break' in the same way that a
                    >> <br /> is. Since block tags fill the width of the container, any
                    >> adjacent content is always forced to new lines.
                    >>
                    > So why cant the WC3 write a simple explanation as you have done? It's not
                    > a line break, there aint no 'visual' break, it just forces the content to
                    > a new line. <shrug>