images via CSS

wowfood · 03-09-2008, 06:52 PM

ok i'll do a full story on it first

I'm a uni student, in one of my units we have to design a website to sell tickets. It has to comply to xHTML standards, and use examples of javascript and forms. I already have plans in my mind, but my ability is lacking.

First off is the template for my site. I've made the images i need for pretty much everything. BUT i wanted to load the images via CSS seeing as they're going to be in constant use. but i can't figure out how to do this.

Basically my intention would be to load the template via the body tag. the overall background is black, so its just loading the images ontop of that really (which i'd like to do via CSS as they're used in EVERY page)

so far all i have is

body (background-color: #000000)

i cannot for the life of me get images to load individually so i can position them via pixel from top / bottom.

Also i may as well push this question here too.

I plan to use Javascript to change the images of certain buttons, highlighting etc. As this also will be on every page. Is it possible to do all of this through the CSS?

wowfood · 03-09-2008, 07:41 PM

sorry about double post but i've kinda fixed the issue i think. I'm just loading the images via div tags. I'll give an example

<html>
<head>
<style type="text/css">

body {background-color: #000000}

div.tem1 {background-image:
url('images/n_bar.png');
background-repeat: no-repeat;
height: 25px;
}

div.tem2 {background-image:
url('images/title.png');
background-repeat: no-repeat;
height: 100px;
}

div.tem3 {background-image:
url('images/n_bar.png');
background-repeat: no-repeat;
height: 25px;

div.text {background-color: yellow}

</style>
</head>

<body>

<div class="tem1"> <br> </div>
<div class="tem2"> <br> </div>
<div class="tem3"> <br> </div>

(couldn't get the div.text to work for some reason so i've temporarily removed it from my workings... its not going to be part of the layout anyway so its not important. I'm testing my CSS as an internal style sheet, but once the layout is complete i'm exporting it to external)

Sc0tt · 03-09-2008, 07:51 PM

I haven't got much time to answer right now so I may miss something..

To start with its against the forum rules to help with school/college/etc projects. So ill just clear some things up, I cant actually help with the details but then thats why your doing a course on it so you should know anyway.

Firstly images using CSS are normally background images only, images in on the page including buttons are added normally using the "img" tag. Then you can position then with css if needed. So bassically you should only use background images in css. Search engines also will not know about CSS images and not rank them on your page. Remember CSS is for "style" not content, so you dont want to put content images in the CSS.

You can make button effects in CSS and it is much faster loading and more compatible with people who have scripts disabled compared to using javascript.

Hope that helps, let me know if theres anything else. I cant really go into detail though or give examples, that will just do the work for you.

EDIT: This was in response to your first post, you added the code when I was typing my reply. :P I have to go for a while.. Back later.

wowfood · 03-09-2008, 10:34 PM

ok thanks for responding anyway.

Also this may sound silly but the education thing, although i can understand it in terms of "i'm not writing the entire code for you or giving you the exact info" as that would be plagurism.

But when its just asking for parts of code for something bigger its a tad annoying. I'm on to my next problem now and this is the best place i can think to ask about it. But now i've been enlightened to the education rule it seems like there's no point in asking.

ah well.

**Jaxo** · 03-11-2008, 12:06 AM

Hopefully not to anger the forum gods I wanted to give some "tips".

You stated you were coding it for xhtml standard? Deffinetly take a look at what is required to meet that. I am basing it off of http://www.w3schools.com/ website and how they validate xhtml. Easier to start doing it the right way from the start instead of coming back in and fixing all the code after. That is true for you external stylesheet too. Might as well just setup it up from the beginning. It could keep you from getting into some kind of bind if something isn't copied over correctly or not supposed to be, etc...

Also, if you look around you can find many examples of using the hover code in css for images. Sounds like though you are using javascript as a project requirement?

Just thought I would throw my 0.2 cent in. Good luck with the project. Feel free to ask more question so we can be more vague about them

wowfood · 03-19-2008, 03:33 PM

yeah basically the criteria are we need to display we can make webpages (10 of them for one site)

Use all 3 CSS (internal external and inline. I'm using external to setup my template images etc, using inline to position some of these bits, like the text box etc, and internal i haven't the foggiest as of yet)

We have to display knowledge of javascript (using it for buttons and perhaps for an image gallery although i'm not sure on that bit yet)

and we have to show we can use forms and get feedback (for ticket sales and customer support feedback stuff etc... not a clue how i'm doing that bit either so i'm holding the forms off till last)

i've uploaded my site as it is so far, because i intend to use the similar template for other projects.

www.danda-comics.co.uk

(hope there's no rule about external links also :P)

Anyway right now i'm still fighting with CSS over the template, getting text inline with the text background etc, but all will be fixed in due time.

03-09-2008, 06:52 PM	#1 (permalink)
wowfood Registered User Join Date: Dec 2005 Posts: 66 OS: WinXP home	images via CSS ok i'll do a full story on it first I'm a uni student, in one of my units we have to design a website to sell tickets. It has to comply to xHTML standards, and use examples of javascript and forms. I already have plans in my mind, but my ability is lacking. First off is the template for my site. I've made the images i need for pretty much everything. BUT i wanted to load the images via CSS seeing as they're going to be in constant use. but i can't figure out how to do this. Basically my intention would be to load the template via the body tag. the overall background is black, so its just loading the images ontop of that really (which i'd like to do via CSS as they're used in EVERY page) so far all i have is body (background-color: #000000) i cannot for the life of me get images to load individually so i can position them via pixel from top / bottom. Also i may as well push this question here too. I plan to use Javascript to change the images of certain buttons, highlighting etc. As this also will be on every page. Is it possible to do all of this through the CSS? __________________ Mobo: Asus Striker II Formula skt 775 Ram: 2x Corsair 2GB DDR2 PC2-6400 800MHz in dual channel Processor: intel q6600 quad core, 2.4ghz HD: 2 x Maxtor 500GB 1x Maxtor 1000gb PSU: Tagan 700w ATX2 Power Supply Sound: Asus soundcard that came with mobo GPU: 2x MSI 7900 GT/GTO 512mb memory in SLi

03-09-2008, 07:41 PM	#2 (permalink)
wowfood Registered User Join Date: Dec 2005 Posts: 66 OS: WinXP home	Re: images via CSS sorry about double post but i've kinda fixed the issue i think. I'm just loading the images via div tags. I'll give an example <html> <head> <style type="text/css"> body {background-color: #000000} div.tem1 {background-image: url('images/n_bar.png'); background-repeat: no-repeat; height: 25px; } div.tem2 {background-image: url('images/title.png'); background-repeat: no-repeat; height: 100px; } div.tem3 {background-image: url('images/n_bar.png'); background-repeat: no-repeat; height: 25px; div.text {background-color: yellow} </style> </head> <body> <div class="tem1"> <br> </div> <div class="tem2"> <br> </div> <div class="tem3"> <br> </div> (couldn't get the div.text to work for some reason so i've temporarily removed it from my workings... its not going to be part of the layout anyway so its not important. I'm testing my CSS as an internal style sheet, but once the layout is complete i'm exporting it to external) __________________ Mobo: Asus Striker II Formula skt 775 Ram: 2x Corsair 2GB DDR2 PC2-6400 800MHz in dual channel Processor: intel q6600 quad core, 2.4ghz HD: 2 x Maxtor 500GB 1x Maxtor 1000gb PSU: Tagan 700w ATX2 Power Supply Sound: Asus soundcard that came with mobo GPU: 2x MSI 7900 GT/GTO 512mb memory in SLi

03-09-2008, 07:51 PM	#3 (permalink)
Sc0tt Registered User Join Date: Aug 2007 Posts: 74 OS: XP Pro SP2/Ubuntu/RHEL	Re: images via CSS I haven't got much time to answer right now so I may miss something.. To start with its against the forum rules to help with school/college/etc projects. So ill just clear some things up, I cant actually help with the details but then thats why your doing a course on it so you should know anyway. Firstly images using CSS are normally background images only, images in on the page including buttons are added normally using the "img" tag. Then you can position then with css if needed. So bassically you should only use background images in css. Search engines also will not know about CSS images and not rank them on your page. Remember CSS is for "style" not content, so you dont want to put content images in the CSS. You can make button effects in CSS and it is much faster loading and more compatible with people who have scripts disabled compared to using javascript. Hope that helps, let me know if theres anything else. I cant really go into detail though or give examples, that will just do the work for you. EDIT: This was in response to your first post, you added the code when I was typing my reply. :P I have to go for a while.. Back later. Last edited by Sc0tt : 03-09-2008 at 07:53 PM.

03-09-2008, 10:34 PM	#4 (permalink)
wowfood Registered User Join Date: Dec 2005 Posts: 66 OS: WinXP home	Re: images via CSS ok thanks for responding anyway. Also this may sound silly but the education thing, although i can understand it in terms of "i'm not writing the entire code for you or giving you the exact info" as that would be plagurism. But when its just asking for parts of code for something bigger its a tad annoying. I'm on to my next problem now and this is the best place i can think to ask about it. But now i've been enlightened to the education rule it seems like there's no point in asking. ah well. __________________ Mobo: Asus Striker II Formula skt 775 Ram: 2x Corsair 2GB DDR2 PC2-6400 800MHz in dual channel Processor: intel q6600 quad core, 2.4ghz HD: 2 x Maxtor 500GB 1x Maxtor 1000gb PSU: Tagan 700w ATX2 Power Supply Sound: Asus soundcard that came with mobo GPU: 2x MSI 7900 GT/GTO 512mb memory in SLi

03-11-2008, 12:06 AM	#5 (permalink)
Jaxo Design Team Member Join Date: Feb 2008 Location: Deming, NM Posts: 291 OS: XP SP2 & Vista	Re: images via CSS Hopefully not to anger the forum gods I wanted to give some "tips". You stated you were coding it for xhtml standard? Deffinetly take a look at what is required to meet that. I am basing it off of http://www.w3schools.com/ website and how they validate xhtml. Easier to start doing it the right way from the start instead of coming back in and fixing all the code after. That is true for you external stylesheet too. Might as well just setup it up from the beginning. It could keep you from getting into some kind of bind if something isn't copied over correctly or not supposed to be, etc... Also, if you look around you can find many examples of using the hover code in css for images. Sounds like though you are using javascript as a project requirement? Just thought I would throw my 0.2 cent in. Good luck with the project. Feel free to ask more question so we can be more vague about them

03-19-2008, 03:33 PM	#6 (permalink)
wowfood Registered User Join Date: Dec 2005 Posts: 66 OS: WinXP home	Re: images via CSS yeah basically the criteria are we need to display we can make webpages (10 of them for one site) Use all 3 CSS (internal external and inline. I'm using external to setup my template images etc, using inline to position some of these bits, like the text box etc, and internal i haven't the foggiest as of yet) We have to display knowledge of javascript (using it for buttons and perhaps for an image gallery although i'm not sure on that bit yet) and we have to show we can use forms and get feedback (for ticket sales and customer support feedback stuff etc... not a clue how i'm doing that bit either so i'm holding the forms off till last) i've uploaded my site as it is so far, because i intend to use the similar template for other projects. www.danda-comics.co.uk (hope there's no rule about external links also :P) Anyway right now i'm still fighting with CSS over the template, getting text inline with the text background etc, but all will be fixed in due time. __________________ Mobo: Asus Striker II Formula skt 775 Ram: 2x Corsair 2GB DDR2 PC2-6400 800MHz in dual channel Processor: intel q6600 quad core, 2.4ghz HD: 2 x Maxtor 500GB 1x Maxtor 1000gb PSU: Tagan 700w ATX2 Power Supply Sound: Asus soundcard that came with mobo GPU: 2x MSI 7900 GT/GTO 512mb memory in SLi