Add CSS Styles to PHP Coding

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.

The code is malformed you have a duplicate ID value of ‘sidenav2’ and a missing closing DIV.

As Robert said :slight_smile:

It needs to be like this:


<!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">
        <[B]div class="sidenav2">[/B]
            <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 [B]class="sidenav2">[/B]
            <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>
[B]</div>[/B]
</body>
</html>


I’m assuming that #sidenav and #leftcol are unique so they can remain as ids but sidenav2 needs to be classed.

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.

Don’t worry a lot of authors are confused by ids or classes :slight_smile:

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 :slight_smile:

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

IDs cant be repeated… is just bad mojo. Not just for CSS but for any Javascript you may have running. So if you need to have the same ID then its a class. otherwise make the IDs unique to the page each time they are output…

You can use PHP to add styling by echoing class=“whatever” to whatever you need to style. It can even be in addition to the IDs you have AND you could … if you so wished to streamline your code … make the the added class name a variable… echo"class=‘$whatever’ "; that way it could even be in a separate function…

but what I was trying to say in my earlier post … is that the styling is not done by PHP… it is done by CSS… so the key here is to use PHP to target where you want a css style applied … ( whether the nav is constructed in one or 3 places doesnt matter then) you can ADD the rules you need by adding a class to the element along the ID… <div id=“navbar2” class=“whatever”> and add .whatever{your:rules…} to your CSS style sheet.

Either way, you still should only use the IDs once in the name space.

For the most part people are pointing you the right way on the html/css side, your PHP and mySQL makes me shudder a wee bit.

Some advice:

Don’t use string additions (periods) inside echo’s unless it’s actually a string addition (like inside a conditional) – they take longer than comma’s. Don’t use double quotes on echos unless you are using escape characters or inlined-strings, they take longer and make it harder to output ‘normal looking’ HTML.

I mean just this:


 	echo "<a href='categorylist.php?category=".$row['name']."'>".$row['name']."</a>";

Is a mix of two coding styles… pick one, not both. That could be either:


 	echo '<a href="categorylist.php?category=',$row['name'],'">",$row['name'],'</a>';

or


 	echo "<a href='categorylist.php?category=$row[name]'>$row[name]</a>";

See the difference? The first allows for whitespace character retention and generally executes a hair faster (so small most coders don’t really mention it anymore), the latter means no whitespace for formatting is available, but many people find simpler. (the lack of delimiters make it more confusing to me, but I’ve never been a fan of the C printf function except for dynamic string use).

… and don’t EVER send a $GET directly into a query string… though that’s why the mysql functions NEED to go the way of the dodo in favor or MYSQLI or PDO.

Though with the other responses I’m stuck asking what’s with the extra DIV since UL’s a perfectly good block level container… and if you use single quotes as I outlined above, your output could retain formatting making it easier to debug.

Just to give an idea what I’m talking about – IF I understood the what you wanted to have for logic flow on that last post of your code:


echo '
	<div id="leftCol">';

if (isset($selcat3)) {

	$result=mysql_query('
		SELECT subcategory2id,name
		FROM products
		WHERE reference='.$selcat3
	);

	echo '

		<ul class="selCat">';

	while ($row=mysql_fetch_array($result)) echo '
			<li>
				<a href="subcategory1id.php?subcategory1=',$row['subcategory2id'],'">
					',$row['name'],'
				</a>
			</li>';

	echo '
		</ul>

		<ul class="getSubCat2">';


	$result=mysql_query('
		SELECT subcategory2id,name
		FROM products
		WHERE subcategoryid = '.$_GET['subcategory2']
	);

	while ($row=mysql_fetch_array($result)) echo '
			<li>
				<a href="categorylist.php?category=',$row['subcategory2id'],'">
					',$row['name'],'
				</a>
			</li>';

	echo '
		</ul>';

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


echo '
		<ul class="cats">';

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

echo '
		</ul>

	<!-- #leftCol --></div>';

Is about how I’d be coding that… give or take.

You’ll notice I gave them classes so they can be targeted as unique – if they are all getting the same class, they probably do NOT need a class and should be targeted off the parent… likewise UL is a perfectly good block level container, so there should be no reason for the extra DIV around each.