Jump to content

Image positioning using css


DimTim

Recommended Posts

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...