Refactored CSS and structure to use a better positioning scheme.

joeellis · Jul 21, 2009 · b08f803 · b08f803
1 parent 92384a5
commit b08f803
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/layout/default.xhtml b/layout/default.xhtml
@@ -14,9 +14,9 @@
     <meta name="date" content="#{Time.now.iso8601}" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-    <style type="text/css" media="screen">
+    <style type="text/css" media="all">
       @import url('/skin/css/reset.css');
-      @import url('/skin/css/fonts.css');
+      @import url('/skin/css/fonts.css');    
       @import url('/skin/css/layout.css');
       @import url('/skin/css/typography.css');
     </style>
@@ -25,6 +25,7 @@
     <div id="content_area">
       <div class="container">
         <img id="logo" src="/skin/img/logo.jpg" alt="Ruby Bayou: New Orleans Ruby User Group" title="Ruby Bayou: New Orleans Ruby User Group" />
+        <a href="http://www.facebook.com/group.php?gid=103328088847" id="facebook_badge"><img src="/skin/img/find_us_on_facebook_badge.gif" alt="Find Us on Facebook" title="Find Us on Facebook" /></a>
         #@content
       </div>
     </div>

diff --git a/public/skin/css/layout.css b/public/skin/css/layout.css
@@ -11,27 +11,24 @@ html, body {
 }
 
 .container {
+  position: relative;
   width: 940px;
   margin: 0 auto;
   padding: 0 10px;
   padding: 0;
-
   text-align: left;
 }
 
 #logo {
-  float: right;
-  position: relative;
+  position: absolute;
   top: 253px;
-  z-index: 100;
+  right: 0;
 }
 
 #facebook_badge {
-  float: right;
-  position: relative;
-  top: 300px;
-  right: 385px;
-  z-index: 100;
+  position: absolute;
+  top: 416px;
+  left: 0px;
 }
 
 .column {

diff --git a/view/index.xhtml b/view/index.xhtml
@@ -1,4 +1,3 @@
-<a href="http://www.facebook.com/group.php?gid=103328088847" id="facebook_badge"><img src="/skin/img/find_us_on_facebook_badge.gif" alt="Find Us on Facebook" title="Find Us on Facebook" /></a>
 <div id="latest_blog" class="column">
   <h1>Getting the Ball Rolling</h1>
   <p>Ruby Bayou is the user group for the Ruby developer community in New Orleans. We exist to promote and explore the use of Ruby as a programming language as well as engage with other technology and community groups in the New Orleans metro area.</p>