HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
need help with image size applied to class
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
astro211



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

PostPosted: Thu Oct 02, 2008 1:30 pm     need help with image size applied to class Reply with quote

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
Site Admin


Joined: 15 May 2004
Posts: 8429
Location: Castle Pines North, CO USA

PostPosted: Thu Oct 02, 2008 2:55 pm     Reply with quote



<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

PostPosted: Thu Oct 02, 2008 3:28 pm     I guess I'm not being clear Reply with quote

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: 1284

PostPosted: Thu Oct 02, 2008 4:10 pm     Reply with quote

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

PostPosted: Fri Oct 03, 2008 3:27 pm     It worked Reply with quote

Thank you very much. That worked just fine for me.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial