Re: [css-d] Image text box
Brian M. Curran wrote:
Hi All,
I've never done this before... I made a bordered text box around an image
using a paragraph. It can be found here:
http://www.draftingservices.com/building_survey.html
Would this be considered acceptable CSS or make-shift?
Sincerely,
Brian
David Laakso wrote:
It seems to work the way you have it cross-browder. Not sure why you need
such very long selector names, though.
This explains another method for achieving what you're after.
http://css.maxdesign.com.au/floatutorial/tutorial0204.htm
Either way, you may want to add this to keep the text and image within
their own block:
h5 {border: 1px solid red; clear:both; }
Best,
~d
Great link, thank you. The addition code for my current situation is not
making sense though? My current CSS and HTML are:
p.articleImageTextRight {
width: 200px;
float: right;
margin: 0 0 5px 5px;
padding: 5px;
border: 1px solid #000;
background: #eee;
font-size: x-small;
}
p.articleImageTextRight img {
margin-bottom: 5px;
}
p class=articleImageTextRight
img src=images/building_survey.jpg alt=Building Survey width=200
height=259/
br/
Building survey floor plan.
/p
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Brian M. Curran wrote: Brian M. Curran wrote: Hi All, I've never done this before... I made a bordered text box around an image using a paragraph. It can be found here: http://www.draftingservices.com/building_survey.html Would this be considered acceptable CSS or make-shift? Sincerely, Brian This explains another method for achieving what you're after. http://css.maxdesign.com.au/floatutorial/tutorial0204.htm Best, ~d Great link, thank you. The addition code for my current situation is not making sense though? My current CSS and HTML are: Then I guess all I can suggest is that you do it differently and change the css/markup following the above provided tutorial? Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Brian M. Curran wrote: Hi All, I've never done this before... I made a bordered text box around an image using a paragraph. It can be found here: http://www.draftingservices.com/building_survey.html Would this be considered acceptable CSS or make-shift? Sincerely, Brian David Laakso wrote: This explains another method for achieving what you're after. http://css.maxdesign.com.au/floatutorial/tutorial0204.htm Best, ~d Brian M. Curran wrote: Great link, thank you. The addition code for my current situation is not making sense though? My current CSS and HTML are: David Laakso wrote: Then I guess all I can suggest is that you do it differently and change the css/markup following the above provided tutorial? Why would I do that, if what I've done works. ...This basically harkens back to my original question. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Brian M. Curran wrote: Brian M. Curran wrote: Hi All, I've never done this before... I made a bordered text box around an image using a paragraph. It can be found here: http://www.draftingservices.com/building_survey.html Would this be considered acceptable CSS or make-shift? Sincerely, Brian David Laakso wrote: Then I guess all I can suggest is that you do it differently and change the css/markup following the above provided tutorial? Why would I do that, if what I've done works. ...This basically harkens back to my original question. I don't mean this as nit-picking...your original question was Would this be considered acceptable CSS or make-shift?, not whether it works or not. That is the question to which David is responding. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Your question has more to do with HTML than CSS -- asking if using a paragraph tag is okay as long as it works -- but I'll respond anyway. There are two different kind of it works in our business. There's it works for me and there's it works across browsers. An important point about standards is to come up with a way that your code not only works across browsers but will continue to work even as browsers change. The notion is that if you write compliant code, and the community develops compliant browsers, everything will continue to work with little or no disruption. So the important question is not whether your approach works but whether your approach complies with the standards. I believe that was the purpose behind referring you to the tutorial. If your only benchmark is it works then the tutorial is indeed irrelevant. The developer is free to code as he pleases, and the visitor is free to retreat in frustration. :) Skip Knox Boise State University Why would I do that, if what I've done works. ...This basically harkens back to my original question. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Your question has more to do with HTML than CSS -- asking if using a paragraph tag is okay as long as it works -- but I'll respond anyway. There are two different kind of it works in our business. There's it works for me and there's it works across browsers. Brian M. Curran wrote: Hi All, I've never done this before... I made a bordered text box around an image using a paragraph. It can be found here: http://www.draftingservices.com/building_survey.html Would this be considered acceptable CSS or make-shift? Sincerely, Brian Why would I do that, if what I've done works. ...This basically harkens back to my original question. An important point about standards is to come up with a way that your code not only works across browsers but will continue to work even as browsers change. The notion is that if you write compliant code, and the community develops compliant browsers, everything will continue to work with little or no disruption. So the important question is not whether your approach works but whether your approach complies with the standards. I believe that was the purpose behind referring you to the tutorial. If your only benchmark is it works then the tutorial is indeed irrelevant. The developer is free to code as he pleases, and the visitor is free to retreat in frustration. :) Skip Knox Boise State University Thanks Skip. I recognized that from the outset. That is, that I could have created something that worked but was not acceptable. - I'm looking to learn here. Pointing me to a tutorial, while helpful, didn't answer my question. Of course sometimes errors in coding may become self-evident if one is pointed to a tutorial, but in this instance that is not what happened. It just seemed like an alternative way to do what I've already done. It seemed more like preference, than whether or not what I had already done was acceptable or not. I thought the point of my question was clear enough. I was asking for a No, because... or Yes, because... response. Lastly, whether or not my question is more CSS or HTML based. You may be right that it is more HTML based. Regardless, I believe it is intimately connected to CSS. Sincerely, Brian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
I was asking for a No, because... or Yes, because... response. Fair enough. No, because it's not a paragraph, it's an image. A reader (forget humans, just think reading mechanisms, which can include humans) when it sees a p expects to see a paragraph of content. Instead it sees an image. The proper markup for that is the img tag. If that needs a wrapper, that's what div is for (it's for any arbitrary block, as span is for any arbitrary string). So, wrenching this over in the direction of CSS, when you want to style an image and perhaps some associated text, the proper thing to style would be a div rather than a p. It'd be really sweet if HTML had a tag that would encompass not only the graphic itself but also associated content, but I've not seen any stirrings in that direction. Skip Knox Boise State University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
I was asking for a No, because... or Yes, because... response. Fair enough. No, because it's not a paragraph, it's an image. A reader (forget humans, just think reading mechanisms, which can include humans) when it sees a p expects to see a paragraph of content. Instead it sees an image. The proper markup for that is the img tag. If that needs a wrapper, that's what div is for (it's for any arbitrary block, as span is for any arbitrary string). So, wrenching this over in the direction of CSS, when you want to style an image and perhaps some associated text, the proper thing to style would be a div rather than a p. It'd be really sweet if HTML had a tag that would encompass not only the graphic itself but also associated content, but I've not seen any stirrings in that direction. Skip Knox Boise State University Thank you! :-) ...And of course thanks to David too. :-) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
ta-da!!!
http://www.draftingservices.com/building_survey.html
CSS:
.textBox
{
width: 200px;
float: right;
margin: 0 0 5px 5px;
padding: 5px;
border: 1px solid #000;
background: #fff;
font-size: x-small;
}
HTML:
div class=textBox
img src=images/building_survey.jpg alt=Building Survey width=200
height=259/
br/
Building survey floor plan.
/div
Thanks again to all who helped me!! Now I can add other images to my site too.
:-)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image text box
Hi All, I've never done this before... I made a bordered text box around an image using a paragraph. It can be found here: http://www.draftingservices.com/building_survey.html Would this be considered acceptable CSS or make-shift? Sincerely, Brian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Brian M. Curran wrote:
Hi All,
I've never done this before... I made a bordered text box around an image
using a paragraph. It can be found here:
http://www.draftingservices.com/building_survey.html
Would this be considered acceptable CSS or make-shift?
Sincerely,
Brian
It seems to work the way you have it cross-browder. Not sure why you
need such very long selector names, though.
This explains another method for achieving what you're after.
http://css.maxdesign.com.au/floatutorial/tutorial0204.htm
Either way, you may want to add this to keep the text and image within
their own block:
h5 {border: 1px solid red; clear:both; }
Best,
~d
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
