17 Replies Latest reply on Aug 10, 2006 7:27 PM by Newsgroup_User

    Almost have this CSS layout but not quite

    Level 7
      This is what I have so far:

      www.blastoffmusic.org/downloads/downloads2.php

      I know it is possible to layout each CD with the accompanying information to
      the right and then separate each one w/ a <hr> tag. I finally got the CDs to
      line up but the text still runs together. Tables would take care of this but
      it annoys me that I cannot make it work with CSS. My <ol> stopped working,
      too. Some may say that I'm a little slow on the uptake today (true -true) ;)

      Does anyone want to generously give of their CSS knowledge to help me out a
      bit? Pretty please?

      :)
      Kat


        • 1. Re: Almost have this CSS layout but not quite
          Level 7
          KatOlds wrote:
          > This is what I have so far:
          >
          > www.blastoffmusic.org/downloads/downloads2.php
          >
          > I know it is possible to layout each CD with the accompanying information to
          > the right and then separate each one w/ a <hr> tag. I finally got the CDs to
          > line up but the text still runs together. Tables would take care of this but
          > it annoys me that I cannot make it work with CSS. My <ol> stopped working,
          > too. Some may say that I'm a little slow on the uptake today (true -true) ;)

          Kat ;-) - Perhaps something like this.....

          .CDContent {
          clear: both;
          position: relative;
          float: left;
          margin-top: 50px;
          }
          .CDContent img{
          margin:50px 0 50px 0;

          }
          .cd {margin-bottom:50px;
          float: left;


          }
          .chart{
          position: absolute;
          z-index: 1;
          left: 250px;
          top: 20px;
          }
          .listen {
          position: absolute;
          z-index: 1;
          left: 150px;
          top: 20px;
          }

          HTH :-)

          --
          chin chin
          Sinclair
          • 2. Re: Almost have this CSS layout but not quite
            Level 7
            <gets down on ground and kisses Sincs feet>
            Getting really, really close. Time to play at it again! Many thanks, djinn!

            Kat

            "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
            news:ebg8ri$obt$1@forums.macromedia.com...
            > KatOlds wrote:
            >> This is what I have so far:
            >>
            >> www.blastoffmusic.org/downloads/downloads2.php
            >>
            >> I know it is possible to layout each CD with the accompanying information
            >> to the right and then separate each one w/ a <hr> tag. I finally got the
            >> CDs to line up but the text still runs together. Tables would take care
            >> of this but it annoys me that I cannot make it work with CSS. My <ol>
            >> stopped working, too. Some may say that I'm a little slow on the uptake
            >> today (true -true) ;)
            >
            > Kat ;-) - Perhaps something like this.....
            >
            > .CDContent {
            > clear: both;
            > position: relative;
            > float: left;
            > margin-top: 50px;
            > }
            > .CDContent img{
            > margin:50px 0 50px 0;
            >
            > }
            > .cd {margin-bottom:50px;
            > float: left;
            >
            >
            > }
            > .chart{
            > position: absolute;
            > z-index: 1;
            > left: 250px;
            > top: 20px;
            > }
            > .listen {
            > position: absolute;
            > z-index: 1;
            > left: 150px;
            > top: 20px;
            > }
            >
            > HTH :-)
            >
            > --
            > chin chin
            > Sinclair


            • 3. Re: Almost have this CSS layout but not quite
              Level 7
              KatOlds wrote:
              > <gets down on ground and kisses Sincs feet>
              > Getting really, really close. Time to play at it again! Many thanks, djinn!

              Sinc blushes whilst drying his feet :-)

              You need to use the img tag and you're sorted I think see last post -
              this bit.....

              .CDContent img{
              margin:50px 0 50px 0;

              }

              --
              chin chin
              Sinclair
              • 4. Re: Almost have this CSS layout but not quite
                Level 7
                I get it - you just added the img element to the class. Silly me - didn't I
                say it was an off day? Thanks, djinn - I've been struggling with this one
                for 2 days now and am just about in tears (i know - the girl thing). Anyway,
                thanks again for your help!

                Kat

                "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                news:ebgbme$r38$1@forums.macromedia.com...
                > KatOlds wrote:
                >> <gets down on ground and kisses Sincs feet>
                >> Getting really, really close. Time to play at it again! Many thanks,
                >> djinn!
                >
                > Sinc blushes whilst drying his feet :-)
                >
                > You need to use the img tag and you're sorted I think see last post - this
                > bit.....
                >
                > .CDContent img{
                > margin:50px 0 50px 0;
                >
                > }
                >
                > --
                > chin chin
                > Sinclair


                • 5. Re: Almost have this CSS layout but not quite
                  Level 7
                  KatOlds wrote:
                  > I get it - you just added the img element to the class. Silly me - didn't I
                  > say it was an off day? Thanks, djinn - I've been struggling with this one
                  > for 2 days now and am just about in tears (i know - the girl thing). Anyway,
                  > thanks again for your help!

                  You're welcome Kat- you have it - the important thing there was that,
                  had you not used that then the next album you added, the absolute value
                  of your song col would have caused the text to run into your footer -
                  this way you always have a margin on your img (because it's within a
                  relative div) it pushes the footer down ;-)


                  --
                  chin chin
                  Sinclair
                  • 6. Re: Almost have this CSS layout but not quite
                    Level 7
                    Okay. Thanks for the explanation. Explaining it helps me understand the
                    whys. Now, in IE, my middle section does not stretch (doesn't surprise me)
                    but it stretches just fine with FF. Is there a fix for this?

                    Kat

                    "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                    news:ebgcm8$smj$1@forums.macromedia.com...
                    > KatOlds wrote:
                    >> I get it - you just added the img element to the class. Silly me - didn't
                    >> I say it was an off day? Thanks, djinn - I've been struggling with this
                    >> one for 2 days now and am just about in tears (i know - the girl thing).
                    >> Anyway, thanks again for your help!
                    >
                    > You're welcome Kat- you have it - the important thing there was that, had
                    > you not used that then the next album you added, the absolute value of
                    > your song col would have caused the text to run into your footer - this
                    > way you always have a margin on your img (because it's within a relative
                    > div) it pushes the footer down ;-)
                    >
                    >
                    > --
                    > chin chin
                    > Sinclair


                    • 7. Re: Almost have this CSS layout but not quite
                      Level 7
                      KatOlds wrote:
                      > Okay. Thanks for the explanation. Explaining it helps me understand the
                      > whys. Now, in IE, my middle section does not stretch (doesn't surprise me)
                      > but it stretches just fine with FF. Is there a fix for this?

                      Kat - this was present in the last version at the bottom of the code for
                      that last row.....

                      <ol class="chart">

                      <li>chart</li>
                      <li>chart</li>
                      </ol>
                      <br style="clear: both;">
                      </div>

                      Note the <br style="clear:both;"> is missing from your code this time
                      round - you'll want this *only* in the bottom-most row.

                      HTH

                      :-)

                      --
                      chin chin
                      Sinclair
                      • 8. Re: Almost have this CSS layout but not quite
                        Level 7
                        That was it! I feel like such a ding-**** today. I should have hung this one
                        up today and studied PHP instead! Thanks, Sinc - I really do appreciate it!

                        Kat

                        "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                        news:ebggnu$3h1$1@forums.macromedia.com...
                        > KatOlds wrote:
                        >> Okay. Thanks for the explanation. Explaining it helps me understand the
                        >> whys. Now, in IE, my middle section does not stretch (doesn't surprise
                        >> me) but it stretches just fine with FF. Is there a fix for this?
                        >
                        > Kat - this was present in the last version at the bottom of the code for
                        > that last row.....
                        >
                        > <ol class="chart">
                        >
                        > <li>chart</li>
                        > <li>chart</li>
                        > </ol>
                        > <br style="clear: both;"> </div>
                        >
                        > Note the <br style="clear:both;"> is missing from your code this time
                        > round - you'll want this *only* in the bottom-most row.
                        >
                        > HTH
                        >
                        > :-)
                        >
                        > --
                        > chin chin
                        > Sinclair


                        • 9. Re: Almost have this CSS layout but not quite
                          Level 7
                          KatOlds wrote:
                          > That was it! I feel like such a ding-**** today. I should have hung this one
                          > up today and studied PHP instead! Thanks, Sinc - I really do appreciate it!
                          >

                          Kat - it's my explanations - not you - gets me in trouble all the time -
                          I know what I'm talking about - unfortunately no other bugger does ;-)

                          The <br style="clear: both;"> goes on the bottom-most 'row' of the div
                          holding your 'last' CD - so if you are adding another CD then the <br
                          style="clear: both;"> would be removed from CD2 and attached in the same
                          position on CD3 - see - clear as mud!

                          here's the html to fix the rogue code.......

                          <div title="CD1" class="CDContent"> <img class="cd"
                          src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                          <ol class="listen">
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          </ol>
                          <ol class="chart">
                          <li>chart</li>
                          <li>chart</li>
                          </ol>
                          </div>
                          <div title="CD2" class="CDContent"> <img class="cd"
                          src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                          <ol class="listen">
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          <li>song</li>
                          </ol>
                          <ol class="chart">
                          <li>chart</li>
                          <li>chart</li>
                          </ol>
                          <br style="clear: both;">
                          </div>


                          HTH

                          --
                          chin chin
                          Sinclair
                          • 10. Re: Almost have this CSS layout but not quite
                            Level 7
                            Oh - yeah you are getting me into trouble. My PHP book is waiting for me...
                            lol. K - let me try that and see what happens.

                            Kat

                            "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                            news:ebgmfn$9la$1@forums.macromedia.com...
                            > KatOlds wrote:
                            >> That was it! I feel like such a ding-**** today. I should have hung this
                            >> one up today and studied PHP instead! Thanks, Sinc - I really do
                            >> appreciate it!
                            >>
                            >
                            > Kat - it's my explanations - not you - gets me in trouble all the time - I
                            > know what I'm talking about - unfortunately no other bugger does ;-)
                            >
                            > The <br style="clear: both;"> goes on the bottom-most 'row' of the div
                            > holding your 'last' CD - so if you are adding another CD then the <br
                            > style="clear: both;"> would be removed from CD2 and attached in the same
                            > position on CD3 - see - clear as mud!
                            >
                            > here's the html to fix the rogue code.......
                            >
                            > <div title="CD1" class="CDContent"> <img class="cd"
                            > src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                            > <ol class="listen">
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > </ol>
                            > <ol class="chart">
                            > <li>chart</li>
                            > <li>chart</li>
                            > </ol>
                            > </div>
                            > <div title="CD2" class="CDContent"> <img class="cd"
                            > src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                            > <ol class="listen">
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > <li>song</li>
                            > </ol>
                            > <ol class="chart">
                            > <li>chart</li>
                            > <li>chart</li>
                            > </ol>
                            > <br style="clear: both;">
                            > </div>
                            >
                            >
                            > HTH
                            >
                            > --
                            > chin chin
                            > Sinclair


                            • 11. Re: Almost have this CSS layout but not quite
                              Level 7
                              I don't think that was it, djinn - it's all smashed up again. Let me go back
                              and clear each separate content div and see if it helps.

                              Kat

                              "KatOlds" <kathryn_olds5@msn.com> wrote in message
                              news:ebgmjb$9pe$1@forums.macromedia.com...
                              > Oh - yeah you are getting me into trouble. My PHP book is waiting for
                              > me... lol. K - let me try that and see what happens.
                              >
                              > Kat
                              >
                              > "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                              > news:ebgmfn$9la$1@forums.macromedia.com...
                              >> KatOlds wrote:
                              >>> That was it! I feel like such a ding-**** today. I should have hung this
                              >>> one up today and studied PHP instead! Thanks, Sinc - I really do
                              >>> appreciate it!
                              >>>
                              >>
                              >> Kat - it's my explanations - not you - gets me in trouble all the time -
                              >> I know what I'm talking about - unfortunately no other bugger does ;-)
                              >>
                              >> The <br style="clear: both;"> goes on the bottom-most 'row' of the div
                              >> holding your 'last' CD - so if you are adding another CD then the <br
                              >> style="clear: both;"> would be removed from CD2 and attached in the same
                              >> position on CD3 - see - clear as mud!
                              >>
                              >> here's the html to fix the rogue code.......
                              >>
                              >> <div title="CD1" class="CDContent"> <img class="cd"
                              >> src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                              >> <ol class="listen">
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> </ol>
                              >> <ol class="chart">
                              >> <li>chart</li>
                              >> <li>chart</li>
                              >> </ol>
                              >> </div>
                              >> <div title="CD2" class="CDContent"> <img class="cd"
                              >> src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                              >> <ol class="listen">
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> <li>song</li>
                              >> </ol>
                              >> <ol class="chart">
                              >> <li>chart</li>
                              >> <li>chart</li>
                              >> </ol>
                              >> <br style="clear: both;">
                              >> </div>
                              >>
                              >>
                              >> HTH
                              >>
                              >> --
                              >> chin chin
                              >> Sinclair
                              >
                              >


                              • 12. Re: Almost have this CSS layout but not quite
                                Level 7
                                no wait... wait... I forgot to put it back in. Hold on.


                                "KatOlds" <kathryn_olds5@msn.com> wrote in message
                                news:ebgmjb$9pe$1@forums.macromedia.com...
                                > Oh - yeah you are getting me into trouble. My PHP book is waiting for
                                > me... lol. K - let me try that and see what happens.
                                >
                                > Kat
                                >
                                > "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                                > news:ebgmfn$9la$1@forums.macromedia.com...
                                >> KatOlds wrote:
                                >>> That was it! I feel like such a ding-**** today. I should have hung this
                                >>> one up today and studied PHP instead! Thanks, Sinc - I really do
                                >>> appreciate it!
                                >>>
                                >>
                                >> Kat - it's my explanations - not you - gets me in trouble all the time -
                                >> I know what I'm talking about - unfortunately no other bugger does ;-)
                                >>
                                >> The <br style="clear: both;"> goes on the bottom-most 'row' of the div
                                >> holding your 'last' CD - so if you are adding another CD then the <br
                                >> style="clear: both;"> would be removed from CD2 and attached in the same
                                >> position on CD3 - see - clear as mud!
                                >>
                                >> here's the html to fix the rogue code.......
                                >>
                                >> <div title="CD1" class="CDContent"> <img class="cd"
                                >> src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                                >> <ol class="listen">
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> </ol>
                                >> <ol class="chart">
                                >> <li>chart</li>
                                >> <li>chart</li>
                                >> </ol>
                                >> </div>
                                >> <div title="CD2" class="CDContent"> <img class="cd"
                                >> src="kdownlImages/downloadScale/GregBostockCD.jpg" alt="" border="0">
                                >> <ol class="listen">
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> <li>song</li>
                                >> </ol>
                                >> <ol class="chart">
                                >> <li>chart</li>
                                >> <li>chart</li>
                                >> </ol>
                                >> <br style="clear: both;">
                                >> </div>
                                >>
                                >>
                                >> HTH
                                >>
                                >> --
                                >> chin chin
                                >> Sinclair
                                >
                                >


                                • 13. Re: Almost have this CSS layout but not quite
                                  Level 7
                                  KatOlds wrote:
                                  > no wait... wait... I forgot to put it back in. Hold on.

                                  Hehe - I reckon this will require a bit of a rethink - but try this in
                                  your css for now.........

                                  .CDContent img {
                                  margin: 50px 0 80px 20px;
                                  }

                                  :-)

                                  --
                                  chin chin
                                  Sinclair
                                  • 14. Re: Almost have this CSS layout but not quite
                                    Level 7
                                    djinn wrote:
                                    > KatOlds wrote:
                                    >> no wait... wait... I forgot to put it back in. Hold on.
                                    >
                                    > Hehe - I reckon this will require a bit of a rethink - but try this in
                                    > your css for now.........
                                    >
                                    > .CDContent img {
                                    > margin: 50px 0 80px 20px;
                                    > }


                                    oh and....

                                    .CDContent {width:100%;
                                    clear: both;
                                    position: relative;
                                    float: left;
                                    margin-top: 50px;
                                    }

                                    I just don't know that this is a viable way of doing things here - needs
                                    rethinking - not enough space now that I see the content - :-(

                                    --
                                    chin chin
                                    Sinclair
                                    • 15. Re: Almost have this CSS layout but not quite
                                      Level 7
                                      Okay, this is what seems to work: changing the img margin to 80px(bottom),
                                      clearing the float after each CD block. Anything else? Besides that IE has
                                      taken my numbers off of my list items.
                                      :)
                                      Kat
                                      "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                                      news:ebgo7h$bbv$1@forums.macromedia.com...
                                      > KatOlds wrote:
                                      >> no wait... wait... I forgot to put it back in. Hold on.
                                      >
                                      > Hehe - I reckon this will require a bit of a rethink - but try this in
                                      > your css for now.........
                                      >
                                      > .CDContent img {
                                      > margin: 50px 0 80px 20px;
                                      > }
                                      >
                                      > :-)
                                      >
                                      > --
                                      > chin chin
                                      > Sinclair


                                      • 16. Re: Almost have this CSS layout but not quite
                                        Level 7

                                        .chart{
                                        position: absolute;
                                        z-index: 1;
                                        left: 340px;
                                        top: 20px;
                                        }


                                        That may work depending on what is going in there - is it to be a chart
                                        position?

                                        I'm off - it's 3.20am here.......

                                        --
                                        chin chin
                                        Sinclair
                                        • 17. Re: Almost have this CSS layout but not quite
                                          Level 7
                                          Thanks for all of your help, Sinclair - I will keep playing for awhile
                                          longer and then getting a glass of wine and turning this thing off early.
                                          G-night!

                                          :)

                                          Kat
                                          "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                                          news:ebgpm9$ctu$1@forums.macromedia.com...
                                          >
                                          > .chart{
                                          > position: absolute;
                                          > z-index: 1;
                                          > left: 340px;
                                          > top: 20px;
                                          > }
                                          >
                                          >
                                          > That may work depending on what is going in there - is it to be a chart
                                          > position?
                                          >
                                          > I'm off - it's 3.20am here.......
                                          >
                                          > --
                                          > chin chin
                                          > Sinclair