Timo

That works great. Thank you so much Andy!

Hi, thank you for the replies, where would you place those in the code, please?

I'm not familiar with scripting or server-side handling of forms as I only know HTML and CSS, so I have temporarily opted to use a free PHP form:- http://www.freecontactform.com/email_form.php The PHP code is as follows: <?php if(isset($_POST['email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "you@yourdomain.com"; $email_subject = "Your email subject line"; function died($error) { // your error code can go here echo "We are very sorry, but there were error(s) found with the form you submitted. "; echo "These errors appear below.<br /><br />"; echo $error."<br /><br />"; echo "Please go back and fix these errors.<br /><br />"; die(); } // validation expected data exists if(!isset($_POST['first_name']) || !isset($_POST['last_name']) || !isset($_POST['email']) || !isset($_POST['telephone']) || !isset($_POST['comments'])) { died('We are sorry, but there appears to be a problem with the form you submitted.'); } $first_name = $_POST['first_name']; // required $last_name = $_POST['last_name']; // required $email_from = $_POST['email']; // required $telephone = $_POST['telephone']; // not required $comments = $_POST['comments']; // required $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; if(!preg_match($email_exp,$email_from)) { $error_message .= 'The Email Address you entered does not appear to be valid.<br />'; } $string_exp = "/^[A-Za-z .'-]+$/"; if(!preg_match($string_exp,$first_name)) { $error_message .= 'The First Name you entered does not appear to be valid.<br />'; } if(!preg_match($string_exp,$last_name)) { $error_message .= 'The Last Name you entered does not appear to be valid.<br />'; } if(strlen($comments) < 2) { $error_message .= 'The Comments you entered do not appear to be valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email_message = "Form details below.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "First Name: ".clean_string($first_name)."\n"; $email_message .= "Last Name: ".clean_string($last_name)."\n"; $email_message .= "Email: ".clean_string($email_from)."\n"; $email_message .= "Telephone: ".clean_string($telephone)."\n"; $email_message .= "Comments: ".clean_string($comments)."\n"; // create email headers $headers = 'From: '.$email_from."\r\n". 'Reply-To: '.$email_from."\r\n" . 'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); ?> <!-- include your own success html here --> Thank you for contacting us. We will be in touch with you very soon. <?php } ?> Where it says: "<!-- include your own success html here --> Thank you for contacting us. We will be in touch with you very soon." Is it possible to redirect it to load a new HTML ThankYou page after the email is submitted instead, rather than using inline HTML inside the PHP file? Thanks

I wish to emulate a subtle animated particle effect on mouse click, similar to that on: http://www.flowerdesign.co.uk but with my own little image sprites. The above site is based on flash, which I want to avoid. I wondered if there were any similar mouse-click scripts out there for JQuery or similar that anyone may know of? Thank you.

I wish to emulate a subtle animated effect on mouse click, similar to that on: http://www.flowerdesign.co.uk but with my own little image sprites. The above site is based on flash, which I want to avoid. I wondered if there were any similar mouse-click scripts out there for JQuery or similar that anyone may know of? Thank you.

Probably why Apple have done so well too, despite premium pricetags. Nice quote. Ty.

That was it. Thank you very much for that. However I will certainly do a more general overall reset from now on. For cleanliness I omitted it when posting the code here, but the working links contained it. I'm sorry, what does that mean? Thank you very much.

Hi, I'm having a small problem getting sprites to correctly line up side by side for an informal menu. I've created individual sprites of each item for a very simple rollover effect: Each sprite is 70px vertically (of which only 35px will be visible at any one time). I was going to put a 35px vertical separator graphic between each item: So basically I'm aiming for something similar to this (where I've simulated hovering the mouse over the Sympathy menu item): I'm a novice, however I was attempting to be clever using CSS, but failing as I used inline CSS (due to the menu items differing in pixel dimensions horizontally and I couldn't think of another way to do it other than the perhaps longer method of writing out four new CSS IDs - one for each menu item - with multiple tags for each ID etc.), but I placed each item into an inline unordered list: <ul class="menu-item"> <li><a href="#" style="width: 96px; background-image: url('weddings.png');"></a></li> <li><img src="tilde.png" /></li> <li><a href="#" style="width: 97px; background-image: url('sympathy.png');"></a></li> <li><img src="tilde.png" /></li> <li><a href="#" style="width: 68px; background-image: url('events.png');"></a></li> <li><img src="tilde.png" /></li> <li><a href="#" style="width: 97px; background-image: url('corporate.png');"></a></li> </ul> With more general CSS within the main Head tags. ul.menu-item li { list-style: none; display: inline; float: left; } ul.menu-item li a { display: block; height: 35px; text-decoration: none; background-position: 0px 0px; } ul.menu-item li a:hover { background-position: 0px 35px; } And this all works great!: http://infekted.org/...ng/ul-menu.html ...until I simply try to place the whole thing into an outer div (#menu) to consolidate and center it: http://infekted.org/...g/menu-div.html <div id="menu"> <ul class="menu-item"> <li><a href="#" style="width: 96px; background-image: url('weddings.png');"></a></li> <li><img src="tilde.png" /></li> <li><a href="#" style="width: 97px; background-image: url('sympathy.png');"></a></li> <li><img src="tilde.png" /></li> <li><a href="#" style="width: 68px; background-image: url('events.png');"></a></li> <li><img src="tilde.png" /></li> <li><a href="#" style="width: 97px; background-image: url('corporate.png');"></a></li> </ul> </div> ...with the added CSS:- #menu { width: 436px; height: 35px; margin: 0px auto; overflow: hidden; } I counted up all the horizontal pixels that all four menu items use, including three of the 'tilde' separator graphics inbetween them, and it all comes to 436px. However if I try to put the menu into a 436px wide div, it wont fit! In fact it wont fit until I enlarge the outer div to something crazy like 480px. Looking at the preview of the overall 'menu div' using Dreamweaver (I know Dreamweaver isn't particularly great, but can occasionally be useful to visualise problems that you can't necessarily see) and it shows the unordered list is being physically pushed down, to the side and out of the main div. I applied the overflow:hidden; tag to the #menu div to hide everything outside of it, but I'm not sure why the menu items are being pushed outside of it to start with. But would it be better just to not do the menu as a list, and instead just do each image separately (with separate IDs, each with multiple tags)? Any thoughts on what I'm doing wrong, or what might be better practice? Thank you

Where to start... Divisions. The first step would be to divide the image into various associated areas (divs) - for example, for me, the header (logo) area at the top of the page would be one div, followed by another for the horizontal menu bar, another for the left hand menu bar, another for the splash content to the right of it, and so on, going down the page - then give each divs some fixed or relative dimensions, and nest them within each other. Once you have all the divs effectively laying out the page, then it's the creative CSS part - breaking each area into its constituent working parts, and using CSS to control the content within each div, how its displayed, and its functionality as required. Sorry it's a little woolly. Describing the best practices of CSS for the functionality for each and every one of those divs would take eons. PHP might be more appropriate for such an interactive, modular site.

Try GIMP, it's a free open source graphics editor. http://www.gimp.org You can export to PNG, GIF or JPG. TIFF is not used for websites, generally. It's much too large a filesize and/or less compatible. As to what filetype to use, I wrote a guide in another thread:

Hi, I've just tried the above, sending the form to a Yahoo email address, but for some reason it gets sent to the spam folder as opposed to the inbox. Any idea why this is? Thanks

My bad, I forgot to add the noJS class to that CSS element to invoke it only when Javascript is unsupported. #menu li:hover ul.noJS { display: block; } Thanks Leon

I've been following a tut on creating a simple animated dropdown menu with CSS and JQuery. I've emulated it to the best of my knowledge but I'm having problems with the JQuery animation. Instead of dropping the menu down when you hover over it, the menu folds up instead of down. Similarly when you don't hover the mouse over the menu, it drops down! The complete opposite of what is needed. Attempting to hover over a listed element within the dropdown menu keeps folding it up and down, up and down etc. in an infinite loop. Could anyone perhaps shed some light on it, please? With animated JQuery: http://www.infekted....enu-jquery.html Without animated JQuery: http://www.infekted....u-nojquery.html CSS: HTML: JQuery: For some reason the forum destroys my neatly nested text formatting when I insert it. Inserting as code instead of quotes is even worse. Thanks for any pointers.

Two reasons: 1, It's a starter webhost option and doesn't allow PHP (or Perl). http://www.lcn.com/web_hosting 2, I don't know PHP anyway! (Only HTML and CSS. )

Instead of inserting your actual text content within all the web code itself, is it possible to read a text file and then place the text contents of that file within <p></p> tags instead? Such as typing some text in notepad, saving it as something like "availabilities.txt", uploading it to the server and then have my webpage call upon that and insert it where needed, such as: <div id="page1"> <h1>Current availabilities</h1> <p>display contents of availabilities.txt here within this paragraph</p> </div> Reason I'm asking is to allow others (with FTP access) to easily edit the text on a page without them having to find exactly where it is within all the HTML coding (and potentially messing it all up). Is there an easy way to do this without using something like PHP? Thanks

I use Dreamweaver just to kinda preview things as I code. I do all the coding myself though, so I have full control over what goes in and what stays out.

Start with photo. Increase canvas size, creating a border. Select all (ctrl+a). Copy (ctrl+c) and/or cut (ctrl+x) the whole image. Increase the canvas size some more. Paste image back in into the centre (as a new layer if desired). Whilst internal image is still selected (with the little dancing ants routine), rotate say 5º counter-clockwise freely. Again, while still selected, add a subtle drop shadow. Finish? Quite straight forward with most paint programs.

Hi Generated a form using EmailMeForm.com (outsourcing forms, as I don't have CGI functionality on a particular server), stripped it of non-essential code, edited it nicely, and then dumped it into Dreamweaver as below: However when I click "LiveView" to get rid of all the div markers, the form visually expands horizontally two-fold: The input fields are only set to 42 characters (length). Live-mode shows too many. Previewing the site in IE and Firefox, it looks fine. (That semi-translucent white block on the right is just the background graphic btw, not a coded div or anything. Only the text 'inside' it is in a div.) Do you think there's a rogue element in my code somewhere, or is Dreamweaver sometimes off the mark when rendering live previews? I can't initially seem to see anything untoward with my code.

I'm used to pixelling so I use PaintShopPro - a really old copy (version 7) but it boots up within seconds, works well and I know it like the back of my hand and can get things done very quickly. A creature of habit. The rendering of text or colour gradient fills aren't all that great looking in PSP though, so I boot into Photoshop for creating those elements and then import them back into PSP.

I love you. Although I eventually managed to fix it (the "li" wasn't using float:left;), my former code looks like taking a sledgehammer to crack a nut, lol. Your code is about a tenth of the size. I'm embarassed. I'm still getting to grips with just how vastly modular (and therefore powerful) CSS can be. Your advice is gratefully received. Haven't noticed any flickering (maybe my computer is too quick), but will test the graphic scroll hack as well. Thanks ever so much.

Hi, http://www.infekted.org/menutest/test2.html I'm creating a menu with rollover buttons, above. ^ This is what it looks like in Firefox and IE8 and every other browser (other than IE7 and IE6): This is what it looks like in IE7 and IE6: Basically what I tried to do was: 1. Create a menubar div. 2. Create one div (per button), containing one roll-over button functioning as a hyperlink. 3. Make each button div relative. 4. Use absolute positioning to add text to the centre of each button (div) to act as the same hyperlink. 5. Repeat steps 2-4 to create four buttons side-by-side, completing the menu-bar. My Body code is as shown below. All hand-coded, with the aid of Dreamweaver for the javascript roll-over button effect [in the Head portion, shown in the spoiler lower down if needed]. <body onload="MM_preloadImages('images/menu-button-hover.png')"> <div id="container"> <div id="menubar"> <ul> <li> <div class="button"> <a href="page1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button-1','','images/menu-button-hover.png',1)"> <img src="images/menu-button.png" alt="Page1" name="page1" width="181" height="23" id="button-1" /> <div class="button-text">button 1</div> </a> </div><!-- end button 1 --> </li> <li> <div class="button"> <a href="page2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','images/menu-button-hover.png',1)"> <img src="images/menu-button.png" alt="Page2" name="page2" width="181" height="23" id="button-2" /> <div class="button-text">button 2</div> </a> </div><!-- end button 2 --> </li> <li> <div class="button"> <a href="page3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Candidates','','images/menu-button-hover.png',1)"> <img src="images/menu-button.png" alt="Page3" name="page3" width="181" height="23" id="button-3" /> <div class="button-text">button 3</div> </a> </div><!-- end button 3 --> </li> <li> <div class="button"> <a href="page4.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/menu-button-hover.png',1)"> <img src="images/menu-button.png" alt="Page4" name="page4" width="181" height="23" id="button-4" /> <div class="button-text">button 4</div> </a> </div><!-- end button 4 --> </li> </ul> </div><!-- end menubar div --> </div><!-- end container div --> </body> Here's my CSS, fairly straight-forward I hope: * { margin: 0px; padding: 0px; } body { background-image: url(images/bgslice.png); background-repeat: repeat-x; } img { border: 0px; } #container { width: 728px; margin-right: auto; margin-left: auto; margin-top: 57px; height: 27px; background-color: #000000; } #menubar { height: 23px; width: 728px; margin-left: 2px; margin-top: 2px; float: left; } .button { width: 181px; float: left; position: relative; } .button-text { text-align: center; position: absolute; width: 181px; top: 3px; } li { list-style-type: none; } a { color: #FFFFFF; text-decoration: none; } I've tried just using the buttons (no text) to simplify things in trying to narrow it down, but the buttons themselves are still staggered like a staircase: http://www.infekted.org/menutest/test1.html Here's the head and the javascript (if it is needed): Any hints or tips would be very welcome. Or if there are better ways to do it. I wanted to keep file-sizes down, hence using text over a default button. Rather than having two images with graphic text on them for each and every button. Thanks, Timo

Many thanks for the fast reply, and for checking out the site. Basically the reason I am puzzled is because when I hover my mouse over images with Alt tags the Alt text doesn't show [pop up] like it does on other sites? Thanks again.

Oddly my Alt tags aren't showing up on any images for the website I've made, even though I've meticulously edited them all with alt tags. http://tinyurl.com/yl796sw Any help would be appreciated. Secondly, are Alt tags also used for search engine optimisation? Thanks, Timo

Thanks guys, but I was wondering which of the more mainstream, universal web platforms, namely Shockwave, Java, Silverlight, or Flash or similar could offer the best choice. Cheers for the responses.

I'm just trying to decide which platform might be best suited to designing, coding and implementing a realtime online multiplayer web-browser game. It will be a fast paced 2D shoot-em-up, but because it will be online and web-browser based it needs to be efficient to at least try to minimise "lag" between players, and it needs to be suitable for displaying many animated graphic effects such as weapons with many bullets, explosions and particle effects at any such time. An example of a similar game would be Soldat, which runs standalone (it's coded in Delphi) as opposed to with a web-browser. To see how fast Soldat actually is, you can see a quick video here: or moreso: The reason I'd like to keep it web-browser based is that many game sites these days (such as Miniclip.com or Kongregate.com) require it. I was initially leaning toward Flash/Actionscript but I've noticed that even the very simplest of animated graphics "tear" or "rip" on the screen, and aren't particularly smooth in motion either. I made a quick example to show this, it's basically just an image (PNG) of a black bar moving across the screen at different frame rates. No coding, just a simple tween. [tearing 15fps] [tearing 30fps] [tearing 60fps] As you can see, tearing and jerking occurs when using any frame rate, and it's only the most basic of animations. It's an undesirable effect I've seen on many flash anims and games on the web. Are there any better platforms than Flash that would be more suited to what I'd like to do? Shockwave, Java, Silverlight, etc.? Basically I'm after a platform that stands to offer: * The ability for at least 2 online players (via P2P or server-based) * The ability for minimal internet connection lag between players for more accurate game-play (of course you'll never be able to get around the players' physical distance and ISP lag, but if you can at least steer it in the right direction with the platform it's running on...) * Efficiency and suitability for lots of graphic effects * Smooth handling of graphics and animations with minimal tearing/ripping of images * Web browser based * A platform that has mainstream penetration (in otherwords not an obscure platform) I know this all may be vague, but basically I'm starting from the bottom upwards. I'm hoping if I pick the right platform to start out on that is most suited to what I eventually want to do then I can learn the language and build up from there, rather than using Flash and ending up with something that may be unusable do to the platform's deficiencies. Thanks for any insight! Timo