3 Replies Latest reply on Sep 16, 2008 12:01 PM by Newsgroup_User

    CSS help needed here!!

    HYPER83
      Have a look the blue column headers at www.optionetics.com, which have white text on top. (Learn about Options Trading, Today's Market Commentary, Featured Articles) etc.

      We want to create something similar for the column headers on the homepage at www.investix.co.uk for the 2 centre columns. Is there a snippet of CSS code that I can use to create this blue column header?

        • 1. Re: CSS help needed here!!
          Level 7
          Get Firefox. Then get the extensions Web Developer Toolbar & CSS Viewer.
          Then you can explore these things on your won and figure out how to mimic
          them. Without that ability your web design career is certain to be
          unremarkable. ;-)

          For now, the element is the H2 and here is the CSS:
          #middlecolumn h2 {color: #fff; font-size: 100%; background: transparent
          url(/images/hd-bg.gif); padding: 2px 6px 1px; border-bottom: 2px solid #3c3;
          margin: 0 0 6px}

          --

          Walt


          "HYPER83" <webforumsuser@macromedia.com> wrote in message
          news:gaoit9$n9h$1@forums.macromedia.com...
          > Have a look the blue column headers at www.optionetics.com, which have
          > white
          > text on top. (Learn about Options Trading, Today's Market Commentary,
          > Featured
          > Articles) etc.
          >
          > We want to create something similar for the column headers on the homepage
          > at
          > www.investix.co.uk for the 2 centre columns. Is there a snippet of CSS
          > code
          > that I can use to create this blue column header?
          >
          >
          >


          • 2. Re: CSS help needed here!!
            HYPER83 Level 1
            Thanks for that Walt. Actually I've never really set out to be a web developer...just want to get the site up :)

            So if I use that bit of CSS code you've given me below, will that make it a carbon copy of what's on the other site? Where exactly do I put that code in the existing code?
            • 3. Re: CSS help needed here!!
              Level 7
              Hi.
              As Walter said in that page the H2 element have been styled with a
              background image. The background image they are using is here:
              http://www.optionetics.com/images/hd-bg.gif So you will have an idea.

              For get the same effect in your page, would be:
              The ccs code:

              .column2-unit-left h3 {
              color: #fff;
              font-size: 100%;
              background: transparent url(here the background image) no-repeat;
              padding: 2px 6px 1px;
              border-bottom: 2px solid #3c3;
              margin: 0 0 6px;
              }
              As you have two column the right column would be as the above but with
              .column2-unit-right h3.


              the html code would be:

              <div class="column2-unit-left">
              <h3><a href="stocks_foundation.html">Stocks Foundation
              Program</a></h3>
              <p><img src="multiflex3/img/new
              imgs/rader_watching_trading_screen.jpg" alt="" height="56" width="85"
              border="0" />Learn the principles every investor should know</p>

              <hr noshade="noshade" size="1" />

              Play with the colors, the margins, the paddings till you get final desired.

              "HYPER83" <webforumsuser@macromedia.com> escribió en el mensaje de noticias
              news:gaoit9$n9h$1@forums.macromedia.com...
              > Have a look the blue column headers at www.optionetics.com, which have
              > white
              > text on top. (Learn about Options Trading, Today's Market Commentary,
              > Featured
              > Articles) etc.
              >
              > We want to create something similar for the column headers on the homepage
              > at
              > www.investix.co.uk for the 2 centre columns. Is there a snippet of CSS
              > code
              > that I can use to create this blue column header?
              >
              >
              >