Efficient CSS! - Freelance Forum

halotree · 04-06-2007, 10:44 AM

I have a task on my hands, and that is to help everyone try and learn efficient CSS and XHTML for their websites, I am going to show you how to create a perfect navigation:

HTML

Code:

<ul>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
</ul>

CSS ...the clever bit

Code:

li {
list-style: none;
list-style-position:inside;
display: inline;
}

..thats the easy bit now if you want to add rollovers...

HTML

Code:

<ul>
<a href="#"><li id="nav1"></li></a>
</ul>

CSS

Code:

li.nav1{
background: url(image/norm.png) no-repeat;
}
li.nav1 a:hover{
background: url(image/roll.png) no-repeat;
}

maybe someone learnt something I dont know..
Alex

mtajim · 04-07-2007, 12:21 AM

One thing i saw in your code , you are using .png image files , My dear friend - many browsers today still cannot render png files , so for effieient css use jpg files.

halotree · 04-07-2007, 01:02 AM

thanks for the hands up, which browsers dont support .png ?
Would be using another optimised format such as .gif be ok?
Alex

mtajim · 04-07-2007, 11:43 PM

still IE cannot render png , maybe the newer one can but still the older version which is used by many people is not able to render png

capty99 · 04-08-2007, 07:48 PM

Quote:

Originally Posted by mtajim

still IE cannot render png , maybe the newer one can but still the older version which is used by many people is not able to render png

yeah, just a qualification of that.

IE 7 renders png's but still experiences a problem every once in a while. The thing about png in ie 6 is it will render any pixels that are not completely opaque as transparent. So, if you have any kind of transparency in your image your pretty much screwed.

I never knew that until i just checked it out here :
PNG: Current Status

kinda interesting.

mtajim · 04-09-2007, 12:04 AM

thats right , png is supposed to be coming later in years , but still the latest browsers have not accepted its use

Kiaesi · 05-05-2007, 03:27 PM

Thanks for the tips im looking to try and learn CSS as i want to try and build a site using it. At the moment i only know html so CSS will be a stretch but i will look more at what you have wrote and see if i can develop a understanding of some kind

.

Fizz · 05-29-2007, 01:05 PM

Listen to the wise mtajim! Efficient CSS requires browser support. You can put in code that will work in new browsers, but DO NOT forget older browsers.

Kiaesi, once you learn CSS you will wonder how you lived without it. Please don't do what I did when I was trying to learn though. I over complicated it and really it's not that hard, pretty easy actually. Good luck to you.