Avatar in navigation bar...urgh!

[bai]

So I've gotten the basic code done.......well...not "done".

Cause THIS happens (on the right):



I'm not sure what to do with the CSS and HTML to make it all form on one line, and within the parameters of the nav bar at all. I tried "margin" code like I did for the actual nav links but to no avail...

Here's my code right now..

HTML
<div id="welcome">
{if $[current_user.is_member]}
                                           $[current_user.name] $[current_user.avatar_quote] $[logout_link]
                                           {else}
                                           Hello Newb! Guest
                                          {if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}

{/if}
</div>

CSS
/* Welcome Text / Login / Logout Links */
@welcome_text_color: #000000;
@welcome_text_font: 1em "Trebuchet MS", Verdana, Arial;
@welcome_text_shadow: none;
@welcome_links_color: #000000;
@welcome_links_font: @welcome_text_font;
@welcome_links_decoration: underline;
@welcome_links_shadow: @welcome_text_shadow;
#welcome { text-align: right; color: @welcome_text_color; font: @welcome_text_font; text-shadow: @welcome_text_shadow; float: right; vertical-align: middle; line-height: 31px !important; margin-bottom: -10px;}
#welcome a { color: @welcome_links_color; text-decoration: @welcome_links_decoration; text-shadow: @welcome_links_shadow; font: @welcome_links_font; }


I figured it would probably be best to make the different elements part of separate classes, but I wasn't sure..

Any help would be much appreciated.

[Brian]

Hi, bai.

Any of the template variables that produce an avatar generate a <div> which is a block-level element. Block-level elements start on a new line and take up the entirety of that line by default.

The easiest solution to this issue will be to use the float CSS property to force the avatar to the left, then add a margin to the right of the avatar so it's not hugging the welcome text.

#welcome .avatar-wrapper {
     float: left;
     margin-right: 5px;
}

[bai]

Feb 16, 2018 10:46:16 GMT -8 Brian said:

Hi, bai .

Any of the template variables that produce an avatar generate a <div> which is a block-level element. Block-level elements start on a new line and take up the entirety of that line by default.

The easiest solution to this issue will be to use the float CSS property to force the avatar to the left, then add a margin to the right of the avatar so it's not hugging the welcome text.

#welcome .avatar-wrapper {
     float: left;
     margin-right: 5px;
}

 this is watermelon!!!