14 replies [Last post]
Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

First ever question here, with admittedly scant lurking.

I'm breaking down to ask this question because I don't even seem to know how to phrase it in a way to get Google or the forum search utility here to understand what I'm asking.

I've learned that I want to redo my site entirely in CSS, because the table solution I'm using, I'm told, is (or at least can be) Google-, Bing-, and screen-reader-hostile.

Please take a look at my site, but don't even bother looking at the code.
http://mcgowanreporting.com/

I want to replicate the page shadow in CSS. Either nobody else in the world has ever done it this way (highly unlikely), or I can't ask an intelligent question.

Please note that the shadow looks like what you see around your page view in Word and WordPerfect. I want that look, not a fuzzy shadow or anything. I want to avoid using any absolute positioning, because I want to ensure that it can be read properly on any size of screen. (And yes, I know it's not so now; thus, my desire to start over.)

I'm not sure I'm interested in supporting older browsers. I'm thinking that my clients will be using IE7 or newer; at most, they'll go back to IE6. I want to focus on smart phones, tablets, and current operating systems.

I've been tinkering with getting DIVs to overlay each other, but I don't know how to get the underlying shadow DIV to be the size and the offset that I want without specifying absolute positions and sizes, which is the last thing I want.

Is there a way to get one DIV to know how large another is and size itself accordingly?

Or is there a way to put a border on a DIV (actually, two borders, one on the right side and one on the bottom), but have a fiveish-pixel transparent area at the left on the bottom and at the top on the right side?

And if you can just point me to a resource here or elsewhere, I'd love it so I can start asking better informed, if not more intelligent, questions.

-- Tim

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

I'd probably just use three

I'd probably just use three simple background images. Like this: http://feelerdealer.com/shadow/

As you can see it's amazingly simple to accomplish with CSS when compared to tables.

You can also do it without images using position relative like this: http://feelerdealer.com/shadow/noImages.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

As an alternative, use no

As an alternative, use no images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      test--shadow
    </title>
    <meta content="text/html; charset=utf-8"
          http-equiv="content-type" />
    <style type="text/css">
/*<![CDATA[*/
 
    html, body {
      background-color: darkgreen;
      padding: 1px;
      margin: 0;
      }
 
    #wrapper {
      background-color: black;
      color: white;
      margin: 20px auto;
      width: 80%;
      }
 
    .shadowed {
      background-color: white;
      color: black;
      padding: 5px;
      position: relative;
      left: -5px;
      top: -5px;
      }
 
    #pic {
      background-color: magenta;
      float: left;
      margin: 10px;
      }
 
    #pic img {
      display: block;
      padding: 0;
      }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="shadowed">
        <p id="pic">
          <img alt="A recent photo of Tim"
             class="shadowed"
             src="http://mcgowanreporting.com/images/TimFace.jpg"
             width="140" />
        </p>
 
        <p>
          Note the pink "drop shadow" on the photo. There’s no need to doctor
          the image to simulate drop shadows.
        </p>
 
        <p>
          Pellentesque non quam nec enim fermentum lacinia. Vestibulum eu
          tellus eu ligula hendrerit congue et sit amet nisi. Curabitur
          suscipit velit id mi tincidunt a pellentesque eros facilisis. Donec
          in laoreet velit. Praesent faucibus porta magna, ut adipiscing sapien
          tincidunt ut. Suspendisse a nisi ut nisl eleifend pellentesque ac
          quis quam. Vivamus ut nisi dolor, ac lobortis mi. Integer sed dolor
          erat, ut facilisis velit. Aliquam eleifend lobortis enim, et
          imperdiet felis varius nec. Phasellus aliquet augue ut purus blandit
          eu ultrices metus fringilla. Cras imperdiet cursus turpis nec
          sodales? Etiam tortor orci, feugiat id gravida sed, condimentum sed
          velit. Vivamus sagittis, lorem viverra vehicula gravida, augue orci
          mollis quam, id semper lorem dolor in erat. Nunc vel mauris vitae
          risus egestas vulputate imperdiet sit amet tortor. Nulla rutrum
          posuere leo, at congue elit ullamcorper a. Cum sociis natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Quisque tristique vehicula nisl vel cursus. Fusce leo erat, convallis
          sed lacinia a, tristique placerat arcu. Donec quis augue ut lacus
          posuere ornare.
        </p>
      </div>
    </div>
  </body>
</html>

You might also want to look at css3's box shadow. Think of it as a progressive enhancement. Browsers that don't support the property will see a functional site that (presumably) looks good, while visitors with more modern browsers will get all the bells and whistles. Tony uses the effect on the tabs at the top of the page, and on those buttons at the bottom of this post.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

Thanks!

Verschwindende:

Thank you. Definitely want to avoid the images, or would want to use stretched or repeated images, because I want the site to look as good as possible on any screen size.

I think your no-images sample might work for me. Need to remove the fixed width on the text, of course. Great place for me to start working from. Thanks again!

-- Tim

P.S. Love the pirate! <G>

Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

Awesome!

Gary, I sure as heck didn't mean for you to do all the coding for me. That's, like, perfect!

I think I'll modify it just a bit to give the content a maximum width. On a wide-screen monitor, it's going to be too wide. I didn't mention that, I know, but I didn't want anyone to do all my work for me either.

I did find and consider the box-shadow property, but I'd rather support more browsers than fewer right now. Too many XP users yet who are still using older versions of Internet Explorer. (Clients and other court reporters are still putting Windows 98 on the Internet, but I've gotta draw the line somewhere.)

Is there a better description of what I was looking to do? I could find nothing like this through searches for CSS shadows.

I can't thank you enough, Gary. You went above and beyond what I asked for and gave me everything I needed. Simply awesome!

-- Tim

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It wasn't all that much

It wasn't all that much coding, mostly copy/paste existing stuff. Besides setting a max-width, set a minimum, too.

Regardless of IE's backwardness, I'd still go with the css3 box-shadow property. It's æsthetically superior, and lack of the shadow in IE is no deal-breaker.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Is Gary's something different

Is Gary's something different than mine? Everyone always likes Gary better. I'm sulking over here. Crazy

Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

You're far too modest!

Thanks, Gary, for the suggestion of setting both minimum and maximum widths. I certainly would have overlooked that.

I totally understand why you're suggesting the shadow-box property. I'm going to save that code for the future, but for right now, I'd like the site to look the same to the most viewers possible.

And I have no idea where you could have copied that stuff to paste here. I did my level best to avoid breaking down and asking for help on what should have been, I'd have thought, easy to find on the 'Net. It just never turned up for me, and I'm ever so grateful for your help.

May I offer you a bit of (admittedly unrequested) professional advice in thanks for yours? You're obviously an excellent writer, and I hope you don't mind my noting that you have a hyphen missing in your signature block. According to The Gregg Reference Manual, Tenth Edition, at Section 821.a.:

Quote:

"When a compound adjective consists of a noun plus a participle, hyphenate this combination whether it appears before or after the noun."
attention-getting
awe-inspiring

If you care, then, the compound adjective brain-cramping requires a hyphen: Unplanned code results in a tangled wad of brain-cramping confusion. (And truer words were never written. You haven't seen the other Web site for which I'm responsible.)

I'm not interested in proofreading the Internet, mind you, and, obviously, I'm assuming you're using American English. I simply offer the above for what it's worth to you.

-- Tim

Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

No fixed width

Verschwindende:

(I'm sorry I didn't notice your post sooner!)

Gary seems to have picked up on the fact that I wanted to make sure the site could be seen on smart phones and in other restrictive view ports. Your sample was fixed at some 800 pixels wide, and while I could have backed out that specification, Gary had already done that for me.

I'm going to do my best to get the site to work well with em measurements and percentages and as few fixed elements as I can. Obviously, I want the shadow to be a fixed distance from the content pane, but that content pane will be very flexible in sizing -- as long as I don't screw it up, of course! <G>

-- Tim

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

I'm not really upset. I am

I'm not really upset. Laughing out loud I am glad you got the answer you were looking for.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Timothy J. McGowan

Timothy J. McGowan wrote:

[snip]

And I have no idea where you could have copied that stuff to paste here. I did my level best to avoid breaking down and asking for help on what should have been, I'd have thought, easy to find on the 'Net. It just never turned up for me, and I'm ever so grateful for your help.

The page's empty boilerplate template is a file on my system, the "lorem" text is generated and added to the clipboard by the Dummy Lipsum addon for Firefox, and your pic's url was copied from your page's source. I typed very little html, The css came from experience, and the hardest thing I had to do was to come up with a class token for the offset elements. See? Copy and paste.

Quote:

May I offer you a bit of (admittedly unrequested) professional advice in thanks for yours? You're obviously an excellent writer, and I hope you don't mind my noting that you have a hyphen missing in your signature block. According to The Gregg Reference Manual, Tenth Edition, at Section 821.a.:

Quote:

"When a compound adjective consists of a noun plus a participle, hyphenate this combination whether it appears before or after the noun."
attention-getting
awe-inspiring

I can't imagine what you're going on about. Stare Sshhh, fixed.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

<G>

Verschwindende:

Quote:

I'm not really upset.

What a load off my mind! <G>

No, I never doubted that for a moment. I still felt I owed you an explanation, though, so I was happy to spill.

-- Tim

Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

Ah, experience!

Gary:

Quote:

The css came from experience

Sharp reminder of the old joke about the washing machine repairman who came out to the house, looked things over, gave it a thump with a hammer, and handed the owner a bill for $100.

The homeowner freaks. "What, just to hit it with a hammer? I'd like to see a breakdown so you can try to justify your costs."

The repairman responds, "Hitting the machine with a hammer: $1.99. Knowing where to hit it: $98.01."

(Obviously, this was in some magical era before trip charges...)

And just as obviously, it's your experience I needed. Lorem ipsum and boilerplate HTML are legion on the Web. Putting a shadow box around a paneful of text, however, is not—at least, it's not done in a way that I could suss out!

I'm having trouble—or rather, gaining valuable experience getting the text to lie the way I want. Figured out how to get my mug shot on the left and my logo on the right. Seems I'm going to have to float the rest of the text. I'm tinkering and learning an awful lot. I'll let you know when it goes live.

Any aesthetes with an opinion on the size, placement, and repetition of my mug shot? Is it too large? Should it only be on one page? And should all this be in a different discussion in another section here? (The alignment of the logo and the text below it mirrors my stationery, so I'll probably not want to debate that a whole heck of a lot.)

-- Tim

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Still thinking tables

In css, you think in terms of grouping, and styling from the top down. For example, back to your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      test--shadow
    </title>
    <meta content="text/html; charset=utf-8"
          http-equiv="content-type" />
    <style type="text/css">
/*<![CDATA[*/
 
    html, body {
      background-color: #004600;
      padding: 1px;
      margin: 0;
      }
 
    a:link,
    a:visited {
      color: #004600;
      }
 
    a:hover {
      background-color: #ddd;
      }
 
    a:active {
      color: red;
      }
 
    a img {
      border: none;
      }
 
    h1 {
      margin-bottom: 0;
      margin-right: -80px;
      margin-top: -20px;
      }
 
    h1 img {
      vertical-align: bottom;
      }
 
    strong {
      color: #004600;
      font-weight: bold;
      }
 
    #wrapper {
      background-color: black;
      color: white;
      margin: 20px auto;
      max-width: 1220px;
      min-width: 760px;
      width: 80%;
      }
 
    #page {
      padding: 50px 100px 0 65px;
      }
 
    #main {
      display: table;
      text-align: right;
      }
 
    #nav {
      list-style: none;
      margin-left: 0;
      padding-left: 0;
      }
 
    #nav li {
      margin: 1.25em 0;
      }
 
    .shadowed {
      background-color: white;
      color: black;
      position: relative;
      left: -5px;
      top: -5px;
      }
 
    #pic {
      float: left;
      margin-right: 10px;
      }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="shadowed"
           id="page">
        <p id="pic">
          <img alt="[A recent photo of Tim]"
             class="shadowed"
             src="http://mcgowanreporting.com/images/TimFace.jpg" />
        </p>
 
        <div id="main">
          <h1>
            <a href="/"><img alt="McGowan Reporting"
                 height="103"
                 src=
                 "http://mcgowanreporting.com/images/McGowanReportingLogo.jpg"
                 width="260" /></a>
          </h1>
 
          <p>
            Timothy J. McGowan<br />
            McGowan Reporting, LLC<br />
            230 Westwood Drive<br />
            Mankato, MN 56001-2243<br />
            <br />
            office: 507-344-8194<br />
            fax: 507-344-2126<br />
            toll-free: 1-866-452-7002<br />
	    email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%74%69%6d%40%65%78%61%6d%70%6c%65%2e%63%6f%6d%22%3e%74%69%6d%40%65%78%61%6d%70%6c%65%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p>
          </p>
 
          <p>
            <strong>All transcripts and exhibits protected by 256-bit AES
            encryption from the moment of takedown through delivery — and
            throughout archiving.</strong> 
            <!-- That should be an em dash (), not en dash () -->
          </p>
 
          <ul id="nav">
            <li>
              <a href="/experience.html">Experience</a>
            </li>
 
            <li>Updated 2/10/11: <a href="/formats.html">Transcript formats</a>
            </li>
 
            <li>New 2/10/11: <a href="/sample.html">Sample PDF
            transcript/résumé</a> 
            <!-- Use e accent (é) rather than e grave (è) -->
            </li>
 
            <li>
              <a href="/Seamus.html">What’s the deal with the leprechaun?</a>
            </li>
          </ul>
        </div>
        <!-- end main -->
 
        <p id="footer">
          List your associations (ul), then add copyright notice.
        </p>
      </div>
      <!-- end shadowed -->
    </div>
    <!-- end wrapper -->
  </body>
</html>
The only float element is the <p> element holding the picture. The #main box is given its own block formatting context so it knows the float is there. IEs 6&7 will need a simple hack to set IE's version, the hasLayout meme. We can get into that once you've grokked in fullness what we have here. Study the source grouping by grouping, line by line.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Timothy J. McGowan
Timothy J. McGowan's picture
Offline
newbie
Mankato, MN
Last seen: 10 years 32 weeks ago
Mankato, MN
Timezone: GMT-5
Joined: 2011-04-19
Posts: 8
Points: 11

Aaaaaaauuuuugggghhhhhh!

Blamn and dast!

Thanks for catching those errors, Gary. I just never could get a handle on French, for some reason. Given the option, I'll always choose the wrong accent, just as when I say "on your left" when I mean "on your other left."

Spent a lot of time last night getting nowhere. This is going to be a huge help. I went through the tutorials on w3schools.com, and I obviously didn't learn as much as I thought I had.

Quote:

List your associations (ul), then add copyright notice.

<Laughing> Yeah, right! I'll get it figured out later. I'm not turning off the danged bullets, so I'm overlooking something obvious. (I copied the #nav blocks and renamed them #footer, but it's not working.) But I have to walk away from the computer for a few hours. If I don't figure out what I'm doing wrong, I'll ask for help. (And no, I really haven't had time to absorb everything you've given me.)

-- Tim