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)){
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?
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.:
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*/}
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??
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
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:
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?
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>
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:
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)
use a link to your CSS style sheet in within the <HEAD> tag ONLY… eg:
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”>
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>
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.
…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!
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!
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.
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.
