Thread: Design approach

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    5
    Rep Power
    0

    Design approach


    I am new to web development and am in the process of learning XHTML, CSS, PHP and SQL. I need to know if i am making any major mistakes in my approach to making this site as far as CSS is concerned. The site is a simple file browser which displays files and their details in a table with a vertical navigation bar.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
    <div id="header"></div>
    <ul id="nav">
    	<li><a href="index.html">Home</a></li>
    	<li><a href="/dotastats">DoTA</a></li>
    	<li><a href="/phpmyadmin">phpMyAdmin</a></li>
    	<li><a href="upload.php">Uploads</a></li>
    </ul>
    <div id="content">
    	<table>
    	<thead>
    	<tr><td><a href="upload.php?sort=filename">Filename</a></td><td><a href="upload.php?sort=ext">Type</a></td></tr>
    	</thead>
    	<tfoot>
    	</tfoot>
    	<tbody>
    	<?php
    	require("functions.php");
    	
    	updateFiles();		
    
    	$page = $_GET['page'];
    	$sort = $_GET['sort'];
    	
    	if($sort == "")
    	{
    		$sort = "ext";
    	}
    
    	$files = getFiles($sort);
    	$i = 0;
    	$colours = array('even', 'odd');
    
    	foreach($files as $v)
    	{
    		if($i >= ($page * 20) && $i < (($page * 20)+20))
    		{
    			echo
    			'<tr class="'.$colours[$i % 2].'">
    			<td><a href="files/'.$files[$i][0].'">'.$files[$i][0].'</a></td>
    			<td>'.$files[$i][1].'</td>
    			</tr>';
    		}
    		$i++;
    	}
    	?>
    	</tbody>
    	</table>
    	<?php
    	echo "<br/>";
    	$pageCount = $i / 20;
    	
    	for($i = 0; $i <= $pageCount; $i++)
    	{
    		echo " [";
    		echo "<a href='upload.php?page=$i&sort=$sort'>$i</a>";
    		echo "] ";
    	}
    	?>
    </div>
    </body>
    </html>
    Edit:

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    }
    a:link {text-decoration:none}
    a:hover {text-decoration:underline}
    #nav {
    	background: #9966CC;
    	height: 30px;
    	border: 1px dotted #000000;
    	margin:0;
    	padding:0;
    	text-align: center;
    }
    #nav li {
    	display:inline;
    	padding:0 10px;
    	margin:0;
    	font-size: 14;
    }
    #header {
    	background: black;
    	height: 100px;
    }
    #footer {
    	background: black;
    	height: 100px;
    }
    #content {
    	width: 800px;
    	margin: auto;
    	padding: 10px;
    }
    #upload {
    	text-align: center;
    }
    table {
    	font-size: 14;
    }
    table thead tr {
    	background-color: #6699FF;
    	font-weight: bold;
    }
    table tbody td {
    	width: 400px;	
    }
    table tbody tr.even {
    	background-color: #B0C4DE;
    }
    table tbody tr.odd {
    	background-color: #CAE1FF;
    }
    table tbody tr:hover {
    	background-color: #9999FF;
    }
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Location
    Hobart, Tasmania
    Posts
    475
    Rep Power
    290
    Apart from a linked stylesheet (not supplied) your code is totally devoid of any CSS ... so it's a bit hard to comment.
    Latery Matey
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    5
    Rep Power
    0
    Given that nobody has said anything about the CSS i'll take it my implementation is fine so i shall go ahead and keep working on this.
  6. #4
  7. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,115
    Rep Power
    2497
    I would say, without looking at your code too deeply, that you have one major flaw:

    you are mixing logic and presentation together -
    you should try to separate your PHP from your HTML / template / whatever as
    much as is possible..

    I would have all your PHP includes etc. included and run before you generate anything to the screen. Example:

    php Code:
    <?php
    include $whatever;
    // do whatever you need to do
    ?>
    <html stuff>
    HTH
    Last edited by jabba_29; January 3rd, 2010 at 02:52 AM.

    Cheers,
    Jamie

    >_ My Music Blog | Losing weight @notsoheavyblog | My Tweets

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4308
    Welcome to DevShed Forums, anon404.

    Except for one thing, your CSS is fine. The issue is that the units for the font-size are missing. Perhaps you meant to use "px"?

    It's best to avoid using "pt" and "px" units for font-size. I suggest you read these:
    CSS Font-Size: em vs. px vs. pt vs. percent
    Best Practice for font-size?

    If you would like additional information on that, let me know.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo