PDA

Click to See Complete Forum and Search --> : css-ing several slices of a logo (many images in a row)

getret
06-08-2006, 05:51 AM
allright, i had a table row that looked like this.....
<td>/img1.jpg</td>
<td>/img2.jpg</td>
<td>/img3.jpg</td>
<td>/img4.jpg</td>
<td>/img5.jpg</td>
<td>/img6.jpg</td>

.... basically. this displayed a sliced up logo image.

i have external style sheets, and wanted to do something like this withing one of them.

#logo{
img(url:http://www.website/img1.jpg)
img(url:http://www.website/img2.jpg)
img(url:http://www.website/img3.jpg)
img(url:http://www.website/img4.jpg)
img(url:http://www.website/img5.jpg)
img(url:http://www.website/img6.jpg)
}

and then reference this within my .html.

is there such a way to do this? i know 'img' is not the way.
i know how to set a background using something like this, but not just several pics in a row. any help would be super dooper.
bigbruce
06-08-2006, 07:36 AM
I don't think you can do this directly in CSS. I think you would need the following :-

in CSS
#logo { float: left; }

in html
<div id="logo">
<img src="http://www.website/img1.jpg" />
<img src="http://www.website/img2.jpg" />
<img src="http://www.website/img3.jpg" />
<img src="http://www.website/img4.jpg" />
<img src="http://www.website/img5.jpg" />
<img src="http://www.website/img6.jpg" />
</div>

Hope this helps.
KDLA
06-08-2006, 08:09 AM
You might take a look at this: http://www.alistapart.com/articles/sprites/
It's very close to what you are trying to achieve.

KDLA
ray326
06-08-2006, 12:18 PM
Put the images back together and either use a single image tag or put the image in the background. Slice-n-dice is dead.
getret
06-10-2006, 03:51 PM
yeah i was debating on wether or not i was just going to have to put them all back together. i sliced them up on a tip that it would speed my load time, but i've never seen an improvment.

thanks for the help.
WebJoel
06-10-2006, 04:40 PM
yeah i was debating on wether or not i was just going to have to put them all back together. i sliced them up on a tip that it would speed my load time, but i've never seen an improvment.

thanks for the help.

How big is your image? If it's just 300 or 400-pixels wide by 50 to 200-pixels tall (I'm just making these number up), slicing to reduce download time probably isn't required. esp. if you only have one or maybe two suchimages total in that entire page.
But if the image is 700-pixels wide and 600-pixels tall, yes, slicing them into maybe four pieces and letting the browser re-assemble them into equal-sized TDs, yes, the page will load slightly faster on dial-up. But the container TDs should be equal-sized to incur this savings. And stating the WIDTH= and HEIGHT= for each and every image slice also is a big download-time saver, because having stated this, your computer will allocate that much resource to provided that much space, and proceed to read-write-to-screen with whatever comes next.

Like Ray said, -slicing is dead, but an interesting resurrection of slicing is to take an image and slice it up, and using style, float:left; clear:left each slice and, if done properly, you can make a nice 45-degree angle image and the text will 'flow around' this.
I'm working on a client's page right now that uses this, and it it great for me because firstly, it very well emulates her business card's styling, and because each slice is also sliced slightly less-wide, and when 'float:left'-ed, the total image weight is reduced some 45% over what the same image would have been had I the same image in the native 'square'-shape... :)
And the kewl-factor to have the text auto-flow around this wedge-shaped image when the user re-sizes the browser window is awesome!

Slicing is fun. It should be. :) Those whom may be against it probably speak from having seen it use ad~nauseum in Dreamweaver-developed web pages....
kelly23
06-12-2006, 05:20 AM
Hey WebJoel,

Do you have a url that displays what you're talking about with the text wrapping around a 45 deg. angle? I'm not sure I'm picturing it exactly.

Thanks,

kelly
ray326
06-12-2006, 12:40 PM
The performance thing is a red herring. When you have a small image, as when you have a relatively small CSS file, the protocol overhead of determining whether the cache is stale is larger than the simple file transfer.
WebJoel
06-12-2006, 07:39 PM
Hey WebJoel,

Do you have a url that displays what you're talking about with the text wrapping around a 45 deg. angle? I'm not sure I'm picturing it exactly.

Thanks,

kelly

I couldn't find the URL, so I wrote-up a quickie example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
body, html {border:0; padding:0; margin:0;} /* re-sets IE to "zero" for these three basic Declarations */
</style>
<style>
body {background-color:#cdcdcd;}
h1 {margin-left:10px; margin-top:25px; white-space:nowrap;}
h2 {margin-left:10px; white-space:nowrap;}
#wrapper {width:85%; padding:0 15px 25px 0;}
img {margin-right:26px;}
p {margin-left:15px; margin-right:15px;}
</style>
</head>

<body>
<div id="wrapper">
<img src="" style="width:150px; height:35px; float:left; clear:left;" />
<img src="" style="width:140px; height:35px; float:left; clear:left;" />
<img src="" style="width:130px; height:35px; float:left; clear:left;" />
<img src="" style="width:120px; height:35px; float:left; clear:left;" />
<img src="" style="width:110px; height:35px; float:left; clear:left;" />
<img src="" style="width:100px; height:35px; float:left; clear:left;" />
<img src="" style="width:90px; height:35px; float:left; clear:left;" />
<img src="" style="width:80px; height:35px; float:left; clear:left;" />
<img src="" style="width:70px; height:35px; float:left; clear:left;" />
<img src="" style="width:60px; height:35px; float:left; clear:left;" />
<img src="" style="width:50px; height:35px; float:left; clear:left;" />
<img src="" style="width:40px; height:35px; float:left; clear:left;" />
<img src="" style="width:30px; height:35px; float:left; clear:left;" />
<img src="" style="width:20px; height:35px; float:left; clear:left;" />
<img src="" style="width:20px; height:35px; float:left; clear:left;" />
<img src="" style="width:30px; height:35px; float:left; clear:left;" />
<img src="" style="width:40px; height:35px; float:left; clear:left;" />
<img src="" style="width:60px; height:35px; float:left; clear:left;" />
<img src="" style="width:70px; height:35px; float:left; clear:left;" />
<img src="" style="width:80px; height:35px; float:left; clear:left;" />
<img src="" style="width:70px; height:35px; float:left; clear:left;" />
<img src="" style="width:60px; height:35px; float:left; clear:left;" />
<img src="" style="width:40px; height:35px; float:left; clear:left;" />
<img src="" style="width:30px; height:35px; float:left; clear:left;" />
<img src="" style="width:20px; height:35px; float:left; clear:left;" />
<img src="" style="width:20px; height:35px; float:left; clear:left;" />
<h1>An Interesting story...</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<img src="" alt="Right-hand image in text" style="width:100px; height:160px; margin-left:5px; float:right;
border=1px dashed red;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<h2>And so forth...</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
</body>
</html>
The images are 'blanks' (no images, as they'd be so many to upload to WD to show my point), -but imagine if you would, -the vertical side of a steep sunlit canyon wall... or the plummeting waterfall of Niagara Falls.... -you can figure out what to do with this.
Try resizing your browser window... notice how the text 'flows' around the image-placeholders! Neat, eh?! With images in-place and a nice background-color to the DIV "wrapper", -you've got a very interesting start to a nice web page.
If you like it, -it's yours. This only took me about 5-minutes to type-up from memory/practice :)

Enjoy!
-Joel