7 Replies - 6443 Views - Last Post: 06 June 2011 - 11:28 AM

#1 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Opinion On A Slide Out Message Box

Posted 01 June 2011 - 02:19 PM

Looking for some input on maybe how to make this slideout box look more appealing:
Attached Image
Specifically separating the messages from one another and maybe message title styling.

Any feedback/criticism is welcome.

Thanks in advance :D

Is This A Good Question/Topic? 0
  • +

Replies To: Opinion On A Slide Out Message Box

#2 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Opinion On A Slide Out Message Box

Posted 02 June 2011 - 01:31 PM

I've updated the message box to look like this now after some feedback from a friend:

Attached Image
Was This Post Helpful? 0
  • +
  • -

#3 D.Mulroy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Opinion On A Slide Out Message Box

Posted 02 June 2011 - 02:46 PM

I'd move the posted by area below the message, it looks like a subheading where its at. Also i'd make the width of the individual messages a bit shorter its pretty close to the parent container.

This post has been edited by D.Mulroy: 02 June 2011 - 02:47 PM

Was This Post Helpful? 1
  • +
  • -

#4 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Opinion On A Slide Out Message Box

Posted 02 June 2011 - 03:09 PM

Thanks for the feedback. I've made the adjustments you suggested. I also reduced the "Posted by..." font size to 9pt instead of 10pt. It looked too big below the message text.
Was This Post Helpful? 0
  • +
  • -

#5 D.Mulroy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Opinion On A Slide Out Message Box

Posted 02 June 2011 - 04:15 PM

Can you post and updated pic?

This post has been edited by D.Mulroy: 02 June 2011 - 04:23 PM

Was This Post Helpful? 0
  • +
  • -

#6 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Opinion On A Slide Out Message Box

Posted 02 June 2011 - 05:09 PM

Here's the updated message box:

Attached Image

Ideally, I would like to get the background of each message to be white so that it stands out more but of course IE looks really stupid when it's set. The border, etc is using a fieldset with a legend and IE includes the white background in the legend portion which causes it to bleed outside the lines as seen below:

Attached Image

I tried switching it over to a rounded div and adjusting the "legend" text upwards but IE doesn't round (this is an Intranet site and the standard is IE7!).

Anyway, this will have to do for now unless someone knows of a solution.

CSS is below:

#content
{
    height: 550px;
}
#welcome
{
    height: 100%;
    padding: 10px;
    text-align: center;
    vertical-align: text-top;
    width: 100%;
}
#welcometitle
{
    text-align: center;
}
#slideout
{
    background-color: #ffbebe;
    height: 100px;
    left: -580px;
    position: absolute;
    top: 200px;
    width: 600px;
}
#slidecontent
{
    /*background: #eee;*/
    background: #f5f7ff; /*google buzz background color */
    border: 1px solid black;
    float: left;
    height: 350px;
    overflow: auto;
    width: 578px;
}
#slidecontent h3, #slidecontent p
{
    padding: 0px 10px;
}
#slidecontent fieldset
{
    background: #fff;
    margin: 0 auto;
    width: 95%;
}

#clickme
{
    background-color: #ff3333; /*dark red*/ /*background-color: #ffbebe;*/ /*light red*/ /*background-color: #66f345;*/ /*dark green*/
    background-image: url('../App_Themes/Images/messages_10x100.png');
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: right;
    height: 100px;
    position: relative;
    width: 19px;
    z-index: 1;
}
#clickme:hover
{
    background-color: #ffbebe; /*light red*/ /*background-color: #ff3333;*/ /*dark red*/ /*background-color: #cefbc3;*/ /*light green*/
}
/* Message Styles 
h3.messageTitle 
{
    font-size: 14pt;
    margin-bottom:0;   
}*/
span.messageInfo
{
    font-size:9pt;
    font-weight:bold;
    padding: 0px 10px;
}



And HTML is here:

<div id="slideout">
    <div id="slidecontent">
        <br />
        <asp:Repeater ID="messages" runat="server">
        <ItemTemplate>
        <fieldset>
        <legend><%#WebUtilities.FormProtect(DataBinder.Eval(Container.DataItem, "Title"))%></legend>
        <p><%#WebUtilities.FormProtect(DataBinder.Eval(Container.DataItem, "Body"))%></p>
        <span class="messageInfo">
            Posted by C.Fujii on <%# String.Format("{0:M/d/yyyy}", DataBinder.Eval(Container.DataItem, "EffectiveDate")) %>
        </span>
        </fieldset>
        <br />
        </ItemTemplate>
        </asp:Repeater>
    </div>
    <div id="clickme"></div>
</div>


Was This Post Helpful? 0
  • +
  • -

#7 D.Mulroy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Opinion On A Slide Out Message Box

Posted 02 June 2011 - 06:45 PM

You could always make an image the height of the title/legend that has white for the bottom half and the background color of the #slideout for the top half. then set it as the background-image of the legend and repeat it on the x axis.

This post has been edited by D.Mulroy: 02 June 2011 - 07:03 PM

Was This Post Helpful? 1
  • +
  • -

#8 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Opinion On A Slide Out Message Box

Posted 06 June 2011 - 11:28 AM

I've implemented the changes that D.Mulroy suggested. I replaced the fieldset/legend HTML for div/span containers instead and updated the CSS. The screenshots for Chrome and IE 7/8 are below:

Chrome:
Attached Image

IE 7/8:
Attached Image
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1