Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

olivier

Members
  • Joined

  • Last visited

Everything posted by olivier

  1. I'd email him and put a copy in the post asking to sign and return it to you...
  2. Yes it does. Basically, if you try to disable style on a site with the web developer bar, you can see that some basic style are still there eg margin, padding, font size, list styling..... The wildcard (*) applies to everything (as it does in SQL for example, if you do a SELECT *, it refers to everything) so by doing this at the top of your style sheet, you remove any style the browser would have set by default which is a really cool thing to do for several reason but the main one for me is when you style a div element for example, by default, in some browser, it will have padding set and if you were to give it a 400px width it might actually render bigger because of the padding the browser has set. So by using the * you reset evrything to 0 You can also use it on things like that for example: #navigation * { } This would target everything within the navigation element... And that's it Hope this help Oli
  3. well, that's me told then! (Thank you E, lol). As you say: I'm alright at doing it personally and spam count so far is 0 I did look at the one you recommended and yes, It looks good and I will give it a go! Can you just tell me what you mean by buggy tho? What is wrong with it your eyes?
  4. The latest of matt's script is good. A lot of people still use it and if set up well is pretty "spam proof" Taken from Matt's Script Archive.
  5. I wish... my back hurts so much
  6. To cut a long story short, I have started snoring recently (I know... Charming) so I sleep on the sofa, and obviously, my macbook pro doesn't want me to sleep
  7. lol, I just hope it makes sense to you Nite nite now
  8. Cool! I'm pleased it worked Alright so, let's explain. The embed was created because IE uses the object tag in a weird way (what a surprise) and needs a classid to identify what type of media you're trying to embed in your page. For example if you have put flash in a page before (that is without swfobject or the like) you've probably noticed the ugly long number that appears at the beginning of your object tag: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%"> this is what tell IE that you are using flash. Other (modern & clever) browser however only need to be given a type attribute to understand what you are trying to embed in you page. So to add flash and make it work in both IE and the others, you use to have to use something like that(again this is without swfObject) <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%"> <param name="movie" value="somemovie.swf" /> <embed src="somemovie.swf" width="100%" height="100%" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed></div> </object> The first part of the object tag is for IE, the embed part is for the good browsers If you look at the code, in <object> you have "classid+ugly number" and in the <embed> you have "type+easy to read description" instead. Both serve the same purpose. Another thing that is different is the way both tags (object & embed) refer to the movie: In the object tag, we use <param name="movie" value="somemovie.swf" /> In the embed tag, we use src="somemovie.swf" Alright, Still following? There's why and how what I gave you works. First of all, embeded has gone in xhtml strict (finally) so we need to serve the same parametres it would have sent to the browser using <object>. Now let's look at the code I gave you. First part, is for IE: <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="318" height="254"> <param name="src" value="nosoundclap.mov" /> <param name="controller" value="true" /> <param name="loop" value="false" /> <param name="autoplay" value="false" /> </object> Note the ugly classid but for QT movies, the "scr" is ok. Now here's the same thing for Standard compliant browsers: <object type="video/quicktime" data="nosoundclap.mov" width="318" height="254"> <param name="controller" value="true" /> <param name="loop" value="false" /> <param name="autoplay" value="false" /> </object> This time, instead of the classid, we use the type attribute. Now, (and it's nearly the end) what we need is to have both in one <object> declaration, like so: <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="318" height="254"> <param name="src" value="nosoundclap.mov" /> <param name="controller" value="true" /> <param name="loop" value="false" /> <param name="autoplay" value="false" /> <object type="video/quicktime" data="nosoundclap.mov" width="318" height="254"> <param name="controller" value="true" /> <param name="loop" value="false" /> <param name="autoplay" value="false" /> </object> </object> What we do her is just nesting, the <object> for Standard compliant browsers within the IE one. If we were to leave this this way, our lovely browser(s) (firefox, safari...) could handle it but IE (again) can't. Sooooooooo the solution is in conditional commenting! I'm not going to bore you by getting into details about conditional commenting here, If you want to know more about it, let me know and I'll write about it So in your code, what's happening is this: <IE object> content <!--[if !IE]>--> <<<<conditional comment, this means, if not IE (the exclamation mark means not) <firefox object> </object> <!--<![endif]--> <<<<end conditional comment </object> So in plain english, IE sees the correct <object> first and because of the conditional comments, can't see the second one and displays the movie properly. Firefox however, reads the first <object>, doesn't understand it so ignores it and goes to the second <object> and display our movie!!! Et voila! I hope this makes sense to you. I learned this technique ages ago but as I never had use for it, forgot about it until today! I read about it on the old figleaf I think.. can't find the article anymore unfortunately. I hope I explained it well for you, if not tell me and I'll write this in French lol Enjoy Oli
  9. alright, sorry about the validation problem. Just did a bit of research in my books and stuff and here you go! <div id="video"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="318" height="254"> <param name="src" value="nosoundclap.mov" /> <param name="controller" value="true" /> <param name="loop" value="false" /> <param name="autoplay" value="false" /> <!--[if !IE]>--> <object type="video/quicktime" data="nosoundclap.mov" width="318" height="254"> <param name="controller" value="true" /> <param name="loop" value="false" /> <param name="autoplay" value="false" /> </object> <!--<![endif]--> </object> </div> This validates, strict xhtml and it works in our lovely modern browsers and IE What this code does is pretty self explanatory, however if you want me to explain it in details, as always, give a shout enjoy! Oli PS : the <object> HAS to be wrapped into something to validates so leave the <div> where it is
  10. Et voila! <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="318" width="254"> <param name="src" value="nosoundclap.mov" /> <param name="autoplay" value="true"> <param name="controller" value="true"> <param name="loop" value="false"> <param name="type" value="video/quicktime" > <p class="alert">Please download the Quicktime plugin to view movie</p> <embed width="320" height="254" pluginspage="http://www.apple.com/quicktime/download/" src="nosoundclap.mov" type="video/quicktime" autoplay="true" controller="true" loop="false"> </object> Hope this helps! BTW, This site is absolutely STUNNING!!!! Another brilliant site, well done
  11. oh... sorry, I didn't write that in a patronising way at all... It's the frenchness in me Give me a shout if you need anything
  12. Hiya Ben, as promised, here's my css "template". Obviously, this doesn't work or suit everybody but has always worked well for me. /*------------------------------------------------------------------------ Basic Style Sheet for www.whateversiteyouworkon.com Version 1.0 Author: moi email: moi@mysite.com ------------------------------------------------------------------------*/ /* =Common ------------------------------------------------------------------------*/ * { font-style:normal; list-style-type:none; list-style-position:outside; margin:0px; padding:0px; text-decoration:none; outline: none; } body { background: white url(skin/skin_body_back.gif) repeat-y top center; font-family:"Lucida Grande",Arial,Helvetica,Verdana,sans-serif; font-size:small; font-weight: normal; line-height: 150%; color:#FFFFFF; overflow: auto; } /* =Layout ------------------------------------------------------------------------*/ #wrapper { } #masthead { } #content { } /* =Typography ------------------------------------------------------------------------*/ p { } h1, h2, h3 { } /* =Navigation + Links ------------------------------------------------------------------------*/ #navigation { } #navigation li { } #navigation li a { } #navigation li a:hover { } a:link { color:blue; text-decoration:none; } a:visited{ color:green; text-decoration: none; } a:hover { color:red; text-decoration:underline; } /* =Forms ------------------------------------------------------------------------*/ fieldset { position:relative; margin: 1em 0; padding: 1em; border: 1px solid #999; background:#eee; } legend { position:absolute; top: -.5em; left:.5em; font-size: 14px; color:black; font-weight: bold; padding: 0 5px; } label { display:block; padding-bottom:3px; } label em { font-weight: normal; color:#999999; } input { width: 200px; padding: 3px; border: 1px solid #666; } textarea { font-family: "Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica; padding:3px; margin:0px; width:300px; height:100px; border: 1px solid #666; } /* =xTras ------------------------------------------------------------------------*/ I like to use a header to add common info + any notes (TODOS and stuff) I add = signs to the comment title so that when I do a 'find' on my document, it doesn't pick up on a class with the same name. If I use hacks, I document them (explain what and why they are here and link to a reference if any) I always starts with these definitions in because they are common to all site. The * overwrites the browser style sheet so I ALWAYS start my stylesheets with it Et voila! That's how I do things. As I said at the starts, It works for me, might not be everybody's cup of tea! Oli template.css
  13. Hey Eskimo, Sorry, just read your post again and I misunderstood what you meant, just realised now Re the new window thing, the target attribute has been dropped because it isn't good accessibility practice to use so. Links should not open in a new window unless the user decides to do so using the right click. However, if you still want to use it, I'll put a little code together for you, just let me know About the icon, if you refer to the little square with the arrow (as seen on wikipedia for example) this should indicate a external link, not the way the link open. I know, all those "should" are only theory and at the end of the day, we can do what we want but as you were mentioning WAI 2 or 3 earlier in the post, new window links are definitely a no go Hope this help you Oli
  14. When I say degrades well, That's what I mean, If no javascript, the link still work where if you use a js function only, It will not work at all. I'll show you how to solve the external icon problem in a bit
  15. there you are actually http://www.infinite-eye.com/distractions_quicktime.php Hope this helps
  16. you need to use the <embed> tag instead of <object>. I'll post the full code later for you if you can't find it before
  17. Yeah, I do. I think It's a really good idea in case you share the project with other designers or if you need to go back to your code later. I Actually always start with the same template, I'll post it later on for you If you want to have a look Oli
  18. The search depends on how you structure your site (is it database driven, what language do you use...) For the contact, the simplest way I suppose is the brilliant formail this requires CGI though, If you don't have access to CGI, here's the equivalent in php Voila! Hope this helps you
  19. Yep my dear The corretct way is to use unobtrusive javescript, it will replace the effect and degrades nicely if the user hasn't got javascript on <a href="http://www.linktoyoursite.com" onclick="target='_blank';"> Hope this helps you Oli
  20. It's Dave's birthday today! Happy 21st mate! Have a good one Olivier
  21. Sorry about your name Sazzad, I'm just a bit French Sometimes
  22. Haver a look at firebug mate, you'll love it
  23. Same here Dreamweaver rocks!!!!
  24. Bless your little snow boots
  25. Lightbox does work with flash you're right! It is mad how an effect can catch up on the net, I agree, Lightbox is very cool tho, and it deserve to be spread I think! Slim box looks cool, I'll have a proper look at it later as I'm off to bed now Oli

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.