PDA

View Full Version : Resolved Controlling an image with CSS



greens85
Oct 14th, 2009, 04:45 PM
Hi all,

I have two images, displayed in the html like so:


<img src="images/quote_top.gif" class="noborer" align="left" hspace="5" vspace=""/>
<img src="images/quote.gif" class="noborder" align="right" hspace="5" vspace="0"/>

They look how I want them to, but unfortunatley they page doesnt validate... how can i position these images with valid html or css?

The page is:

www.educationvacancies.com/employers.php

tspek
Oct 14th, 2009, 04:58 PM
Add
alt="description of file"

greens85
Oct 14th, 2009, 05:13 PM
Add
alt="description of file"

Ah forgot to add an alt and title, but it still wont validate as it doesnt like align="" or vspace=""... but I cant get it to look the same without using them :(

SB65
Oct 14th, 2009, 05:19 PM
hspace and vspace are deprecated and not valid for strict doctypes.

You are much better off positioning your images with margins instead.

greens85
Oct 14th, 2009, 05:34 PM
hspace and vspace are deprecated and not valid for strict doctypes.

You are much better off positioning your images with margins instead.

SB65, yeah thats the problem... but what I' saying is, I can achieve the same look with CSS, as if i remove the align="right", both images go to the left, the if i put a margin left on... it starts knocking the text out of place & generally causing all sorts of problem...

Is there not an alternative to align="right" for an image, in CSS?

SB65
Oct 14th, 2009, 05:45 PM
Well, you could apply the styling just to the image, not to the text as well.

If your images are inline, text-align:right will have the same effect as align:right.

I can't see the images on your page - so can't comment in more detail.

greens85
Oct 14th, 2009, 05:47 PM
Well, you could apply the styling just to the image, not to the text as well.

If your images are inline, text-align:right will have the same effect as align:right.

I can't see the images on your page - so can't comment in more detail.

Them images are here:

http://www.educationvacancies.com/jobseekers.php

near the bottom of the page (bright green quotation marks).. it will only look how intended in IE though, as obviously the code isnt valid, so displays incorrectly in FF.

SB65
Oct 14th, 2009, 06:17 PM
OK, well it doesn't look quite right in IE either as the text goes over the bottom quote. I changed the html as follows:


<div class="forumcontent">
<br/>

<img align="" title="" alt="" class="topquote" src="images/quote_top.gif"/>

<p><span class="bold"><a href="http://www.educationstaff.co.uk/education-jobs/viewtopic.php?f=6&amp;t=2508">Re: Pay!!!!</a></span>
<br/><br/>1255525065</p><p>
Hi

Ive just started as a cover supervisor at a school in Milton Keynes. my wages(!!!) for a 32.5 hr week 38weeks per year are 12,909. which by your accounts is good!!! i've struggled since recieving my first pay cheque to accept that i am expected to deliver a professional job, with NO training, and then to plug any gaps the 'leaders' deem suitable for me and my 3 colleagues. These include admin - i am not an office worker! - they would not place an administrator in front of a class of 30 kids and expect them to take the lesson! also includes taking displays down - which we were informed by the secretary that 'the naughty kids usually do that'! my point of issue is that on the money we are paid as Cover Supervisors (which i accept as i want ot do the job) but i do not accept that my time when not covering is there for my employers to use as and how it suits them...i am now in conflict with my 'team leaders' as i am being expected to undertake senior management roles in 'learning walks'. and on my unliveable wage i am not prepared to offer the school flexibility!!

i feel very bitter at the lack of liveable wage for the return of a professional role and have looked into other employment routes - agencies provide cover supervisors between 85-100 per day! a bit of a difference!!! <a href="http://www.educationstaff.co.uk/education-jobs/viewtopic.php?f=6&amp;t=2508">Read the full thread...</a>
<br/>
<br/>
If you have seen an offensive or unsuitable post, please <a href="contact.php">report it to us</a>.
<br/>
<br/>
<a href="http://www.educationstaff.co.uk/education-jobs/index.php">Visit the Education Staff forum</a>

</p>
<img align="" title="" alt="" class="bottomquote" src="images/quote.gif"/>
</div>

This takes the images outside the p tag so we can style them separately. I ditched the div that was in there as well.

I added:


.forumcontent p {
margin-left:15%;
width:70%;
}/*offset the text to give a space for the top quote and set the width to give a space for the bottom quote*/

.topquote {
float:left;
}/* allows the image to float alongside the text*/

.forumcontent{
position:relative}/*sets the start point for absolute positioning*/


.bottomquote {
bottom:10px;
position:absolute;
right:10px;
}/* shift it in a bit from the bottom right of the div. Also need to remove existing margin-top*/



Then your bottom quote will always be at the bottom no matter how long the text is. Looks fine in FF, haven't checked it in anything else.

greens85
Oct 14th, 2009, 06:50 PM
Thanks SB65...

thats done it.

Your help is much appreciated!