Matthew Velic wrote:
Hello,
Are we trying to push CSS so much that the img element no longer gets
used in xhtml? The cornerstone to creating a good layout for a site is
built upon semantic markup, using the elements for their correct
purpose. Yet, I see such a push for the use of no images directly in
the structure because, in most cases, it is for design purposes only.
In the case of images that are the bulk of the information, such as in
online galleries and portfolios, would those be 'allowable' in the
structural markup? They can always be styled and repositioned...
I mostly ask for myself since I am trying to rebuild my portfolio, and
just trying to hack all my images through CSS (especially for images
that are going to act as links) is becoming a major pain. And I realize
that this is probably not the best project to throw myself into learning
'real' CSS layouts and design, but, unfortunately, I don't have any
other projects pending right now, and this is the only thing I can truly
concentrate on.
Well, I was just hoping to gain some of your thoughts on my above queries.
Matt
Also, if you know of a way to do image links purely through CSS, I would
love to here those too.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Hi Matt,
I think that use of images or photos (as they are in you
case of portfolio) is allowable and good. I mean, images
are your content, thats what you are trying to show of
using the website and xhtml to mark it up.
I found it complex when first bulding a photo gallery to
get the borders around the thumbnails so that on hover the
border color, padding or margin would change.
Finally i did it like that and works in firefox, ie 6 and
opera. Here is the sample css assuming you give a class
name thumb to all you thumbnail images:
img.thumb {
border: 1px solid #CCCCCC;
float: left;
margin: 0.2em 0.6em 0.4em 0;
padding: 1px;
}
a img.thumb {
border: 1px solid #C4C9AF;
background-image: url(initial_bcg.png);
background-repeat: no-repeat;
background-position: right top;
}
a:hover img.thumb {
border-color: #006600;
background-image: url(hover_bcg.png);
}
and here is the xhtml:
<a href="large.jpg">
<img src="thumb.jpg" width="160" height="106" class="thumb" />
</a>
You can do a very great effects by using large padding and
applying background images to withouhover thumbnails and
differenct bg images on hover. You can also change the
margin on hover, so that it would create the "press-in"
effect.
With this sample of css:
a img {
border: 6px solid #CCCCCC;
margin: 6px;
padding: 1px;
float: left;
}
a:hover img {
border: 6px solid #99CC00;
margin: 5px 5px 7px 7px;
padding: 1px;
}
and this xhtml:
<a href="large.jpg">
<img src="thumb.jpg" width="120" height="80" />
</a>
You can have this "press-in" effect.
Generally I suggest you to create a fluid layout and for
the thumbnail display put those images into a "cleared
both" box.
Have a nice day,
Kaspars
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
