smashingred

Your float method will work fine. I wouldn' bother trying to find another method. It is efficient and if you go to a flexible or liquid layout it will just push the rightmost image into the next row. All the best, Jay

Modus Operandi: Semantic, Tableless, Valid, Strict Doctype HTML and CSS build on PHP with unobtrusive DOM. Exceptions: Tables for data and information relationships, and 3rd Party Application integrations where core files have hard coded garbage.

<embed> was developed by Netscape in the 90s as part of many proprietary elements during the browser wars between them and MicroSoft. It behaves buggy in Firefox but is supported by Internet Explorer. That aside if you want to learn about what is called bounce rates put audio on your page and play it without asking the user. It is considered both rude and invasive. For the most part people expect for their browsing experience to be silent unless they are actively using a multimedia file. It was trendy for amateurs to put midi files into their pages and autoplay on load back in the mid 90s. It along with flash sites with obtrusive intros or annoying splash pages are not user oriented and will put off more people that they impress. If you want people to be interested in the sound you have to offer I would suggest a prominent link in the middle of the page or in an obvious place to say, "Turn On Music" or some such.

From a usability standpoint it is better that your links be all the same color and that they be underlined. It doesn't make sense to make the user look at every link and decide if what they are looking at is a link. Having more than one colored link on a page for unvisited links would be confusing. That in mind if the sections of the pages are defined clearly then certainly you can have different style links. I don't recommend using the following as it is a pain to manage and remember: [quote]The html [code]<a class="className" href="blah">Blah balah</a>[/code] [/quote] I would make your links a particular colour depending on what area of the page they are in for instance if you have a page with code like this: [code] <div id="main_content">     <p>This is some text surrounding a <a href="some_document.html">link</a> that, when clicked on, will go to some document</p> </div> <div id="side_bar">     <p>This is a side_bar <a href="somewhere_else.html">link</a> and it will take you somewhere else.</p> </div> [/code] You can control it using CSS like this: [code] #main_content a, #main_content a:link{     color:pink;     } #main_content a:visited{     color:orange;     } #main_content a:hover, #main_content a:focus{     color:grey;     } #side_bar a, #side_bar a:link{     color:yellow;     }  #side_bar a:visited{     color:blue;     } #side_bar a:hover, #side_bar a:focus{     color:green;     } [/code] [b]This will yeild a page that ouputs the following:[/b] This is some text surrounding a [color=pink][u]link[/u][/color] that, when clicked on, will go to some document. This is a side_bar [color=yellow][u]link[/u][/color] and it will take you somewhere else. By using contextual selectors instead of creating endless classes and placing them in each of your anchor elements you will be able to benfit from using the style sheet to change the attrbutes of all the pages that call the CSS file. This will also prevent classitis where you end up using classes to solve every problem for styling on pages. Using classes for exceptions or for adding meaning to the code is fine but don't just use them as a catchall to apply styles--it is almost as bad as using the style attribute in the page. When building pages make sure that your templates have clearly defined sections and by doing so you will be able to use a few ID attributes and then the elements for most of your sites. Many websites have the following sections for which you could create ID's: Header, content section, sidebar or subcontent, footer, global navigation, secondary navigation. Regardless whether you are using tables or divs for layout you can name your sections using the IDs and control the elements that fall within those sections. Hope this helps. All the best, Jay

Despite my personal objections to using tables for layout, you need to apply the centering to the table and not to the container. The following will work in almost every browser: [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> </head> <body> <div> <table style="border:1px solid #000; width:500px;margin:1px auto;"> <tr><td>Hello World!</td></tr> </table> </div> </body> </html> [/code] It is important to note that this type of style should be called from a linked file and not in the HTML and may be represented as follows: [code] table{     width:500px;     margin:1px auto;     border:1px solid #000;     } [/code] Also you MUST declare the doctype or when IE is thrown into quirks mode it will not render the table as centered. Now just so you know, there is no reason you can't use another div instead of a table to contain the page content. That being said, I am glad that you are making the move to better, more modern coding. All the best, Jay

[quote]If a browser is complying with the strict version 4.01, will it allow javascript to write a non-existant parameter AND take that parameter into account when someone clicks the link?[/quote] Yes. But keep in mind that in spirit, the document is no longer strict. In the standards based development community it is never recommended to open links in a new window as it breaks the linked document flow and as I said reduces accessibility. Too many business are of the 90s mindset that links out will lose visitors but this is foolish as if the content is worthy people know how to click the back button and will do so. Open a new window using target or some other method and you risk people thinking that the back button is disabled and will just close their browser. In the real world, it is not realistic to think that you will never need to open a new window on any client site so this solution just offers good compromise. And unlike almost any other method will still function if javascript is disabled. It also keeps the javascript out of the document body.

The attribute target will no longer validate because it is considered a hinderance to accessibility as it disables the back button and can cause other issues for people with special needs. The best method I have found is using an external javascript file that executes onload and getElementByTagName and give the "a" a class "external" this method beats using the javascript;; and href="#" because if the browser doesn't support javascript the link will click through and will just behave like a regular link because it is one: This article (http://www.sitepoint.com/article/standards-compliant-world) from SitePoint by Kevin Yank, provides one of the best and [s]most[/s] more accessible method to replace the target="_blank" method. All you have to do for your sites is install the script code and do a find and replace for the target="_blank" with rel="external" and you're done. And, as I said the link works if the person has Javascript off. You could easy modify this to handle popups but they may be detected as the it is loaded at the page load. For popups you should look into some of the DHTML and DOM/Javascript popups that don't use new windows but layered divs that mimic windows. Hope this helps, Jay

Okay, Ken and other readers. I sortof figured out the use of globals to expand the scope of variables into library functions and now everything seems to be working now. After reading more on php.net in the user examples something seems to have clicked and I have added the globals where needed. See changed functions.php below: [code] <?php //This function controls the stylesheet display of either one_column or two. function style_select() { global $omit_subcontent; if ($omit_subcontent == true) { echo '@import url('.SITE_TOP_PATH.'_styles/one_column.css);'; } else { echo ''; } } //This function controls whether Subcontent bar is shown based one_column option function subcontent_display() { global $omit_subcontent; if ($omit_subcontent == true) { echo ''; } else {INCLUDE INCLUDE_PATH.'subcontent.inc.php'; }; } // Template Include Functions function place_site_name() { echo TAGLINE." ".SITE_NAME; } function place_top_meta() { global $page_title, $page_keywords, $page_description; INCLUDE INCLUDE_PATH.'page_top_meta.inc.php'; } function place_top_content() { INCLUDE INCLUDE_PATH.'page_top_content.inc.php'; } function place_site_path() { echo SITE_TOP_PATH; } function place_top() { place_top_meta(); place_top_content(); } function place_header() { INCLUDE INCLUDE_PATH.'header.inc.php'; } function place_menu() { global $site_section; INCLUDE INCLUDE_PATH.'main_menu.inc.php'; } function place_footer() { INCLUDE INCLUDE_PATH.'footer.inc.php'; } function place_copyright() { echo "&copy;".date(Y).' '.ORG_NAME.'. All Rights Reserved'; } function place_srlink() { INCLUDE INCLUDE_PATH.'sr_link.inc.php'; } function place_bottom() { INCLUDE INCLUDE_PATH.'bottom.inc.php'; } // Main Navigation List Generator function menu_display($links) { global $site_section; foreach($links as $key=>$value) {         $class = '';         $id = '';     if ($site_section == $value) {           $class = ' class="active"';           $id = ' id="current"'; }   echo '<li' . $class . '><a' . $id . ' href="'.SITE_TOP_PATH.$key.'">'.ucfirst($value).'</a></li>'."\n";     }     } ?> [/code] Now I have learned that I have to call the global within the function before the operation. Phew. I am glad nobody had come to the rescue yet because I wouldn't have been able figure this out on my own. Now the only issue is that I want ot make sure that I am not allowing security vulnerabilities with the use of the "global" keyword. All the best, Jay

obsidian, I am sorry I missed your full meaning in your previous post. I guess that we are in agreement. 'Nuf said. ATB, Jay

obsidian, I don't really care if anyone uses XHMTL or HTML but why on earth would one "learn" to code in a transitional doctype. The purpose of transitional was to transition legacy pages and sites into the new without too many problems or to ensure that [b]if[/b] you [b]had[/b] to use deprecated elements or attributes that the pages would still validate for that doctype. If you are building new pages it makes sense to use the cleaner, strict code. The only reason most people code using transitional is because they don't know how or care to change the default doctype in Dreamweaver or GoLive. I do agree that one should know how to operate in all environments but Michael was asking which to use not which he should know. XHTML does not mean your code will be structured any better, it will just mean it will use a hybrid HTML/XML markup with the rigidity and requirements of XML. If you know how to write properly structured markup you will know how to do it in any doctype. BTW you can use the exact same markup/structure for HTML 4.01 as you do in XHTML 1.0 except you cannot have the closing slash in the head section of 4.01 documents as it will fail validation. Michael, I would say you should look at W3C recommendation for the use of Doctypes and become familiar with all of the current supported doctypes to be a valuable member of a team but if you are building pages from scratch for your own clients or work that you should seriously consider using strict doctypes no matter which as it will really make your life easier and your code cleaner. ATB, Jay

Sorry Ken, Here Goes: index.php [code] <?php REQUIRE $_SERVER['DOCUMENT_ROOT'].'/_sandbox/_includes/page_start.inc.php';     //This is the site section that at the top level of this site. //It is used to control the state of navigation and breadcrumbs etc. $site_section = 'about'; //Title to be displayed in the title bar of this page in the browser. $page_title = 'Page Title'. ': ';     // Keywords to be displayed in the headers of this page. $page_keywords = '';     // Description to be displayed in the headers of this page. $page_description = '';     // Links Specific to this section of the site. $page_section_links = ''; // Sets whether subcontent is shown or not. $omit_subcontent = false;  //true omits subcontent; false includes subcontent // Place The Page Top place_top($site_section); # Place Content Below This # ?> [/code] page_start.inc.php [code] <?php // Get Main Config File REQUIRE $_SERVER['DOCUMENT_ROOT'].'/_sandbox/_includes/conf/config.inc.php';     // Get Site Constants     REQUIRE $_SERVER['DOCUMENT_ROOT'].'/_sandbox/_includes/lib/constants.php';     // Get Function Library     REQUIRE $_SERVER['DOCUMENT_ROOT'].'/_sandbox/_includes/lib/functions.php'; ?> [/code] functions.php [code] <?php //This function controls the stylesheet display of either one_column or two. function style_select() { if ($omit_subcontent == true) { echo '@import url('.SITE_TOP_PATH.'_styles/one_column.css);'; } else { echo ''; } } //This function controls whether Subcontent bar is shown based one_column option function subcontent_display() { if ($omit_subcontent == true) { echo ''; } else {INCLUDE INCLUDE_PATH.'subcontent.inc.php'; }; } // Template Include Functions function place_site_name() { echo TAGLINE." ".SITE_NAME; } function place_top_meta() { INCLUDE INCLUDE_PATH.'page_top_meta.inc.php'; } function place_top_content($site_section) { INCLUDE INCLUDE_PATH.'page_top_content.inc.php'; } function place_site_path() { echo SITE_TOP_PATH; } function place_top() { place_top_meta(); place_top_content($site_section); } function place_header() { INCLUDE INCLUDE_PATH.'header.inc.php'; } function place_menu($site_section) { INCLUDE INCLUDE_PATH.'main_menu.inc.php'; } function place_footer() { INCLUDE INCLUDE_PATH.'footer.inc.php'; } function place_copyright() { echo "&copy;".date(Y).' '.ORG_NAME.'. All Rights Reserved'; } function place_srlink() { INCLUDE INCLUDE_PATH.'sr_link.inc.php'; } function place_bottom() { INCLUDE INCLUDE_PATH.'bottom.inc.php'; } // Main Navigation List Generator function menu_display($links, $site_section) {     foreach($links as $key=>$value) {         $class = '';         $id = '';     if ($site_section == $value) {           $class = ' class="active"';           $id = ' id="current"'; }   echo '<li' . $class . '><a' . $id . ' href="'.SITE_TOP_PATH.$key.'">'.ucfirst($value).'</a></li>'."\n";     }     } ?> [/code] page_top_content.inc.php [code] <body> <div id="page_wrapper"> <?php  # Place Header place_header(); # Place Main Menu place_menu($site_section); ?> <div id="content_wrapper"> <div id="content"> [/code] main_menu_inc.php [code] <div id="menu"> <ul id="navigation"> <?php //This array defines the links and the site_section names for the links list created by the foreach $links = array(''=>'home','blog/'=>'blog','about/'=>'about','contact/'=>'contact'); // Display the menu menu_display($links, $site_section); ?> </ul> </div> [/code] I hope this all makes sense. This references thing also makes me wonder if the $omit_subcontent == true will trigger correctly as it is in the functions lib now as well. Thanks for all the help now and in the future. All the best, Jay

There is really no reason to switch to XHTML if you are using HTML 4.01 Trans but there are a million reasons to switch to a Strict Doctype. First, using transitional will force most browsers into quirks mode and therefore it will not necessarily render css the way it should based on the strict model. Strict will also force you to get presentational markup out of the html and into CSS where it belongs, it will make you have to drop font, b, i and all sorts of other presentational elements as well as presentational attributes such as align and target that are not supported and allow you to learn how to make more effiecient code. Using css for all presentation will enable presentation to be cached on the user's system so that only the HTML will need be rendered each time. I would also strongly suggest that you look into the differences in using XHTML and HTML as XHTML is not just about using self closing tags. Most people actually use XHTML when they don't even need to or know how and I was one who fell victim to the "trend" of the new. XHTML is a form of XML as HTML and not HTML per se. If you must use it you should do so knowing about W3C's Appendix C usage for XHTML served as "Text/HTML" versus "application/XML" I cannot say that one is right or one is wrong just that since I know the differences, I have moved back to HTML 4.01 Strict for all my own sites and only use XHTML when working with 3Party Applications (that probably use XHTML for the same reasons many people do which is that the spec is newer than that of HTML 4.01). Hope this helps.

So the function now calls but the conditional no longer works. I don't know how to pass $site_section variable to the function as it comes from a file that calls all the includes. Here is the scenario: I have a php file that calls all the other code called index.php. It requires a file called page_start.inc.php that requires the function library--functions.php (and some other files--contstants and config files). In functions.php I have functions that create the whole top section of the page, the main_menu and the other elements of the page. On the index.php I create the variable "$site_section". Prior to my moving the above function to the functions.php file the variable was passed into the foreach loop without issue. Now that I have multiple functions calling and cascading is there something that I need to do to make sure that $site_section continues to pass to the function? I have tried adding "$site_section" to the functions that are called as was done in the code above but it still doesn't work? What am I missing??

Ken thanks for the code and the cleanup. I had read about passing variables in the function call in a couple of books but I really didn't understand the context for usage. I will have to look into this more. ATB, Jay

I have been hacking away slowly at php as a fairly green noob. I have created a menu list using an array and foreach to build the meny which includes a conditional for the section of a website. I have decided to place turn all such sets into functions by creating a function library and calling the function but I am getting an "Invalid argument supplied for foreach(): error. I tried using the "globals $foo" and '$GLOBALS ['foo']" but neither seemed to change the outcome. Here is the original code: [code] <?php //This array defines the links and the site_section names for the links list created by the foreach $links = array(''=>'home','blog/'=>'blog','about/'=>'about','contact/'=>'contact'); // This foreach statement creates a menu with as many links as $values in the array and converts text to first letter uppercase foreach($links as $key => $value){ echo '<li'; if ($site_section == $value) { echo ' class="active"'; } else { echo '';} echo '><a'; if ($site_section == $value){ echo ' id="current"'; } else { echo '';} echo ' href="'.SITE_TOP_PATH.$key.'">'.ucfirst($value).'</a></li>'."\n";} ?> [/code] Here is the function library snippet: [code] <?php function menu_display() { global $links, $site_section, $key, $value;     foreach($links as $key => $value){     echo '<li';     if ($site_section == $value)     { echo ' class="active"'; }     else { echo '';} echo '><a';     if ($site_section == $value){ echo ' id="current"'; }     else { echo '';} echo ' href="'.SITE_TOP_PATH.$key.'">'.ucfirst($value).'</a></li>'."\n"; }     }?> [/code] Here is what the array file looks like with the function call: [code] <?php //This array defines the links and the site_section names for the links list created by the foreach $links = array(''=>'home','blog/'=>'blog','about/'=>'about','contact/'=>'contact'); //This function generates the menu bar menu_display(); ?> [/code] It is the last one that won't work in conjunciton with the called function. Wheras the first sample file works fine while the foreach is executed in the same file as the array $links. Please let me know, a true noob, what I am doing wrong here to make this not work. All the best, Jay