Jump to content

dbrimlow

Members
  • Posts

    712
  • Joined

  • Last visited

    Never

Posts posted by dbrimlow

  1. Hi, everyone, been a while since I've visited

    I hope this is a common issue with php and javascript. (thanks in advance for any help )

     

    I have a jscript slideshow and am using php to dynamically drop an array of photos with links into the jscript's "imagearray" section. The problem I have is avoiding the trailing comma after the last image array element.

     

    Here's how it should look.

     

    imagearray: [
    	["http://mysite.com/photos/123-large/123a.jpg","http://mysite.com/info.php?list=564623"],
    	["http://mysite.com/photos/123-large/123b.jpg","http://mysite.com/info.php?list=564623"],
    	["http://mysite.com/photos/123-large/123c.jpg","http://mysite.com/info.php?list=564623"],
    	["http://mysite.com/photos/123-large/123e.jpg","http://mysite.com/info.php?list=564623"] 
    	//no trailing comma for last value in array
    ],

     

    My php array is:

     

    //trailing comma gets included in each value
    $url = "[\"http://mysite.com/photos/".$id."-large/".$photo."a".chr(96+$j).".jpg", \"http://http://mysite.com/info.php?list=".$rlink."\"],"; 
    
    $photos[]=$url;

     

    Putting the array into the jscript gallery:

    <script type="text/javascript">
    blah, blah;
    imagearray: [<?php echo "$photos[]";?>],		
    blah, blah
    </script>

     

    How would I avoid (or strip out) the comma on that last array value?

     

    Thanks again,

    Dave

  2. You need to "clear" your floats.

     

    There are a few techniques that work - some people will get rabid and attack if you don't use their favorite, but they all have their pros and cons. Here are two that I use:

     

    1. Quick and easy technique - to work in IE and Opera container requires a flexible width and height:

     

    Simply add "overflow:auto;" to the ".tbl-row" select - put it  before "width:96%;"

    Pros: contains all floated elements within the parent container

    Cons: can add unwanted scrollbars if the content escapes the container

     

    Some people prefer using "overflow:hidden;". This eliminates the scrollbar potential.

    Pros: contains all floated elements within the parent container

    Cons: can cause some content to be hidden (if height is fixed in pixels, or if width of combined floats exceeds the width of the parent container)

     

    2. My favorite is the "clearfix" technique (it uses the ":after" pseudo element) - add the following AFTER the entire .tbl-row select

     

    .tbl-row:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: " ";

    clear: both;

    height: 0;

    }

    * html .tbl-row {height:1%} /* IE6 */

    *:first-child+html .tbl-row {height:1px} /* IE7 */

     

    Pros: Clears floats before and after the container and contains floats within the container - it works every time in every browser - it validates.

    Cons: LOOK AT IT!!!! You would need to add any other floated containers to it. It needs those two IE hacks since IE 6 and 7 don't support the ":after" pseudo element

     

  3. During the first "Browser Wars", @import was used as a hack for hiding stylesheets from Version4 browsers and lower (varied support for CSS1).  The CSS2 @import rule was not understood by V4 and lower browsers (and therefore the Stylesheets they referenced were ignored).

     

    People continued using it even after IE won the wars (like people today still use old deprecated html and invalid code even with transitional doctypes).

     

    HOWEVER, the reasons it is better to use LINK instead of @import, are:

     

    1. there are certain performance advantages - particularity for IE 6 - 8

     

    2. IE loads and parses the referenced files within @import sequentially (first one then another taking 2 seconds each) - this makes the page slower to finish.  LINK, however, loads and parses the files all together in parallel - making the files available quicker and the page ready faster. 

     

    3. @import can create problems with JavaScript -  IE loads script tags before style tags; if you have styling in the script that relies on a loaded css file (like getElementsByClassName) the resource is not going to be available and the results unpredictable.  Using LINK ensures that the Stylesheets are loaded in parallel AND in the specified order.

     

    Hope this helps put it into proper perspective.

  4. Clean, simple markup reduces overhead considerably ... load once 75k background images are not a heavy burden on bandwidth.

     

    You example is based on Dan Cederholm's brilliant  "faux columns"  technique. It is the most elegant way to get the elusive "equal height containers" - regardless of content - without slapping unnecessary divs or spans within the content markup.

     

    There are a few other clever techniques, like Stu Nichols's CSSplay Layouts, but Stu's markup is semantically incorrect and there are too many unnecessary divs used for styling alone, which defeats the point of separation of content from presentation. 

     

    The key to efficient CSS is clean simple HTML markup. The font and style tag soup horror of the past needs to be eliminated forever, not replaced by inline styling, span-oramas and div-itus.

     

     

  5. Remember, one of the most important aspects of CSS based layout is to reduce markup clutter and eliminate unnecessary tagging.

     

    Once you start to understand the concept of "separating content from style", you learn to consolidate your styling elements by using minimal or existing tags.  Avoiding "DIVITUS" is a constant vigilance.

     

    Divs are html placeholders and NOT to be used willy nilly for styling. In your example above, the use of the two existing container ids along with the content id is much cleaner within the markup because they encompass the content elegantly while providing a convenient unobtrusive vehicle for background styling.

     

    It is the same with slapping text directly into divs without using proper text content tags (h1 - h6, p, ul-ol-dl li).  A web page is mostly about the content ... so content should be first consideration and first to get any html tagging.

     

    CSS relies upon content. And LIQUID layouts even more so. You need to carefully consider how the text "breathes" within the containers as they shrink or expand. Adding containers that are created for styling along will become ungainly once the content and page design progresses.

     

    The more containers you add, the deeper your content descends and the more unwieldy the text sizing specificity becomes.

     

    What takes people longest to learn about CSS is its simplicity. It took me a year to realize the awesome power of simple text content tags.

     

    I recommend every beginner start where many of us finally had our "eureka" moment after trial and error - max design selectutorial. Learn this and you will avoid weeks of frustration and be able to concentrate on the more advanced and tricky aspects of CSS.

     

    It uses an easy to follow format and the concepts are well explained - here is the entire tutorial (1 page for each concept):

     

    Selectutorial - CSS selectors

     

    Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.

     

    Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.

     

    Rules

     

        * What is a rule or "rule set"?

        * Grouping declarations

        * Grouping selectors

        * Shorthand properties

        * CSS Comments

     

    The document tree - it's a family thing

     

        * Introduction

        * Ancestor

        * Descendant

        * Parent

        * Child

        * Sibling

        * Multiple descriptions

     

    Selectors

     

        * Type selectors

        * Class selectors

        * ID selectors

        * Descendant selectors

        * Child selectors

        * Universal selectors

        * Adjacent sibling selectors

        * Attribute selectors

        * Pseudo-classes

        * Pseudo-elements

     

    Advanced stuff

     

        * Should you use ID or class?

        * Inheritance

        * Cascade

        * What happens when conflicts occur?

     

    Selectors in action - a step by step tutorial

     

        * Introduction

        * Step 1 - the html code

        * Step 2 - drop in content

        * Step 3 - styling the <body> element

        * Step 4 - styling the <a> element

        * Step 5 - styling the banner <div>

        * Step 6 - styling the heading

        * Step 7 - styling the first container

        * Step 8 - styling the second container

        * Step 9 - styling the navigation <div>

        * Step 10 - styling the <ul> element

        * Step 11 - styling the <li> element

        * Step 12 - styling the <a> element

        * Step 13 - styling the hover state

        * Step 14 - styling the “more” <div>

        * Step 15 - styling the <h3> element

        * Step 16 - styling the content <div>

        * Step 17 - styling the <h2> element

        * Step 18 - setting the line height

        * Step 19 - clearing the contents

        * Step 20 - styling the footer <div>

        * Step 21 - styling the <ul> element

        * Step 22 - styling the <li> element

     

  6. Without seeing the entire page and other container context or CSS rules, where you want the table placed, it is difficult to give a "default" answer.

     

    However, as a stand-alone, it is easy. Understanding floats is one of the most fundamental (and hardest to master) aspects of css. But once you can master floats, CSS is a breeze.

     

    Create, as follows, 3 css classes in your external file or within the head section CSS  (adjust paddings, margins, widths, etc as needed):

     

    .buttonwrap {float:left: display:block; margin: 20px; padding: .5px 10px; width:70%;

    }

    .leftbutton {float: left; padding-left: 10px}

    .rightimg {float: right; padding-right: 10px}

     

    Now put this in your markup body in place of the table. 

     

    <div class="buttonwrap">

     

    <span class="leftbutton"><input type="button" name="button" id="button" class="button" title="Button"/> </span>

     

    <span class="rightimg"><input type="image" src="themes\default\images\img_loading.gif"  name="img_loading" id="img_loading alt="ALWAYS USE AN ALT WITH IMAGE" width="???" height="???"></span>

     

    </div>

  7. The main issue is that you are closing your "mainwrapper" divs too soon, THEN ALSO adding two EXTRA closing divs after the footer.

     

    You want your footer to be enclosed WITHIN those two divs, so you need to remove the two closing divs BEFORE you begin the footer.

  8. You have two extra closing divs BEFORE the footer AND after the footer.

    Remove the two closing divs BEFORE the footer.  id="mainwrapper" and class="mainwrapper" should close AFTER footer.

     

    You need to wrap the footer within those two divs. You did that according to my instructions, but then forgot to remove the old closing divs.

     

    change this:

    </div>
    <br>
        </div>
      </div>
    </div>
    <!-- closes bodywrapper -->
    

    to this:

     

    </div>
       <br>
    </div>
    <!-- closes bodywrapper -->
    

  9. The layout structure has major flaws and is not cross-browser compatible (it totally blows up in IE6).

     

    However, the quick fix for what you have is twofold:

     

    1. add 7px left margin to the footer,  position the img to "top" "center" and remove the height, like so:

     

    .footer{float:left; margin:0 0 0 7px; background: url(images/bottom.png) top center no-repeat}

     

    The footer will now become the main footer wrap for all footer content.

     

    2. because of the way you are using non-float wrappers and floated sections, all content needs to be contained within the global wrappers:

     

    This is a prime example of why you should not design an HTML markup layout grid without having any content! Design is created AROUND the content, not trying to fit content into an existing design.

     

    I. Anyway, move the closing of both mainwraper divs to the bottom of the page (above closing body tag) to INCLUDE the footer tags.

     

    II. Wrap the footer div around the other footer divs.

     

    The page bottom now should be:

    </div><!-- closes bodywrapper -->
        <div class="footer">
          <div class="footertxt">
            <div class="footerme"> </div>
            <div class="footerright"></div>
            <div class="footerimgmail"></div>
            <div class="footercopyleft"></div>
            <div class="footercopyright">
              <div class=" "></div>
            </div>
          </div> <!-- closes footertext -->
        </div> <!-- closes footer -->
      </div>  <!-- closes .mainwrapper -->
    </div> <!-- closes #mainwrapper -->
    </body>
    </html>
    

     

    It should work fine in Firefox, Chrome and Safari

     

  10. Haku's answer is, of course, literally correct, one can always use inline styles to over-ride a previous style or stylesheet.  However, it is not recommended since the whole point of stylesheets is to get the styling OUT of the markup in the first place.  Also, it is way too involved and unwieldy to use inline styles in a CMS template without knowing basic PHP.

     

    To answer your question, for your purposes (and intent),  you cannot apply the same select name, like "#content", with different attributes from two different stylesheets. The page willl only use the set of attributes for #content  from the last css file or stylesheet it read. This is the "cascade" in cascading style sheets (and what Haku meant by "specificity").

     

    What most of us would do is to change any duplicate select name in the forum plugin's css file from "#content" to say "#forumcontent".

     

    Then in the WP template:

     

    <div id="forumcontent">

    [FORUM PLUGIN CODE]

    </div>

     

    It is strange that a WP plugin would use the same select ID as a known standard WP select ID.

     

    Good luck,

    Dave

     

  11. You put the ordered list in a new list item tag. So of course it will show a bullet as any new list item.

     

    You need to "embed" the ordered list within the original list-item tags. Remember, the original list item does NOT close until AFTER the closing embedded list tag.

     

    <ul>
    <li>point 1 <!-- embed ordered list INTO list-item -->
    <ol>
    <li>embedded point 1</li>
    <li>embedded point 2</li>
    </ol>
    </li> <!-- NOW close original list-item -->
    <li>point 3</li>
    </ul>

  12. Quick and dirty way (assuming you used inline styling to illustrate the issue) ... add a left margin to second div and remove the float.

     

    <div style="width: 200px;
             background-color: #CCCCFF;
             float: left;">hello1</div>
    
    <div style="background-color: #CCCCCC; margin:0 0 0 200px
             ">hello2</div>

     

    But it is ugly because inline styling is foolish (for troubleshooting, scaling, page load) and proper text content tag defaults (paragraphs, lists, headers) will blow it up.  Try it, simply place hello1 and hello2 into paragraph tags.

     

    <div style="width: 200px;
             background-color: #CCCCFF;
             float: left;"><p>hello1</p></div>
    
    <div style="background-color: #CCCCCC; margin:0 0 0 200px
             "><p>hello2</p></div>

     

    Now imagine THAT with a whole page of content!

     

    Here is the one of a number of better solutions:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>quick, fixed left /fluid right columns</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    body, p {margin:0; padding:0} /*zero out browser defaults */
    .left {width: 200px;background-color: #CCCCFF; margin:0; padding:5px; float: left}
    .right {background-color: #CCCCCC; margin:0 0 0 200px; padding:5px 20px;}
    </style>
    </head>
    <body>
    <div class="left"><p>hello1</p></div>
    <div class="right"><p>hello2</p></div>
    </body>
    </html>

     

     

     

     

  13. The CSS3 property "word-wrap" is a good case of modern browsers adopting a previous proprietary Microsoft property as a good idea - adding the pseudo element :break-word ("word-wrap:break-word") will allow it to break a word in order to wrap.

     

    HOWEVER! It is NOT supported by older Gecko browsers.

     

    Supported browsers:

     

    All IE from 5.5 - 8

    All Gecko 1.9.1 browsers (as of Firefox 3.5, SeaMonkey 2, and Thunderbird 3)

    Webkit browsers - Safari 1.0, Chrome 2

     

    I don't know about Opera or Konqueror Software engines.

     

    Here is info about it:

     

    http://www.w3.org/TR/css3-text/#word-wrap

    https://developer.mozilla.org/En/CSS/Word-wrap

     

    Try it out, though. You add it to the select that you expect to have long text - ex:

     

    .box {width:400px; word-wrap:break-word}

     

    **********

     

    Since you are here at phpfreaks,  a possible server side PHP solution, as Haku said:  http://us2.php.net/wordwrap

     

    **********

    An HTML/CSS solution is to use the Preformatted text tag "<pre>" wrapped in a paragraph or list ul li:

     

    CSS:

    pre {

    overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */

    white-space: pre-wrap; /* css-3 */

    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */

    white-space: -pre-wrap; /* Opera 4-6 */

    white-space: -o-pre-wrap; /* Opera 7 */

    width: 400px;

    word-wrap: break-word; /* Internet Explorer 5.5+ */

    }

     

    HTML:

    <div class="box"><p><pre>long word in sentence</pre></p></div>

    or in a table cell:

    <td><ul><li style="list-style:none"><pre>long word in sentence</pre></li></ul></td>

     

    Here is a link to the original concept - http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

     

    Good luck.

  14. Very serious validation errors causing all kinds of cross-browser problems.

     

    Fix these first: w3c validation link for your site

     

    Trying to debug a css layout with all of these markup errors is futile. 

    Eliminate much of your frustration by making sure the html is done right by using validation. Without good HTML the whole foundation of your page is unstable.

     

    Also,  inwhat browser is the problem happening - seems okay in Firefox, but it is very unstable and has problems in IE6.

     

    Try seeing how it looks in many browsers by using adobe's browserlab:

     

    This is a great tool because it shows you exactly how nasty IE6, IE7 and IE8 mess up your page.

     

    Wish I could help you more.

     

     

  15. I didn't see what you meant by "random" spacing, because the html wasn't set to use an "on page" class.

     

    This is why I used the original html (and kept the broken li:active because they were vestigial). I posted my response at the same time you did yours, saw the clear element and modifed my response.

     

    But after seeing your reply, I realized by "random spacing" you actually meant the default browser text indenting of inline li elements.

     

    Your solution of using a  float and clear was actually a very good (and common)  solution - but, yes, it is a very inelegant one because it adds that annoying extra clear div. I use this myself in one of my sites that I am modifying from a open template.

     

    The other typical float clearing methods:

     

    1. use a float to clear a float and the clearfix method (look it up) - both methods would require floating the #top_bar container to clear the li floats. Then you would need to use the clear class in any non-floated html tags to follow - like <p class="clear">this comes after the top-bar div and will clear the float</p>

     

    2.  overflow:auto trick - instead of float, simply add "overflow:auto" to the main container #top_bar.  You can remove the extra clear div/tag class.  And all divs/tags before or after will clear.

    But you would need to include hacks for IE6 and IE7 HasLayout "*html #top-bar {height:1%;}" and ":firstchild + html #top-bar {min-height:1px;} - in IE6 the hover and on page backgrounds will not fill the entire block.

     

    Good luck.

     

     

  16. The only way clearing works is if you have float issues. This shouldn't fix a non-floated list element.

     

    You have a specificity issue with other tags/selects someplace that are conflicting and over-riding the li or a element.

     

    Because, if you just copy/paste ONLY your css and html with no resets or other elements, it works fine.

     

    You have other conflicts causing this which means you are letting your css get out of control.

     

    The problem isn't with the #top-bar elements. There is a conflict with something else of a higher specificity.

     

    You should try to find out what because this will come back to bite you later on.

     

    Also, why are you using the li:active pseudo link? It will actually have an issue if used because the pseudo links associated are in the wrong order.

     

    a or a:link and a:visited pseudo links should always precede the a:hover and a:active pseudo links.

    Not doing so will cause problems between browsers. As general practice it is a good idea to live by the "LVHA" (LoVeHAte) rule to avoid hours of frustration some day.

    a:link, a:visited, a:hover, a:active.

     

    A much cleaner way to have an "active" page list menu item automatically use a different style when "on page", is to use a same named ID and class in the CSS, then use the ID in the body tag and the specific class in the li menu.

     

    The example will use the same style as hover and visited when on the specific li class page (body id matches li class="three"):

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #top-bar {
        background: #8FD7FF;
        margin: 0 20px 0 20px;
        padding: 5px 10px 5px 10px;
    }
    
    #top-bar ul {
        list-style:none;
        margin: 0;
        padding: 0;
    }
    
    #top-bar li {
        display: inline;
    }
    
    #top-bar li a {
        padding: 5px;
        color: #000000;
        text-decoration:none;
    }
    
    #top-bar li a:hover,  #top-bar li a:active,
    #one li.one a:link, #one li.one a:visited,
    #two li.two a:link, #two li.two a:visited,
    #three li.three a:link, #three li.three a:visited,
    #four li.four a:link, #four li.four a:visited,
    #five li.five a:link, #five li.five a:visited {
         color: #000000;
        background: #AFE3FF;
    }
    </style>
    </head>
    <body id="three">
    <div id="top-bar">
                    <ul>
                        <li class="one"><a href="#">Item One</a></li>
                        <li class="two"><a href="#">Item 2</a></li>
                        <li class="three"><a href="#">This is Item Three</a></li>
                        <li class="four"><a href="#">Four</a></li>
                        <li class="five"><a href="#">This is a long Item 5</a></li>
                    </ul>
                </div>
    </body>
    </html>

     

    This way, enter it once in the css and use the same exact menu for every page, all you have to do is specify the ID for the body of each menu item page.

  17. Thanks for good advice, people. Although I am very limited by client's "artistic" control.

     

    Yeah, I suppose it is long past time we stop putting those valid notices at the bottom.

     

    Actually the XHTML itself was valid ... there were four ampersands in the link URLs that I hadn't changed to & this is a static "design" version of the final dynamic php version - those 4 ampersands created the 26 errors/warnings. I have a php function that will auto-convert ampersands so the client can't slip them in when updating content.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.