CSS Help?!

[lilrichie]

Hey All.

I am trying to do some changes to my website i have done some of the CSS changes that i require but i don't know how to do the others, on http://www.richardhphotography.co.uk/gallery.html their is a small thumbnail image, how do i get a title to display under it and center it by using a CSS class?

Also on the about page i want to give links to facebook, flickr etc how do i make a CSS class to put the logos of the above down the site of the image of myself on this page http://www.richardhphotography.co.uk/about.html?

Many Thanks
Richard

 

[angelwatt]

Centering the thumbnail: text-align: center; applied to the paragraph around it.

For the logos: float: right; just like you have your image.

 

[lilrichie]

Centering the thumbnail: text-align: center; applied to the paragraph around it.

For the logos: float: right; just like you have your image.

If i have more than one thumbnail with more than one title will this still work, i was not quite sure what u ment when u said apply it to the paragraph around it tho

 

[angelwatt]

If i have more than one thumbnail with more than one title will this still work, i was not quite sure what u ment when u said apply it to the paragraph around it tho

I was just basing it on your existing HTML structure (though there's some malformed HTML, no closing > on a link before an image). You have a structure of:

<p>
<a href="..."><img ...></a>
<a href="..."></a>
<a href="..."></a>
<a href="..."></a>
</p>

There's only one paragraph, so you'll apply the above mentioned CSS to it. You may want to add a class to it to make it easier to specify a CSS selector, something like thumbs so you could use p.thumbs as the CSS selector. I don't see why the title will be an issue with your current code as I don't see it being used in any way.

 

[lilrichie]

I was just basing it on your existing HTML structure (though there's some malformed HTML, no closing > on a link before an image). You have a structure of:

<p>
<a href="..."><img ...></a>
<a href="..."></a>
<a href="..."></a>
<a href="..."></a>
</p>

There's only one paragraph, so you'll apply the above mentioned CSS to it. You may want to add a class to it to make it easier to specify a CSS selector, something like thumbs so you could use p.thumbs as the CSS selector. I don't see why the title will be an issue with your current code as I don't see it being used in any way.

I have fixed the malformed HTML, i am not really a coder so please excuse my ignorance when it comes to code, can you maybe give me an example of how i will get the title to work?

The code below all belongs to that 1 image, it only loads the top image then when you click on it the Javascrip 'lightroom' calls the other images hence the rel="lightroom"

<a href="/images/gallery/cs1_large.jpg" rel="lightbox[colour sunday]" title="Color Sunday" ><img src="/images/gallery/thumbs/cs1.jpg" border="0" class="img_gallery"></a>
<a href="/images/gallery/cs2_large.jpg" rel="lightbox[colour sunday]"></a>
<a href="/images/gallery/cs3_large.jpg" rel="lightbox[colour sunday]"></a>
<a href="/images/gallery/cs4_large.jpg" rel="lightbox[colour sunday]"></a>
<a href="/images/gallery/cs5_large.jpg" rel="lightbox[colour sunday]"></a>
<a href="/images/gallery/cs6_large.jpg" rel="lightbox[colour sunday]"></a>

I want to place a title 'Colour Sunday' under the small thumbnail and center it in the middle of that thumbnail, but i want to setup a class that will allow me to assign this style to every title i implement for each thumbnail if u get me?

Also on the about page their is the following code

<p>
<img src="images/rh.gif" alt="Richard Howell" class="img_right" />
Welcome to Richard Howell Photography, First laet me say a big thankyou for considering me for your shoot if you haven't already head over the <a href="http://richardhphotography.zenfolio.com/">gallery</a> and check out some of my previous work. 
<p>

I want to add 4 little images under the image rh.gif is this easy enough to do without messing all the text up?

Thanks
Rich