What are the CSS equivalent of hspace and vspace? Also how do I create a padding of say 10px wrapped around an image?I've never even heard of hspace and vspace, but I would assume that the CSS equivalent is margin. Images can't have padding because you can't put anything in them, but thay can have a margin. To create a 10px gap all around an image do this:<img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.gif" alt="Some blah." width="100" heigh="100" style="margin:10px;">You can specify a different margin for each side of the image like this:style="margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;"Which can be shortened to:style="margin:1px 2px 3px 4px;"Thanks for the margin CSS, hspace creates a horizontal padding around an image; vspace, a vertical. I had used vspace to vertical align (to middle) an image.
The thing is, I have a line of text. In the middle of the line I have a small rectangular image. The image's bottom is on the same line as the text. However I want to lower the image so that the horizontal center axis is in line with the text.
How is this accomplished using CSS? VSpace had earlier done the trick.Well without anymore information I would simply suggest doing this:
For the sake of arguement lets say you had this, hspace="10" vspace="20"
Then I would expect this to work, style="margin:10px 5px;" That margin will be 10px above and below the image, and also 5px either side. Which is what I assume the hspace and vspace would produce.
Can I see the page with this on though?I had used the align="middle" to center the image, and vspace for precise alignment. Here's the URL:
<!-- m --><a class="postlink" href="http://cricketlearn.tripod.com/old.htm">http://cricketlearn.tripod.com/old.htm</a><!-- m -->
Please ignore the design, its really messed up (old page). The image in question is the counter at the bottom of the page.
Here's the current page <!-- m --><a class="postlink" href="http://cricketlearn.tripod.com/index.html">http://cricketlearn.tripod.com/index.html</a><!-- m -->
Try increasing the vspace value to see the verical alignment take effect. Thank youTry doing this:<p style="vertical-align:middle;">
Last Updated:
<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%d-%b-%y" startspan -->29-Mar-04<!--webbot bot="Timestamp" i-checksum="15236" endspan --> |
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://counter.digits.com/wc/-d/4/-r/-z/-f/003300/-b/CCFF99/hitwicket" width="75" height="20" alt="[Counter]" style="vertical-align:bottom;" />
Visitors since Oct 11, 2002
</p>Even though this is your old page, I thought I should tell you that you are using very old markup but the newest standard so it does not validate (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fcricketlearn.tripod.com%2Fold.htm">http://validator.w3.org/check?uri=http% ... %2Fold.htm</a><!-- m -->).I know its the old page, but I have abandoned the code in favour of the new page. I just gave you the old link to you could see the vspace in action. The new page conforms to XHTML 1.1 standards. I am in the process of removing the layout tables in favour of CSS-P.I was just checking you knew.
Did that CSS work though?It worked fine with the CSS. As far as the CSS-P is concerned, what is the difference between #(id) and .(class)? Which is better and what are the advantages of both?
Also could you tell me what this is supposed to mean? "html>#blue"Well the > is a CSS selector that IE doesn't support so anything it's used in IE ignores, comes in handy sometimes but I don't like using hacks myself.
The id's can only be used once whereas classes can be used lots of times. At one point I used to only use classes because then it wouldn't matter if I accidentally used one twice, but id's have their uses.
I mainly use id's for all of the main layout structure and then use classes for everything else.thanks for the info, exactly what is the advantage in using a selector?Well here is the code you posted without any selectors:You see the problem there?
Selectors are what you use to apply your styles to your elements. Read 1.4, 1.5 and 1.6 of this document (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS1#class-as-selector">http://www.w3.org/TR/CSS1#class-as-selector</a><!-- m -->) it's about CSS 1 selectors, this document (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html">http://www.w3.org/TR/CSS21/selector.html</a><!-- m -->) is about CSS 2 selectors and this one (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors">http://www.w3.org/TR/2001/CR-css3-selec ... #selectors</a><!-- m -->) is about CSS 3 selectors. Remember that not all of these will be supported, especially the CSS 3 selectors, so if you use them be sure to test them in all browsers.
If you need any more info on CSS then you can find it here (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a><!-- m -->) on the W3C web-site.
The thing is, I have a line of text. In the middle of the line I have a small rectangular image. The image's bottom is on the same line as the text. However I want to lower the image so that the horizontal center axis is in line with the text.
How is this accomplished using CSS? VSpace had earlier done the trick.Well without anymore information I would simply suggest doing this:
For the sake of arguement lets say you had this, hspace="10" vspace="20"
Then I would expect this to work, style="margin:10px 5px;" That margin will be 10px above and below the image, and also 5px either side. Which is what I assume the hspace and vspace would produce.
Can I see the page with this on though?I had used the align="middle" to center the image, and vspace for precise alignment. Here's the URL:
<!-- m --><a class="postlink" href="http://cricketlearn.tripod.com/old.htm">http://cricketlearn.tripod.com/old.htm</a><!-- m -->
Please ignore the design, its really messed up (old page). The image in question is the counter at the bottom of the page.
Here's the current page <!-- m --><a class="postlink" href="http://cricketlearn.tripod.com/index.html">http://cricketlearn.tripod.com/index.html</a><!-- m -->
Try increasing the vspace value to see the verical alignment take effect. Thank youTry doing this:<p style="vertical-align:middle;">
Last Updated:
<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%d-%b-%y" startspan -->29-Mar-04<!--webbot bot="Timestamp" i-checksum="15236" endspan --> |
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://counter.digits.com/wc/-d/4/-r/-z/-f/003300/-b/CCFF99/hitwicket" width="75" height="20" alt="[Counter]" style="vertical-align:bottom;" />
Visitors since Oct 11, 2002
</p>Even though this is your old page, I thought I should tell you that you are using very old markup but the newest standard so it does not validate (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fcricketlearn.tripod.com%2Fold.htm">http://validator.w3.org/check?uri=http% ... %2Fold.htm</a><!-- m -->).I know its the old page, but I have abandoned the code in favour of the new page. I just gave you the old link to you could see the vspace in action. The new page conforms to XHTML 1.1 standards. I am in the process of removing the layout tables in favour of CSS-P.I was just checking you knew.
Did that CSS work though?It worked fine with the CSS. As far as the CSS-P is concerned, what is the difference between #(id) and .(class)? Which is better and what are the advantages of both?
Also could you tell me what this is supposed to mean? "html>#blue"Well the > is a CSS selector that IE doesn't support so anything it's used in IE ignores, comes in handy sometimes but I don't like using hacks myself.
The id's can only be used once whereas classes can be used lots of times. At one point I used to only use classes because then it wouldn't matter if I accidentally used one twice, but id's have their uses.
I mainly use id's for all of the main layout structure and then use classes for everything else.thanks for the info, exactly what is the advantage in using a selector?Well here is the code you posted without any selectors:You see the problem there?
Selectors are what you use to apply your styles to your elements. Read 1.4, 1.5 and 1.6 of this document (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS1#class-as-selector">http://www.w3.org/TR/CSS1#class-as-selector</a><!-- m -->) it's about CSS 1 selectors, this document (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/selector.html">http://www.w3.org/TR/CSS21/selector.html</a><!-- m -->) is about CSS 2 selectors and this one (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors">http://www.w3.org/TR/2001/CR-css3-selec ... #selectors</a><!-- m -->) is about CSS 3 selectors. Remember that not all of these will be supported, especially the CSS 3 selectors, so if you use them be sure to test them in all browsers.
If you need any more info on CSS then you can find it here (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a><!-- m -->) on the W3C web-site.