Code Snippets: css code

Never been to Code 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 (or not, you can keep them private!)

« Newer Snippets

Older Snippets »

27 total XML / RSS feed

Barebones xHTML and CSS template pages

Ok, so this guy already did this: http://www.bigbold.com/snippets/posts/show/583 but I needed a bit more. So this is my xHTML template page (it doesn't declare xml since it makes IE kick out of standards mode):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>XHTML TEMPLATE</title>
  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="description" content="THIS IS A TEMPLATE XHTML PAGE" />
  
  <link rel="stylesheet" href="main.css" type="text/css" media="screen" />
  
  <!-- <script type="text/javascript" src="prototype.js">
  </script> -->
  <script type="text/javascript" language="JavaScript"><!-- <![CDATA[
  ]]> //--></script>
</head>
<body>
  <div id="container">

  </div>
</body>
</html>

This is the accomponying CSS:

body {
  font-family :Verdana, Arial, Sans;
  font-size   :76%; }
div#container {
  font-size   :1.0em; }

to template css xhtml by mixonic on Dec 28, 2005

Scrollable Div

<div style="width:300px;
 height:200px;
 background-color:#E2E2E2;
 overflow:auto;">
</div>

to html css ui by pwlin on Dec 24, 2005

transparent pngs in IE

Keep in mind that the AlphaImageLoader takes a relative path to the HTML page, not the CSS file (which is in contrast to normal css behavior). Absolute positioning causes it to act funky, so I wouldn't recommend it.

* html #blah {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/full/path/to/img.png', sizingMethod='crop');
  background:none;
  cursor:hand; /* only if this is a link */
  position:relative;
}

to css iesucks by technoweenie on Nov 03, 2005

css opacity in IE

opacity:.7; /* css standard */
filter:alpha(opacity=70); /* IE patch */

to css iesucks by technoweenie on Nov 03, 2005

CSS Rollovers

A quick rollover snippet...

.menu_img1 {
	width: 25px;
	height: 25px;
	background: no-repeat url(image1.jpg);
}

a.rollover_img1:hover img {
	background: no-repeat url(image2.jpg)
}

And the html hooblah:

<div class="menu_img1">
  <a href="#" class="rollover_img1">
    <img src="t.gif" width="25" height="25" border="0">
  </a>
</div>

The t.gif is a 1x1 transparent image. Tested in IE5 (Windows/Mac), Firefox, Safari.

to css by angelgirl on Oct 27, 2005

Readable, resizable font in stylesheet

body, td {font:90% Tahoma, [other fonts]}

Today I found an apps where its Thai font is ugly.
I added this 90% Tahoma to its font style.
Don't use pixel (px). It's unresizable (unless using FF).

to css resize font by korakot on Oct 05, 2005

Clear browser's default styles

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}

to css by hail2u on Sep 18, 2005

Helper that adds class="current" to links if viewing the current page

This is a helper that will add class="current" to an anchor, if the actions it is linking to is the current page. Here is the implementation:

def link_to_with_current_class_if_current(name, 
                                          options = {}, 
                                          html_options = {}, 
                                          *parameters_for_method_reference)
  html_options[:class] = "current" if current_page?(options)
  link_to(name, options, html_options, *parameters_for_method_reference)
end

More info at on my blog.

to rails css by zorn on Sep 09, 2005

Yet another method to alternate table row classes

Use a helper function/class as such:

<%- row_class = cycle("even", "odd") -%>
<%- for item in @items do -%>
  <tr class="<%= row_class %>">
    ... use item ...
  </tr>
<%- end -%>

Put this in your application_helper.rb:

  def cycle(first_value, *values)
    values.unshift(first_value)
    return Cycle.new(*values)
  end

  class Cycle
    def initialize(first_value, *values)
      @values = values.unshift(first_value)
      @index = 0
    end

    def to_s
      value = @values[@index].to_s
      @index = (@index + 1) % @values.size
      return value
    end
  end

to ruby rails css by ddribin on Sep 09, 2005

Jugando con el diseño de Barrapunto

Para cambiar un poco el diseño a Barrapunto, usando la extensión URIid de Firefox y añadiendo los estilos al archivo userContent.css con la extensión ChromEdit (o manualmente).

El resultado (portada y comentarios), aunque muy mejorable, es similar a lo que hizo mini-d en: Rediseñando Barrapunto, Parte 2 y Parte 3.

#barrapunto-com {
font-family:Arial !important;
color:#333 !important;
letter-spacing:0.01em !important;
word-spacing:0.01em !important;
}

#barrapunto-com a:link,
#barrapunto-com font[COLOR="#FF6600"] a:link font[COLOR="#006699"] {
color:#045BBB !important;
}

#barrapunto-com a:visited,
#barrapunto-com font[COLOR="#FF6600"] a:visited font[COLOR="#006699"] {
color:#9D2F77 !important;
}

#barrapunto-com a:link:hover,
#barrapunto-com a:visited:hover,
#barrapunto-com font[COLOR="#FF6600"] a:visited:hover font[COLOR="#006699"],
#barrapunto-com font[COLOR="#FF6600"] a:hover font[COLOR="#006699"] {
color:#789F00 !important;
}

#barrapunto-com td[width="85"] { width:155px !important; }

#barrapunto-com td[width="85"] table { width:150px !important; }

#barrapunto-com td[width="85"] table b { font-size:11px !important; }

#barrapunto-com td[width="85"] a { font-size:11px; line-height:150% !important;  } 

#barrapunto-com td[width="85"] TABLE tr+tr td FONT[SIZE="1"] { display:block !important; padding-left:4px !important; }

#barrapunto-com td[width="85"] TABLE tr+tr td FONT[SIZE="1"] a { padding-left:4px !important; }

#barrapunto-com td[width="85"] hr { border:none !important; border-bottom:1px dotted #ccc !important; }

#barrapunto-com table[width="200"] table[width="100%"] b { font-size:11px !important; }

#barrapunto-com table[width="200"] table[width="100%"] td font { font-size:11px !important; }

#barrapunto-com table[width="200"] table[width="100%"] td a { line-height:150% !important; }

#barrapunto-com table[width="200"] table[width="100%"] td li {line-height:150% !important; margin:6px 0 !important; list-style:outside !important; margin-left:17px !important; }

#barrapunto-com td[BGCOLOR="#FFFFFF"] table[width="100%"]  { margin-top:10px !important; background:#f5f5f5 !important;  }  

#barrapunto-com td[BGCOLOR="#FFFFFF"] table[width="100%"] font { font-size:11px !important }

#barrapunto-com font table td em { display:block !important; margin:10px 25px !important; font-style:normal !important; }

#barrapunto-com font table td { line-height:130% !important; }

#barrapunto-com td[ALIGN="CENTER"][BGCOLOR="#FF6600"] font[COLOR="#006699"] { color:#fff !important; font-size:11px !important; }

#barrapunto-com td[BGCOLOR="#FF6600"]  FONT[SIZE="1"] { font-size:11px !important; color:#444 !important; }

#barrapunto-com table[width="100%"] TD[BGCOLOR="#FF6600"] tr td[BGCOLOR="#FFFFFF"] { padding:10px !important; line-height:125% !important; }

#barrapunto-com font table[width="100%"] TD[BGCOLOR="#FF6600"] tr td[BGCOLOR="#FFFFFF"] { padding:5px !important; }

/*#barrapunto-com p font td[BGCOLOR="#FF6600"] font[COLOR="#006699"] { line-height:100% !important; color:#045BBB !important; font-size:16px !important; padding:5px !important; }

#barrapunto-com p font td[BGCOLOR="#FF6600"] font[COLOR="#006699"] a { color:#045bbb !important; padding:0 !important; line-height:100% !important; }*/

#barrapunto-com p table TD[WIDTH="70%"] { color:#666 !important; font-size:12px !important; font-weight:bold !important; }

#barrapunto-com td[ALIGN="CENTER"] FONT[SIZE="2"] i { font-style:normal; font-size:17px; color:#666; }

#barrapunto-com img[WIDTH="322"] { width:342px !important; }

to firefox css barrapunto by posavasos on Aug 12, 2005

Autoinclude CSS Files by Controller/Action Name

def stylesheet_auto_link_tags
  stylesheets_path = "#{RAILS_ROOT}/public/stylesheets/"
 
  candidates = [ "#{controller.controller_name}", 
                 "#{controller.controller_name}_#{controller.action_name}" ]
 
  candidates.inject("") do |buf, css| 
    buf << stylesheet_link_tag(css) if FileTest.exist?("#{stylesheets_path}/#{css}.css")
    buf
  end
end

Compliments of Dema

to ruby rails css stylesheets by canadaduane on Jul 26, 2005 2 Comments

Vertical Centering in CSS

#center{
   width:100px;
   height:100px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-50px;
   margin-left:-50px;
}

usage:

<img id="center" src="path/image.gif":

to html css style by rafaeltds on Jul 04, 2005 2 Comments

Zebra stripes on table rows using Rails / RHTML

<% @projects.each_with_index do |project, i| %>
<% row_class = i%2 == 0 ? "even" : "odd" %> 
<tr class="<%= row_class %>">
......
<% end %>

In the CSS:

TR.even { background-color: #f00; }
TR.odd { background-color: #f00; }

etc..

to rails css style zebra rhtml by peter on Jun 22, 2005

Centering an element Vertically and Horizontally

You will need to know the height and width for this to work properly.

A word of warning, this can cause issues on lower resolutions if the div's height is taller than the screen's height.

#wrapper {
  width:600px;
  height:500px;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left: -300px; /* half of width */
  margin-top: -250px;  /* half of height */
}

<div id="wrapper">
  <img src="image.jpg" width="600" height="500" alt="" />
</div>

to css by technoweenie on May 31, 2005

Iterating over a list

One of the common things you want to do with a table in a web application is use different classes so the rows have different styles. i.e alternate between light and dark backgrounds.

Arry#cycle is a method to enable that.

class Array
  def cycle(values)
    self.each_with_index do |o, i| 
      yield(o, values[i % values.length])
    end
  end
end

You can use it like this:

<% @something.cycle(["oddRow", "evenRow"]) do |obj, cssClass| %>
  <tr class="<%= cssClass %>">
    <td><%= obj.something %></td>
    <td><%= obj.something_else %></td>
  </tr>
<% end %>

to ruby rails css array table erb by koz on May 31, 2005 2 Comments

Making bordercolor work in FireFox / Mozilla

IE and Safari support the bordercolor attribute directly on TABLE elements which colors the external and internal borders. FireFox does not, but you can use standard CSS to fix it.

TABLE { border: 1px solid #eee; }
TABLE TD { border: 1px solid #eee; }

Unlike most solutions, this also correctly changes the color of the cell borders.

to firefox css mozilla webdesign by peter on May 17, 2005

Nice serif font set for CSS

font-family: "Hoefler Text", Baskerville, "Big Caslon", "Adobe Garamond Pro", Georgia, Palatino, "Times New Roman", serif;

to css fonts typography design style by peter on May 10, 2005

<body> tag CSS ID in Rails

By Ryan Carver of fivesevensix.com. Place in your application_helper.rb and call with <%= bodytag_id %>..

def bodytag_id
  a = controller.class.to_s.underscore.gsub(/_controller$/, '')
  b = controller.action_name.underscore
  "#{a}-#{b}".gsub(/_/, '-')
end

to ruby rails css rubyonrails by peter on May 08, 2005

Clearing Floats in CSS

Float clearing CSS...

.container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.container {display: inline-table;}

/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

to css floats by technoweenie on Apr 27, 2005

Show link location

Use this in your print style sheet. Works only in "better browsers".

a[href] {
  text-decoration: none;
      }

a[href]:after {
  content: " (" attr(href)") ";
       }

to css by Syam on Apr 23, 2005

« Newer Snippets

Older Snippets »

27 total XML / RSS feed

Related Tags

Never been to Code Snippets before?