CSS Help?!

Discussion in 'Web Design and Development' started by lilrichie, Oct 15, 2008.

  1. lilrichie macrumors regular

    Joined:
    Feb 13, 2007
    #1
    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Centering the thumbnail: text-align: center; applied to the paragraph around it.

    For the logos: float: right; just like you have your image.
     
  3. lilrichie thread starter macrumors regular

    Joined:
    Feb 13, 2007
    #3
    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
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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:

    HTML:
    <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.
     
  5. lilrichie thread starter macrumors regular

    Joined:
    Feb 13, 2007
    #5
    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"

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

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

Share This Page