Positioning Graphics

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning Graphics

updoc101

2:21 pm on Jun 8, 2004 (gmt 0)

On my index page I have a jpg that rotates to a new picture each time the page is refreshed <snip>. The problem that I am having is that I cant get the picture to move to the right side of the cell. I built the site in Dreamweaver using css and have tried all of the align right stuff that is built into it and have tried to position it using css but nothing will make it move. I am relativly new to web design and css and am self taught. Can someone please advise? Thanks in advance for any help.
Mark

[edited by: SuzyUK at 3:11 pm (utc) on June 8, 2004]
[edit reason] removed specifics [/edit]

jetboy_70

2:31 pm on Jun 8, 2004 (gmt 0)

How about:

.rightfloat {float: right;}

<img class="rightfloat" ...

DrDoc

2:33 pm on Jun 8, 2004 (gmt 0)

...and Welcome to Webmaster World! :)

jetboy_70

2:36 pm on Jun 8, 2004 (gmt 0)

... and I was just constructing a huge ASCII-graphic welcome banner and you beat me to it. :(

Maybe next time ... ;)

updoc101

2:57 pm on Jun 8, 2004 (gmt 0)

Thanks so much for the quick reply. I tried what you advised but it still wont move.Here is the code:
<img class="rightfloat" src="rotate/rotate_<?=rand(1,96);?>.jpg">
and here is the css that applies:
.rotate {
border-color: #FFF4B9;
border-style: inset;
}
.rightfloat {float: right;}

I know that some of this is in PHP but the page layout itself is done in css, I dont wish to violate any of the discussion board rules. Thanks again for your help.

jetboy_70

3:06 pm on Jun 8, 2004 (gmt 0)

Okay, in isolation this does work:

<html>
<head>
<style>
.rotate {
border-color: #FFF4B9;
border-style: inset;
}
.rightfloat {float: right;}
</style>
</head>
<body>
<img class="rotate rightfloat" src="rotate/rotate_<?=rand(1,96);?>.jpg">
</body>
</html>

so it must be something else affected it. Possibly something to do with the containing element, or maybe even an error further up in you CSS.

Can you post a bit more code to put it all in context?

updoc101

3:43 pm on Jun 8, 2004 (gmt 0)

Thanks for the reply jetboy_70. Please excuse the poorly written code here, I'm almost embarrased to show it, I've only been doing this for a few months.

/* CSS Document */
a {
color: #FFF4B9;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}

a:hover {
color: #7FA7EE;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}

body, td {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000000;
}
image {
margin-left: 5px;
margin-right: 3px;
margin-top: 2px;
}

p {
color: #BABCC8;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 15px;
padding-right: 5px;
padding-top: 3px;
}

/*Top, Right, Left, and Bottom*/
.border7 {
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-top: 1px solid;
border-color: #007375;
border: thin ridge #007375;
}

.disclaim {
color:#666666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}

.img {
margin-left: 5px;
margin-right: 3px;
margin-top: 2px;
}

.rotate {
border-color: #FFF4B9;
border-style: inset;
}
.rightfloat {float: right;}

.text {
background-color: #535353;
border-color: #007375;
border-style: inset;
margin-left: 50px;
margin-right: 50px;
padding-left: 5px;
padding-right: 5px;
border: thin ridge #007375;
}

.text2 {
background-color: #535353;
border-color: #007375;
border: thin ridge #007375;
margin-left: 10px;
margin-right: 10px;
padding-left: 5px;
padding-right: 25px;
}

.text3 {
margin-left: 5px;
padding-left: 5px;
padding-right: 5px;
}

jetboy_70

3:52 pm on Jun 8, 2004 (gmt 0)

And some HTML please (and a doctype in you're using one).

updoc101

3:53 pm on Jun 8, 2004 (gmt 0)

Take a look at the page itself, if you have not already done so, refresh the page a few times to see what I am talking about.
<snip>

[edited by: DrDoc at 5:02 pm (utc) on June 8, 2004]
[edit reason] No URLs, thanks. See TOS [webmasterworld.com] [/edit]

updoc101

4:05 pm on Jun 8, 2004 (gmt 0)

Here is what i have in the head:
<style type="text/css">

</style>
<style>
.rightfloat {float: right;
border-color: #FFF4B9;
border-style: inset;
}
</style>
And this is in the <TD>
<tr>
<td width="649" height="211" colspan="2" align="center" valign="middle" class="border5">
 <p>
<SCRIPT language=JavaScript>

</SCRIPT>
<span class="style1"> �</span> One Day At A Time
<div align="justify">
<p>Our stories disclose in a general way what
we used to be like, what happened, and what we are like now. If you
have decided you want what we have and are willing to go to any length
to get it -- then you are ready to take certain steps; <a href="book/how_it_works.htm">>>></a></p>
</div>
</td>
<td width="35" align="right" valign="middle" bgcolor="#000000">
<img src="rotate/rotate_<?=rand(1,96);?>.jpg" alt="The Company" class="rightfloat"></td>
<td rowspan="2" valign="top" class="border7" id="cell"><p><a href="book/WhatDoWeDo.htm">What
does The Company do?</a></p>
<p><a href="book/is_this_for_me.htm">Is The Company for me?</a></p>
<p><a href="book/a_newcomer.htm">A Newcomer Asks</a></p>
<p><a href="articles/index.htm">Articles and Information</a></p>
<p><a href="mailto:foo@example.com?subject=Need%20Help">If You
Need Help Now</a></p>
<p><a href="book/phone.htm">Members Phone List Update</a></p>
<p><a href="articles/audio.htm">Audio Files </a></p>
<p><a href="book/resources.htm">Online Resources</a></p>
<p><a
href="http://www.mapquest.com/maps/map.adp?specifics=removed&zoom=5"
target=_blank>Find The Company<br>
<br>
<img class=img height=23
alt="Find the Company" src="images/yahoo_maps.gif" width=150
border=0></a></p>
<p>Unity - Recovery - Service</p>
</td>
</tr>

[edited by: DrDoc at 5:10 pm (utc) on June 8, 2004]
[edit reason] Removed specifics [/edit]

jetboy_70

4:25 pm on Jun 8, 2004 (gmt 0)

Nothing to do with CSS.

You're putting all your large images in a 35px width table cell. This is screwing up your layout.

It looks to me as if you've got some caching issues to deal with too, but this may just be a side-effect of the above.

[edited by: DrDoc at 5:30 pm (utc) on June 8, 2004]

updoc101

4:31 pm on Jun 8, 2004 (gmt 0)

Well, I'm not sure what happened but in Dreamweaver, i simply dragged the <td> over to the right a bit and everything seemed to fall somewhat into place. This stuff is so confusing to me sometimes. Thanks so much for your interest and your help.