Why Is the ≪Center≫ Tag Deprecated in Html

How to center the menu

<center> and "align"

are deprecated.

After getting a link to the page:
If you want to center the ul#ProductMenu_List, change your CSS:

.top-bar-section #ProductMenu_List {
     margin: 0 auto;
     //float: right;
     //margin-right: -10px;
}

.top-bar-section ul li {
    //float: left;
    display: inline-block;
}

If you want to center your div.TopMenu_TD, do following in CSS:

.logoRow .menus .pagelinks {
    //float: right;
}

If you want to center elements, "float" is in most case the opposite of helpful. Text-align: center, display: inline-block and/or margin: 0 auto are in most case the solution.

And take your to google for Html5 and CSS3. You will need it.

Update
After seeing that you only have access to the templates - add following code to "Kodefelter" - Head:

<style>
    .top-bar-section #ProductMenu_List {
         margin: 0 auto;
         float: none;
         max-width: 400px;//or another value
         display: block;
    }

    #ProductMenu_List > li {
        float: none;
        display: inline-block;
    }

    .logoRow .menus .pagelinks {
        float: none;
        display: block!important;
        margin: 0 auto;
        max-width: 500px;
    }
</style>

How to use XTemplate in ExtJS

The problem was that I was calling the view first. The solution for me is:

East.js

Ext.define('MyApp.view.main.East', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.eastView',
  requires: [
    'MyApp.view.main.east.Notifications'
    //'MyApp.view.main.east.Actions'
  ],
  layout: {
    type: 'vbox',
    align: 'stretch'
  },
  border: false,
  defaults: {
    flex: 1,
    border: false
  },
  items: [{
    xtype: 'notificationsView'
  }, {
    html: 'Actions'
  }]
});

Notifications.js

Ext.define('Notification', {
  extend: 'Ext.data.Model',
  fields: [
    { name:'src', type:'string' },
    { name:'from', type:'string' },
    { name:'date', type:'string' },
    { name:'content', type:'string' }
  ]
});

Ext.create('Ext.data.Store', {
  model: 'Notification',
  id: 'notiStore',
  data: [
    { src:'resources/img/east/ic_new_mail_grey01.png', from:'De H24', date:'24/04/2013 11:00', content:'Recordatorio: falta sólo una hora para la generación de informes semalaes.' },
  { src:'resources/img/east/ic_to_associate_alarma_grey.png', from:'A20132404-0002', date:'24/04/2013 10:55', content:'Alerta asignada al operador MyApp' }
  ]
});

var notiTpl = new Ext.XTemplate(
  '<tpl for=".">',
    '<div class="thumb-wrap">',
      '<div class="notImg">',
        '<img src="{src}" />',
      '</div>',
      '<div style="float:left; width:90%; padding: 5px;">',
        '<div>',
          '<span>{from}</span>',
          '<span style="float:right;">{date}</span>',
        '</div>',
        '<div>',
          '<span>{content}</span>',
        '</div>',
      '</div>',
    '</div>',
  '</tpl>'
);

Ext.define('MyApp.view.main.east.Notificaciones', {
  extend: 'Ext.view.View',
  alias: 'widget.notificacionesView',
  padding: 5,

  store: 'notiStore',
  tpl: notiTpl,
  itemSelector: 'div.thumb-wrap',
  emptyText: 'No images available',
  renderTo: Ext.getBody()
});

As can be seen, I'm defining the view at the end of the code. It works fine, but if I try to order my code, I mean putting the model in Model folder, store in Store folder and leave only the template and the view in this file, I'm unable to make it work. Does anybody know how to rewrite my code to get it??

Greetings.

Related Topics