Hi,
I've got several thumbnails next to each other. What code do I need to use to manage te spacing between the thumbnails?
Cheers,
PieterYou could try the CSS margin attribute
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.jpg" width="50" height="50" style="margin:5px">
or for individual sides any one of the following
margin-top
margin-right
margin-bottom
margin-leftYes but please use CSS more to control presentational features like width,height etc becuase they are depreciated attributes.<offtopic>
No, width and height for the <img /> attribute are fine, Sharkey, seeing as <img /> is presentational markup as it is- just with no substitute unless you use the Shea Image Replacement (or another method) like so:
#flag {width: 88px; height: 31px; overflow: hidden; position: relative;}
#flag span {position: absolute; height: 100%; width: 100%; background: url(images/flag.gif) no-repeat);}
...
<p id="flag"><span></span>A flag!!! W007!</p> But that's too much work, the <img /> tag _is_ an image, even if images are presentational... I'm rambling now, so I'll just close with reminding everyone that's IMO, and that it _is_ debatable, but this isn't the thread to discuss it.
</offtopic>
Mr. J's right, and you could also do it the following ways:
margin: x y; where x is the top and bottom margins and y is the left and right margins, and also
margin: x y z n; where x is the top margin, y is the right margin, z is the bottom margin, and n is the left margin.Originally posted by Mr J
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.jpg" width="50" height="50" style="margin:5px">
Why not make standalone style codes pure?
Like this:
<img src=http://www.webdeveloper.com/forum/archive/index.php/image.jpg" style="margin:5px;height:50px;width:50px" />Originally posted by sharkey
Yes but please use CSS more to control presentational features like width,height etc becuase they are depreciated attributes.
The height and width attributes are deprecated only for the <table> element — they are perfectly valid for images.
Originally posted by Omega
#flag {width: 88px; height: 31px; overflow: hidden; position: relative;}
#flag span {position: absolute; height: 100%; width: 100%; background: url(images/flag.gif) no-repeat);}
...
<p id="flag"><span></span>A flag!!! W007!</p>
That, in my opinion, is overly complex — this would do just fine
div#container {
height: 75px;
width: 200px;
background: #FFF url(images/background.jpg) no-repeat left center;
}
div#container span {
display: none;
}
... ... ...
<div id="container"><span>This text won't be seen, but the image will be</span></div>
Originally posted by philaweb
Why not make standalone style codes pure?
Like this:
<img src=http://www.webdeveloper.com/forum/archive/index.php/image.jpg" style="margin:5px;height:50px;width:50px" />
Not defining the dimensions of an image can cause the page to load slower (or so I've heard...), and you might see things shift around when the image starts loading and shoves everything aside so it can fit.
I would say those thumbnails are a list of images, and therefore should be marked up as a list. Vladdy has a great example located <here (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/Gallery.html">http://www.vladdy.net/Demos/Gallery.html</a><!-- m -->)>Hi,
Thanks for the many replies! Right now I am using MR J's advice, but will most likely go for Vladdy's set up (thanks Paul Jr!).
I posted another thread:
underline images on mouse over (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=38827">http://www.webdeveloper.com/forum/showt ... adid=38827</a><!-- m -->)
Cheers,
Pieter
I've got several thumbnails next to each other. What code do I need to use to manage te spacing between the thumbnails?
Cheers,
PieterYou could try the CSS margin attribute
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.jpg" width="50" height="50" style="margin:5px">
or for individual sides any one of the following
margin-top
margin-right
margin-bottom
margin-leftYes but please use CSS more to control presentational features like width,height etc becuase they are depreciated attributes.<offtopic>
No, width and height for the <img /> attribute are fine, Sharkey, seeing as <img /> is presentational markup as it is- just with no substitute unless you use the Shea Image Replacement (or another method) like so:
#flag {width: 88px; height: 31px; overflow: hidden; position: relative;}
#flag span {position: absolute; height: 100%; width: 100%; background: url(images/flag.gif) no-repeat);}
...
<p id="flag"><span></span>A flag!!! W007!</p> But that's too much work, the <img /> tag _is_ an image, even if images are presentational... I'm rambling now, so I'll just close with reminding everyone that's IMO, and that it _is_ debatable, but this isn't the thread to discuss it.
</offtopic>
Mr. J's right, and you could also do it the following ways:
margin: x y; where x is the top and bottom margins and y is the left and right margins, and also
margin: x y z n; where x is the top margin, y is the right margin, z is the bottom margin, and n is the left margin.Originally posted by Mr J
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.jpg" width="50" height="50" style="margin:5px">
Why not make standalone style codes pure?
Like this:
<img src=http://www.webdeveloper.com/forum/archive/index.php/image.jpg" style="margin:5px;height:50px;width:50px" />Originally posted by sharkey
Yes but please use CSS more to control presentational features like width,height etc becuase they are depreciated attributes.
The height and width attributes are deprecated only for the <table> element — they are perfectly valid for images.
Originally posted by Omega
#flag {width: 88px; height: 31px; overflow: hidden; position: relative;}
#flag span {position: absolute; height: 100%; width: 100%; background: url(images/flag.gif) no-repeat);}
...
<p id="flag"><span></span>A flag!!! W007!</p>
That, in my opinion, is overly complex — this would do just fine
div#container {
height: 75px;
width: 200px;
background: #FFF url(images/background.jpg) no-repeat left center;
}
div#container span {
display: none;
}
... ... ...
<div id="container"><span>This text won't be seen, but the image will be</span></div>
Originally posted by philaweb
Why not make standalone style codes pure?
Like this:
<img src=http://www.webdeveloper.com/forum/archive/index.php/image.jpg" style="margin:5px;height:50px;width:50px" />
Not defining the dimensions of an image can cause the page to load slower (or so I've heard...), and you might see things shift around when the image starts loading and shoves everything aside so it can fit.
I would say those thumbnails are a list of images, and therefore should be marked up as a list. Vladdy has a great example located <here (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/Gallery.html">http://www.vladdy.net/Demos/Gallery.html</a><!-- m -->)>Hi,
Thanks for the many replies! Right now I am using MR J's advice, but will most likely go for Vladdy's set up (thanks Paul Jr!).
I posted another thread:
underline images on mouse over (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=38827">http://www.webdeveloper.com/forum/showt ... adid=38827</a><!-- m -->)
Cheers,
Pieter