Current location: Hot Scripts Forums » General Web Coding » CSS » Converting to ems

Converting to ems

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 11-09-07, 03:48 PM
spyke01 spyke01 is offline
Newbie Coder
  
Join Date: Aug 2005
Posts: 99
Thanks: 0
Thanked 0 Times in 0 Posts
Converting to ems
Hi guys i need some help converting to ems, i have my font sizes done however heights, widths, margins, and padding have me stumped. All my current stylings including background images are in pxs.

Any help would be greatly appreciated

css:
css Code:
  1. html, body {
  2.     background: #edebd5 url('images/bg.png') repeat-x;
  3.     font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  4.     font-size: 62.5%; /* 10px */
  5.     color: #000;
  6.     height: auto !important; /* real browsers */
  7.     height: 100%; /* IE6: treaded as min-height*/
  8.     min-height:100%; /* real browsers */
  9.     padding: 0px;
  10.     margin: 0px;
  11.     text-align: left;
  12. }
  13.  
  14. /*  Layout 
  15. ---------------------------------------------------------------*/
  16. div#container {
  17.     margin: 0px; 
  18.     padding: 0px;
  19.     width: 100%;
  20.     height: auto !important; /* real browsers */
  21.     height: 100%; /* IE6: treaded as min-height*/
  22.     min-height:100%; /* real browsers */
  23.     text-align: left;
  24.     font-size: 1.8em; /* 18px */
  25. }
  26.  
  27. LI LI, LI P, TD P, BLOCKQUOTE P {
  28.     font-size:1em; /* 18px */
  29. }
  30.  
  31. div#page {
  32.     background: #fff;
  33.     margin: 0px auto; /* center, not in IE5 */
  34.     padding: 0px;
  35.     width: 900px;
  36.     height: auto !important; /* real browsers */
  37.     height: 100%; /* IE6: treaded as min-height*/
  38.     min-height:100%; /* real browsers */
  39.     text-align: left;
  40.     border-left: 3px solid #9fabb3;
  41.     border-right: 3px solid #9fabb3;
  42. }
  43.  
  44. div#header {
  45.     background: #fff;
  46.     width: 890px;
  47.     height: 179px;
  48.     margin: 0px;
  49.     padding: 0px 5px;
  50.     text-align: left;
  51.     clear: both;
  52. }
  53.  
  54. div#content {
  55.     background: #fff url('images/contentbg.gif');
  56.     color: #554d49;
  57.     float: left;
  58.     width: 900px;
  59.     padding: 0px;
  60.     clear: both;
  61.     border-top: 10px solid #05386b;
  62. }
  63.  
  64. div#left-col {
  65.     width: 630px;
  66.     padding: 5px 5px 10px 5px;
  67.     float: left;
  68. }
  69.  
  70. div#right-col {
  71.     width: 250px;
  72.     padding: 5px 5px 10px 5px;
  73.     float: left;
  74. }
  75.  
  76.  
  77. div#footer {
  78.     height: 30px;
  79.     width: 890px;
  80.     background: #859c0e;
  81.     color: #fff;
  82.     /*font-weight: bold;*/
  83.     padding: 5px;
  84.     margin: 0px;
  85.     border-top: 10px solid #05386b;
  86.     clear: both;
  87. }
  88.  
  89.  
  90. /*  images
  91. ---------------------------------------------------------------*/
  92. img {
  93.     border: 0px none;
  94.     margin: 0px;
  95.     padding: 0px;
  96. }
  97.  
  98. .imgfloatleft {
  99.     float: left;
  100.     border-right: 4px solid #FFF;
  101.     border-bottom: 4px solid #FFF;
  102. }
  103.  
  104. .imgfloatright {
  105.     float: right;
  106.     border-left: 4px solid #FFF;
  107.     border-bottom: 4px solid #FFF;
  108. }
  109.  
  110. /*  Links 
  111. ---------------------------------------------------------------*/
  112. #left-col a {
  113.     color: #257AA3;
  114.     text-decoration: none;
  115. }
  116.  
  117. #left-col a:hover {
  118.     text-decoration: underline;
  119. }
  120.  
  121. a.portfolioLink {
  122.     width: 620px;
  123.     height: 53px;
  124.     margin: 5px 0px 0px 0px;
  125.     padding: 0px;
  126.     display: block;
  127.     border-top: 6px solid #000;
  128.     border-bottom: 6px solid #000;
  129. }
  130.  
  131. a.portfolioLink:hover {
  132.     width: 620px;
  133.     display: block;
  134.     border-top: 6px solid #859C0E;
  135.     border-bottom: 6px solid #859C0E;
  136. }
  137.  
  138.  
  139. /*  H1 H2 H3
  140. ---------------------------------------------------------------*/
  141. h1 {
  142.     font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
  143.     font-size: 1.5em; /* 27px */
  144.     color: #5b81a5;
  145.     border-bottom: 1px solid #afc2d4;
  146.     margin: 0px;
  147. }
  148.  
  149. h2 {
  150.     font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
  151.     font-size: 1.33em; /* 24px */
  152.     color: #5b81a5;
  153.     border-bottom: 1px solid #afc2d4;
  154.     margin: 0px;
  155. }
  156.  
  157. h3 {
  158.     font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
  159.     font-size: 1.16px; /* 21px */
  160.     color: #5b81a5;
  161.     margin: 0px;
  162. }
  163.  
  164. /*  Paragraph Styles
  165. ---------------------------------------------------------------*/
  166. p.quote {
  167.     font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
  168.     font-style: italic;
  169.     width: 400px;
  170.     border-left: 4px solid #7dcf47;
  171.     margin: 2px 30px 2px 30px;
  172.     padding: 2px;
  173. }
  174.  
  175. div.testimonials {
  176.     background:#edebd5 url(images/tabsBottom.gif) no-repeat bottom;
  177.     border: 1px solid #9fabb3;
  178.     color: #222222;
  179.     font-style: italic;
  180.     width: 230px;
  181.     margin-right: 10px !important;
  182.     margin-right: 0px;
  183.     padding: 5px 10px 5px 10px !important;
  184.     padding: 5px 10px 5px 9px;
  185. }
  186.  
  187. p.portfolioText {
  188.     color: #838b90;
  189. }
  190.  
  191.  
  192. div#content ul {
  193.     margin: 0px;
  194.     padding-left: 10px;
  195. }
  196.  
  197. div#content ul.smaller {
  198.     padding-left: 30px;
  199. }
  200.  
  201. /*  Customize and Order Buttons
  202. ---------------------------------------------------------------*/
  203. input.button {
  204.     border: 1px solid #ddd;
  205.     background: #f9f9f9;
  206.     font-weight: bold;
  207.     color: #000;
  208.     padding: 2px 10px !important;
  209.     padding: 2px 0px;
  210.     margin: 2px;
  211. }
  212.  
  213. input.button:hover, input.button:sfhover { 
  214.     border: 1px solid #3da6b8; 
  215.     background: #e7eef0;
  216. }
  217.  
  218. input.buyAppButton {
  219.     background: url('images/buyAppButton.png') no-repeat left top;
  220.     width: 163px;
  221.     height: 50px;
  222.     outline: none;
  223.     border: 0px;
  224.     margin: 0px 0px 0px 60px;
  225. }
  226.  
  227. input.buyAppButton:hover { 
  228.       background-position:0% -52px;
  229. }
  230.  
  231. input.customizeButton {
  232.     background: url('images/customizeButton.png') no-repeat left top;
  233.     width: 100px;
  234.     height: 31px;
  235.     outline: none;
  236.     border: 0px;
  237. }
  238.  
  239. input.customizeButton:hover { 
  240.       background-position:0% -32px;
  241. }
  242.  
  243. input.customizeButtonGBG {
  244.     background: url('images/customizeButtonGBG.png') no-repeat left top;
  245.     width: 100px;
  246.     height: 31px;
  247.     outline: none;
  248.     border: 0px;
  249. }
  250.  
  251. input.customizeButtonGBG:hover { 
  252.       background-position:0% -32px;
  253. }
  254.  
  255. input.orderNowButton {
  256.     background: url('images/orderNowButton.png') no-repeat left top;
  257.     width: 100px;
  258.     height: 31px;
  259.     outline: none;
  260.     border: 0px;
  261. }
  262.  
  263. input.orderNowButton:hover { 
  264.       background-position:0% -32px;
  265. }
  266.  
  267. input.continueButton {
  268.     background: url('images/continueButton.png') no-repeat left top;
  269.     width: 100px;
  270.     height: 31px;
  271.     outline: none;
  272.     border: 0px;
  273. }
  274.  
  275. input.continueButton:hover { 
  276.       background-position:0% -32px;
  277. }
  278.  
  279. input.checkoutButton {
  280.     background: url('images/checkoutButton.png') no-repeat left top;
  281.     width: 100px;
  282.     height: 31px;
  283.     outline: none;
  284.     border: 0px;
  285. }
  286.  
  287. input.checkoutButton:hover { 
  288.       background-position:0% -32px;
  289. }
  290.  
  291. input.updateButton {
  292.     background: url('images/updateButton.png') no-repeat left top;
  293.     width: 100px;
  294.     height: 31px;
  295.     outline: none;
  296.     border: 0px;
  297. }
  298.  
  299. input.updateButton:hover { 
  300.       background-position:0% -32px;
  301. }
  302.  
  303. /*  Cart Styles
  304. ---------------------------------------------------------------*/
  305. .carttitle1 {
  306.     color: #FFF;
  307.     background: #4292bb;
  308. }
  309. .carttitle2 {
  310.     color: #FFF;
  311.     background: #1b89a4;
  312. }
  313. .cartheader1 {
  314.     color: #000;
  315.     background: #1486A0;
  316. }
  317. .cartheader2 {
  318.     color: #000;
  319.     background: #d2e0e4;
  320. }
  321. .cartemphasizedheader1 {
  322.     color: #000;
  323.     background: #1486A0;
  324.     font-weight: bold;
  325. }
  326. .cartemphasizedheader2 {
  327.     color: #000;
  328.     background: #d2e0e4;
  329.     font-weight: bold;
  330. }
  331. .cartcontent1 {
  332.     color: #000;
  333.     background: #eff3f5;
  334. }
  335. .cartcontent2 {
  336.     color: #000;
  337.     background: #f8f8f8;
  338. }
  339. .cartdivider {
  340.     background: #eee;
  341. }
  342. .cartemphasized {
  343.     font-weight: bold;
  344. }
  345. .addresslabel {
  346.     width: auto;
  347.     font-weight: bold;
  348.     text-decoration: underline;
  349. }
  350. .carttotal {
  351.     font-weight: bold;
  352.     color: #fff;
  353.     background: #306a88;
  354. }
  355. .carttotalprice {
  356.     color: #fff;
  357.     background: #667983;
  358. }
  359. .alignmiddle {
  360.     text-align:center;
  361. }
  362.  
  363. /*  Login Page Properties
  364. ---------------------------------------------------------------*/
  365. .loginborder{ 
  366.     background: #FFF; 
  367.     border: 1px solid #000;
  368.     padding: 0; 
  369.     margin-left: auto; 
  370.     margin-right: auto;
  371.     width: 300px;
  372.     float: left;
  373. }
  374.  
  375. textarea, select {
  376.     border-color: #000; 
  377.     color: #000;
  378.     background: #f9f9f9;
  379. }
  380.   
  381. input {
  382.   text-indent: 2px; 
  383. }
  384.  
  385. .textarea, .searchinput {
  386.     border: 1px solid #FFF;
  387.     color: #000;
  388.     background: #f9f9f9;
  389.     padding: 2px;
  390.     vertical-align: middle;
  391.  }
  392.  
  393. #PriceBox_Layer {
  394.     background: #fff;
  395.     border: 1px solid #000;
  396. }
  397.  
  398. .priceboxheader {
  399.     font-weight: bold;
  400.     background: #4292bb;
  401.     color: #fff;
  402.     width: 121px;
  403.     padding: 2px;
  404.     border-bottom: 1px solid #000;  
  405. }
  406.  
  407. /*  Navigation 
  408. ---------------------------------------------------------------*/
  409. #top-nav {
  410.     background: #fff url('images/navbg.png');
  411.     height: 30px;
  412.     line-height: 30px;
  413. }
  414.  
  415. #nav, #nav ul {
  416.     width: 880px;
  417.     list-style: none;
  418.     font-weight: bold;
  419.     padding: 0px 5px 0px 5px;
  420.     margin: 0px;
  421. }
  422.  
  423. #nav li {
  424.     float: left;
  425. }
  426.  
  427. #nav a {
  428.     display: block;
  429.     font-weight: bold;
  430.     color: #fff;
  431.     text-decoration: none;
  432.     vertical-align: middle;
  433.     line-height: 28px;
  434.     padding: 1px 20px 1px 20px;
  435. }
  436.  
  437. #nav li:hover, #nav li.sfhover {
  438.     background: url('images/navbg-over.png');
  439. }
  440.  
  441. #nav a:hover, #nav li.sfhover {
  442.     color: #fff;
  443. }
  444.  
  445. /*  Comments Form
  446. ---------------------------------------------------------------*/
  447. form.commentsform fieldset {
  448.     font-weight: bold;
  449.     background: #FFFFDD;
  450.     border: 1px solid #97c660;
  451.     width: 400px;
  452.     padding: 5px;
  453.     float: left;
  454. }
  455.  
  456. form.commentsform fieldset legend {
  457.     color: #5ca605;
  458.     float: left;
  459.     font-weight: bold;
  460. }
  461.  
  462. form.commentsform label {
  463.     color: #656565;
  464.     width: 120px;
  465.     font-weight: bold;
  466.     clear: both;
  467. }
  468.  
  469. form.commentsform.input, form.commentsform.select, form.commentsform.textarea{
  470.     width: 180px;
  471.     margin-bottom: 5px;
  472. }
  473.  
  474. form.commentsform textarea {
  475.     width: 250px;
  476.     height: 150px;
  477. }
  478.  
  479. form.commentsform ol, form.commentsform ol li {
  480.     list-style: none;
  481. }
  482.  
  483. form.commentsform input, form.commentsform.select, form.commentsform textarea {
  484.     background: url("images/input_bg.gif");
  485.     border:1px #ccc solid;
  486.     display:block;
  487.     padding: 4px;
  488.     margin: 0px;
  489. }
  490.  
  491. form.commentsform input button {
  492.     margin: 23px;
  493. }
  494.  
  495. form.commentsform input:hover, form.commentsform.select:hover, form.commentsform textarea:hover {
  496.     border:1px #97c660 solid;
  497. }
  498.  
  499. form.commentsform input:focus, form.commentsform.select:focus, form.commentsform textarea:focus {
  500.     border:1px #3a535e solid;
  501. }
  502.  
  503. form.commentsform .hiddenField {
  504.     display: none;
  505.     background-image: none;
  506.     border: none;
  507.     padding: 0px;
  508. }
  509.  
  510. .title1 { 
  511.     border-left:0px none; 
  512.     border-right:0px none; 
  513.     background: #000 url('images/titlegrad.gif');
  514.     color: #fff;
  515.     height:27px;
  516.     line-height:27px; 
  517.     font-weight:bold; 
  518.     border-top:1px solid #656B78; 
  519.     border-bottom:1px solid #656B78; 
  520.     padding-left:5px; 
  521.     padding-right:5px
  522. }
  523.  
  524. .PVPT2Column2, .row1 { 
  525.     background: #edebd5;
  526.     color: #0f0f0f;
  527. }
  528. .row2 { 
  529.     background: #D8D5B4;
  530.     color: #0f0f0f;
  531. }
  532.  
  533. .PVPT2Column1, .title2 {
  534.     background: #859C0E;
  535.     color: #fff;
  536. }
  537.  
  538. .PVPT2Column1 a:link, .PVPT2Column1 a:active, .PVPT2Column1 a:visited, .title2 a:link, .title2 a:active, .title2 a:visited {
  539.     color: #fff;
  540.     text-decoration: underline;
  541. }
  542.  
  543. .PVPT2Column1 a:hover, .title2 a:hover {
  544.     text-decoration: none;
  545. }

html:
html Code:
    <!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>        <title>Text</title>        <meta http-equiv="content-type" content="text/html; charset=utf-8" />        <meta http-equiv="content-language" content="en-us" />        <meta name="verify-v1" content="11ImTHa6B8i7iVFi9D5RzhjNPtdzOsJ7+9oaCI8irug=" />        <!--Stylesheets Begin-->            <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />            <link rel="stylesheet" type="text/css" href="stylesheets/hosting.css" />            <link rel="stylesheet" type="text/css" href="stylesheets/apps.css" />            <link rel="stylesheet" type="text/css" href="stylesheets/servers.css" />            <style type="text/css" media="screen">@import url( stylesheets/style.css );</style>            <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/tabs.css" />            <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/lightbox.css" />            <!--[if lt IE 7]>                <link rel="stylesheet" type="text/css" href="stylesheets/iehacks.css" />                <style type="text/css">                     div#left-col {                        width: 629px;                    }                                        div#right-col {                        padding-right: 0px;                    }                   </style>            <![endif]-->        <!--Stylesheets End-->        <!--Javascripts Begin-->            <script type="text/javascript" src="javascripts/text-resize.js"></script>            <script type="text/javascript" src="javascripts/general.js"></script>            <script type="text/javascript" src="javascripts/prototype.js"></script>            <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>            <script type="text/javascript" src="javascripts/lightbox.js"></script>            <script type="text/javascript" src="javascripts/validation.js"></script>            <script type="text/javascript"><!--//--><![CDATA[//><!--                sfHover = function() {                    var sfEls = document.getElementById("nav").getElementsByTagName("LI");                    for (var i=0; i<sfEls.length; i++) {                        sfEls[i].onmouseover=function() {                            this.className+=" sfhover";                        }                        sfEls[i].onmouseout=function() {                            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");                        }                    }                }                                if (window.attachEvent) window.attachEvent("onload", sfHover);            //--><!]]></script>                    <!--Javascripts End-->    </head>    <body>        <div id="container">            <div id="page">                <div id="header">                    <div style="height: 50px; line-height: 80px; vertical-align: bottom; float: right;">                        <img src="images/smallfont.jpg" alt="Small Font" title="Small Font" onclick="javascript:changeFontSize('content', '10px');" style="cursor: hand;" />                        <img src="images/normalfont.jpg" alt="Normal Font" title="Normal Font" onclick="javascript:changeFontSize('content', '12px');" style="cursor: hand;" />                        <img src="images/largefont.jpg" alt="Large Font" title="Large Font" onclick="javascript:changeFontSize('content', '14px');" style="cursor: hand;" />                                </div>                    <img src="images/fts_logo_green02.png" alt="Fast Track Sites Logo" /><br />                                            <a href="applications.php"><img src="images/ad01.png" alt="" /></a>                          <div id="top-nav">                        <ul id="nav">                            <li><a href="">Text</a></li>                        </ul>                                      </div>                </div>                <div id="content">                    <div id="left-col">                            <h1>Text</h1>                        <br />                        Text                            </div>                    <div id="right-col">                        <h3>Text</h3>                        <div class="tabber" id="mytabber1">                            <div class="tabbertab">                                <h2>Text</h2>                                <dl>                                    <dd>Text</dd>                                </dl>                            </div>                        </div>                                  </div>                        </div>                <div id="footer">                    <div style="float: right;">Text</div>                    Copyright &copy; 2005-2006 Fast Track Sites                      <!-- phpmyvisites -->                    <a href="http://www.phpmyvisites.net/" title="phpMyVisites | Open source web analytics" onclick="window.open(this.href);return(false);">                        <script type="text/javascript">                            <!--                            var a_vars = Array();                            var pagename='';                            var phpmyvisitesSite = 1;                            var phpmyvisitesURL = "http://www.fasttracksites.com/phpmv2/phpmyvisites.php";                            //-->                        </script>                        <script src="http://www.fasttracksites.com/phpmv2/phpmyvisites.js" type="text/javascript"></script>                    </a>                    <noscript>                        <p>phpMyVisites | Open source web analytics                            <img src="http://www.fasttracksites.com/phpmv2/phpmyvisites.php" alt="phpMyVisites" style="border:0" />                        </p>                    </noscript>                    <script type="text/javascript" src="/phpmv2/plugins/clickheat/libs/js/clickheat.js"></script>                    <script type="text/javascript">                        <!--                        clickHeatSite = 1;                        clickHeatGroup = 'all';                        clickHeatServer = '/phpmv2/plugins/clickheat/libs/clickpmv.php';                        initClickHeat();                        //-->                    </script>                    <noscript><p><a href="http://www.labsmedia.com/clickheat/index.html" title="ClickHeat: clicks heatmap">clickheat</a></p></noscript>                    <!-- /phpmyvisites -->                   </div>            </div>        </div>              </body></html>
Last edited by spyke01; 11-09-07 at 03:52 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks

« flash overlay css dropdown menu | Background image doesnt match »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Hybrid Mode Hybrid Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
PHP - Converting IP to Country cancer10 Script Requests 10 05-19-08 11:40 AM
converting date-string to Date object UnrealEd Everything Java 4 05-15-07 07:20 PM
Which is better? EMs or PIXELs? undyboy91 CSS 6 01-16-07 02:00 AM
can someone help converting perl functions to php functions apophis PHP 0 08-11-06 03:52 PM
converting CGI/Perl site to PHP lordmerlin PHP 7 08-03-03 07:01 AM


All times are GMT -5. The time now is 03:16 AM.
vBulletin® Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
CakePHP: the rapid development php framework