Jump to content

Image Posistioning


holmedwa04

Recommended Posts

Hi All I am creating a website for my local dive club and I am struggling to position the images on a page correctly. On the committee page I would like to be able to position the text for one member on the left and their image on the right. Then for the next committee member the opposite way around. Now I can think of a really simple way of doing this using tables but I understand that you aren't really supposed to use tables for positioning things and I am trying to get my head around how to use divs correctly. I am sure it is just some really simple code that needs changing. This is the CSS that I am using:

/* Left and right images */div.left img{float:left;}div.right img{float:right;}div.left {width:100%px;display:block;text-align:justify;}div.right {width:100%;display:block;text-align:justify;}

Then this is the HTML:

<div class="main"><h1>The Committee</h1> <div class="left"><h2>David Lymer - Chairman</h2><img src="images/Roland Smith.jpg" width="320" height="240"><p>Donec nisi elit, semper sed luctus vel, porta eu ligula. Vestibulum eget nisi sit amet felis pharetra mattis nec ac ligula. Mauris erat neque, congue non adipiscing at, blandit nec massa. Donec interdum dui ac dui bibendum mattis. Integer pretium ultricies ligula sed tincidunt. Curabitur porttitor pretium laoreet. Aenean viverra libero id erat rhoncus pellentesque. Cras sed turpis vitae sem pretium pulvinar. Suspendisse ac libero sed sapien lacinia suscipit ut non diam. Etiam sit amet diam justo, ac dictum felis. Aenean condimentum rutrum libero, eu varius elit dapibus nec. Donec a nunc in ipsum hendrerit ultricies eu sit amet ipsum.</p></div><div class="right"><h2>Maggie Surrage - Diving Officer</h2><img src="images/Maggie Surrage.jpg" width="320" height="240"><p>Maggie first learnt to dive on holiday in Tobago, but after joining Stafford BSAC in 1995 she became hooked on UK diving. She is an Advanced Diver, an Open Water Instructor and Trimix qualified. She has recently become a re-breather diver.</p><p>She is a keen wreck diver and her favourite sites include; Salsette (Lyme Regis), Somali (Seahouses) and U12 (Eyemouth).</p><p>She also enjoys diving with the seals off the Farne Islands, scenic sites such as Hand Deeps (Plymouth) and scalloping.</p></div><div class="left"><img src="images/Sebastien Danneels.jpg" width="320" height="240"><h2>Sébastien Danneels - Training Officer</h2><p>Seb learnt to dive in France in the early 1990’s whilst at University. He then crossed the channel and also to BSAC in the late 1990’s. He enjoyed diving as a Sports Diver for 10 years and in 2009, he qualified as Dive Leader and became an Open Water Instructor in 2011.</p><p>His favourite UK dive sites include; James Eagle Lane (Plymouth), Kyarra (Swanage), Shuna (Oban) and Dresden (Scapa Flow).</p><p>His favourite international dive sites include; Similan Islands (Thailand), Speyside (Tobago), Tioman Island (Malaysia) and Marsa Shagra (Red Sea).</p><p>Seb is happy with any type of diving, as being underwater makes him happy. He very much enjoys coxing the club’s RHIB.</p></div></div><!-- end .main -->

Any help would be greatly appreciated. Looking forward to hearing from someone :) Kind Regards Edward

Link to comment
Share on other sites

you have to use clear both, or left right containers will try to merge, for the header to be left or right of image, place the image at top, followed by header and the paragraph text.

/* Left and right images */div.left img{float:left;margin:10px;}div.right img{float:right;margin:10px;}div.left {/*width:100px;display:block;*/text-align:justify;clear: both;}div.right {/*width:100%;display:block;*/text-align:justify;clear: both;}

Link to comment
Share on other sites

Hi Dsonesuk Thanks for your quick reply, I presume I can remove the commented CSS now? I've tried the CSS you suggest and it works great for images on the right but not when the image is on the left. The heading for each person should always be on the left above the image or text. I have rectified this in the code now and reuploaded it. Kind Regards Edward

Link to comment
Share on other sites

:facepalm: Sorry, I haven't done this for ages. Ok, I think we're getting somewhere now! :good: The ones with the images on the left seem to be picking up the normal image styling which is to center the image, but the ones on the right aren't?
Link to comment
Share on other sites

I'm currently working on an image gallery for the website and I can't seem to get the images centered. There is a div called gallery which contains all of the images... it is dynamically changing the number of images it displays in a line which is what I want but... it isn't centering them despite using this in the CSS:

#gallery {width:auto;margin:auto;}

This is a link to the gallery:http://www.goathlandrailway.co.uk/gallery/2010/index.php Any help would be much appreciated. Kind Regards Edward

Link to comment
Share on other sites

To centre using margin: auto; the width must be a fixed width to a size that would for example accommodate the totatal number of image gallery links.

#gallery {	margin-bottom: auto;	margin-left: auto;	margin-right: auto;	margin-top: auto;	width: 1125px;}

OR use this method which is used to centre floated menus.

#gallery {	float: left;	left: 50%;/* added by dsonesuk*/    /*margin-bottom: auto;	margin-left: auto;	margin-right: auto;	margin-top: auto;*/	position: relative;/* added by dsonesuk*/   /* width: auto;*/} #gallery .holder {	background-image: url("/images/polaroid.png");	float: left;	height: 250px;	left: -50%;/* added by dsonesuk*/	position: relative;/* added by dsonesuk*/	width: 225px;}

Link to comment
Share on other sites

Hi Dsonesuk Thanks, this seems to work when the page is full size but as soon as it is shrunk down it causes them to go back to left align... also I notice that the top menu now disappears under the image gallery for some reason? Kind Regards Ed

Link to comment
Share on other sites

The other option is to use display: inline-block; older versions of IE don't support this however.

#gallery {   /* margin-bottom: auto;	margin-left: auto;	margin-right: auto;	margin-top: auto;*/	text-align: center;    /*width: auto;*/} #gallery .holder {	background-image: url("/images/polaroid.png");	display: inline-block;  /*  float: left;*/	height: 250px;	width: 225px;}

Link to comment
Share on other sites

That's fantastic, when you say older versions of IE... are we talking 6 and below? EDIT:Just done a quick :google_lt: and found this really cool website: http://caniuse.com/inline-block which I thought was really neat. I know the W3Schools site has info on this too but it doesn't display it in as much detail and thought people might be interested in it? Kind Regards Ed

Edited by holmedwa04
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...