There’s no such HTML tags as <center>, <left> or <right>.
This is what you should have instead:
<div class="hometopwidget ht_widget feature_link">
<h2>MY STORY</h2>
<div class="textwidget">
<img width="125" src="http://hagutah.com/wp-content/uploads/2010/10/IMG_0481.jpg">
<p>My story could be the same as anyone's circumstance. Everything was going along just fine. I made a good living, my family and I could pay all of our bills and there was no stress.</p>
</div>
</div>
And the following in your CSS:
.hometopwidget img {
float:left;
margin: 0 10px 10px 0; /* In the order of: top right bottom left */
}
Thank You Joseph. As you can tell I am a newbie. I have a list of HTML code and could have sworn I saw <center>.
One last question. I saw in CODEX instructions for adding an image to a blog page which is somewhat differnt than what you just showed me. Is that because i am adding an image to a text widget on a static home page?
Again thank you.
What you’re doing is hard coding the text and image which is fine for your own custom widgets and static components of your site. When you’re writing posts and pages in wordpress, it stores the text and the html code for the images in the database so you can edit it through the editor without accessing the actual file.
http://www.hagutah.com
I was able to add the correct code to my text widget and the correct code to my CSS.
If you click on the above link you can see that the text is one line too low (not even with the top of the image & a space below the image).
Also, the text is cut off a little bit on the right.
Can you direct me in the right direction to fix these problems?
Thank You
To remove the extra space below the image, replace margin: 0 10px 10px 0; in
.hometopwidget img {
float:left;
margin: 0 10px 10px 0;
}
with
margin-right: 10px;
As for the first line not even with the top of the image, it’s because of the line height of your text which is at 150%. You can make it even with line height at 100% but that reduces the spaces between each line and it’ll look cramped.
http://www.hagutah.com
I think I almost have it. The only problem I still have is the text in the Home Top Left widget area. Part of the words are cut off on the right. Is there a way to have the text “justify” (align the text to the left & the right and add space between words where necessary)like one can do in Word?
It’s cut off because you have an extra <div class="textwidget"><div class="hometopwidget ht_widget feature_link"> after <h2>MY STORY</h2>
Should be like this:
<h2>MY STORY</h2>
<div class="textwidget">
<img width="120" src="http://hagutah.com/wp-content/uploads/2010/10/IMG_0481.jpg">
<p>...</p>
</div>
If you want all your textwidgets to align justifiy:
.textwidget {
text-align: justify;
}
If only top widgets:
.hometopwidget {
text-align: justify;
}
Thank you Joseph for your time. I am going to go read some CSS tutorials tomorrow & study what you have given me in depth. Again Thank You.
