I've built a page with images that have margins of 20px. The selectors (see below) are identical except for one being left and one being right. One image (an img class="left") has 0 bottom margin. It's the only image on the page that does that (there are other class="left" images that are okay). What am I missing?
<style type="text/css">
img.left {
float:left;
margin:20px
}
img.right {
float:right;
margin:20px
}And your website is... where?The page in question is not published yet. But if it would help, I guess I could make it go live.Or you could just upload it as a .zip if it's small enough with all the images.I've never zipped a file or attached a file to a forum post before, so I hope I did it right.
Keep in mind the page is far from finished.
Thanks much!First thing that I spotted was the id="block" all over the place, id's are unique, ie: use them once and once only.
Just so you know, the margin is there but because you have floated the image it is "allowed" to break out of the element that contains it. This is a feature not a bug and is what allows text to flow around it.
It would be better to have the text floated rather than the image I think, I'll work on something tomorrow. I'm a bit tired now.
Remember to always validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) as you progress. And also test in other (<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m -->) browsers (<!-- m --><a class="postlink" href="http://www.opera.com/">http://www.opera.com/</a><!-- m -->).Thank you, lavalamp...I guess I've got a lot to learn.
If IDs are unique, how do I approach a situation where the layout calls for a series of "boxes" or "blocks" ("boxes" or "blocks" being sections of colored "background" for text, separated by the spaces of white [actual] background of the page itself)?
Sleep well.When it needs to be reused on a page then that's a job for "class" rather than "id".
<style type="text/css">
img.left {
float:left;
margin:20px
}
img.right {
float:right;
margin:20px
}And your website is... where?The page in question is not published yet. But if it would help, I guess I could make it go live.Or you could just upload it as a .zip if it's small enough with all the images.I've never zipped a file or attached a file to a forum post before, so I hope I did it right.
Keep in mind the page is far from finished.
Thanks much!First thing that I spotted was the id="block" all over the place, id's are unique, ie: use them once and once only.
Just so you know, the margin is there but because you have floated the image it is "allowed" to break out of the element that contains it. This is a feature not a bug and is what allows text to flow around it.
It would be better to have the text floated rather than the image I think, I'll work on something tomorrow. I'm a bit tired now.
Remember to always validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) as you progress. And also test in other (<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m -->) browsers (<!-- m --><a class="postlink" href="http://www.opera.com/">http://www.opera.com/</a><!-- m -->).Thank you, lavalamp...I guess I've got a lot to learn.
If IDs are unique, how do I approach a situation where the layout calls for a series of "boxes" or "blocks" ("boxes" or "blocks" being sections of colored "background" for text, separated by the spaces of white [actual] background of the page itself)?
Sleep well.When it needs to be reused on a page then that's a job for "class" rather than "id".