SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add CSS Styles to PHP Coding

    Hi,

    This is an extract from some PHP code I am using with "//" to explain why I think I need to add the CSS coding styles. This is a navigation bar whereby the subcategory has different styling to the main links in the navigation Bar.:


    }
    if(isset($selcat2)) {
    $smh = mysql_query("SELECT name FROM products WHERE subcategoryid = ".$_GET['subcategory1']);
    while($row = mysql_fetch_array($smh)){

    // STYLE 1 HERE

    echo "<a href='categorylist.php?category=".$row['name']."'>".$row['name']."</a>";
    unset($cats[$selcat2]); //Gets rid of it for later.
    }

    $res = mysql_query("SELECT subcategory1id,name FROM products WHERE subcategoryid = ".$selcat2);
    while($row = mysql_fetch_array($res)) {

    // STYLE 2 HERE

    echo "<a href='subcategory1id.php?subcategory1=".$row['subcategory1id']."'>".$row['name']."</a>";
    }
    }

    // STYLE 3 HERE

    foreach($cats AS $key => $cat) {
    echo "<a href='categoryview.php?category=".$key."'>".$cat."</a>";
    }



    How do I get the CSS applied? Can the php be broken up into bits of code with CSS coding in between. Or does the PHP code need to be a continuous piece of code - - - and if so how do I add the CSS Styles?

    Hope this is a simple problem to resolve.

    Matt.

  2. #2
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes the php code could be broken in bits, but there's no need to do it.
    I think you are a little confused as to how css works.
    You need to define your css styles either inside a style tag in the head part of the html document, or in a separate (preferable) css file that you link to also in the head part of the html document.
    In this file you can define separate styles by using multiples types of css selectors, the most common being "css classes".
    These classes are then applied to your html elements by using the class attribute, i.e.:

    Code:
    <a href="http://mysite.com" class="bigRedLink">My Site</a>
    the css:

    Code:
    .bigRedLink { font-size: 150%; color: red; }
    Read more about css here in sitepoint:
    SitePoint CSS Reference

    In your php code you can apply the styles as needed:

    Code:
    foreach($cats AS $key => $cat) {
    echo "<a href=\"categoryview.php?category=".$key."\" class="style3">".$cat."</a>";
    }
    Or even have the corresponding style names stored in your db and echo them into the right place:

    Code:
    foreach($cats AS $key => $cat) {
    echo "<a href=\"categoryview.php?category=".$key."\" class=\"".$style3."\">".$cat."</a>";
    }
    Also, use double quotes in your html attributes rather than single quotes.
    You need to escape them using a backslash so that php ignores them:

    Code:
    <?php
    $url = "http://mysite.com";
    echo "<a href=\"".$url."\">Mysite</a>"
    ?>
    zbing

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I may be a little confused as I'm not sure what you are asking and php is a mystery to me anyway.

    However as far as styling the page then the browser doesn't know anything about php. It gets html and works on html.

    We just need the source html (view source) from the browser to work on and as nothing that has gone before really matters.

    It may be the case that you need to output some classnames in your php as hooks for css styling but without the full html and css we can't say whether it can be styled or not as it is.

    If you are targeting nested lists then they can easily be reached separately from the main links by just selecting the right level:
    e.g.

    ul#nav li a{/* first level*/}
    ul#nav li li a{/* second level*/}

    etc.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. I thought CSS could not be written between PHP code. PHP code is written between <?PHP and ?> tags. Can I add CSS in between (within) these tags. Or do I need to close the PHP tags, write the code of the style required and then open the PHP tags again??

    Matt.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MatthewBOnline View Post
    OK. I thought CSS could not be written between PHP code. PHP code is written between <?PHP and ?> tags. Can I add CSS in between (within) these tags. Or do I need to close the PHP tags, write the code of the style required and then open the PHP tags again??

    Matt.
    I think you are missing the point a little (or we are)

    CSS doesn't get mixed in with the html. You put it in the head of the document and style it from there.

    php and css have no working relationship.

    php creates your page and then after that you style it with CSS with a link to the css file in the head of the page. zbing has shown examples of how to add classnames if you need hooks for styling.

    If you are looking to output inline styling mixed in with the php then that is bad practice and should be avoided.

    I think perhaps we may be talking at cross purposes somewhere along the way

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    zbing

    I understand what you are saying apart from the last bit:

    Code:
    <?php
    $url = "http://mysite.com";
    echo "<a href=\"".$url."\">Mysite</a>"
    ?>


    What does the backslash and double quotations do in this example??

    Matt.

  7. #7
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The HTML spec says that attribute values should be wrapper in double quotes.

    As you also use double quotes to delimitate strings in your php code, the backslash before the double quote tells php to ignore it (as in: this is not a string delimiter) and output it as simple text.

    But i'm nitpicking I guess.

    You could use single quotes in your php strings to avoid having to worry about escaping characters:

    <?php
    $url = 'http://mysite.com';
    echo '<a href="'.$url.'">Mysite</a>';
    ?>
    zbing

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    I notice in your code you refer to CSS using the word "class=...". In the past I have used <div id="nav"> wording. Should I use this instead of the "class=..." that you suggested?

    Matt.

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Further to what I just posted I am trying


    echo "<div id="sidenav">;
    echo "<ul>";
    foreach($cats AS $key => $cat) {
    echo "<li><a href='categoryview.php?category=".$key."'>".$cat."</a></li>";
    }

    echo "</ul>";
    echo "</div>";



    where sidenav is within the CSS file. The problem I have is when I view this page online there is an error with the first line of code and it does not appear as it should online.

    Like I said previously you were suggesting using "class=.." but I am trying to use <DIV>

    Can anyone help me?

    Matt.

  10. #10
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can apply either an "id" or a "class" attribute to a <div>, but they're not interchangeable, they mean different things, and each requires a different entry in the CSS:

    CSS Id and Class

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is still not working. There is some error with the first 3 lines of code and I cannot think why?!?!

    echo "<div id="leftcol">";
    echo "<div id="sidenav">";
    echo "<div id="sidenav2">";
    echo "<ul>";
    foreach($cats AS $key => $cat) {
    echo "<li><a href='categoryview.php?category=".$key."'>".$cat."</a></li>";
    }

    echo "</ul>";
    echo "</div>";
    echo "</div>";
    echo "</div>";


    Is it something to do with adding back-slashese and double quotes? Or does the echo function escape the PHP???

    Matt.

  12. #12
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to escape the double-quotes. It's saying:

    echo "div id="

    And then it stops. It sees that double-quote after the = sign as the end of the string that it's suppposed to echo.

    You need:

    Code:
    echo "<div id=\"leftcol\">";
    The backslashes say, "This isn't the end of the string - I really want a double-quote to be output!"

  13. #13
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - I think this is working... but now I have a problem with this bit of coding:

    echo "<ul>";

    and later in the coding there is a problem with:

    echo "</ul>";
    echo "</div>";
    echo "</div>";
    echo "</div>";

    Do these need 'escaping' aswell? And, if so, how???

    Matt.

  14. #14
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, of course those don't need escaping in that case. You're making this much more complicated than it really is. Let's say you have:

    echo "Hello";

    The result is:

    Hello

    Notice that there are no quotes around it? But what if what you want is:

    Hello, "Matt" BOnline

    In other words, you actually want quote marks to appear in the output. To get that, you need:

    echo "Hello, \"Matt\" BOnline";

  15. #15
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    PHP is awesome. For writing HTML, it can also serve to add styles, but tahts like using a spoon to fell a tree, because:
    CSS is awesome to style groups of elements, pages and sites. but any good CSS ninja will wince at "inline" style sheets, let alone putting styles inline in each tag!!!!

    The best practice, IMHO, is as follows:

    1)Focus on your PHP first, make sure the output is VALID, CLEAN, SEMANTIC HTML markup. Output sample that contain most of your general occurrences.
    2) Use View > SELECT ALL>COPY source in your browser to copy the HTML to your favourite text editor
    3) Use CSS to create a style sheet, targeting element patterns in your output, when necessary use Classes and IDs. If REALLY NECESSARY, add hook elements (divs, spans, what not) to hook any other css rules as needed
    4) Go back to you PHP add the code that outputs any of the extra classes, IDs and hooks

    eg: <? if ($condition){echo"<div class='aclass'">}?><p><a href='<? getLink() echo($hasClass)? "' class='someClass'>$linkText":"'>$linkText";?></a><p><? if ($condition){echo"</div>"}?>

    Will ONLY add he hook div when $condition is true ( in other words, only when needed)

    5. use a link to your CSS style sheet in within the <HEAD> tag ONLY... eg:

    <link href="css/style_alt.css" rel="stylesheet" type="text/css" media="all">

    6. if you plan/need different style sheets use PHP to alter the link. Eg:
    <link href="css/style_alt.css" rel="<? echo $styleForThisPage; ?>" type="text/css" media="all">
    7. if you want a small bit of unique CSS to each page, you can also output a <style> tag. Eg:
    <head>
    ... other tags and links...
    <? if ($needed){echo "<style> #oddID{some:rule;} .onlyInPage{some:rules;}</style>";}?>
    </head>

    hope that helps..

  16. #16
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dresden_phoenix. I will look into what you are suggesting to see where it might be helpful.

    At the moment I have a problem with the code below. The problem, as you can see, is that this navigation bar is styled in three different places. In the past this was a continuous list that was styled altogether and one appeared below the other. Now, although they appear one below the other it does not look quite right! Although all appear one below the other it does not look good enough to be uploaded. For some reason the second part when styled do no appear exactly the style of the 3rd part (the borders for the second part styled looks a pixel bigger than the styled 3rd part (so it does not look professional). What is the best way to style this list now it is within 3 different parts? I may change the styling of the different parts at a later date but the borders will need to be identical (as specified in the CSS file!), which is the main problem with what I have now.


    if(isset($selcat3)) {
    $res = mysql_query("SELECT subcategory2id,name FROM products WHERE reference = ".$selcat3);
    while($row = mysql_fetch_array($res)) {
    echo "<div id=\"leftcol\">";
    echo "<div id=\"sidenav2\">";
    echo "<ul>";
    echo "<li><a href='subcategory1id.php?subcategory1=".$row['subcategory2id']."'>".$row['name']."</a></li>";
    }
    echo "</ul>";


    $smh = mysql_query("SELECT subcategory2id,name FROM products WHERE subcategoryid = ".$_GET['subcategory2']);
    while($row = mysql_fetch_array($smh)){
    echo "<div id=\"sidenav2\">";
    echo "<ul>";
    echo "<li><a href='categorylist.php?category=".$row['subcategory2id']."'>".$row['name']."</a></li>";

    unset($cats[$selcat3]); //Gets rid of it for later.
    }

    }
    echo "</ul>";

    echo "<div id=\"sidenav2\">";
    echo "<ul>";
    foreach($cats AS $key => $cat) {
    echo "<li><a href='categoryview.php?category=".$key."'>".$cat."</a></li>";
    }

    echo "</ul>";
    echo "</div>";
    echo "</div>";

    Any ideas?

    Matt.

  17. #17
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...continuing my problem...I have found out that the brackets might be something to do with the problem (the "{" and "}") depending where I enter the CSS code relative to the brackets (before or after them) the border thickness is changing. This is only part of the problem since I cannot organise the CSS code in such a way around the brackets as to get rid of this border problem!

  18. #18
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have solved the problem... I was using echo "</ul>"; and echo "<ul>"; too much. They must have been creating the borders!?!? Now the code only includes them once! Much neater too!

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    To quote a well known Pink Floyd song: "We don't need no PHP" .

    This is the css forum and all we want to see is the html output from "View source" after your code has run. Post all your html along with all your css files and only then can we see what issues you are seeing.

    The others can find errors in your PHP but that won't tell us what you are seeing when that lot is finally output. Perhaps you should put this online so that it is easier for use to debug?

    I can tell you that it looks like you are outputting the same IDs which is invalid as ids are unique and must point to s single item in the page - not multiple items. For multiple items you would use classes as others have already advised you.

    If you want items to be styled differently then you would need to apply a different or extra class where needed so that extra styling can be applied.

    the borders for the second part styled looks a pixel bigger than the styled 3rd part (so it does not look professional)
    Without working html and css it will be impossible for use to see what you are talking about. It could be any number of issues from margin collapse to the fact that you may not be addressing the default margin and padding of the elements.

    You need to first make a working example in semantic html and css (forget php) and once the menu is working then convert it into php as required. (If you then still have errors then we can move the thread to the php forum as the problem will not be css or html).

    You are really doing the process backwards and making it harder than it needs to be.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MatthewBOnline View Post
    I have solved the problem... I was using echo "</ul>"; and echo "<ul>"; too much. They must have been creating the borders!?!? Now the code only includes them once! Much neater too!
    Glad that you seem to have found an answer but I would suggest that you post the html output (View source) so that we can check you have the right structure.

    I don't see how you can omit "UL" for you three lists unless I misunderstood what you said.

  21. #21
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the HTML Source code. I am not sure whether it is good or bad?


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="leftcol"><div id="sidenav"><div id="sidenav2"><ul><li><a href='subcategory1id.php?subcategory1=6'>Accessory No 2</a></li></ul></div><ul><li><a href='categorylist.php?category=6'>Accessory 2A</a></li><li><a href='categorylist.php?category=6'>Accessory 2B</a></li></ul><div id="sidenav2"><ul><li><a href='categoryview.php?category=1'>Manufacturer 1</a></li><li><a href='categoryview.php?category=2'>Manufacturer 2</a></li><li><a href='categoryview.php?category=3'>Manufacturer 3</a></li><li><a href='categoryview.php?category=4'>Accessory</a></li></ul></div></div>
    </body>
    </html>


    I will be doing a mod rewrite on the URL's so that will hopefully clean up the URL's in the code above too.

  22. #22
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The code is malformed you have a duplicate ID value of 'sidenav2' and a missing closing DIV.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As Robert said

    It needs to be like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="leftcol">
        <div id="sidenav">
            <div class="sidenav2">
                <ul>
                    <li><a href='subcategory1id.php?subcategory1=6'>Accessory No 2</a></li>
                </ul>
            </div>
            <ul>
                <li><a href='categorylist.php?category=6'>Accessory 2A</a></li>
                <li><a href='categorylist.php?category=6'>Accessory 2B</a></li>
            </ul>
            <div class="sidenav2">
                <ul>
                    <li><a href='categoryview.php?category=1'>Manufacturer 1</a></li>
                    <li><a href='categoryview.php?category=2'>Manufacturer 2</a></li>
                    <li><a href='categoryview.php?category=3'>Manufacturer 3</a></li>
                    <li><a href='categoryview.php?category=4'>Accessory</a></li>
                </ul>
            </div>
        </div>
    </div>
    </body>
    </html>
    I'm assuming that #sidenav and #leftcol are unique so they can remain as ids but sidenav2 needs to be classed.

  24. #24
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thanks - I am sure you know what you are talking about. But I am sure I do not!

    Why should I replace my div = id with a div = class ??

    <div class="sidenav2">

    This will mean I would need to edit my CSS file as well since it is set up for the div not the class. Can you explain why I need to change this... it appears online fine with the div coding.

    Look forward to your reply,

    Matt.

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MatthewBOnline View Post
    Hi - thanks - I am sure you know what you are talking about. But I am sure I do not!

    Why should I replace my div = id with a div = class ??

    <div class="sidenav2">
    Don't worry a lot of authors are confused by ids or classes

    The reason is that an id is a unique identifier and points to a single element in the page. It is invalid to have the same id more than once on a page and although browsers are pretty flexible in applying the rules it doesn't make it any more valid. When something is not allowed then its not allowed and you shouldn't use it.

    If for example you were targeting #sidenav2 with javascript then the JS would just find only one instance because it expects ids to be unique and retrieves just the one item which could have disastrous results if the id was used all over the place.

    This is why classes were designed so that you can apply them to multiple elements as that is their role.

    This will mean I would need to edit my CSS file as well since it is set up for the div not the class. Can you explain why I need to change this... it appears online fine with the div coding.
    Yes that will mean changing the css from #sidenav2 to .sidennav2.

    That should only take a few seconds to do and if you have a massive css file a simple find and replace in your editor will do the trick easily.

    Remember that when you do something wrong then browsers have to resort to error handling and how they handle your error can vary considerably between browsers. Some may just give up and some may try to guess what you think. Some errors can go by unnoticed without harm but it still doesn't make it right to something just because it appears to work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •