but everything breaks down when I try put the content of this new layout
My hurdles are the texts under the pictures in the right section and those lines that divide each car
Hi,
I haven’t seen the image yet as it is still pending approval. Regardless, you should not expect the image format on the other page to work the same for the new page. There was no text (captions) under the images on the page you just linked to.
So, for this new layout (attached) I was going to try an unordered list?
Yes, if you need image captions then a UL would be a good choice. The UL gives you a <li> by default to nest the images in. You can also force the text to drop below the image with a <br> tag or by nesting the text in a <span> or a <p>. If you set a width on the <li> you can then set. The <p> is a block by default so it would fill the width of the <li>. If you used a span you could set display:block on it.
Now depending on whether or not the image and text needs to nest in an anchor will determine whether you use a <span>. Anchors are inline elements and you cannot nest a <p> tag in it.
View the page source on this Image Caption to see how the html is set up.
PS Is it better to wrap images in a paragraph?
Whether it is a <p> or a <div> it doesn’t really matter. I tend to use a <p> tag myself since I see an image as a means to convey a message.
The reason for doing this though is so your inline element (image) is wrapped in a block. It can cause problems if you have an inline element adjoining another block. What you don’t have to do is nest every sibling image in a block of it’s own. I noticed you wrapped every image in it’s own <p> tag in your link above. Only one <p> was really needed, even then it would only be needed if you had more block elements following those images in that right column. If not, the block level parent <div id=“carsectionright”> would be enough. It just depends on what may happen… It would also be a good idea to contain those floated images by setting overflow:hidden; on the <p>
<div id="carsectionright">
[COLOR=Blue]<p>[/COLOR]
<img src="images/Triumph_TR6_1973_6.png" alt="TR6" width="391" height="157" class="left" />
<img src="images/Triumph_TR6_1973_2_face.png" alt="TR6" width="186" height="105" class="left" />
<img src="images/Triumph_TR6_1973_7.png" alt="TR6" width="186" height="105" class="right" />
<img src="images/Triumph_TR6_1973_10_porte.png" alt="TR6" width="186" height="105" class="left" />
<img src="images/Triumph_TR6_1973_11_volant.png" alt="TR6" width="186" height="105" class="right" />
<img src="images/Triumph_TR6_1973_18_sieges.png" alt="TR6" width="186" height="105" class="left" />
<img src="images/Triumph_TR6_1973_13_sieges-2.png" alt="TR6" width="186" height="105" class="right" />
<img src="images/Triumph_TR6_1973_17.png" alt="TR6" width="391" height="187" class="left" />
[COLOR=Blue]</p>[/COLOR]
</div>
I also cleaned up that bread crumb nav a little bit. You had your double bottom border on the <li>s and then you used a negative margin to make it look like one border. You could have just floated the UL left and would shrinkwrap to the content width. Then you can just set the bottom border on the UL instead.
By doing that you can set a right padding on the li and eliminate the excessive no-break space characters.
<ul id="smallsub">
<li>NOS AUTOS CLASSIQUES [COLOR=Blue] »[/COLOR]</li>
<li>PAR MARQUE D'AUTOMOBILE [COLOR=Blue] »[/COLOR]</li>
<li id="green">TRIUMPH TR6</li>
</ul>
/* Small sub */
[B]ul#smallsub[/B] {
[COLOR=Blue]float:left;[/COLOR]
[COLOR=Blue]display:inline;/*ie6*/[/COLOR]
list-style: none;
padding: 0;
margin: 0 0 0 27px;
[COLOR=Blue]border-bottom: double #666666;[/COLOR]
}
[B]#smallsub li[/B] {
[COLOR=Blue]display:inline;[/COLOR]
[COLOR=Blue] padding: 0 .25em 3px 0;[/COLOR]
font-size: 0.8em;
}
ul#smallsub li#green {
color: #33CC33;
}
