...

View Full Version : Avatar, message



cooly291
02-18-2005, 09:38 PM
ok, on my site, I have made like little circular acatars for the staff to put by there message they type, but I have a problem coding it. I want the message to appear on the left hand side, completely alone, then the message is on the right hand sign, like so:


http://img.photobucket.com/albums/v486/cooly291/Untitled-3.gif


I want the image to stay in the middle of the news (side)
amy suggestions?

mcdougals4all
02-18-2005, 09:44 PM
How about your code?

cooly291
02-18-2005, 09:47 PM
what do you mean? I made that image in photoshop, I didn't cap it from the website.

mcdougals4all
02-18-2005, 10:02 PM
I have made like little circular acatars for the staff to put by there message they type, but I have a problem coding it

Are you asking how to recreate your image in HTML? You'll have to explain further...

cooly291
02-18-2005, 10:04 PM
yes, I would like to have code to do, yes recreate it in HTML, sorry.

mcdougals4all
02-18-2005, 10:11 PM
<img src="avatar.gif" alt="Alternate text" style="float:left;" />

<p>
Message
</p>


Try this for more http://css.maxdesign.com.au/floatutorial/

cooly291
02-18-2005, 10:12 PM
thanks a lot!!!

mcdougals4all
02-18-2005, 10:19 PM
:thumbsup: No problem.

Just keep in mind, you'll get better and quicker reponses if you're clear about your question.

rmedek
02-18-2005, 10:29 PM
I tried messing with this and so far I can't figure out a way to get his avatar vertically centered on the left, though. The plain float is soon cleared by the text.

Any ideas?

chilipie
02-19-2005, 09:53 AM
Maybe this? (Pretend that the avatar is 100px*100px.)


div.container {
width: 400px;
}

div.avatar {
float: left;
width: 100px;
}

div.avatar img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}

div.message {
float: right;
width: 300px;
}

.....

<div class="container">

<div class="avatar">

<img src="avatar.gif" alt="Alt. Text" />

</div>

<div class="message">

<p>Here is your message, make it as long as you like.</p>

</div>

</div>

rmedek
02-19-2005, 11:01 AM
Yep, that works, but I guess I should have said I was trying to keep everything in one div...

Actually it'd be better if it wasn't in one div, so you could use a <dl> or something to markup comments... hmmmmmm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum