brady.k — Tue, 21 Sep 2004 19:41:08 +0000

lol ok

well it seems both ways work, it's just that one is valid and one is not

Renegade — Tue, 21 Sep 2004 01:47:16 +0000

http://www.w3schools.com/css/css_pseudo_classes.asp

brady.k — Mon, 20 Sep 2004 23:15:53 +0000

I'm not sure actually. The way I learned to do it was

a:hover.roll1

I'd look it up, but I'm really busy.

Renegade — Mon, 20 Sep 2004 22:53:45 +0000

Eskater05 wrote: Yes, that is a good example of mixing the two.

You can still use images for navigational menus! CSS is meant to separate content and styling...so just use an image tag like normal. No differences there.

Or, if you want, you can use "hacks" to get a "good" CSS rollover. you could do something like this:

<a class="roll1" alt="" href=""></a>

with the css

a.roll1, a:visited.roll1 { background-image: url('/locationofun-rolledimage'); } a:hover.roll1 { background-image: url('/location-of-new-image'); }
'

um, don't the psudo classess go at the end?

a.roll1, a.roll1<strong>:visited</strong> {
background-image: url('/locationofun-rolledimage');
}
a.roll1<strong>:hover</strong> {
background-image: url('/location-of-new-image');
}

Megan — Mon, 20 Sep 2004 14:16:54 +0000

Timewell wrote: Another question - is it worth sacrificing a more professional look by having items such as Navigation menus done by CSS rather than images? I know that you take a hell of a lot off your load time by using CSS rollovers ...

I don't t hink it's tru at all that you have to have image rollovers to look "professional". In fact, I think sometimes the opposite can be true. Poorly done image menus look worse than text any day. Besides, CSS is a heck of a lot easier to work with, especially when you need to make changes. Here are some examples of nice css menus:

http://www.alistapart.com/
http://www.digital-web.com/ (tabs! probably using the sliding doors method documented at ALA)
most of what's in the CSS zen garden.

Any my own example:

http://www.meganjack.com/uw_courses/template/anth/index.html

I think for a lot of these design decisions it depends on the nature of the work. FOr an information-based site I'm more likely to go with CSS rollovers and flexible widths (more room for content!), but with a site that's more about the experience you can do more with fixed width and image navigation.

Dragon of Ice — Sat, 18 Sep 2004 22:38:08 +0000

Now that I think about it, that would have been a lot better route to go than javascript. It's alot easier rollover. I'll have to bookmark this as a simple rollover.

brady.k — Sat, 18 Sep 2004 21:12:21 +0000

Yes, that is a good example of mixing the two.

You can still use images for navigational menus! CSS is meant to separate content and styling...so just use an image tag like normal. No differences there.

Or, if you want, you can use "hacks" to get a "good" CSS rollover. you could do something like this:

<a class="roll1" alt="" href=""></a>

with the css

a.roll1, a:visited.roll1 {
background-image: url('/locationofun-rolledimage');
}
a:hover.roll1 {
background-image: url('/location-of-new-image');
}

Timewell — Sat, 18 Sep 2004 21:00:08 +0000

Another question - is it worth sacrificing a more professional look by having items such as Navigation menus done by CSS rather than images? I know that you take a hell of a lot off your load time by using CSS rollovers or whatever, but I've never really seen a good CSS rollover. But if you guys know of one, then I'd love to see it - then I'll know it can be done!

It's just that all the "big" sites in the world seem to be heavily centered around image rollovers - thus greatly reducing the sites accessibility.

Timewell — Sat, 18 Sep 2004 20:01:13 +0000

Yeah I did that before seeing your reply - so basically would the following be what you are talking about :

<div width="100%">

<div id="top">Content here</div>

<div id="leftpanel">
Content here>
</div>

<div id="content">CONTENT HERE</div>

<div id="rightpanel">Content here</div>

</div>

With CSS being :

#top {
	border: 1px solid #ccc;
	height: 136px;
	}

#leftpanel { 
	position: absolute; 
	top: 140px; 
	left: 3px; 
	width: 200px; 
	border: 1px solid #ccc;
	text-align: center; 
	padding-top: 5px;
	}     

#rightpanel {
	position: absolute;
	top: 140px;
	right: 10px; 
	width: 200px;
	border: 1px solid #ccc;
	padding-top: 5px;
	}

#content { 
	position: absolute; 
	top: 140px; 
	border: 1px solid #ccc;
	padding-left: 210px; /* 20px to play with */ 
	padding-right: 210px; /* 20px to play with */ 
	padding-top: 5px;
	} 

Thus giving a three column layout with a header (no footer as of yet but it shouldn't be too difficult!). I've tried it out in I.E. and it gives me no problems but I wouldn't know if it is what you are talking about. I think if I was to do absolute in relative, I would have to lose the pixels wouldn't I? But like I say, it works in I.E.

Of course, it may well be a total fluke!

brady.k — Sat, 18 Sep 2004 19:31:59 +0000

What you're talking about is just stacking divs...not any absolute positioning within relative, unless you define the stylesheet as such