SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 52
  1. #26
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Done! ....Total transparency - total adjusts to size - totally simple. Thanks for your help guys!
    Eric, it looks stunning. Well done, and thanks for sharing.

  2. #27
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In my high resolution monitor, I see a major .. gap appearing in Chrome where the iamge doesn't seem to be there.
    It's not on your final thing though.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #28
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. I do like the shadow, although regretably, the site is very generic. But, that's what she wanted. Their the boss.

    Quote Originally Posted by RyanReese View Post
    In my high resolution monitor, I see a major .. gap appearing in Chrome where the iamge doesn't seem to be there.
    It's not on your final thing though.
    I didn't end up using that code. I opted for more divs/code (based on big Johns) in favor of simplicity/plug-in-play. But I'm guessing the gap may be do to your newly large screen, 70% width container, and only a 1000px wide shadow. That thing is not a demo or anything - only a test page. Let me know though if you find a way to kill the bug without having to add another container.

  4. #29
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I would just edit my previous posts, but since I can't do that (should allow that functionality for advanced members???) here is previous posted links/code final home (all the others are ERROR 404's). http://www.visibilityinherit.com/cod...lay-shadow.php

  5. #30
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Thanks Eric. (Maybe you should redirect those old links to the final example? Not sure...)

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I would just edit my previous posts, but since I can't do that (should allow that functionality for advanced members???)
    Members used to be able to edit their posts but a couple of high profile members left the forums but first went back and deleted hundreds of their posts making the threads worthless.

    It also allowed in spammers who would post a normal post and then re-edit the post a few weeks later with spam.

    here is previous posted links/code final home (all the others are ERROR 404's). http://www.visibilityinherit.com/cod...lay-shadow.php
    I've edited a few of your posts posts to reflect the new url.

    I note in this example that you are getting a nasty 1px jog in Firefox as you open and close the screen (my versions doesn't seem to suffer from that).

  7. #32
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I note in this example that you are getting a nasty 1px jog in Firefox as you open and close the screen (my versions doesn't seem to suffer from that).
    Morning Paul ,

    I'm not seeing that 1px jog on my Firefox/3.5.5. However, all the browsers were choking pretty bad on the large shadow image I was using (3000px x 5000px). The kb was small, but the size along with the browser necessary calculations was a bad combo. I decreased the size of the image to 1500px x 3000px and that seems to keep the browsers happy. You still see it? If so, maybe it's your internet connection...

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Eric,

    I get the jog in FF3.5 and FF 3.0.
    It has nothing to do with the connection as it is visible when static.

    There's a screenshot attached.

    It's not a big issue but I did notice it straight away.
    Attached Images Attached Images

  9. #34
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Eric,

    I get the jog in FF3.5 and FF 3.0.
    It has nothing to do with the connection as it is visible when static.

    There's a screenshot attached.

    It's not a big issue but I did notice it straight away.
    I do see it in your screenshot (although, that looks more like a one-third pixel jog), however, no matter what I do, I can not duplicate that in any of my browsers. Here is a screenshot from my screen at full screen width (the same result at different widths). And here is browsershots screenshots . I've looked at five of them in browsershots and they're all perfect with no 1px jog. So your guess is as good as mine?

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I do see it in your screenshot (although, that looks more like a one-third pixel jog), however, no matter what I do, I can not duplicate that in any of my browsers. Here is a screenshot from my screen at full screen width (the same result at different widths). And here is browsershots screenshots . I've looked at five of them in browsershots and they're all perfect with no 1px jog. So your guess is as good as mine?
    Hi Eric,

    You won't be able to see it in a browsershot screenshot unless you can set the width of the screenshot to an odd number of pixels.

    I can see the jog in XP but my laptop running vista doesn't show it. It may just be an xp thing (or maybe a monitor setting as my main screen is 1680x1050).

  11. #36
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Well I'm on a XP. I just went through pixel 400px - 410px, 1px at a time - and nothing. The only way I could duplicate it is to zoom my screen out 4 times. I guess that mimics a res. I guess the easy fix is just give the container a even px value then.

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    It doesn't look like it's a big problem so I wouldn't worry . It was probably just showing up on my particular settings.

  13. #38
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It doesn't look like it's a big problem so I wouldn't worry . It was probably just showing up on my particular settings.
    I agree. But, this was bugging me. I've been trying to narrow down the descrepancy between your code and my example (mainly Johns code). I "think" it comes down to the image used. 1px bigger or smaller. Because look here. I took your code, and used my new larger image (1500px x 3000px) and if I zoom out 3 times (just like with my demo) I can duplicate the 1px jog. However, using your code, and your image (eric-shadow.png) then it takes 4 times zooming out to duplicate the jog. I think it's the image.

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    That seems to be it. The first example shows me the jog but the second one doesn't.

  15. #40
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I should have been a detective, I would have been happier. Of course, then I would just long for other. The "grass is always greener syndrome". We want what we don't have - we have what we don't want.

  16. #41
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yeah Paul, and then just now I used your image (1000 x 5000) with my code and the rounding error occurred at 2 zoom out levels (not 3 like my image). Again, this probably just mimics a larger res/screen settings. So "probably", I DON'T see a rounding error at my resolution with your or my code. You DO see a rounding error with my code at your screen resolution. Billy Bob and Sarah Jane WILL possibly see a rounding error with either your or my code at X-value resolution. I think this is just the same old FX rounding error problem with a different name. Or maybe I'm wrong? I'm getting a Samson 24 inch (1920 x 1200 Res) for Christmas so I should have more testing options at that time (thank God!).

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I'm getting a Samson 24 inch (1920 x 1200 Res) for Christmas so I should have more testing options at that time (thank God!)I'm getting a Samson 24 inch (1920 x 1200 Res) for Christmas so I should have more testing options at that time (thank God!).
    I have the samsung 22" which I bought last year and it's a great monitor.

    Off Topic:

    I've just ordered myself the 27" imac for Christmas as I keep getting asked to test layouts on a mac.

  18. #43
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    ooohh - that's nice - luuucky! Someday when I can piece together an extra two grand I'll be getting a mac too. Although, with my third child on the way that could be awhile. However, I see you finance it - hmmm....

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Although, with my third child on the way that could be awhile
    3 - That's just plain greedy Congratulations.

    My two are both grown up and moved out luckily (but I'm going to be granddad next month!!).

  20. #45
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    My two are both grown up and moved out luckily (but I'm going to be granddad next month!!).
    Congradulations Grandpa!

  21. #46
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Congrats . All that's left for the guru image of Paul to be finished is a nice long beard .

    Off Topic:

    Your children inherit your CSS skills ?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #47
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,771
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    It is interesting that I found this thread because over the past few days I've tried two of the three techniques discussed. It would have saved me a lot of time if I would have found this thread first. I have resigned myself to the fact that I am never going to be good at this stuff. I can't wrap my mind around it. Some people have it, some don't.

    I first tried the "Big John" method. The problem I had with that was it created space around the shadow that I could not figure out how to get rid of. It was almost like there was a margin around the box. But there wasn't.

    Then I spent a few hours looking at Paul O'B's method. I made a custom shadow of 1500 x 5000px outer width, 1480 x 4980 inner width. Doing that created a gap between the border and the shadow using his code. I was able to eliminate the gap on the top and left sides, but I screwed everything up royally on the right and bottom sides. Another issue I had was with the use of empty <b> tags. I wonder if div tags could be used instead?

    Looking at this thread I saw EricWatson's version at visibilityinherit.com. Interestingly, I did not look at that method until I found this thread even though I had it bookmarked. I obviously found it before. That method appears to be the most elegant and most simple. The problem with that method is that the width has to be applied to the outer shadow, causing the border shadow to not dynamically match the content. It isn't exactly fluid. But it is nice.

    I applied a float: left and a clear: both to the shadow box so it would not expand the full width of the screen.

    Also, putting a 1px border on the inner "wrap" div leaves 1px of white space between the border and the shadow. I changed the values of 22px to 20px and the values of 11px to 10px and got rid of the unwanted white space.

    I am certainly leaning to the version on visibilityinherit.com. I'll upload my shadow image and paste in the code. There is a problem with IE7: An additional border appears when the screen is scrolled. This has to be an IE bug with a float, I assume. So, how do I get rid of it? Does anyone know?

    I would also like to get the boxes flush left. Right now there is a margin or a padding pushing them off the left side. Anyone have any ideas how to get the border shadow flush with the left side? I tried changing padding-top and padding-left on shadow to 15px. That made it flush left, but it screwed up the border shadow a little bit.

    If anyone knows how to do what I want to do, please let me know.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Shadow</title>
    <style type="text/css">
    
    body {
    padding: 0;
    margin: 0;
    }
    
    
    .shadow { /* move width and margins from #wrap to #shadow */
    float: left;
    clear: both;
    /* margin:30px auto 0; */
    position:relative;
    padding-top:20px;
    padding-left:20px;
    }
    
    .shadow .a {
    position:absolute;
    right:0;
    top:0;
    width:20px;
    height:20px;
    background:url(shadow.png) right top no-repeat;
    }
    
    .shadow .b {
    position:absolute;
    left:0;
    bottom:0;
    width:20px;
    height:20px;
    background:url(shadow.png) left bottom no-repeat;
    }
    
    .shadow .c {
    background:url(shadow.png) right bottom no-repeat;
    }
    
    .shadow .d {
    position:relative;
    left:-20px;
    top:-20px;
    background:url(shadow.png) left top no-repeat;
    }
    
    .shadow .e {
    position:relative;
    left:10px;
    top:10px;
    }
    
    .wrap {
    border: 1px solid black;
    padding: 10px;
    }
    
    
    * html .shadow .a, * html .shadow .b, * html .shadow .c, * html .shadow .d {
    background:none;
    }
    
    
    </style>
    </head>
    
    <body>
    <!-- From http://www.visibilityinherit.com/code/four-sided-plug-n-play-shadow.php -->
    
    
    <div class="shadow"><div class="a"></div><div class="b"></div><div class="c"><div class="d"><div class="e">
       <div class="wrap">
        ....
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    Here is some content <br/><br/>
    
       </div>
    </div></div></div></div>
    
    
    
    <div class="shadow"><div class="a"></div><div class="b"></div><div class="c"><div class="d"><div class="e">
       <div class="wrap">
        ....
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
    Here is some content that is wider than the other content yeah baby!<br/><br/>
       </div>
    </div></div></div></div>
    
    
    </body>
    </html>
    Time for bed. Thanks to anyone who helps.
    Attached Images Attached Images

  23. #48
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cheesedude View Post

    Then I spent a few hours looking at Paul O'B's method. I made a custom shadow of 1500 x 5000px outer width, 1480 x 4980 inner width. Doing that created a gap between the border and the shadow using his code.
    It's just a matter of applying the correct offsets and negative margins etc but can be tricky. My example works perfectly as you can see and is pretty straight forward (well as straight forward as it can be ).

    Another issue I had was with the use of empty <b> tags. I wonder if div tags could be used instead?
    What's wrong with the b element. It's used for decoration only and almost perfectly fits the use of a non semantic element. If you don't want to use the b element use a span instead but that means you will have to add a class to it to differentiate the other span in use.

    Eric Meyer says:
    What about semantic purity?” you may ask. In my view, b and span have the same semantic value, which is to say basically none.
    I'll let Eric Watson answer questions on his layout

  24. #49
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    b all the way! You don't need a width on the outer shadow. It is only there for demo purposes. However, I'm glad you brought this up. Because know that I have a wide screen monitor, I can see I had the max-width incorrect. I neglected to consider the padding. I updated it.

  25. #50
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,771
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EricWatson View Post
    b all the way! You don't need a width on the outer shadow. It is only there for demo purposes.
    Without a width, the shadow extends the full width of the screen regardless of the content inside. Your method requires a limiting width on the outer shadow. Now, if I can figure out a way to get the shadow to shrink or expand to fit the content and work in IE7 and up, this method would be perfect. You could just drop whatever content inside of it and the shadow would fit it (within the bounds of the shadow image).

    I have attached a screenshot of your demo method with the width removed and only a small amount of text. I used your code and your image with the only change being the removal of the width and max-width on the shadow. The shadow extends the full width of the screen just about. I would like it to fit only the content inside. The screenshot is from Firefox 3.6.2.

    Quote Originally Posted by EricWatson View Post
    However, I'm glad you brought this up. Because know that I have a wide screen monitor, I can see I had the max-width incorrect. I neglected to consider the padding. I updated it.
    Thanks for your attention to this. Just to let you know, the CSS in your demo does not match the CSS in your explanation of it. Some people will certainly be confused by it.

    Quote Originally Posted by Paul O'B View Post
    It's just a matter of applying the correct offsets and negative margins etc but can be tricky. My example works perfectly as you can see and is pretty straight forward (well as straight forward as it can be ).
    Your example does work pretty well. It isn't intuitive in that you can look at it and immediately figure out what is going on (unless you are a advanced at CSS, which I am not). As for your <b> tags, figuring out why you were applying a height and width to a text formatting element through me for a loop.

    I'll keep plugging away at EricWaton's method and see if I can get the shadow to fit the content inside. Maybe I can blend Paul's and Eric's together to get what I'm after.

    Thanks for looking at this.

    By the way, does anyone know how mobile devices handle these single shadow images? I get a lot of visitors on iPhones and other mobile devices.
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •