SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Side photo on webpage too high - how do I lower it?

    Hi,

    My website is www.bascotelodgestud.com
    On the left is a vertical photo of my stallion which has the tool bar. Unfortunately it is too high and the tagline is covered by it.
    How do I alter the height in the style html doc? I have tried but the bottom of the page only gets higher!! I can supply the CSS and HTML I have written if this helps.

    Thanks
    Sarah M

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it looks to me that you have tied #navigation and #bodycontent to the same value for "top" seeing as how you have tied it all together with an absolute positioning (something I recommend you avoid in the first place). But in that case, you can just change top:6.58em to top:150px. You don't really need to change the height for that. The Body Content will also shift down but it needs that too.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant - changed to 150px and it looks great! Would you be able to answer another question? When I scroll down to the bottom of the gallery page and the for sale page, there are loads of lines after the last photo. How do I get rid of these please

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The html is all broken on that page which is why you have hundreds of lines at the bottom. The divs haven't been closed properly and so all appear nested hence the hundreds of lines. Also the images have all the closing tags missing and you also have some closing p tags like this <p/> instead of </p>.

    Your html comments are also incorrectly formed and there must be no spaces between the dashes.

    This is correct:
    <!-- comment -->

    This is Not correct:
    <!- - comment - - >

    Run the html through the validator and it will pick all these errors up.

    Here is the code tidied up and valid.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Image Gallery - Photos of Bascote Lodge Stud's Traditional Gypsy Cobs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">
    		<div id="sitebranding">
    				<h1>Bascotelodgestud.com</h1>
    		</div>
    		<div id="tagline">
    				<p>Bascote Lodge Stud - breeders of Traditional Gypsy Cobs and 
    						home to <em>Kingmaker</em>!</p>
    		</div>
    </div>
    <!-- end of header div -->
    <div id="navigation">
    		<ul>
    				<li><a href="index.html">Home</a></li>
    				<li><a href="about.html">About Us</a></li>
    				<li><a href="contact.html">Contact Us</a></li>
    				<li><a href="for sale.html">For Sale</a></li>
    				<li><a href="gallery.html">Image Gallery</a></li>
    		</ul>
    </div>
    <!-- end of navigation div -->
    <div id="bodycontent">
    		<h2>Image Gallery</h2>
    		<p>Below are photos of some of our lovely Gypsy Cob mares,
    				foals and yearlings that we have bred over the years. Our foals 
    				are all sired by Kingmaker except for four foals born 2011
    				which are sired by Bascote Charles.</p>
    		<p> Please drop me a line if you are interested in reserving a foal <a href="mailto:sarahmorley@sarahannmorley.myzen.co.uk"> or are looking for a special pony and family friend.</a></p>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/King.jpg" width="350" height="400" />
    				<p> "Kingmaker - Traditional Piebald Gypsy Cob Stallion".</p>
    				<p>Kingmaker is the perfect Traditional Gypsy Cob! 
    						He has a small, handsome, neat head with small ears
    						and a broad chest, with a short back and wonderful 
    						rounded rump. 
    						He stands at 14hh and is heavy boned with loads of 
    						silky feather. 
    						He has a wonderful temperament which he passes on to 
    						his progeny.<span class="photocredit"> [Photographer: S. Morley] </span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Billy4.jpg" width="400" height="318" />
    				<p>"Bascote Dreams Can Come True is a two year old gelding."</p>
    				<p>He was bred by Bascote Lodge Stud and is full 
    						brother to Bascote Edward and Bascote Catherine.	
    						His dam is Uncle Henry's Mare a superb Vines bred mare 
    						and his sire is Kingmaker.
    						Billy won a large Youngstock Class at The Devon County Show, 
    						competing against 40 horses on his first outing. He is a 
    						wonderful show horse and will go to the top.<span class="photocredit"> [Photographer: Owner]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Xander.jpg" width="350" height="500" />
    				<p>"Bascote Alexander at his first show."</p>
    				<p>Xander is a yearling gelding out of The Eastwood Filly.
    						He is a wonderful liver chestnut and a stunning horse.
    						He is already being shown in Youngstock Classes by his
    						new owner.<span class="photocredit"> [Photographer: Owner]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Victoria.jpg" width="400" height="318" />
    				<p>"Bascote Victoria in the winter"</p>
    				<p>This filly is out of Henry's Filly and is a super 
    						heavy-weight star!
    						She has been sold to the U.S.A.and will mature
    						at over 15hh. Victoria is full sister to Bascote 
    						Charles and Bascote King John.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Beau and Beauty.jpg" width="400" height="400" />
    				<p>"Bob's Beau, one of our foundation mares".</p>
    				<p>Beau is by Bob The Blagdon, out of Peter Ash's 
    						Splash Mare. She stands at 14.1hh and has fantastic 
    						feather and bone.
    						Beau produces outstanding foals with stunning looks.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Isabella and Paddy2.jpg" width="500" height="400" />
    				<p>"Bascote Isabella, one of our foundation mares".</p>
    				<p>Isabella is the daughter of Bob's Beau and her 
    						sire is the grey stallion Blue Billy Boy.
    						Isabella is a stunning mare with unique colouring.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Filly and Henry.jpg" width="500" height="500" />
    				<p>"Henry's Filly is our tallest and heaviest foundation mare."</p>
    				<p>Her sire is Pablo. Filly throws very heavy-boned foals
    						and is dam of Bascote King John and Bascote Henry.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Bobbi and April2.jpg" width="400" height="500" />
    				<p>"Bobbi is a foundation mare by Bob the Blagdon."</p>
    				<p>Bobbi has the most wonderful temperament. 
    						She stands at 14.1hh and her gorgeous 2011 filly foal 
    						April is already SOLD.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Woody2.jpg" width="400" height="500" />
    				<p>"The Eastwood Filly, a superb piebald mare."</p>
    				<p>This mare produces stunning foals! Her sire is
    						Bob the Blagdon and her dam The Eastwood
    						Mare. Her foals are all heavy and beautifully marked.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Mary and Teddy.jpg" width="500" height="450" />
    				<p>"Uncle Henrys Mare is Vines bred and it shows!." </p>
    				<p>This mare produces exquisite show cobs with 
    						stunning markings and long silky feathers and the 
    						most amazing movement. 
    						Mary stands at 14hh and is our oldest foundation mare.
    						Mary has produced Bascote Harry, Bascote Dreams Can Come True,
    						Bascote Edward and Bascote Catherine to name a few.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Farmers and Gracie1.jpg" width="480" height="500" />
    				<p>"The Farmers Mare with her foal Bascote Gracie."</p>
    				<p>This mare produces petite foals with stunning
    						markings and small neat heads. 
    						The Farmers mare is one of our smallest mares
    						and is by The Farmer stallion.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Louis.jpg" width="400" height="500" />
    				<p>"The Eastwood Mare and her foal Bascote Louis."</p>
    				<p>This mare is dam to The Eastwood Filly and
    						is a classical Traditional Gypsy Cob mare. She
    						stands at 14.1hh and is homozygous for the tobiano
    						gene.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Patch and Ryan1.jpg" width="500" height="500" />
    				<p>"Patch and her foal Bascote Ryan."</p>
    				<p>Patch is a lovely tricolour mare who stands at 13.1hh.
    						Her colt foal Bascote Ryan is by Bascote Charles
    						and he already has a huge front just like his sire.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Gem and Charlotte.jpg" width="480" height="500" />
    				<p>"Gem and her filly foal Bascote Charlotte."</p>
    				<p>Gem produces bay fillies and bay tobiano 
    						colt foals.
    						Each foal has beautiful markings and superb 
    						conformation.
    						Gem stands at 14.0hh and her foals mature 
    						to this height.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/William.jpg" width="500" height="450" />
    				<p>"Bascote William is out of The Eastwood Mare."</p>
    				<p>William is a gorgeous gelding standing at 13.2hh.
    						He has been sold to a family who will break him and
    						ride him in all disciplines.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Sophia.jpg" width="400" height="550" />
    				<p>"Bascote Sophia at 12 months old."</p>
    				<p>Sophia ia a very unusually marked tricolour 
    						filly with striking eye colouration.
    						She will mature at 14.0hh and has been sold as 
    						a potential leisure horse.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Maggie.jpg" width="400" height="500" />
    				<p>"Bascote Maggie at 14 months old."</p>
    				<p>Maggie is a stunning bright bay filly with 
    						amazing movement. 
    						Her dam is Gem and her sire Kingmaker.
    						Maggie has been sold as a show cob.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/James, 2 years.jpg" width="400" height="500" />
    				<p>"Bascote James at 2 years old."</p>
    				<p>James is out of Patch and by Kinmaker. 
    						He is a gorgeous tricolour gelding and will mature 
    						at 15.0hh. 
    						He will be riden as a leisure horse by his 
    						new owners.<span class="photocredit"> [Photographer: Owner]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Honey1.jpg" width="450" height="450" />
    				<p>"Bascote Honey, a stunning 18 month old piebald filly."</p>
    				<p>Her sire is Kingmaker and her dam the super
    						heavyweight Henry's Filly. Honey has been sold 
    						as a broodmare.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Harry5.jpg" width="450" height="450" />
    				<p>"Bascote Harry is a 14.1hh gelding out of Uncle
    						Henry's Mare."</p>
    				<p>Harry is a fantastic gelding with loads of 
    						feather, superb markings and the most laid back, 
    						sweet temperament.He is been lightly broken
    						and has 3 excellent paces. His new owners plan 
    						to show him under saddle.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Bertie.jpg" width="480" height="400" />
    				<p>"Bascote Albert is a yearling colt out of Bob's Beau." </p>
    				<p>Bertie is stunning colt with superb conformation, 
    						excellent temperament and unusual liver chestnut colouring.
    						He has been sold to a family who will break him for driving.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Matilda.jpg" width="520" height="450" />
    				<p>"Bascote Matilda at 12 months old."</p>
    				<p>Matilda is a lovely filly out of Little Patchy
    						and by Kingmaker. She will mature at 14.0hh 
    						and is destined for the show ring! 
    						Her new owners plan to show her next year.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Henry.jpg" width="450" height="400" />
    				<p>"Bascote Henry is a 18 month old colt out of Henry's Filly."</p>
    				<p>Henry is a fantastic colt with superb 
    						markings and will make 15hh.
    						He is very laid back with a gentle, sweet temperament.
    						He is has been sold to a suberb home.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    		<div class="galleryphoto"> <img alt="Horse" src="gallery/Teddy.jpg" width="450" height="400" />
    				<p>"Bascote Edward is a 18 month old yearling gelding out of 
    						Uncle Henry's Mare."</p>
    				<p>Teddy is a fantastic gelding with loads of 
    						feather, superb markings and a lovely nature.
    						Teddy has been sold to a showing home
    						and we wish him every success in the ring.<span class="photocredit"> [Photographer: S. Morley]</span></p>
    		</div>
    </div>
    <!-- end of bodycontent div -->
    </body>
    </html>
    I would have actually used a list for all those divs and you wouldn't have really need a class on every div.

    It looks like you should set the images to display:block and stop the text from starting at the edge of the image.

    Code:
    .galleryphoto img{display:block;margin:auto}
    You also need to add the correct description to the image alt attribute which you had left off.

    Lastly those images are much too big a file size. Each one is about 500k and should be more like 40k at most. Don't resize the image in the browsers but resize then in your paint package and then optimise them to a reasonable file size.

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks fantastic! Have run it through validator (what an excellent programme) and will amend the sales page. I had a very nasty virus attack my computer a short time ago - it "hid" all of my emails and photos by corrupting the index files and corrupted my web files too. Rather than re-write all of my web files I have been trying to patch them up - easier said than done!
    Once again thanks for all of your help! You are a star !

  6. #6
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Website looks great with your help - have re-done all the divs etc and looks like it did when I wrote it!
    One last thing, please, the tagline has a faded blue part on the right which I would like to remove and just have it white or green (I changed the colour to green from the navy).
    What do I need to alter in the style sheet to do this?
    Thanks Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The faded blue part is a background image here:

    Code:
    #tagline p {
        background: url("backgrounds/tagline-fade.jpg") repeat-y scroll right center #228B22;
        border-bottom: 5px solid #7DA5D8;
        border-top: 5px solid #7DA5D8;
        font-family: Georgia,Times,serif;
        font-style: italic;
        margin: 0;
        padding-bottom: 0.2em;
        padding-left: 0.8em;
        padding-top: 0.4em;
    }
    Just remove the background property or change it to a colour you like

    e.g.
    background:white;

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sarah,
    Just from a readability perspective, the navigation with Home and About Us etc is in black which is blending with the black of the horse. Makes it a bit hard to read. I probably would lighten the image in the background. At some points it's black on black.

  9. #9
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All done! Thanks Paul

  10. #10
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Yes it is hard to navigate! I will lighten the image and resave.
    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •