holmedwa04 Posted February 1, 2013 Share Posted February 1, 2013 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 More sharing options...
dsonesuk Posted February 1, 2013 Share Posted February 1, 2013 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 More sharing options...
holmedwa04 Posted February 1, 2013 Author Share Posted February 1, 2013 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 More sharing options...
dsonesuk Posted February 1, 2013 Share Posted February 1, 2013 They should be the same the only difference is one uses float: left the other float: right; Link to comment Share on other sites More sharing options...
holmedwa04 Posted February 1, 2013 Author Share Posted February 1, 2013 Sorry silly mistake ... I was using class left for the twittter icon etc. I've fixed this now... but is there any way of making it so that the next div doesn't appear until the end of the previous image? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 1, 2013 Share Posted February 1, 2013 That is what it should do already? each left, right div container will stack on top of each over, there height is controlled by the image and text content within it. Link to comment Share on other sites More sharing options...
holmedwa04 Posted February 1, 2013 Author Share Posted February 1, 2013 But it doesn't seem to be doing it properly... the ones with the image on the right are working correctly, and the ones with the images on the left aren't This is the link to the page: http://www.goathlandrailway.co.uk/about_us/committee.php Link to comment Share on other sites More sharing options...
dsonesuk Posted February 1, 2013 Share Posted February 1, 2013 Well it would help if the change left class to left2, that you change div.left img to div.left2 img, then it would pick up that you want to float that image left. Link to comment Share on other sites More sharing options...
holmedwa04 Posted February 2, 2013 Author Share Posted February 2, 2013 Sorry, I haven't done this for ages. Ok, I think we're getting somewhere now! 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 More sharing options...
holmedwa04 Posted February 2, 2013 Author Share Posted February 2, 2013 Scratch that last one! It's working now thanks... apart from because it is set to clear on both in appears underneath the left panel with the Twitter and YouTube icons etc. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 2, 2013 Share Posted February 2, 2013 THIS /* Left and right images */div.left img{float:left;margin:10px;} should be /* Left and right images */div.left2 img{float:left;margin:10px;} i've changed this using firebug and it works how it should. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 2, 2013 Share Posted February 2, 2013 (edited) two option give icons position absolute OR div.left2:first-child { clear: none;} or better still div.main { margin-left: 100px; overflow: hidden; padding-right: 20px; padding-top: 10px;} Edited February 2, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
holmedwa04 Posted February 2, 2013 Author Share Posted February 2, 2013 Thanks, this has done the trick! I'm really pleased with the way they are laid out now Link to comment Share on other sites More sharing options...
holmedwa04 Posted February 2, 2013 Author Share Posted February 2, 2013 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 More sharing options...
dsonesuk Posted February 3, 2013 Share Posted February 3, 2013 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 More sharing options...
holmedwa04 Posted February 3, 2013 Author Share Posted February 3, 2013 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 More sharing options...
dsonesuk Posted February 3, 2013 Share Posted February 3, 2013 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 More sharing options...
holmedwa04 Posted February 3, 2013 Author Share Posted February 3, 2013 (edited) That's fantastic, when you say older versions of IE... are we talking 6 and below? EDIT:Just done a quick 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 February 3, 2013 by holmedwa04 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now