DZone Snippets: layout code

CSS true centering

elliottcable (elliott cable) — Wed, 19 Mar 2008 07:30:22 GMT

This will truely center something in CSS. Not tested in IE, knowing IE, it will burn in flames.



#center-me { /* There can be only one Centerlander! */

  height: 100%;

  display: table !important;

  margin: auto;

}



#center-me > * {

  display: table-cell !important; /* Don't touch me! I MEAN IT! DON- ... don't touch me. Really, don't touch me. */

  vertical-align: middle !important;

}





  I'm centered!

Slashdot's 3 column liquid layout

jrobertson (James Robertson) — Wed, 07 Nov 2007 12:10:31 GMT

The following html and css code is an example of a 3 column liquid layout used on the front page of http://slashdot.org. What's interesting is that the left and right column do not change their widths, it's only the article content which changes.



            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





  

  Aenean: ullamcorper elementum, dui quam porttitor neque

  









  

    

      

        Aenean

      

    

   

  

    

      ullamcorper elementum, dui quam porttitor neque

    

  

  

    

      

        

          

                  hendrerit

          

        

        

          

          suscipit

          

        

      

    

    

      	

        

          

            

                    Vestibulum

            

          

          

            egestas quam 

          

        

      

      

        

          

          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt porttitor felis. Sed a tellus in lacus adipiscing tincidunt. Ut sollicitudin auctor dolor. Maecenas orci. Fusce porttitor odio eget erat. Aliquam erat volutpat. Fusce mollis, orci eget ullamcorper elementum, dui quam porttitor neque, euismod pulvinar risus turpis nec neque. Maecenas dolor risus, vestibulum in, congue a, pulvinar id, leo. Vestibulum porttitor hendrerit mauris. Morbi fringilla lectus quis orci. Vivamus laoreet massa scelerisque felis.

          



          

          Aenean nunc neque, euismod porta, tempor ut, eleifend at, massa. Nam tempor urna at ligula. Etiam auctor dui tempus odio egestas sagittis. Donec metus pede, tempor nec, tincidunt sit amet, consectetuer eget, massa. Nam dolor arcu, ornare et, imperdiet vel, euismod ut, nibh. Quisque ut erat. Maecenas ante urna, suscipit eget, dictum non, porttitor at, magna. Duis accumsan. Suspendisse luctus vehicula pede. Mauris a nisl. Cras leo.

          

        

      

    	

  

  

    Ut sollicitudin auctor dolor. Maecenas orci.





/* file: core-tidied.css */

body {

  min-width: 680px;

  color: #111;

  background: #222;

}



#contents p {

  background-color: #eee;

}



#topnav {

  background: #044;

  position: relative;

  height: 55px;

  margin: 5px 1.25em 0 1.25em;

}



  #topnav #logo {

    width: 415px;

    height: 100%;

  }

  #topnav #logo h1 {

    display: block;

    height: 100%;

    width: 100%;

  }

    #topnav #logo h1 a {

      display: block;

      width: 100%;

      height: 100%;

      outline: none;

      text-indent: -5000px;

      text-decoration: none;

      background: url(//images.slashdot.org/logo.png) no-repeat left top;

    }

  

#slogan{ display: none; }



/* Wrapper */

#wrapper {

  overflow: hidden;

  background-color: #fff;

}



#wrapper #articles { margin-right: 18.5em; }



/* User section menu */

/* Contents */

#contents {

  width: auto;

  margin-left: 10.5em;

}



/* General Body */



/* Blocks */

div.block div.title { background: #666 }

  div.block div.title h4 {

    color: #fff;

  }





/* Links (left sidebar) */

div#links {

  float: left;

  width: 9.25em;

  background: #eee;

}

    div#links div.block div.content ul li {  list-style-image: none; }



/* Slashboxes (right sidebar) */

div#slashboxes {

  float: right;

  width: 17.25em;

}



/* Footer */

div#footer {

  background: #bbb;

  clear: both;

}



#contents {margin-top: 2em;}

The secret to positioning the columns, is to use left and right margins to push the element (column being adjusted), away from it's siblings. In the above example the contents (outer box) is pushed away from the left (#contents { margin-left: 10.5em;}), and the articles (inner box) within the contents is pushed from the right (#wrapper #articles { margin-right: 18.5em; }).

Form input layout css

FROST (Frost Design) — Thu, 30 Nov 2006 17:26:42 GMT

// description of your code here



label

{

    width:250px;

    float:left;

    clear:both;

}

            

                

                    

                        Name:

                        

                    

                    



                        Email:

                        

                    

                    

                        Message:

Nested layouts

maxim.kulkin (Maxim Kulkin) — Mon, 06 Mar 2006 13:00:12 GMT

I was missing some feature in Rails - nested layouts. So I took some time and implemented it:



module ApplicationHelper

  def inside_layout(layout, &block)

    @template.instance_variable_set("@content_for_layout", capture(&block))

    

    layout = layout.include?("/") ? layout : "layouts/#{layout}" if layout

    buffer = eval("_erbout", block.binding)

    buffer.concat(@template.render_file(layout, true))

  end

end

Then, design your views to use e.g. 'inner_layout'.

In 'layouts/inner_layout.rhtml' write:



<% inside_layout 'outer_layout' do %>



 layout stuff

  <%= @content_for_layout %>



<% end %>

The 'outer_layout.rhtml' will go as ussual layout (unless it needs to be nested in other higher level layout)

More rails conditional layouts

courtenay (courtenay) — Fri, 29 Apr 2005 11:56:13 GMT

In your controller:



  layout :my_layout_func



  ...



protected



  def my_layout_func

   # anything ruby will work

   ['list','index',nil].include?(action_name)? 

   'noheading':'my_layout'

 

   # or you could do

   case action_name

    when 'monkey': 'monkey_layout'

    when 'edit'  : 'form_layout'

   end

 end

DZone Snippets: layout code

CSS *true* centering

I'm centered!

Slashdot's 3 column liquid layout

Aenean

ullamcorper elementum, dui quam porttitor neque

hendrerit

Vestibulum

Form input layout css

Nested layouts

More rails conditional layouts

CSS true centering