Bogdan Lungu » Xhtml/CSS http://www.bogdan-net.com Internet and Web Development Sun, 06 Sep 2009 16:37:51 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Merry Christmas and Happy Holidays http://www.bogdan-net.com/archives/37 http://www.bogdan-net.com/archives/37#comments Mon, 24 Dec 2007 20:36:13 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/37 Holidays are here, a moment of joy and good time for all of us in the middle of friends and family. I wish Happy Holidays and Merry Christmas to everyone and if this will be the last post of this year, I also say: Happy New Year!

]]> http://www.bogdan-net.com/archives/37/feed 0 Valid XHTML 1.0 Strict pages with flash on them http://www.bogdan-net.com/archives/33 http://www.bogdan-net.com/archives/33#comments Mon, 16 Jul 2007 20:31:56 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/33 Everyone knows there is a problem in having a valid XHTML 1.0 strict page when you want to use some flash on it. In another post I described how this can be done but unfortunately that thing wasn't complying with the XHTML 1.0 strict instead was fine for the pages validating using the Transitional Standard of W3C XHTML specifications.
Now I came back on this subject with a solution that fix the "Strict" problem, for this I appealed to a little help from Javascript using the getElemementById method.
To insert a flash code in a web page according to the adobe specification you have to use a code almost similar with this one:

PLAIN TEXT
CODE:
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="590" height="400">
  2.     <param name="movie" value="swf/flash.swf">
  3.     <param name="quality" value="high">
  4.     <embed src="swf/flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="590" height="400"></embed>
  5.   </object>

Above code will insert an flash movie with the width of 590 and the height of 400, the flash movie is called flash.swf and it is situated in the swf directory. This code will cause some errors (I will not tell you here which) and the page fails to validate.
My method is to remove all the flash code from the page and to insert it using a small external javascript file.
The javascript file we will call it flash.js and place it in the /js directory inside the site root and should have the following content:

PLAIN TEXT
CODE:
  1. function flash(){
  2. document.getElementById('flash').innerHTML = "<object width=\"590\" height=\"400\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"><param value=\"swf/flash.swf\" name=\"movie\"/><param value=\"high\" name=\"quality\"/><embed width=\"590\" height=\"400\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" quality=\"high\" src=\"swf/flash.swf\"/></object>";
  3. }

Be careful to write all this code on a single line because it is a string and a string in javascript can't be stretched on multiple lines. As you see we are using the document.getElementById('flash').innerHTML method to write some content on a div with the id flash. The page should have the following code:

PLAIN TEXT
CODE:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <title>Insert valid Flash in XHML 1.0 Strict</title>
  6. <script type="text/javascript" src="js/flash.js">   
  7. </script>
  8. <style type="text/css">
  9. #flash {
  10. width: 590px;
  11. height: 400px;
  12. background-color: #777;
  13. }
  14. </style>
  15. </head>
  16. <body onload="flash()">
  17. <h1>Insert flash animation using javascript</h1>
  18. <div id="flash"></div>
  19. </body>
  20. </html>


The result will display a valid page with a flash on it. As you see we include the javascript external file and we load the flash() function from it using the body event onload. The flash code is not displayed and everything we have at View source is the empty div.
That's all.

]]> http://www.bogdan-net.com/archives/33/feed 1 Very common DTDs http://www.bogdan-net.com/archives/27 http://www.bogdan-net.com/archives/27#comments Sat, 05 May 2007 17:42:39 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/27 Despite writing a good valid code and a valid CSS for your webpage, if you don’t specify the right DOCTYPE or you won’t specify it at all meaning that your page will be rendered in quirks mode and it can behave strange displaying visual errors that can be very unpredictable damaging your layout.
Bellow is a list with the most common DTDs I in my developing process respectively for HTML 4.01, XHTML 1.0 Transitional, XHTML 1.0 Strict.

PLAIN TEXT
PHP:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  5. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6.  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  8. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

]]> http://www.bogdan-net.com/archives/27/feed 1 XHTML 1.o Specifications http://www.bogdan-net.com/archives/11 http://www.bogdan-net.com/archives/11#comments Wed, 07 Feb 2007 20:30:14 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/11 For those who are working with the XHTML 1.0 here are the full specification list of this markup language, with the W3C recommendations from January 2000 revised in August 2002. You can find content like :
Normative Definition of XHTML 1.0
Differences with HTML 4
Compatibility Issues
DTDs
Element Prohibitions
HTML Compatibility Guidelines
and other useful things.

]]> http://www.bogdan-net.com/archives/11/feed 0 Great resources for CSS http://www.bogdan-net.com/archives/10 http://www.bogdan-net.com/archives/10#comments Fri, 02 Feb 2007 23:43:35 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/10 css-discuss.incutio.com it is a great resource for CSS, it is divided in areas like browsers testing, editors of css, css concepts, example of layouts, switching (about rendering mode), hacks, sizing text, sizing images, and a lot more of tricks very useful for a professional web developer.

]]> http://www.bogdan-net.com/archives/10/feed 0 Using float model in CSS http://www.bogdan-net.com/archives/9 http://www.bogdan-net.com/archives/9#comments Tue, 30 Jan 2007 18:52:30 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/9 Here you can find a good article about the power of float model in CSS construction. This property it's a very important in solving non-tables layouts.

]]> http://www.bogdan-net.com/archives/9/feed 0 Valid XHTML when inserting flash code http://www.bogdan-net.com/archives/8 http://www.bogdan-net.com/archives/8#comments Sat, 27 Jan 2007 08:51:15 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/8 Even if flash is very used on web pages a lot of web developers still don't know a correct way to insert a .swf movie into a website. There are different ways for different browsers, the <object> element with it's attributes is used for Internet Explorer needs, instead other browsers (like Firefox for example) recognize only the <embed> element. The problem is that this element isn't listed in HTML or XHTML specifications, soo the code is not valid.
To solve this problem I'm using this code which is working in both most important browsers Internet Explorer and Firefox:

PLAIN TEXT
HTML:
  1. <object data="path_to_flash" type="application/x-shockwave-flash" width="557" height="127">
  2. <param name="MOVIE" value="path_to_flash">
  3. </param></object>

Using this method, now you can easily insert flash content in your site without concerning that the final source will not be valid, this works fine for HTML and even XHTML 1.0 Strict .

]]> http://www.bogdan-net.com/archives/8/feed 3 Good way to replace table based menus http://www.bogdan-net.com/archives/7 http://www.bogdan-net.com/archives/7#comments Wed, 24 Jan 2007 18:41:52 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/7 A heavy-table menu navigation can be replaced successfully by an unordered list formatted from css. With a little help of Javascript nested unordered lists can be quickly converted into drop-down menus. “Son of Suckerfish” (SoS) menu script, that you can find it here http://www.htmldog.com/articles/suckerfish/dropdowns/ is developed by Patrick Griffiths and Dan Webb. This is a very good example how good can JavaScript and CSS work togheter.

]]> http://www.bogdan-net.com/archives/7/feed 0