DimTim Posted April 25, 2010 Report Share Posted April 25, 2010 Hi all, I have been working on a "sort of" content management system. I don't want to use a proprietary CMS because I want only very limited functionality for absolute dummy's to use so it has to be simple in the extreme. It's a long story. I am trying to achieve positioning images using CSS but can't get it right. I have a div for the main content and want any images aligned right so text flows around it as would be achieved like this : <img src="photo.jpg" align="right"> I set up CSS like this : #content img { float: right; } That works perfectly as I intended, all images are placed correctly. However, I also want to be able to specify an image to be placed horizontally centred on a new line like this would achieve <p><div align="center"><img src="10750kitchen.jpg" width="250" height="166"></div></p> Now the problem, even though that centred image is told to centre, it is right aligned and text flowed as the other images. Is there a way to simply say "look, ignore the "float: right;" you have previously been told do this instead? Appreciate any help that can be offered. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 25, 2010 Report Share Posted April 25, 2010 Yep. You could do that with some CSS: // your image floating right #content img { float: right; } // removes the float for images that are within an element with a .center class #content .center img { float:none; } Quote Link to comment Share on other sites More sharing options...
DimTim Posted April 26, 2010 Author Report Share Posted April 26, 2010 Thanks for that Benjamin. You have confirmed that I was doing the right thing. Now becoming very confused with the whole issue though. I tried the code as you posted (which was very similar to that which I tried) but still the image which should be centered is floated right. I have also tried to float left. Obviously I am missing something but I simply cant find out what it might be. Could I trouble you some more to take a look at the code below and see if you can see any reason why it is not working. Many thanks again. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> <!-- #content { width: 800px; } #content img { float: right; } #content .piccenter img {float: none;} --> </style> </head> <body> <div id="content"> <p><img src="photo1.jpg" width="250" height="166">text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p><img src="photo2.jpg" width="250" height="166" class="piccenter"></p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 26, 2010 Report Share Posted April 26, 2010 Two things: -- This line is wrong: "#content .piccenter img {float: none;}". According to that line, you are trying to target any images within an element with a class of "piccenter". In your code, the image itself has the .piccenter class, so you'd need to change it to "#content .piccenter {float: none;}" -- With the above change in place, the image will no longer be floated... but you do need something to make it centered. The easiest way to do that is to wrap it in an element that uses "text-align:center." An example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> #content { width: 800px; background-color: red; } #content img { float: right; } #content .piccenter {float: none;} #content .center { text-align: center; } </style> </head> <body> <div id="content"> <p><img src="photo1.jpg" width="250" height="166">text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p class="center"><img src="photo2.jpg" width="250" height="166" class="piccenter"></p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
DimTim Posted April 26, 2010 Author Report Share Posted April 26, 2010 Unbelievable, Even though you were quite explicit when you corrected me, I still couldn't see that wayward "img". Is it any surprise that I spent a whole day playing with this? Guess I'm living up to my name "DimTim". I will now crawl away and sit quietly in my corner. Thanks again for your help. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 26, 2010 Report Share Posted April 26, 2010 No problem. If you struggle with an issue for a while, it's often best to take a break for a little bit. Sometimes coming back and viewing the problem from a fresh angle will help you figure it out. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.