Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Help with CSS  >  Thread
Search  
  
  Advanced Search
   
 
help with images
 
Terry_Wilcher
Posted: 24 January 2006 11:41 PM   [ Ignore ]
Newbie
Rank
Total Posts:  12
Joined  2006-01-19

Hi

I have had to put some of my images in a table,, defeats the purpose of css I would have thought, but because of my lack of knowledge in it so far and wanted to experiment, I thought what I had done was better then nothing..

I was wondeing if someone can point me in the right direction and show me how do it properly

http://www.terrywilcher.com is the address

Terry

Profile
 
 
mike
Posted: 25 January 2006 07:21 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

Well when it comes to formatting your content using CSS, there is no “proper” way to do this, but there are plenty of best practices.  You can try this:

First, remove the table, and have all of your images in code, similar to this:

<a href="#"><img src="pic.gif" alt="" /></a>
<a href="#"><img src="pic.gif" alt="" /></a>

<a href="#"><img src="pic.gif" alt="" /></a>
<a href="#"><img src="pic.gif" alt="" /></a> 

Wrap those images in a div tag, with an ID attribute of whatever you choose. And also seperate those image “rows” with a <hr > tag.

<div id="portfolio">
<a href="#"><img src="pic.gif" alt="" /></a>
<a href="#"><img src="pic.gif" alt="" /></a>
<hr />
<a href="#"><img src="pic.gif" alt="" /></a>
<a href="#"><img src="pic.gif" alt="" /></a>
</div> 

Now inside your CSS, select the div tag, the graphics, and make the <hr > tag invisible.

#portfolio img { 
padding:1em; float:left; text-align:center; 
}

#portfolio hr { 
clear:both; width:450px; text-align:left; 
visibility:hidden; 
} 

I hope this helps you somewhat.

Profile
 
 
Terry_Wilcher
Posted: 26 January 2006 03:55 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  12
Joined  2006-01-19

Hi

I have tried that and I can understand it and all it did was throw it all out of wack, seems a huge hurdle when u have no idea what I am doing….

Maybe you could show me in the form of the coding

.(JavaScript must be enabled to view this email address) in my email

Terry

Profile
 
 
mike
Posted: 26 January 2006 05:13 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

Show me the URL to your test page, or the page you tried to code it in, and I’ll show you how to fix it.

Profile
 
 
Terry_Wilcher
Posted: 26 January 2006 10:58 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  12
Joined  2006-01-19

Hi Mike

I have posted it to this address. http://www.terrywilcher.com/test.html

Its probably something stupid I have done

Really appreciate your assistance

Terry

Profile
 
 
mike
Posted: 27 January 2006 04:15 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

First of all, I want to say thats a nice looking layout.  A couple of things I didnt take into account for your particular layout. 

On line 87 of your CSS file, remove this:

</style>
<style type="text/css"> 

Thats HTML code, and it doesn’t belong in a external CSS file. Also, change the CSS code I gave you to look like this. There were a few properties which you don’t need.

#portfolio { width:500px; }

#portfolio img { 
padding:1em; float:left; 
}

#portfolio hr { 
visibility:hidden; 
} 

And be sure to use an opening <html> tag!  I know this is merely a test page, but its always a good idea to make sure your page has valid code, so it renders in standards mode, even if it is a test.
http://validator.w3.org/

Profile
 
 
Terry_Wilcher
Posted: 28 January 2006 10:10 AM   [ Ignore ]   [ # 6 ]
Newbie
Rank
Total Posts:  12
Joined  2006-01-19

Hi

I have done as you said, and I have another issue now…

The gallery looks right but the Footer is now out of place…

Terry

Profile
 
 
mike
Posted: 30 January 2006 05:00 PM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

Show the URL please.

Profile
 
 
Terry_Wilcher
Posted: 30 January 2006 08:04 PM   [ Ignore ]   [ # 8 ]
Newbie
Rank
Total Posts:  12
Joined  2006-01-19

hi

http://www.terrywiler.com/portfolio.html

Regards

Terry

Profile
 
 
mike
Posted: 30 January 2006 08:13 PM   [ Ignore ]   [ # 9 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

I assume you mean its only out of place for firefox.  If thats the case, add this in your CSS:

html>body #footer { width:520px; } 

Other than that, it all looks fine to me.

May want to change #footer { margin:0; } to #footer { margin:10px auto 0 auto; } but thats a minor adjustment.

Profile
 
 
   
 
 
‹‹ Vertical-Align has not effect for my tab menu      centering a css page ››