Well. I'm currently working on a directory listing script, and I've encountered quite a few problems.
Here, we see what I have so far:
<!-- m --><a class="postlink" href="http://www.shadowedlogic.uni.cc/theme_saph/?view=thumbs">http://www.shadowedlogic.uni.cc/theme_saph/?view=thumbs</a><!-- m -->
This is the Thumbnail view. Notice that all the images within the gray boxes are centered horizontally, but top-aligned vertically.
1. We come to our first question. So, how do I make it top-aligned vertically? I've been looking around everywhere and finding nothing.
2. In Opera, the border that appears around the file when it's selected (by clicking the file name) is a bit off. Anyone know how to fix this?
3. In Tile View (Change View Mode >> Tiles, or clicky (<!-- m --><a class="postlink" href="http://www.shadowedlogic.uni.cc/theme_saph/?view=tiles">http://www.shadowedlogic.uni.cc/theme_saph/?view=tiles</a><!-- m -->) if you're too lazy), you'll notice it doesn't work correctly in Opera or MSIE. Any help?
4. While we're talking about Tile View, how do I get the whole rectangle to be selected, instead of just the image?
Those are all the problems I can remember now. I'll post if I remember the other ones.For 1., I think you could make the line-height equal to the height of the containing box, then for the image add "vertical-align: middle" for its style.2. The image has a white area to the right; so the icon is not centered within the image.
3. & 4. Incorrect design; the page width determines how the image and text 'breaks'
Make the icon the background image of the <li> and the <a> display:block;
btw span should not contain block elements.For 1., I think you could make the line-height equal to the height of the containing box, then for the image add "vertical-align: middle" for its style.
I have done that now, and it still doesn't work. I think line-height just specifies the distance between lines, not the height of the actual lines.
2. The image has a white area to the right; so the icon is not centered within the image.
What?
3. & 4. Incorrect design; the page width determines how the image and text 'breaks'
Make the icon the background image of the <li> and the <a> display:block;
I understand what you're trying to say, but float:left only works on images, and I want the image to be a link (you can't make a link from a background image).
btw span should not contain block elements.
Well, since the span that contains block-level elements is display:inline-block, I don't think it makes all that much difference, and somehow replacing <div> with <span style="display:block"> just doesn't work correctly. Oh, well, I'll fix that sooner or later.2. Wrong page. Why not give the li the id and do away with the span?
3/4. If the image is the background to the anchor then it is 'clickable'.2. Wrong page. Why not give the li the id and do away with the span?
Well, it wouldn't help anything, and it looks neater with the span (at least to me).
3/4. If the image is the background to the anchor then it is 'clickable'.
You said to set the image as the background of the li, but we can ignore that...
But how do you suggest getting the anchor to have three lines of text to its right instead of one?
Here, we see what I have so far:
<!-- m --><a class="postlink" href="http://www.shadowedlogic.uni.cc/theme_saph/?view=thumbs">http://www.shadowedlogic.uni.cc/theme_saph/?view=thumbs</a><!-- m -->
This is the Thumbnail view. Notice that all the images within the gray boxes are centered horizontally, but top-aligned vertically.
1. We come to our first question. So, how do I make it top-aligned vertically? I've been looking around everywhere and finding nothing.
2. In Opera, the border that appears around the file when it's selected (by clicking the file name) is a bit off. Anyone know how to fix this?
3. In Tile View (Change View Mode >> Tiles, or clicky (<!-- m --><a class="postlink" href="http://www.shadowedlogic.uni.cc/theme_saph/?view=tiles">http://www.shadowedlogic.uni.cc/theme_saph/?view=tiles</a><!-- m -->) if you're too lazy), you'll notice it doesn't work correctly in Opera or MSIE. Any help?
4. While we're talking about Tile View, how do I get the whole rectangle to be selected, instead of just the image?
Those are all the problems I can remember now. I'll post if I remember the other ones.For 1., I think you could make the line-height equal to the height of the containing box, then for the image add "vertical-align: middle" for its style.2. The image has a white area to the right; so the icon is not centered within the image.
3. & 4. Incorrect design; the page width determines how the image and text 'breaks'
Make the icon the background image of the <li> and the <a> display:block;
btw span should not contain block elements.For 1., I think you could make the line-height equal to the height of the containing box, then for the image add "vertical-align: middle" for its style.
I have done that now, and it still doesn't work. I think line-height just specifies the distance between lines, not the height of the actual lines.
2. The image has a white area to the right; so the icon is not centered within the image.
What?
3. & 4. Incorrect design; the page width determines how the image and text 'breaks'
Make the icon the background image of the <li> and the <a> display:block;
I understand what you're trying to say, but float:left only works on images, and I want the image to be a link (you can't make a link from a background image).
btw span should not contain block elements.
Well, since the span that contains block-level elements is display:inline-block, I don't think it makes all that much difference, and somehow replacing <div> with <span style="display:block"> just doesn't work correctly. Oh, well, I'll fix that sooner or later.2. Wrong page. Why not give the li the id and do away with the span?
3/4. If the image is the background to the anchor then it is 'clickable'.2. Wrong page. Why not give the li the id and do away with the span?
Well, it wouldn't help anything, and it looks neater with the span (at least to me).
3/4. If the image is the background to the anchor then it is 'clickable'.
You said to set the image as the background of the li, but we can ignore that...
But how do you suggest getting the anchor to have three lines of text to its right instead of one?