Forum Moderators: not2easy
I am working on my first tableless page and I cannot get my image to align to the right of the text. I'm sure there is a simple fix for this. I just don't know what it is.
HTML:
<p><span class="bold"><img src="..ffgearTeddy.jpg" alt="GymFlesh Gear for Firefighters Teddy Bear" width="119" height="119" align="right" /></span><strong>Gear for Firefighters</strong>.</p>
Do I need to create a separate style sheet for the image? and/or move it outside of the paragraph tag?
Any help would be appreciated.
[edited by: SuzyUK at 8:57 am (utc) on June 12, 2006]
CSS:
.feature img{
float: left;
padding: 10px 10px 0px 0px;
}
The problem is I don't want ALL the images to float either to the left or the right. I want some on the left and others on the right.
Will I need to create a paragraph specific style for each? Is there a simpler "more elegant" way to do this?
1. <span class="bold">
It's a bad idea to name your classes things like "bold". You're giving it a name representative of the styles you're assigning instead of what the class actually represents. If you later change the styles within the "bold" class, it might be confusing.
2. src="..ffgearTeddy.jpg"
You're missing a slash there? Should that be:
src="../ffgearTeddy.jpg"
3. width="119" height="119" align="right"
These are all "presentational" and therefore should be defined with stylesheets instead of as HTML attributes.
You might want to give your images ID attributes and use that to specify the width and height. And I'm assuming you want all of the "bold" class images to be on the right?
The HTML:
<p>
<span class="imgWrap"><img src="../ffgearTeddy.jpg" alt="GymFlesh Gear for Firefighters Teddy Bear" id="ffgearTeddy" /></span><strong>Gymflesh Gear™ for Firefighters</strong>.</p>
The CSS:
/* All images within imgWrap will be floated to the right */
.imgWrap img
{
float: right;
}
/* Define the dimensions of this image. If all images within imgWrap will have the same width and height, you could move these to the previous .imgWrap img declaration.
#ffgearTeddy
{
width: 119px;
height: 119px;
}
1. The "bold" was my attempt at creating a style sheet for a bolder type.
Am I overdoing this? Is it OK to just use <strong> </strong>?
2. the slash isn't missing. I deleted the reference to the URL and took out too much.
3. Yeah! It's doing what I want it to do. Hopefully, this is the correct way to do it.
<p class="imageRight"><img src="images/ex1.jpg" alt="#"/><span class="bold">Official Gear</span> at <a href="#">www.example.com</a></p>
<p class="imageLeft"><img src="images/ex2.jpg" alt="#" /><span class="bold">School Gear</span> at <a href="#">www.example.com</a></p>
.imageLeft img {
float: left;
height: 114px;
width: 114px;
padding: 0px 5px 5px 0px;
}
.imageRight img {
float: right;
height: 114px;
width: 114px;
padding-bottom: 5px;
padding-left: 5px;
}
[edited by: SuzyUK at 8:58 am (utc) on June 12, 2006]
[edit reason] examplified [/edit]
1. The "bold" was my attempt at creating a style sheet for a bolder type.Am I overdoing this? Is it OK to just use <strong> </strong>?
Think semantically. If the content has some semantic meaning where it would make sense for it to have strong emphasis, then use <strong></strong>. However, if this is presentational only, and the item shouldn't really have a strong emphasis, then use a class name that better describes what the item is instead of what presentation you want it to have. For example:
<strong>Attention! Meltdown in 5 seconds!</strong> This is a good example of strong because emphasis should be applied.
<span class="bold">Space Rock</span> only <span class="red">$5.99</span>
That's a bad example of classes because the classes are descriptive of presentational aspects. A good example would be:
<span class="productName">Space Rock</span> only <span class="price">$5.99</span>
That's a good example because the class names describe the content, not the presentation. If I decide in 6 months that I'd rather have the "Space Rock" appear italic, I can just change the style settings of the productName class. But if I have a class named bold, and the styles within it specify italic text instead of bold text, that's just plain confusing.
3. Yeah! It's doing what I want it to do. Hopefully, this is the correct way to do it.<p class="imageRight">
I hope this has been helpful.
Regards.
I'm assuming I should create some stylesheet for this, but to create a unique stylesheet for each occurance would be unnecessary I should think.
But what about styles within paragraphs for example, where it is a stylist application rather than a content based one? Emphasis to make a point for example?
I'm not sure what you mean by "stylist application rather than a content based one". If, as you put it, you want emphasis to make a point, then semantically, you should be using <em> or <strong> tags around that information. It's still content based. Emphasis has semantic meaning, which should be applied for both people using visual browsers and people using screenreaders.
Here's an example of what might be a stylistic approach:
Let's start with a basic paragraph:
<p>The quick brown fox jumped over the lazy dog.</p>
Now suppose I want "fox" and "dog" to be bold looking, but not have emphasis. You could do something like this:
<p>The quick brown <span class="animal">fox</span> jumped over the lazy <span class="animal">dog</span>.</p>
We used the generic <span> container and gave is pseudo semantic meaning by assinging a meaningful class to it. That is, there is no true semantic meaning for the span element (just that it's a generic container), but by specifying a class name that has some pseudo semantic meaning, our content is easier to maintain and doesn't add potentially confusing presentation-like pseudo meaning.
In the example above, you could then apply styles to the .animal class to make it bold. If you later decide that you want to make the animals appear underlined instead of bold, you only have to modify the "presentation" (ie - the CSS style rules), and not your content.
I'm assuming I should create some stylesheet for this, but to create a unique stylesheet for each occurance would be unnecessary I should think.
Again, not quite sure what you mean here. This is what classes and ids are for.
If you have some styles that will be applied to multiple items that could be "classed" together in some way, then use a class. For example, "even" and "odd" paragraphs.
If you want something for a specific item that is unique, then use an id. For example:
<p class="odd" id="intro">Welcome friends...</p>
<p class="even" id="directions">Directions to the party...</p>
<p class="odd" id="drinking">Don't drink and drive...</p>
<p class="even" id="gohome">You don't have to go home, but you can't stay here...</p>
Now, I could apply styles like so:
p.odd img
{
float: left;
}
p.even img
{
float: right;
}
#gohome img
{
float: none;
border: 2px solid red;
}
Thus applying some general styles to the classes, and overriding the styles for a particular id.
Clearly, I will need to read more on the subject.
Thanks again.
