...

View Full Version : Help, Image Positioning



Spidey-man
05-13-2007, 07:23 AM
Here is the myspace I'm currently editing. www.myspace.com/189956461

The problem is I have 4 buttons stuck on the middle of the page (home,message,add,blog) and I want them to be centered horizontally across the top of the page but I have no idea how to move them. Here's the coding I have for them. Please help.


<div align=center>

<a title="Home" alt="Home"

href="<A href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=d921fab9-c858-484a-a058-4dab9864b8bd"><img">http://home.myspace.com/index.cfm?fuseaction=user&MyToken=d921fab9-c858-484a-a058-4dab9864b8bd"><img border=0 src="<A href="http://img.photobucket.com/albums/v430/spideyman559/home.jpg"></a">http://img.photobucket.com/albums/v430/spideyman559/home.jpg"></a>

<a title="Message" alt="Message"

href="<A href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=41152795&MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img">http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=41152795&MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img border=0 src="<A href="http://img.photobucket.com/albums/v430/spideyman559/message.jpg"></a">http://img.photobucket.com/albums/v430/spideyman559/message.jpg"></a>

<a title="Add" alt="Add"

href="<A href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img">http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img border=0 src="<A href="http://img.photobucket.com/albums/v430/spideyman559/add-1.jpg"></a">http://img.photobucket.com/albums/v430/spideyman559/add-1.jpg"></a>

<a title="Blog" alt="Add"

href="<A href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img">http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img border=0 src="<A href="http://img.photobucket.com/albums/v430/spideyman559/blog.jpg"></a">http://img.photobucket.com/albums/v430/spideyman559/blog.jpg"></a>

</div>

Spidey-man
05-13-2007, 08:01 PM
bump---------

Spidey-man
05-14-2007, 05:49 AM
Help please this should be an easy thing to answer if any of you know anything about html or css..

smalldog
05-14-2007, 08:35 AM
Hi Spidey,

replace this code:


<div align=center>
<a title="Home" alt="Home"
href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=d921fab9-c858-484a-a058-4dab9864b8bd"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/home.jpg"></a>
<a title="Message" alt="Message"
href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=41152795&MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/message.jpg"></a>
<a title="Add" alt="Add"
href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/add-1.jpg"></a>
<a title="Blog" alt="Add"
href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/blog.jpg"></a>
</div>
</style>
</td>
</tr>
<tr>
<td valign="top" align="left" width="435" bgcolor="ffffff" style="word-wrap: break-word">

<span class="orangetext15">
Who I'd like to meet:</span><br>
<div class="divpic"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=41152795&albumId=0"><img src="http://img.photobucket.com/albums/v430/spideyman559/04_22_07_1948223.jpg" border="0" alt="View Pictures"></a></div>


with this code:



<div align=center style="position:absolute; top:165px;left:15%">
<a title="Home" alt="Home"
href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=d921fab9-c858-484a-a058-4dab9864b8bd"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/home.jpg"></a>
<a title="Message" alt="Message"
href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=41152795&MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/message.jpg"></a>
<a title="Add" alt="Add"
href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/add-1.jpg"></a>
<a title="Blog" alt="Add"
href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/blog.jpg"></a>
</div>
</style>
</td>
</tr>
<tr>
<td valign="top" align="left" width="435" bgcolor="ffffff" style="word-wrap: break-word">

<span class="orangetext15">
Who I'd like to meet:</span><br>
<div class="divpic" style="top:270px;"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=41152795&albumId=0"><img src="http://img.photobucket.com/albums/v430/spideyman559/04_22_07_1948223.jpg" border="0" alt="View Pictures"></a></div>

Spidey-man
05-14-2007, 10:01 AM
Thanks so much smalldog :)

smalldog
05-14-2007, 10:12 AM
I see it's not ideal in IE.. I will solve it later today Spidey ;)

Spidey-man
05-14-2007, 10:24 AM
Awesome, thanks for all your help.

Spidey-man
05-15-2007, 06:37 AM
I managed to get them on top and I got rid of the home button but the problem is they don't remain intact. They move around into different positions depending on the size of your browser window or with different resolution. Is there a way to make it so they stay centered?

smalldog
05-15-2007, 08:21 AM
Hi Spidey, basically it's a little bit hard to edit your page, because it's a strange mix of relative and absolute objects divs and tables... If you will use just relative objects (not absolute) you can center for example everything on the page with <style> body {text-align:center} </style> (and margin:0px auto; style on main div) so if you use absolute positioning you need to bet the right value in left:X% style. Here: <div align=center style="position:absolute; top:165px;left:15%"> Let's go on! :)

Spidey-man
05-15-2007, 09:51 AM
Wait ok so I'm confused, how do I make them relative? These are the codes I have set up, what should I change?



<div align=center style="position:absolute; top:175px;left:20%">
<a title="Message" alt="Message"
href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=41152795&MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/message.jpg"></a>
</style>

<div align=center style="position:absolute; top:0px;left:95%">
<a title="Add" alt="Add"
href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/add-1.jpg"></a>
</style>

<div align=center style="position:absolute; top:0px;left:105%">
<a title="Blog" alt="Blog"
href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/blog.jpg"></a>
</div>
</style></center>

<div align=center style="position:absolute; top:850px;left:-60%">
<center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input type="hidden" name="friendID" value="41152795"><textarea name="f_comments" cols="85" rows="20">Selective serotonin reuptake inhibitors.</textarea><br><br><input type="submit" value="Comment"> <input type="reset" value="Reset"></form><form </form><br></center><br><style type="text/css">textarea {background-color:000000; background-image:url(http://img.photobucket.com/albums/v430/spideyman559/bowser3.jpg); border-width:2px; border-style:solid; border-color: 33A4DE; color: 33A4DE; font-family:Arial; font-size:12} input {background-color: 000000; border-width:2px; border-style:solid; border-color: 33A4DE; color: 33A4DE; font-family:Arial;}</style><br></center><div style="position:absolute;left:0px;top: 0px;..;"></div>

<div class="divpic"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=41152795&albumId=0"><img src="http://img.photobucket.com/albums/v430/spideyman559/05_14_07_21263.jpg" border="0" alt="View Pictures"></a></div>

<div class="divname"><center>Hello there. My name is Cameron nice to meet you. Would you care to join me for a cup of tea? Splended! So first off I would like to say that I don't hate anyone, I believe all people are good at heart. Don't tell me you love me if you don't mean it. I'm the jealous type. I hate when someone has a secret and I don't know it but I'm aware of it. I love bubbles, swings, trampolines, hot cheetos, slurpies/slushies, balloons, and cheesy bread. I love the rain, I love to hear it, smell it, watch it slide down a window. It's beautiful like you. I like Spider-man, I have my whole life. I enjoy that 70's show and aqua teen hunger force. I wouldn't consider myself to be a cocky person but I have been known to be an asshole at times so I aplogize for anything I may do in the future. Sometimes I take what people say too literally and I tend to always think for the worst because the worst usually always seems to happen. But enough about me, what about you? Oh I see, well that is very intresting. I love horror movies, I love that feeling to be scared. I love to make forts. I don't use pick up lines unless i'm just joking with you, other than that I always speak through my heart. My friends make me happy, I like to be happy. Sometimes the thing in my head will tell me I can get a goodnights nights sleep. He's very generous. There is just so much about me that I can only say. You should just get to know me and make your own opinion. Maybe you could join me again for another tea party? Okay I'll see you then. <3</center></div>

<style type="text/css"> a.navbar:active, a.navbar:visited, a.navbar:link { color:33A4DE; }
a.navbar:hover { color:000000; }
body {background-color: 000000;}
table, tr, td {background:transparent;}
.divname { background-color: 33A4DE; margin-left: -250px; position: absolute; z-index: 2; height: 250px; width: 500px; left: 50%; top: 725px;border: 1px solid ; overflow: auto;}
table, tr, td {background:transparent;}
.divpic { margin-left: -150px; position: absolute; z-index: 2; height: 425px; width: 325px; left: 50%; top: 275px;border: 1px solid ; overflow: auto;} </style>

By the way it means a lot that you're helping me.

smalldog
05-15-2007, 10:14 AM
Don't change nothing.. because your code is really huge, it's not just about that posted code. Just try to set the right value for that your "img menu div" as I said ...

<div align=center style="position:absolute; top:165px;left:15%">

I will help you again.. wait for my next code.. I see that you tried to change the original code

smalldog
05-15-2007, 10:42 AM
So, now I hope it will be allright :)

Replace ALL this code:



<center><div align=center style="position:absolute; top:175px;left:20%">
<a title="Message" alt="Message"
href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=41152795&MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/message.jpg"></a>
</style>

<div align=center style="position:absolute; top:0px;left:95%">
<a title="Add" alt="Add"
href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/add-1.jpg"></a>
</style>

<div align=center style="position:absolute; top:0px;left:105%">
<a title="Blog" alt="Blog"
href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=41152795&MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/blog.jpg"></a>
</div>
</style></center>


With just this:



<div style="width:610px; margin-left: -300px; position: absolute; top: 175px; left: 50%;">
<a title="Message" alt="Message" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&amp;friendID=41152795&amp;MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img src="189956461_soubory/message.jpg" border="0"></a>&nbsp;<a title="Add" alt="Add" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&amp;friendID=41152795&amp;MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img src="189956461_soubory/add-1.jpg" border="0"></a>&nbsp;<a title="Blog" alt="Blog" href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&amp;friendID=41152795&amp;MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img src="189956461_soubory/blog.jpg" border="0"></a>
</div>


My first posted code was bad, sorry

Spidey-man
05-15-2007, 10:53 AM
Hmm now look. What do you think the problem might be?

smalldog
05-15-2007, 10:57 AM
Hard to say.. may be is this that reason in your code..

change this:


<style> body {text-align:center}

<style type="text/css">


to this



<style type="text/css">


(just remove that <style> body {text-align:center} part)

And update your new div block again with this..



<div style="width:610px; margin-left: -300px; position: absolute; top: 175px; left: 50%;">
<a title="Message" alt="Message" href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&amp;friendID=41152795&amp;MyToken=4b5c4f02-19bc-46d7-bc37-2e90db6c39dd"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/message.jpg"></a>&nbsp;<a title="Add" alt="Add" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&amp;friendID=41152795&amp;MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7d"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/add-1.jpg"></a>&nbsp;<a title="Blog" alt="Blog" href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&amp;friendID=41152795&amp;MyToken=f95541f5-5a87-4911-a181-f1b9c6837d7dML"><img border=0 src="http://img.photobucket.com/albums/v430/spideyman559/blog.jpg"></a>
</div>

Spidey-man
05-15-2007, 11:06 AM
Ok now what?

smalldog
05-15-2007, 11:07 AM
Now it's ok in Firefox.. but still not okay in IE.. try to increase that "width"value in that div style

<div style="width:610px; margin-left: -300px; position: absolute; top: 175px; left: 50%;">

for example to 615.. or so

Spidey-man
05-15-2007, 11:14 AM
Awesome it worked, now how do I get that comment box back to the center bottom of the page, just play with the top and left?

smalldog
05-15-2007, 11:24 AM
Yeah that's right.. negative left value in your comment box was that reason, now just set left:50% and play with negative value of margin-left.. i bet about margin-left:-235px;

Spidey-man
05-15-2007, 11:31 AM
Sweet man :thumbsup:
I can't thank you enough for all of your help! :D

smalldog
05-15-2007, 11:36 AM
:) have a good time Spidey



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum