I have researched the pros and cons of using CSS vs. tables for layout of a web site. And as it causes few problems and I know the basics of using tables already, using tables seems the best option at the moment for me.
My query is are the any tips you can provide when using tables with PHP, since I may not be able to see the output until it is online. Should CSS be used to position the table relative to the left and top navigation bar I am using?
I would just add a table with invisible borders and enter code in the cells of the table where I want the information to appear but I am thinking it might be best to get a professional viewpoint first of all.
Well. I looked in to using CSS and I think the main problem is getting things to appear where I want them. If I set something to appear 200 pixels from the left, something else 300 pixels from the right, something else 500 pixels from the top and 200 pixels from the right…etc., etc… then the code might get very confusing and what happens when people look using different sized screens!!! With tables the table is a fixed structure and you know what the customer is going to see. With CSS I think this might be a bit difficult… can you prove me wrong?
How would you position parts of information? Can you get around the screen size problem.
All of these issues have been sorted out long ago, as you’ll see if you explore these forums a bit or look at modern websites and how the developers have laid them out. If you are struggling to convert a table-based layout to a CSS layout, then feel free to post your code and ask for advice. At the moment we can’t prove anything to you as we don’t have any material to work with.
PS: I’ve moved this to the CSS forum.
Also, if you want to test PHP locally, you can set up a testing environment on your computer. You can install all the necessary components yourself, such as Apache and PHP, or a simpler approach is to install something like WAMP (for PC) or MAMP (on a Mac), which gives you an instant local server environment which is very handy for development.
I am redesigning a web site so I do not want to convert something I already have.
I am looking at “http://www.w3schools.com/css/css_positioning.asp” but it looks to me as though every part of PHP that I add to a page will need positioning, which seems like a big job. Admittedly, this is only required for one page (a template page) so it might be worth the effort.
If someone could paste a quick example of how I use this positioning code I have found with PHP code that might help me understand how I am going to add the bits of PHP code to the template page. For example, is every bit of PHP code added separately or does it work like a table, whereby it is some sort of group of PHP inputs??
Any examples (based on what I have found at the web site above) will be better than none, thanks,
Those layout techniques are the wrong ones to be using. Positioning like that usually makes for really bad web design, so you need to look at this from a different angle.
Firstly, though, be clear about this: layout has absolutely nothing to do with PHP. PHP and CSS never meet. PHP is long gone by the time a page is sent to a browser, so take PHP out of this equation altogether. Once PHP is processed on the server, it outputs HTML, which is sent to the browser. So the issue is how to style that HTML. If you can provide us with some HTML to work with, and an indication of how you would like it styled and laid out, we can show you how to go about this properly. Otherwise, we can’t hep you much.
(PS: that site you linked to is considered badly out of date in most respects. You are better off not using it. There are much more up-to-date references.)
Here is some HTML. This is the current site but I will be changing the layout. However, if you can help me understand how best to begin with CSS then please edit it for example purposes. I will then use the techniques to design the new site.
As you recommend I will ignore the web site I found because I want to use the latest techniques.
<!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>
</head>
<body><div id="content">
<table width="650" border="0">
<tr>
<td colspan="2"><p class="style3"><span class="style9"><b><a title="Home" a href="index.htm">Home</a> > <a title="Speed Camera Detectors" href="speed-camera-detectors.htm">Speed Camera Detectors</a> > Pogo Alert Plus</b></span></p></td>
</tr>
<tr>
<td colspan="2"><img src="satnav/global-positioning-system.gif" width="650" height="1" /></td>
</tr>
<tr>
<td colspan="2"><span class="style1"><img src="satnav/logos/pogo-alert-plus.gif" width="200" height="25" align="right" /><b>Pogo Alert+</b><br />
<span class="style2">Product Code: POGOAP</span></span></td>
</tr>
<tr>
<td width="290"><span class="style1"><img src="pogo-images/pogo-alert-plus/pogo-alert-plus.jpg" alt="Pogo Alert Plus" width="290" height="190" align="left" /></span></td>
<td width="357"><p class="style3">Pogo Alert Plus speed camera detector combines GPS and Laser technology with cutting-edge industrial design and a high resolution 1.8-inch colour OLED touch screen, custom designed GPS hardware and an intuitive graphical user interface with custom designed icons. The result is the most sophisticated safety camera locator ever to take to the road.</p>
<p class="style3">Pogo Alert+ will warn of ALL fixed speed cameras and in addition, alerts are provided for mobile laser traps via the supplied laser detector module. Included in the Pogo Alert Plus speed camera database are locations in France, Belgium, Holland, Spain, Portugal and United Kingdom which are FREE for the first 6-months.</p> </td>
</tr>
<tr>
<td rowspan="2"><a href="javascript:;" onclick="MM_openBrWindow('pop-up/customer-service.htm#secure','','scrollbars=yes,width=425,height=500')"> <img src="satnav/100-percent-secure-shop.gif" alt="100% Secure Shop" width="46" height="46" border="0" /></a><a href="javascript:;" onclick="MM_openBrWindow('pop-up/customer-service.htm#7day','','scrollbars=yes,width=425,height=500')"><img src="satnav/7-day-money-back-guarantee.gif" alt="7-Day Money Back" width="46" height="46" border="0" /></a><a href="javascript:;" onclick="MM_openBrWindow('pop-up/customer-service.htm#low','','scrollbars=yes,width=425,height=500')"><img src="satnav/low-prices.gif" alt="Low Prices" width="46" height="46" border="0" /></a><a href="javascript:;" onclick="MM_openBrWindow('pop-up/customer-service.htm#fast','','scrollbars=yes,width=425,height=500')"><img src="satnav/fast-secure-delivery.gif" alt="Fast, Secure Delivery" width="46" height="46" border="0" /></a><a href="javascript:;" onclick="MM_openBrWindow('pop-up/customer-service.htm#phone','','scrollbars=yes,width=425,height=500')"><img src="satnav/expert-sales-advice.gif" alt="Expert Sales Advice" width="46" height="46" border="0" /></a><a href="javascript:;" onclick="MM_openBrWindow('pop-up/customer-service.htm#genuine','','scrollbars=yes,width=425,height=500')"><img src="satnav/genuine-product.gif" alt="Genuine Products" width="46" height="46" border="0" /></a></td>
<td><p class="style3"><a href="javascript:;" onclick="MM_openBrWindow('pop-up/pre-order.htm','','width=425,height=300')"><img src="satnav/pre-order.gif" alt="Pre Order" width="96" height="18" border="0" /></a> <b>£249.95 including Standard UK Delivery</b></p></td>
</tr>
<tr>
<td><FORM NAME="itemsform">
<table border=0 cellpadding=5 cellspacing=2 width="354">
<tr>
<td width="73">
<td width="70"><p class="style13"><b><SCRIPT LANGUAGE='JavaScript'>document.write(showPrice("244.00~"));</SCRIPT></b></p></td>
<td width="173" valign=bottom><p align="right"><input type=text size=3 name="qty6008" value="1"> <input type=button name='add6008' onClick='buyItem("POGOAP","Pogo Alert Plus","244.00~", 0, 0,"none",document.itemsform.qty6008.value)' value='Add to Basket'></td></tr>
</table>
</FORM></td>
</tr>
<tr>
<td colspan="2"><img src="satnav/global-positioning-system.gif" width="650" height="1" /></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><p class="style3"><b><b><a href="javascript:;" onclick="MM_openBrWindow('pop-up/pogo-approved-reseller.htm','','width=425,height=525')"><img src="pogo-images/pogo-alert-plus/pogo-alert-plus-approved-reseller.gif" alt="Pogo Approved Reseller" width="160" height="64" border="0" align="right" /></a></b>Pogo Alert Plus Summary</b></p>
<p class="style3">Pogo Alert+ harnesses the power of orbiting GPS satellites to provide total protection against the threat of fixed safety cameras, mobile laser traps and accident black spots.</p>
<p class="style3">Pogo Alert Plus combines cutting-edge industrial design with an intuitive graphical user interface featuring custom designed icons, custom designed GPS hardware and the latest screen technology available - a high resolution OLED (Organic Light Emitting Diode) colour touch screen. The result is the most sophisticated safety camera location system ever to take to the road.</p>
<p class="style3">Pogo Alert+ has the award-winning Origin360 safety camera database pre-loaded and provides comprehensive audible and visual alerts including safety camera type, speed limit and proximity to hazard. Pogo Alert+ also includes a highly sensitive infra-red laser detector (removable) to provide the fullest protection against mobile laser based speed traps and ‘safety camera vans’.</p>
<p class="style3">Pogo Alert+ utilises the award-winning Origin360 database of safety cameras and accident black spot locations to provide the most accurate and up-to-date information available. This data can be simply downloaded to Pogo Alert+ via PC or Mac with Internet connection.</p>
<p class="style3">At each speed camera location the Pogo Alert Plus shows type of speed camera, vehicle speed, speed limit, road number and countdown (metres or seconds) to the speed trap. The Pogo Alert+ can also display distance covered, journey time and average speed.</p>
<p class="style3">Pogo Alert+ also includes a highly sensitive infra-red laser detector to provide the fullest protection against laser based speed cameras and 'safety camera vans' via the supplied (removable) laser detector.</p>
<p class="style3"><b>Pogo Alert+ Features:</b></p>
<p class="style3"><img src="satnav/gps.gif" width="8" height="8" /> 1.8-inch colour OLED with touch screen - latest display technology<br />
<img src="satnav/gps.gif" width="8" height="8" /> Alerts for ALL fixed safety cameras, including: Gatso, Truvelo, SPECS, Monitron, PEEK, Watchman and SpeedCurb<br />
<img src="satnav/gps.gif" width="8" height="8" /> On-board infra-red laser detector (removable) for mobile laser camera sites <br />
<img src="satnav/gps.gif" width="8" height="8" /> 8 hour battery<br />
<img src="satnav/gps.gif" width="8" height="8" /> Clear audible and visual alerts<br />
<img src="satnav/gps.gif" width="8" height="8" /> Simple-to-use, custom icon-driven user interface<br />
<img src="satnav/gps.gif" width="8" height="8" /> Unique PogoSoft operating system. Patent protected features<br />
<img src="satnav/gps.gif" width="8" height="8" /> Speed limit advisory<br />
<img src="satnav/gps.gif" width="8" height="8" /> Vehicle average speed displayed through SPECS average speed camera zon<br />
<img src="satnav/gps.gif" width="8" height="8" /> Distance to safety camera<br />
<img src="satnav/gps.gif" width="8" height="8" /> School zone alerts (time sensitive)<br />
<img src="satnav/gps.gif" width="8" height="8" /> Fully portable, plug and play design. Simple to install by the end user<br />
<img src="satnav/gps.gif" width="8" height="8" /> Dashboard and windscreen mounting kits<br />
<img src="satnav/gps.gif" width="8" height="8" /> Journey Tracking, via Google Maps<br />
<img src="satnav/gps.gif" width="8" height="8" /> Updated via Windows or Mac (Mac updates are a new product feature, and an industry first)<br />
<img src="satnav/gps.gif" width="8" height="8" /> Fully legal to own and use in the UK<br />
<img src="satnav/gps.gif" width="8" height="8" /> Database of cameras in France, Belgium, Holland, Spain, Portugal and UK<br />
<img src="satnav/gps.gif" width="8" height="8" /> FREE speed camera subscription for six months, then £50 per year<br />
<img src="satnav/gps.gif" width="8" height="8" /> 2 Year manufacturers guarantee</p></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><p class="style3"><b>Pogo Alert Plus images</b></p></td>
</tr>
<tr>
<td colspan="2"><img src="satnav/global-positioning-system.gif" width="650" height="1" /></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2">
</body>
</html>
OK, if I paste that code into a .html file and open it in a browser, it’s pretty plain. As is, that’s a very easy layout with CSS, but is that as simple as you want it? If not, perhaps could you post an image of how it needs to look in the end? The current layout as you have it also doesn’t expand and contract depending on window size, which you indicated was a requirement.
The small images below the main image will be clickable and will replace the main image (rather than open in a new window).
Where it says “product information” the text will go all across the page. (The “have you thought about” and “alternatives” section will not be there).
Again the features will go right across the page.
Given this, the layout will be about 90% of what I am looking to achieve.
The footer will be similar.
I’d like an example coding so I know what I should use. It is going to be a template page so I do not mind spending a lot of time on it, since it will generate all pages.
That’s not true there are just as many obscure “Table” related bugs that will crop up. Using a table doesn’t automatically mean you are bug free and indeed the most broken and hardest to fix sites that we see in the forums are those constructed with tables.
The bugs in the reference for the position property are pretty obscure and unlikely to be an issue in normal use. Position works fine but you only need to use it in small doses. Most of the time content occupies the flow and doesn’t need to be positioned as such. It follows on from the content above and can be nudged around with margins. If you need horizontal alignment the you would float the elements.
<div id=“price”>£34.99
</div>
<div id=“title”>Origin b2 Speed Camera Detector
</div>
Obviously this is just a test and I will soon add PHP code instead so that it becomes a template page. I was going to use this positioning technique throughout but you have said ‘use it in small doses’. Can you explain how I nudge ‘around with margins’ — and I think ‘float’ is a way of positioning - can you be more specific when I should use it instead of positioning?
You do realise that the page you pointed to is constructed in css and is not using tables for layout at all?
You mention you are looking for examples of coding but you have already found one so just get firebug and disect the page and how it works. That’s the best way to learn; see how others have done it. Nothing on the web is secret.
We can’t really teach you how to construct a professional site and all aspects of css/html in a single thread because it takes months (sometimes years) of learning and practice but we can offer tips and best practices and snippets of code where needed.
The most effort must come from you in understanding and learning and practising what is on offer. You still seem to be looking at web design backwards and your first steps must be html and css. PHP doesn’t really enter into the equation until you have working html/css and then once working you can apply your php to it - not the other way around.
Of course advanced coders can work how they want because they know what works and what output they are going to get but when you start do things one step at a time.
For a start you say top:54px. Unless you have a parent with position:relative applied then top:54px will mean 54px from the viewport and will remain there for all time. Left 700px! That’s unlikely to be of any real use either.
You don’t construct sites like that because when you absolutely place something it is removed from the flow and becomes like an island that doesn’t care or react with any other content the page. You end up with loads of little islands that all have to have there own rules and should content change then the whole thing falls to pieces.
It also looks to me as though the section you are coding is a product list and should probably be a 2 column table as the data is tabular. At the least it would be a list structure and not bare divs.
Html is not just divs. You must use the correct elemnent for the job in hand and that is only a div when there is no other more semantic element to use.
Perhaps it would be best if you drew a quick (simple) picture of what you wanted and we could tell you how to start. You can’t really start placing odd elements around the screen as you should start from the header and work downwards so that there is a logical progression and one element follows the next without the need for precise positioning.
Forget absolute positioning for the time being until you understand when you can use it effectively.
It can be hard to grasp at the start but there is no point rushing ahead when you are facing the wrong way:)
Yes - the reason I was going to use tables was because I thought CSS would just produce ‘islands’ and look different on each computer type/screen size, etc…
What I am starting with is a product page. Where it says small image below they will be thumbnails that when clicked appear in place of the main image. All will be generated by PHP but the main thing I am working on is the CSS, since I have recently decided to do it with CSS rather than tables.
Origin b2 Speed Camera Detector
MAIN IMAGE This product does this and that.
This product does this and that.
This product does this and that.
In Stock
Next Day Delivery Only £5.95
Small image Small image Small image
Price: 39.99
ADD TO BASKET BUTTON
Product Description
What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers.
What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers. What this products offers.
Features
Bullet Point 1
Bullet Point 2
Bullet Point 3
Bullet Point 4
Bullet Point 5
Bullet Point 6
I’ve tried to show you above but it does not look right. Basically the product page will look like the “http://www.johnlewis.com/231273329/Product.aspx” page. But you say I need to understand the positioning techniques required for it to be possible.
No, not at all. Now that CSS is supported by browsers, tables are no longer needed for layout. Modern websites use CSS for layout, in all their variety and beauty. As Paul said, the site you linked to is laid out with CSS.
As you suggested, I have used FireBug with FireFox to look at the CSS of the JohnLewis.com web site.
I’ve pasted a typical bit of CSS code below.
I’ve noticed they never use positioning.
They use float numerous times. But the thing that interests me is ‘display: block’. It sounds to me as though this is a defined area for input. Is this what you would recommend I use to avoid the ‘islands’ problem?
Furthermore, I have just been testing stuff out and found that with the product page I am trying to design there is a horizontal navigation across the top and a vertical navigation bar down the left hand side… when I use styling:
This text using this CSS is automatically added at the top right corner where the horizontal and vertical navigation bar meet… I suppose this is what you mean by using the margins to position since if I add a margin then it will almost be in the right place… not sure where to go from here… but I think I am making some progress… but I do know I want some text links at the very top of the page too (like the text links at the top of www.msn.co.uk)…how would I add text in such a position? Does it ruin what I have just discovered?
I’m afraid that it will seem that every question you ask leads to a long answer so forgive the pedantry but the root of your problem with css is that there is a lot to take in at first.
It’s not possible to dilute the information to make it more palatable as CSS is a rich authoring environment and has many rules that need to be understood before you can use them effectively. (You would have the same trouble trying to understand how tables work if this was your first time looking at it as tables can be immensely complicated.)
Regarding your code above you mention “display:block” but in fact as the element is floated then display:block is redundant because a floated element always creates a block box.
Elements such as divs, paragraphs (p),headings(h1,h2 etc) are block elements (there are many more) and when used will finish with a line-feed so that the next element starts on a new line.
Elements such as span, a, strong, em etc are inline elements and do not create a new line at the end.
Each of these elements have their own special rules and behaviours but CSS allows us to change the way that the elements are displayed. The rules that govern these elements must remain intact thgough and must still be used appropriately.
You would use a float when you want to align content horizontally. If you want 2 columns then you would use two floats with appropriate widths. Not everything should be floated and you only use it when appropriate.
I think it would benefit you if you took one of the beginner css courses as they are reasonably priced and will show you the right way from the start.
Rather than starting with individual components you should start with the main containers and create the basic structure of the site and then once that is done you can start laying out your content inside.
For example first decide on the page width. Is its 100% wide, is it a percentage wide, or is it constrained by min and max widths, or is it a fixed width.
Whichever you choose will depend on the type of content you are expecting to show and how rigid you want the structure. If you have a lot of fixed width images and content in columns then a fixed site is the easiest option (but not always the best solution).
Once you’ve decided on the page width and set that all up then you would start on the header and the column structure of the site. Most sites can be broken down into a basic and logical format. In fact sites need to do this to make it easier to manage and easier to use.
Here is a very basic example of a 3 column floated fixed width layout.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
#outer {
width:950px;
margin:auto;
border:1px solid #000;
}
#column1, #column3 {
width:250px;
float:left;
background:red;
}
#column3 {
float:right;
background:blue
}
#column2 {
float:left;
width:430px;
margin:0 0 0 10px;
background:#fffccc;
}
#footer, #header {
width:100%;
clear:both;
background:green;
text-align:center;
padding:10px 0;
}
h1, p {
margin:0 0 1em;
padding:0 5px;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Header</h1>
</div>
<div id="column1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. </p>
</div>
<div id="column2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. Praesent sapien felis, imperdiet id mattis ac, sodales ut urna. Sed blandit dapibus purus sed volutpat. Nam ultricies adipiscing sapien, sit amet commodo erat laoreet sed. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. . </p>
</div>
<div id="column3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit, ante euismod placerat laoreet, lectus quam iaculis ante, at rhoncus sapien erat ut nulla. Nullam a enim massa. Nulla posuere lacus nec nisi consequat semper. Fusce ut est nec elit iaculis fringilla vel sed enim. Pellentesque pretium, mauris ornare rhoncus volutpat, metus mi dictum metus, ac iaculis metus lectus quis purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut sem massa. Cras nunc sapien, vulputate blandit interdum quis, molestie at augue. Morbi euismod vulputate ligula, bibendum dignissim massa condimentum quis. Proin sodales mauris ut est vulputate convallis. Quisque gravida tincidunt felis at convallis. Suspendisse tincidunt laoreet venenatis. Cras nec nisl vel dui lacinia sollicitudin vitae vitae ligula. Nunc eleifend rutrum tellus, quis accumsan dolor consequat sit amet. Praesent a elit dui, id tincidunt orci. </p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
Once you have your main structure then you start on the individual components because the way that you style them depend on where they fit in that structure and what margins/padding/positioning schemes you will need to make them work.
That’s the best way to learn; see how others have done it. Nothing on the web is secret.