Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-5 of 5 total  RSS 

CSS *true* centering

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;
}



<div id="center-me">
  <h1>I'm centered!</h1>
</div>

to css layout simple center centering true horizontal vertical placement by elliottcable on Mar 19, 2008 1 Comments

Slashdot's 3 column liquid layout

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Aenean: ullamcorper elementum, dui quam porttitor neque</title>
  <link rel="stylesheet" type="text/css" media="screen" href="core-tidied.css" />

</head>
<body>
<div id="frame">
  <div id="topnav">
    <div id="logo">
      <h1>
        <a href="//aenean.org">Aenean</a>
      </h1>
    </div>
  </div> 
  <div id="slogan">
    <h2>
      ullamcorper elementum, dui quam porttitor neque
    </h2>
  </div>
  <div id="wrapper">
    <div id="links">
      <div class="block" id="links-sections">
        <div class="title" id="links-sections-title">
          <h4>
                  hendrerit
          </h4>
        </div>
        <div class="content" id="links-sections-content">
          <ul>
          <li>suscipit</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="contents">
      <div id="slashboxes">	
        <div class="block">
          <div class="title" id="index_qlinks-title">
            <h4>
                    Vestibulum
            </h4>
          </div>
          <div class="content" id="index_qlinks-content">
            <p>egestas quam </p>
          </div>
        </div>
      </div>
      <div id="articles">
        <div class="article" id="art1">
          <p>
          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.
          </p>

          <p>
          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.
          </p>
        </div>
      </div>
    </div>	
  </div>
  <div id="footer">
    Ut sollicitudin auctor dolor. Maecenas orci. 
  </div>	
</div>

</body>
</html>




/* 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; }).

to html css layout column 3 liquid by jrobertson on Nov 07, 2007

Form input layout css

// description of your code here

label
{
    width:250px;
    float:left;
    clear:both;
}
            <form action="contact.php" method="POST">
                <ul id="contact">
                    <li>
                        <label for="name">Name:</label>
                        <input type="text" name="name" />
                    </li>
                    <li>

                        <label for="email">Email:</label>
                        <input type="text" name="email" />
                    </li>
                    <li>
                        <label for="message">Message:</label>
                        <textarea name="message"></textarea>
                    </li>

                    <li>
                        <input type="Submit" name="send" value="Send" />
                    </li>
                </ul>
            </form>
to css form layout by FROST on Nov 30, 2006

Nested layouts

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)
to ruby rails layout nested by maxim.kulkin on Mar 06, 2006 1 Comments

More rails conditional layouts

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


to ruby rails actioncontroller layout by courtenay on Apr 29, 2005
« Newer Snippets
Older Snippets »
Showing 1-5 of 5 total  RSS