Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: Avatar, message

  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Avatar, message

    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:





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

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about your code?
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what do you mean? I made that image in photoshop, I didn't cap it from the website.

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, I would like to have code to do, yes recreate it in HTML, sorry.

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <img src="avatar.gif" alt="Alternate text" style="float:left;"  />
    
    <p>
      Message
    </p>
    Try this for more http://css.maxdesign.com.au/floatutorial/
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #7
    New Coder
    Join Date
    Jan 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a lot!!!

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem.

    Just keep in mind, you'll get better and quicker reponses if you're clear about your question.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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?

  • #10
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe this? (Pretend that the avatar is 100px*100px.)
    Code:
    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>

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •