Re: [Bodington-developers] Top frame styling improvement

[Antony C. <an...@sm...>]

On 20 Jun 2006, at 13:23, Jon Maber wrote:

> Antony Corfield wrote:
>> Thanks John we were about to crop title text in top frame.
> Do you mean output less text from the template?
Yes I did but will test your updates... is this a move to css files!
> The styling should make that unnecessary - the full space will be used 
> and any extra text will be cropped at the bottom of the div.
>> Have also moved search to LHS frame and other links from top div to 
>> 'login' div. Have you committed these files?
>>
> My user ID doesn't have access to the CVS so I can't commit.
>
> I've attached another set of versions to this Email because I got I.E. 
> 6 working in a Windows emulator and there were problems. At the same 
> time I changed the way styling adapts to the thinner top frame used 
> with PDAs. Now the normal css file is always included and a very small 
> css file is added to the HTML if the slim line top frame has been 
> selected. This makes it much easier to maintain the CSS.
>
> Jon
>
>
>
>
> #NavigationContainer {
>     /* frame is fixed height so this must be fixed height */
>     height:24px;
> }
>
> #Search{
>     height:0px;
> }
>
> #SearchKeywords{
>     height:0px;
> }
> #SearchSubmit{
>     height:0px;
> }
>
> #LoggedOnContainer{
>     /* Fixed height to make sure border is visible */
>     height: 15px;
> }
>
> .Title {
>     /* Title is put in a fixed height box so the layout manager
>        knows where the middle is.
>     */
>     height:22px;
> }
>   preference.navigation.illustrations        stylesheet     small   
> preference.navigation.nav_bar_height small  big
>   linkout
>
>         Options    notifyswitch  Options   Advanced Search
>   title
>  hidden   preference.navigation.illustrations    <image.tiff>   
> <image.tiff>    EEEE, d MMM yyyy       You are logged in as:    
> nameofuser
>  body {
>     /* ensure sub blocks touch edges of frame */
>     margin: 0px;
> }
>
>
> #NavigationContainer {
>     /* frame is fixed height so this must be fixed height */
>     height:46px;
>     /* prevents colour preferences from working - bad thing */
>     background-color: #EEEEEE;
>     /* at least it makes sure that there is always a high contrast */
>     color: black;
>     /* thin rule across bottom of box separates it from lower box */
>     border-bottom:1px solid #aaaaaa;
>     /* if the user increases text size it will be cropped within the 
> 46px height */
>     overflow: hidden;
> }
>
> #NavigationContainer :link {
> 	color: blue;
> }
>
> #NavigationContainer :visited {
> 	color: purple;
> }
>
> #Icon{
>      /* does this really need properties? */
> }
>
>
> #Link{
>     /* This box has the search and command sub boxes and floats on the 
> right  */
>     /* It has to float to allow the title text to flow in the middle   
>        */
>     float:right;
>     text-align: right;
>     padding: 0px 15px 0px 0px;
>     margin: 0px 0px 0px 0px;
> }
>
> #Search{
>     /* makes sure anything that creeps out of box is clipped  */
>     overflow: hidden;
>     /* container box has fixed height so this must too       */
>     height: 18px;
>     width: 250px;
>     padding: 0px 0px 0px 0px;
>     margin: 0px 0px 0px 0px;
> }
>
>
> #Search form{
>     /* This is a bit of a bodge to make sure that the form element
>        doesnt add extra space and push the input elements downwards    
>   */
>     font-size: 0px;
>     margin: 0px 0px 0px 0px;
>     padding: 0px 0px 0px 0px;
> }
>
>
> #SearchKeywords{
>     /* The text input has fixed dimensions and fixed font size because
>        it has to fit in a fixed height box. However, in Firefox there 
> is
>        no such thing as a fixed font size so it goes out of whack on 
> big
>        text sizes.
>     */
>     font-size: 9px;
>     height:18px;
>     width:150px;
>     margin: 0px 0px 0px 0px;
>     padding: 0px 0px 0px 0px;
> }
> #SearchSubmit{
>     /* Same considerations for button input */
>     font-size: 9px;
>     height:18px;
>     margin: 0px 0px 0px 0px;
>     padding: 0px 0px 0px 0px;
> }
>
> #Commands{
>     /* There is space for the text to enlarge so a relative font size
>        is specified.
>     */
>     font-size: 75%;
>     text-align: right;
>     padding: 0px 0px 0px 0px;
>     margin: 0px 0px 0px 0px;
> }
>
> #LoggedOnContainer{
>     /* This is the other main box. It doesnt matter if contents spill
>        out of the bottom edge because that will be clipped by the frame
>     */
>     background-color: #ffffff;
>     color: black;
>     margin: 0px 0px 0px 0px;
>     padding: 0px 0px 0px 0px;
>     /* Fixed height to make sure border is visible */
>     height: 19px;
>     width:100%;
>     border-bottom: 1px solid #aaaaaa;
> }
>
> #LoggedOnContainer :link {
> 	color: blue;
> }
>
> #LoggedOnContainer :visited {
> 	color: purple;
> }
>
> #toggleLeftFrame img{
> 	margin: 2px 0 0 2px;
> }
>
> .Text {
>     font-family: Verdana, Arial Unicode MS, Helvetica, sans-serif;
>     font-size:0.70em;
> }
>
> .Title {
>     /* Title is put in a fixed height box so the layout manager
>        knows where the middle is.
>     */
>     height:44px;
>     /* A table cell treats the vertical align differently */
>     display: table-cell;
>     /* A single line of text goes in the middle of the space but if 
> the title
>        wraps to two lines the top line shifts up. When the box is 
> filled it
>        aligns at the top.
>     */
>     vertical-align: middle;
>     font-size: 100%;
>     font-weight:bold;
>     padding: 0px 0px 0px 8px;
>     margin: 0px 0px 0px 0px;
> 	line-height: 100%;
> }
>
>
> _______________________________________________
> Bodington-developers mailing list
> Bod...@li...
> https://lists.sourceforge.net/lists/listinfo/bodington-developers