Non CS-CART related : XHTML & CSS Issue

Current URL www.knoxit.com.au/XHTML/test.html



Hi All,



I’m working on my homepage : www.knoxit.com.au

I’ve had a rather buggy site the last year and really have only had the time to play around with it now,



I’m half-way though converting to XHTML 1.0 Strict and I’m having a few issues, What I’ve got problems with is removing backgrounds and using CSS to insert the backgrounds for me.

I’ve added a static menu down the bottom for those (evil people) that don’t have the flash plugin installed. SEO inclusive.



eg. Instead of using the HTML background code, using a CSS equivent…

background="images/top03.gif" To something like this in CSS


.time {
background-image: url("images/top03.gif");
}


Anyway so here’s the source for you code munchers

File : test.html

```php




Untitled Document



























Today's date is :

Time is currently :




























Latest News More Information Best Offers
line










:: 12/03/07::
KnoxIT Site Development

www.knoxit.com.au
More about Blog?
line










:: 12/03/07 ::
KnoxIT Site Development

www.knoxit.com.au
More about Blog?
line










:: 12/03/07 ::
KnoxIT Site Development

www.knoxit.com.au
More about Blog?
Latest News Bottom Welcome Bottom Best Offers Bottom













Clients About Us Partners Services Offers Support Blog





Terms of Use | Privacy Statement © 2007 Knox IT All rights reserved



```
Current CSS, Make any changes you need.
File : style.css
```php body {font-size: 67.5%; margin: 0em auto; padding: 0px; font-family: arial, tahoma, verdana, sans-serif;}

.page-container {width: 778px; margin: 0px auto; padding: 0px;}

.time {
background-image: url("images/topbg.gif");
}

img {
text-align: center;
border: 0;
}
topbodybackground {
text-align: center;
background-image: url("images/topbg.gif")
}
```

Im not sure I get your post…



I realise your having a problem with backgrounds, but you seem to have already answered yourself… ?



Ill try and help, Im not too bad with xhtml and css, but Im afraid the question needs to be a little more specific for my tired eyes :frowning:

EDIT :



The site loads on the web, but not on my PC… I uhh… fixed it without realising :blush:

Thanks SWS for the 100% accurate information lol



I need to move the ‘background’ tag into the css equivelent.

At the moment the site won’t load the background images and I’m not 100% sure I’m doing it correctly.



ie www.knoxit.com.au and [URL=“http://www.knoxit.com.au/XHTML/test.html”]http://www.knoxit.com.au/XHTML/test.html[/URL]

the latter is without the background despite having the images available etc.



Layman : How do I move the background image coding from test.html to style.css and still have the same appearance.

You have pretty much covered it except for the call to css.


```php






```

to call a .style is class=""
to call a #style is id=""

those with # should only be defined once, such as a header image
those with . can be called multiple times, such as a sidebox background.

Is this what you where after ????? or should I go to bed now !

I would think that hte #style/ID is what I was looking for,

the site loads now…



If I was to load the multiple images I should be using the .style

where as a background image for a site with sideboxes would equal

#style=“background.jpg” and .style=“sideboxes.jpg”?



Thanks for ya help bud, have a good sleep

Yes, that about sums it up, otherwise you will get xhtml validation errors due to the same id=“” being defined more than once…



Good thing about using CSS is you can move all styling out (which you already know) including heights, widths alignments etc…

making your site structure easier to manager due to less agonising code.

I’ve had a quick look at the coding and it makes a dramatic difference to load times, it’s almost as if, with flash it’s instantaneuos which I can assure you clients would love for thier own site.



The structure makes it all a breeze but I’m taking it difficult to drop tags I’ve used for so long lol.



Thanks SWS.

One thing that has bugged me about all this xhtml stuff - won’t you just end up with a huge css file thats being loaded on each page even though some styles aren’t required?

[quote name=‘recedo’]One thing that has bugged me about all this xhtml stuff - won’t you just end up with a huge css file thats being loaded on each page even though some styles aren’t required?[/quote]

Not at all so I’ve learned.

Presuming you have a large block of text that you want to be made red you’ld normally enter

Text goes here<*end prefix*>

This might seems like a pita but in the long haul you can change an entire site’s colour scheme’s by changing ‘red’ to ‘blue’



I used to have 20kb html pages (without flash) and I’ve now made that into a 6kb file, with a 1kb CSS file.



Hence 5 html pages = 100kb

OR

6kb x5pages = 30kb + 1kb(css)= 31kb overall

I’m getting a 70% faster load time… Inital flash download is almost within the 3 second range so my site is up and running quicker and seemingly lighter :smiley:



I guess this goes to show why CS cart and others are moving to XHTML/CSS now and leaving smarty for the dust?

As above but this example is better…


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome



now CSS is re-usable, so in the long run... less code both sides..

Lets look at this in CSS...

Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome


Welcome




then in css (forgetting colours / context being wrong its only an example)

.red {
font colour: #888888 ;
style : bold ;
style : italic ;
}



Now imagine changing all the above to black...

1 line to change in CSS, 12 lines to change in html along with the excessive size the file could become !

Re-Useable code is the key here....

[B]BUT CS is not LEAVING SMARTY FOR DUST !!!! Smarty is a template engine, and will incorporate their CSS and xhtml,
as long as they dont have a different class for each individual item it will be ok...[/B]

[quote name=‘recedo’]One thing that has bugged me about all this xhtml stuff - won’t you just end up with a huge css file thats being loaded on each page even though some styles aren’t required?[/QUOTE]



It’s better to have a big CSS file than a big HTML file. And the CSS gets cached too.

Thanks for above… I understand how using it for styling reduces size, easier changes etc - I’ve been designing websites for years…



It’s the replacing tables with etc. Where you use a lot of tables in the html, now you’re going to have a lot of styles in the css instead and these will be loaded with every page as oppose to only the pages they are displayed on, if you see what I mean. If the css is cached I guess this isn’t so bad though.



Something I have thought of while writing this which I guess would help reduce the css size;



I have several javascripts on my site, some are only required on certain pages, so instead of just loading them up in the index template I add an {if} statement so they only load if it is the appropriate page… I assume you could do this with css files too, for example if you had a css file for the checkout tables (or in this case modified to divs) you could set it to only load on the checkout pages hence saving X bytes on the pages that don’t need this.



Sorry, I’m just trying to work out the major pros of spending a huge amount of time converting my shop to this method! Free time is something I don’t have much of!

[quote name=‘recedo’]Thanks for above… I understand how using it for styling reduces size, easier changes etc - I’ve been designing websites for years…



It’s the replacing tables with etc. Where you use a lot of tables in the html, now you’re going to have a lot of styles in the css instead and these will be loaded with every page as oppose to only the pages they are displayed on, if you see what I mean. If the css is cached I guess this isn’t so bad though.[/quote]



Not necesserally, if dont right anyway…



as you know im not finished, but so far im managing to cut down my nested divs too… and as for additional css, I have only really had to add an additional 4 or 5 classes to my code



But theres still many reasons why even 30 nested divs lol… is better than 30 nested tables.