Tekforums

Chat => Entertainment & Technology => Topic started by: shiftlocked on July 11, 2006, 11:02:53 AM

Title: Html Coding & Oscommerce
Post by: shiftlocked on July 11, 2006, 11:02:53 AM
Hope someone can offer some advice and possibly help me out, this forums never let me down so far :D


Ive been working on a test Test shopping Site (http://www.thermaltech.co.uk) using oscommerce recently as a bit of a side line for me.  It doesnt appear you can use text for product desciptions so you have to use Html product descriptions

Is there a way to code tables and html in general without using the " in the coding. The reason being is that when you use the import and export facility you cant use " in them without it messing up the coding.

From what little I know, browsers can render the markup without the " but would there be any penalty from search engines for the markup being missing?

Also if you look at my site you will see that ive used tables a lot for all the descriptions. If you specify the table width (say 95%) then it overlaps on the thumbnail pic. Easily solved by changing to say 85%. Is there a more efficient coding way to do this?
Title: Re:Html Coding & Oscommerce
Post by: M3ta7h3ad on July 11, 2006, 11:48:59 AM
with regards to "... no no penalties. But it isnt valid code so some obscure browsers may kick up a fuss.

with regards to using tables, USE DIVS!!! DIVS/SPANS/LAYERS are part of CSS and CSS2. Head to http://www.w3schools.com and find out about CSS :)

Title: Re:Html Coding & Oscommerce
Post by: Clock'd 0Ne on July 11, 2006, 11:58:25 AM
Tables are perfectly valid and efficient in (X)HTML/CSS, why should he switch to DIVs?

The thumbnails should not be overlapped if you are using tables properly. Set the table width to 100% then either dont set a width on the image cell and set the description cell width to 100% or set the image cell width to an absolute like 200px and dont set a width on the decription cell.

Check how the site looks in both IE and Mozilla/Opera browsers, there are sometimes discrepancies.
Title: Re:Html Coding & Oscommerce
Post by: M3ta7h3ad on July 11, 2006, 12:14:02 PM
HTML = Structure.

CSS = Design.

Tables = CONTENT NOT DESIGN.

With Divs and Layers he will be able to seperate the structure of the webpage from the layout. As such itll be easier to understand and work out any issues.

Also Divs offer more with regards to layout options.

If he looks at CSS also he may become familiar with the other methods of sizing elements on a page. em ex px for example.
Title: Re:Html Coding & Oscommerce
Post by: Clock'd 0Ne on July 11, 2006, 12:17:37 PM
Erm, tables work in a very similar fashion and can be equally seperated from the design. Tables work with layers too you know, with great effect actually, since you can not only effect the table as a whole but also each cell individually and then layer divs on top of that ;)

Im saying he should be integrating CSS with both tables and divs, not solely relying on divs to set out the whole site, thats madness.

Pages still need a framework. You cant simply nest hundreds of divs. Its pointless.
Title: Re:Html Coding & Oscommerce
Post by: shiftlocked on July 11, 2006, 12:24:57 PM
Thanks for the information.  I did consider using DIVS but from what I read, divs are more for design and tables are for tabulated data?

Ive learnt "a little" css so far, thats what the main page is constructed with, well the background of the cells and the menu.  Any points or hints on page design and help is much appreciated :D

Ill go have a look at the code on the page and see if I can set a image width element to maintain the structure a little. Thanks for the help thus far
Title: Html Coding & Oscommerce
Post by: Mardoni on July 11, 2006, 12:52:43 PM
You can use a single quote  (Shift + @) instead of double quotes " (Shift + 2).


(assuming English Keyboard).
Title: Re:Html Coding & Oscommerce
Post by: M3ta7h3ad on July 11, 2006, 12:58:18 PM
Quote from: Clockd 0NeErm, tables work in a very similar fashion and can be equally seperated from the design. Tables work with layers too you know, with great effect actually, since you can not only effect the table as a whole but also each cell individually and then layer divs on top of that ;)

Im saying he should be integrating CSS with both tables and divs, not solely relying on divs to set out the whole site, thats madness.

Pages still need a framework. You cant simply nest hundreds of divs. Its pointless.

This is why its difficult to get novice web designers to seperate the two :) (not saying your a novice as I know your not, but its definately one of the bad habits that many people pass on).

Tables are purely for tabulated data. Laying out Thumbnails isnt tabulating data :P

While Divs and Layers and other elements of CSS will work hand in hand with tables, its an absolute nightmare to try and sift through if your a new guy brought in to fix up the current thing, and while if your the sole designer of the page its still poor practice to do it.

Also the interaction between tables and Divs cannot always be predicted and will result in abnormal behaviour between different versions of browsers (Mozilla Firefox 0.8 and Mozilla Firefox 1.0 for example) as well as completely different browsers.

I gave a link in my first post for you to have a ganders at mate :) itll teach you the basics, but to be honest theres so many web based tutorials out there now that your better off googling one and finding one that suits your style :)
Title: Re:Html Coding & Oscommerce
Post by: shiftlocked on July 11, 2006, 14:03:05 PM
The thumbnail from what I gather is jsut "there" on the page.  Not sure how its formatted which makes things a bit frustrating.

What Ive noticed is that both IE and FF render the screen differently.  On FF the thumb isnt obscured, in IE the table seems to overlay on the image.  Not quite sure whats happening there to be honest.

Im still learning so havent got that many bad habbits as I dont know enough to have any lol.

Title: Re:Html Coding & Oscommerce
Post by: Clock'd 0Ne on July 11, 2006, 14:20:19 PM
Looking at the source, the image is within a div element, it simply needs some padding putting on it to the right to prevent the overlap in IE. Bit of a hack, but thats the simplest way I can think of explaining a solution to you. Youre going to have to get to grips with CSS mate :)
Title: Re:Html Coding & Oscommerce
Post by: shiftlocked on July 11, 2006, 14:31:07 PM
I can post the source here if thats help. If you could have a look and then help me make the changes (not do them for me cause I like learning) would you mind?
Title: Re:Html Coding & Oscommerce
Post by: Clock'd 0Ne on July 11, 2006, 14:53:30 PM
Not at all, it can be a group exercise :lol:
Title: Re:Html Coding & Oscommerce
Post by: shiftlocked on July 11, 2006, 15:03:51 PM
Cool, File is attached.

The area of code that I think it is seems to be
    if (tep_not_null($product_info[products_image])) {
?>
         
           
             




When you click the image on the site it opens up a popup window in this instance.  I know popups are a bad thing but ive not investigated other image methods just yet.
Title: Re:Html Coding & Oscommerce
Post by: neXus on July 11, 2006, 15:28:08 PM
Clockd 0Ne m8, tables are horrid
With the inner and outer issues with different browsers asside, whats allready been said is 100% correct

All you should see these days in a good web page is divs (spans your ment to use but there are several issues with that so people dont)  Your sever side code, thats it
You will have half the code then if you did tables, and you can have the whole site running off one css or a couple (some like to seperate)
And is far more efficent then a table
Change the css only and you can adjust all dimensions of your site as well as all the style elements.

Some times you have to use a table though, but thats down to anoying stuff, still there is some use yeah, but like 1 table used in a whole site.

Once you learn css and div coding and got used to the niggles its miles better tbh
Title: Re:Html Coding & Oscommerce
Post by: Clock'd 0Ne on July 11, 2006, 18:25:36 PM
Maybe Ive not caught up then, in which case Ill admit its not the most efficient method and M3ta7h3ad was right to suggest divs, but for someone new such as shiftlocked it might be throwing him in at the deep end. I suppose if youre going to learn though, might as well learn the best way first.

I find the odd problems pop up between browsers, but its easy enough to spot them and know how to deal with them. Its essentially more difficult for me to switch over to because some of the site work I do runs around sams Java which relies on certain element nesting.

Tables shouldnt be disregarded altogether though.
Title: Re:Html Coding & Oscommerce
Post by: neXus on July 11, 2006, 18:28:10 PM
Quote from: Clockd 0NeMaybe Ive not caught up then, in which case Ill admit its not the most efficient method and M3ta7h3ad was right to suggest divs, but for someone new such as shiftlocked it might be throwing him in at the deep end. I suppose if youre going to learn though, might as well learn the best way first.

I find the odd problems pop up between browsers, but its easy enough to spot them and know how to deal with them. Its essentially more difficult for me to switch over to because some of the site work I do runs around sams Java which relies on certain element nesting.

Tables shouldnt be disregarded altogether though.

True, but its harder to go from doing lots of tables to learning divs and having to adjust your thinking, lucky that I learnt this i as learning web code at Uni, and so changed my approach.

Tables still have their use, yes, but as i said once in a blue moon.
Title: Re:Html Coding & Oscommerce
Post by: M3ta7h3ad on July 11, 2006, 18:39:40 PM
aye its a proper pain in the arse to unlearn tables. oh dear god yes.

Buuuuttt... if you get it nailed now, its easier in the long run :)
Title: Re:Html Coding & Oscommerce
Post by: Serious on July 11, 2006, 18:42:45 PM
Quote from: neXusTables still have their use, yes, but as i said once in a blue moon.

Eating *your man* sized dinners off?  :mrgreen:
Title: Re:Html Coding & Oscommerce
Post by: shiftlocked on July 11, 2006, 22:01:59 PM
Ive just had a quick poke about with DIVS an understanding of how to use css with then.  Not sure how you do table style stuff with them ie.

------------- | -----------------
left col        | right col

It doesnt seem to be that more efficent code wise, in some respects even bigger still worth a dig about

That aside as a seperate issue, did anyone take alook at te code i posted/
Title: Re:Html Coding & Oscommerce
Post by: Clock'd 0Ne on July 11, 2006, 22:07:53 PM
Looking at it I can see no reason why the tables are behaving that way. I still think my original suggestion is the best in this case, set the width on the table to 100% then the width on td.smallText to a suitable size to encompass the image. Let the browser do the rest.
Title: Html Coding & Oscommerce
Post by: Mardoni on July 12, 2006, 00:22:47 AM
Remember, theres a *right way* and a *correct way* and theyre not always the same.

If the solution you have is easiest for you and it does the job then its good enough.
Title: Re:Html Coding & Oscommerce
Post by: Clock'd 0Ne on July 12, 2006, 12:48:06 PM
DIVs irritate me with the lack of inline-block support in browsers. They just dont work as well as tables when you are trying to do automatic spacing, took me a minute to make a table to do what I wanted, just dont see the problem with it really. :?
Title: Re:Html Coding & Oscommerce
Post by: neXus on July 12, 2006, 13:02:35 PM
Quote from: Clockd 0NeDIVs irritate me with the lack of inline-block support in browsers. They just dont work as well as tables when you are trying to do automatic spacing, took me a minute to make a table to do what I wanted, just dont see the problem with it really. :?
Its not the actual creation its the update and the long term use as well as code size
Twice as many lines of code from a table and when it comes to change you have to do a lot more with tables.
Div inline stuff, again, there is the solution, once you know it, your fine.