Label text wrapping, expanding my header

[NickThissen]

Hi,

I have a couple of labels in the header of my master page. One of these displays the game-server that the user is currently connected to (the website controls the gameserver).

The name of the gameservers can be longer than the room I gave them in the header. When this happens, the text wraps around (this is good!), and any elements underneath this label shift down (this is wrong!).

Here is how it looks when not connected, so that the labels that show the name and IP of the server are hidden:


After connecting, the labels are shown but the text is slightly too large and wraps around, causing the two links underneath to shift. The header becomes larger than it should be and a blank strip results (where the header background image stops):



The relevant ASPX code:

<div class="header">
 
            <div class="server">
               <h2><asp:Label runat="server" ID="lblServer" Text="Connected to:" /></h2>
               <h1><asp:Label runat="server" ID="lblHostname" Text="Tigers 1 - TDM" /></h1>
               <h3><asp:Label runat="server" ID="lblIp" Text="(192.158.29.11:3074)" /></h3>
               <br />
               <h4><asp:Hyperlink runat="server" ID="lnkServers" Text="View Servers" NavigateUrl="~/Servers.aspx"/></h4>
               <h5><asp:LinkButton runat="server" ID="lnkDisconnect" Text="Disconnect" onclick="lnkDisconnect_Click" /></h5>
            </div>
           
           <div class="title">
                <h1>Black Ops</h1>
                <h2>WebCon</h2>
           </div>
 
           <!-- Login display div omitted -->
            
        </div>
 
        <div class="clear hideSkiplink">
 
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Players.aspx" Text="Player List"/>
                        <asp:MenuItem NavigateUrl="~/Players.aspx" Text="Map & Playlist Rotation"/>
                        <asp:MenuItem NavigateUrl="~/Players.aspx" Text="Server Settings"/>
                        <asp:MenuItem NavigateUrl="~/Players.aspx" Text="Messages"/>
                        <asp:MenuItem NavigateUrl="~/Players.aspx" Text="Console"/>
                    </Items>
                </asp:Menu>
 
        </div>

The relevant CSS is this (it's a bit of a mess, sorry..):

/* TAB MENU   
----------------------------------------------------------*/
 
div.hideSkiplink
{
    background: url('../Images/menu_bg.jpg');
    width:100%;
    height: 62px;
}
 
div.menu
{
    padding: 18px 0px 0px 18px;
    width: 940px;
    height: 35px;
    font-size: 1.0em;
}
 
div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}
 
div.menu ul li a, div.menu ul li a:visited
{
    color: #ffffff;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}
 
div.menu ul li a:hover
{
    color: #00ff00;
    text-decoration: none;
}
 
div.menu ul li a:active
{
    text-decoration: none;
}
 
/* MISC  
----------------------------------------------------------*/
 
.clear
{
    clear: both;
}
 
.title
{
    padding-left: 50px;
    display: block;
    float: left;
    text-align: left;
}
 
.title h1
{
    font-size: xx-large;
    text-align: left;
}
 
.title h2
{
    padding: 0px 0px 0px 80px;
    font-size: xx-large;
}
 
/* DIV that displays the 'Connected to' label, server name & ip and two links */
.server
{
    padding: 15px 0px 0px 22px;
    display: block;
    float: left;
    text-align: left;
    width: 270px;
    font-variant: normal;
    font-weight: bold;
}
 
.server h1, h2, h3, h4, h5
{
    font-size: large;
    color: #ffffff;
    text-align: left;
    margin-bottom: 0px;
    font-weight: bold;
    font-variant: normal;
    white-space: nowrap;
}
 
/* h1 is for the server name */
/* h3 is for the IP */
.server h1, h3
{
    padding-left: 15px;
}
 
/* h2 is for the 'Connected to' label */
.server h2
{
    font-size: 1.2em;
    font-weight: normal;
}
 
.server h3
{
    font-size: 1.0em;
    margin-top: 0px;
}
 
/* h4 is for the 'View servers' link */
/* h5 is for the 'Disconnect' link */
.server h4, h5
{
    margin-top: 14px;
    font-size: 1.2em;
    float: left;    
}
 
.server h5
{
    float: right;
}

My question really is: how do I handle this?

When the server name is longer than the 'server' div (basically the black box) I want it to wrap around (otherwise most servers wouldn't fit). But if the server name is REALLY long it might wrap around 3 of 4 times in which case there would be no room for the links underneath...

Can i possibly limit the amount of wrapping so that it only wraps once? When it is longer still it should just cut off (or display some ellipsis " ..." if that's possible), or even just spill into the rest of the header (rather not..)


In each case, when the label does wrap, how do I stop the other elements underneath from being pushed down? The two links should remain on the same spot really, they shouldn't move down when the label turns out larger.


I hope I'm making myself clear. I'm really a CSS noob, the CSS I have now is mostly hacked together from various sources and I just kept trying until I got something that I liked...

Thanks!

[gep13]

Hello,

A technique that you can use when you do this would be to do something like this...

i.e. when you have "A really long title", you could truncate this to "A really long....". Then, in the tooltip for the label, you could have the complete name.

Gary