HTML Help

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Hi, I'm trying to take my settings out of the HTML code and put it in my style sheet for the width of my images. I am not sure of the syntax for the line I need to add to my stylesheet to accomplish this. I tried using, #samples {width: 150px; height: 193px; border: 0px} But when I load it in my browser, instead of the images being displayed in a 2x2 grid like I want them, they are all overlapping each other. I have set the height of the samples_container to 450px. I appreciate the help.
I'm pasting the code from my htm file below.
<div id="samples_container">
<div id="sample1" class="samples">
<h3>Paint Ball Fun</h3>
<a href="sample1.jpg"><img src="sample1.jpg" width="150" height="193" border="0" /></a>
</div>
<div id="sample2" class="samples">
<h3>Longs Peak Memories</h3>
<a href="sample2.jpg"><img src="sample2.jpg" width="150" height="193" border="0" /></a>
</div>
<div id="sample3" class="samples">
<h3>Trick or Treat!</h3>
<a href="sample3.jpg"><img src="sample3.jpg" width="150" height="193" border="0" /></a>
</div>
<div id="sample4" class="samples">
<h3>Michael's First Concert</h3>
<a href="sample4.jpg"><img src="sample4.jpg" width="150" height="193" border="0" /></a>
</div>
</div>

Corey Bryant · Posted: Thu Oct 02, 2008 2:55 pm

<h> elements are considered block elements, so each time you put a new <h> it will start a new line.

_________________
Corey
Virtual Office Solutions | Processing Credit Cards

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

I'm sorry, I am very new to HTML and I appreciate the help.
The code is not from my stylesheet. I pasted the code from within the body of my HTML file. What I want to know is can I take out the inline attributes for the image size and set the size for all images in the samples class in my style sheet. If I can, what is the code to do this. The headings will stay with the images and that is fine. They are the headings for the images.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Code: .samples img {
width:150px;
height:193px;
border:none;
}
Should do the trick.
Go to http://www.pmob.co.uk/ about 3/4 of the way down the page gives various examples of captions for inline images.

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Thank you very much. That worked just fine for me.