I have only basic knowledge of html and css, be as basic as possible in your answers, please 
I have a CSS and XHTML 1.0 Transitional template, that is perfect in every way, except in what it wasn't designed for: placing images between the chunks of text, as a separate row (without text flowing around them).
By trial and error, I do that now in html this way:
| Code: |
<div class="clear"></div>
<img class="alignleft" src="sun/f2.jpg" alt="Food" />
<div class="clear"></div>
<p><br />Text is here...</p> |
Without the first "clear" the following paragraph flow up and around the images.
Without the last "clear" and "br /"the following text is too close to the image.
Changing the image properties in css will mess with the all layout, which now is good, except the separate images as a row.
How to do that the proper way?
And a small unrelated question:
The use of "b"(bold) and color in html should be replaced by creating class in css ".bold" or ".red" and reference in html | Code: |
| <span class="red">red text here</span> |
.
But this surely longer and more time consuming, than the old way. And increases unnecessary data transfer through the web. If formatting of the text, done with html tags will ever be changed, it could be done by search and replace kind of software. What is the point? Do I miss something here?
Just curious.
Thank you. For your first question, why are your images set as float? would normally fix it.
Your second question: you should NOT do that. You should use semantically correct html, like <strong> for text you want to stress (will do the same as <b>), or <em> instead of <i>. In the CSS for your image class you can use something of the form:
Or for specific sides:
| Code: |
margin-top: 0;
margin-right: 3px;
margin-bottom: 5px;
margin-left: 3px; |
Alternatively you could use padding to achieve the same effect. The images are set as float because the template I'm using set them so 
. It uses small images for illustrating text (text flows around) and on sidebar, with the same image setting, what makes this template looks good.
I'll try "float: none" and set margins in css, but this may change look of the small images on most pages. Only few pages will have bigger images between paragraphs.
I'm thinking now: if the better way (than I already using) in html is not possible, may be it is possible to set somehow another, img2 maybe, with different properties. Or use another template at all, but I hadn't seen similar looking one in my search. You can define one new style for example .margin{ ...whatever...} and then in your existing template set double css for bigger images e.g.
| Code: |
| <img class="alignleft margin" src="sun/f2.jpg" alt="Food" /> |
Sonam | sonam wrote: |
You can define one new style for example .margin{ ...whatever...} and then in your existing template set double css for bigger images e.g.
| Code: | | <img class="alignleft margin" src="sun/f2.jpg" alt="Food" /> |
Sonam |
But instead of margin you can just set float: none; for those images.sonam:
The css part for a .margin class could be copied from existing image css part, with only margins changed, right?
Stubru Freak:
You mean, create class in css "img.alignnone" based on existing "img.alignleft" and change there float from left to none?
Thank you.
| Crinoid wrote: |
sonam:
The css part for a .margin class could be copied from existing image css part, with only margins changed, right?
Stubru Freak:
You mean, create class in css "img.alignnone" based on existing "img.alignleft" and change there float from left to none?
Thank you. |
Yes, that's what I mean.Actually you can use two class at once. For example:
| Code: |
.bold{
text-weight : bold;
}
.italic {
font-style: italic;
} |
HTML:
| Code: |
| <p class="bold italic"> Some text </p> |
Now if you put both in one html deffinition you will get bold and italic at once. Your situation: you have img deffinition. Now create one new definition for margins. Where you need (bigger images) just use both. From frist definition image will float left and from second will get margins.
You can read more here:
http://www.w3schools.com/css/css_syntax.asp
Sonam Thank you both very much! Most helpful.
Now I know what to do.
My apologies, but I stuck again.
My template's css file has Global classes: | Code: |
.alignleft {float: left;}
.alignright {float: right;} |
I added here | Code: |
| .nofloat {float: none;} |
Also it has | Code: |
#content img {
border: 1px solid #D0C5BF;
padding: 4px;
background-color: #E7E1DE;
Margin: 15px 0;}
#content img.alignleft {
display: block;
float: left;
clear: none;
margin: 5px 10px 0 0;} |
1. With only adding the global class ".nofloat", no more need in div class clear, that I used in html temporarily, but there is now too big gap above image (not below).
2. With creating | Code: |
| #content img.nofloat |
with the same parameters as for "img.alignleft", the two images in a row are no longer in one row - now each is in own row. Still the big gap between paragraph and the first image. What can I do without changing margins for paragraph? Because this will affect all pages, including problem free ones.
3. Tried to work around changing the margins not for all images, but only for those, that will be between paragraphs, by creating "img2" with different margins. This wasn't allowed by Notepad++, it became not identifiable by program code with no color indicators.
WW3 school says not much about images, only about separated by div gallery. Can you give us link to your site? I don't understand are you need to float few images in one div or you want one image in each div?
Sonam
I'm using the Peacock template, slightly modified.
My website is Define Your Reef.
The pages with images between paragraphs are not uploaded, because it will require change in css file, and this will affect already finished pages.
Clarification:
I do not need the images to float within dividers, only if it will be necessary for inserting 1-3 images in one row between paragraphs, with adjustable margins below images and above them.
I was talking about dividers in two cases:
1. WWW3 school has limited information about adjusting images, only how to make a gallery within divider. I don't think, that making few galleries on each page is the solution.
2. My temporary solution was clear all before and after each row of images, what required the use of dividers. At my level of knowledge 
.
Rephrasing my original question:
How to insert 1-3 images (in one line) between paragraphs for this template?
Margins above and below images are defined in img and p (css file). If change them for a new few pages, this will negatively affect the layout of all other pages. First of all you are make mistake in your code. You didn't close p tag after images:
| Quote: |
| <p><img class="alignleft" src="images/iXmassm2.jpg" alt="Xmas worms" /><p>This is a reefkeeping hobby website, specializing in...</p> |
Right is:
| Code: |
| <p><img class="alignleft" src="images/iXmassm2.jpg" alt="Xmas worms" /></p><p>This is a reefkeeping hobby website, specializing in diff....</p> |
Second, if you want just image in line (without text) just remove class alignleft:
| Code: |
| <img src="images/iXmassm2.jpg" alt="Xmas worms" /> |
If you want two, three images in one line just insert one by one without class and line or paragraph break:
| Code: |
| <img src="images/iXmassm2.jpg" alt="Xmas worms" /> <img src="images/some2.jpg" alt="Something2" /><img src="images/some3.jpg" alt="Something3" /> |
For all of this you don't need to change your CSS.
Sonam Thank you, I made changes. It works.
One thing is left: how to make the distance between previous paragraph and following image smaller? Without affecting the all other pages.
Your definition for paragraph is:
| Code: |
| p, ul, ol {margin: 0; padding: 0 0 18px 0;} // padding below paragraph is 18px |
You must to create one new css definition:
| Code: |
.smaller {
padding: 0 0 10px 0; // here is padding 10px
} |
Now just use class smaller in your paragraph before image:
| Code: |
<p class="smaller">Something</p>
<p>Your image here</p> |
Sonam Thank you! Really appreciate this.
Now the problem is solved.
Paragraph tag and image tags are used together to set the interval, but image tags could be used without paragraphs, right? In XHTML Transitional, I mean.
| Crinoid wrote: |
Thank you! Really appreciate this.
Now the problem is solved.
Paragraph tag and image tags are used together to set the interval, but image tags could be used without paragraphs, right? In XHTML Transitional, I mean. |
Right! I see in your code images in paragraphs and I am following this rules, but you can insert images witout paragraphs, too. 
SonamThank you!
I had seen this done in one of templates, and just used it.
