Is this the most efficient...

  • aloof
  • Newbie
  • Newbie
  • aloof
  • Posts: 14
  • Loc: Oregon

Post 3+ Months Ago

Is this the most efficient way to do what http://engr.georgefox.edu/new looks like or is there an easier way to get the layout I have?

Code: [ Select ]
a:link, a:visited
{
text-decoration: none;
color: #900b09;
}

a:hover, a:visited:hover
{
text-decoration: none;
border-style:none;
color: #ff0000;
}

a img
{
border-style:none;
}

body
{
margin:0px;
padding:0px;
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #f0f0e0;
color: #333333;
}    
    
#hdr
{
position:absolute;
background-image:url('images/background.gif');
background-repeat:no-repeat;
top: 0px;
left: 0px;
height:60px;
width:100%;
border-bottom:1px solid #000000;
margin:0;
font-size:35pt;
z-index: 1;
}

#lh
{
position: absolute;
top: 70px;
left: 10px;
width: 120px;
height: 15px;
border: 1px solid #000000;
background: #CC9933;
color: #ffffff;
margin: 0px;
padding: 0px;
text-align:center;
z-index: 1;
}
#lh2
{
position: absolute;
top: 85px;
left: 10px;
width: 120px;
height: auto;
border: 1px solid #000000;
background:#FFFFFF;
color:#000000;
margin: 0px;
padding: 0px;
text-align:left;
z-index: 1;
}
#lh2 a:hover {color:rgb(255,64,64);background-color:rgb(230,230,250);}
#lh2 a {display:block;}

#rh
{
position: absolute;
top: 70px;
right: 20px;
width: 200px;
height: 15px;
border: 1px solid #000000;
background: #CC9933;
color: #ffffff;
margin: 0px;
padding: 0px;
z-index: 1;
}
#rh2
{
position: absolute;
top: 85px;
right: 20px;
width: 200px;
height: auto;
border: 1px solid #000000;
background:#FFFFFF;-
color:#000000;
margin: 0px;
padding: 0px;
z-index: 1;
}
    
#ctr
{
position: relative;
margin: 70px 230px 0px 140px;
border: 1px solid #333333;
background: #CC9933;
color: #ffffff;
padding: 0px;
text-align:center;
z-index: 7;
}
#ctr2
{
position: relative;
margin: -1px 230px 20px 140px;
border: 1px solid #333333;
background: #FFFFFF;
color: #000000;
padding: 5px;
z-index: 7;
}

#ftr
{
position: relative;
bottom:10px;
margin: 0px 230px 0px 140px;
border: 1px solid #000000;
height: 15px;
color: #00000;
text-align:center;
background:#CC9933;
z-index:7;
}
  1. a:link, a:visited
  2. {
  3. text-decoration: none;
  4. color: #900b09;
  5. }
  6. a:hover, a:visited:hover
  7. {
  8. text-decoration: none;
  9. border-style:none;
  10. color: #ff0000;
  11. }
  12. a img
  13. {
  14. border-style:none;
  15. }
  16. body
  17. {
  18. margin:0px;
  19. padding:0px;
  20. font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  21. background-color: #f0f0e0;
  22. color: #333333;
  23. }    
  24.     
  25. #hdr
  26. {
  27. position:absolute;
  28. background-image:url('images/background.gif');
  29. background-repeat:no-repeat;
  30. top: 0px;
  31. left: 0px;
  32. height:60px;
  33. width:100%;
  34. border-bottom:1px solid #000000;
  35. margin:0;
  36. font-size:35pt;
  37. z-index: 1;
  38. }
  39. #lh
  40. {
  41. position: absolute;
  42. top: 70px;
  43. left: 10px;
  44. width: 120px;
  45. height: 15px;
  46. border: 1px solid #000000;
  47. background: #CC9933;
  48. color: #ffffff;
  49. margin: 0px;
  50. padding: 0px;
  51. text-align:center;
  52. z-index: 1;
  53. }
  54. #lh2
  55. {
  56. position: absolute;
  57. top: 85px;
  58. left: 10px;
  59. width: 120px;
  60. height: auto;
  61. border: 1px solid #000000;
  62. background:#FFFFFF;
  63. color:#000000;
  64. margin: 0px;
  65. padding: 0px;
  66. text-align:left;
  67. z-index: 1;
  68. }
  69. #lh2 a:hover {color:rgb(255,64,64);background-color:rgb(230,230,250);}
  70. #lh2 a {display:block;}
  71. #rh
  72. {
  73. position: absolute;
  74. top: 70px;
  75. right: 20px;
  76. width: 200px;
  77. height: 15px;
  78. border: 1px solid #000000;
  79. background: #CC9933;
  80. color: #ffffff;
  81. margin: 0px;
  82. padding: 0px;
  83. z-index: 1;
  84. }
  85. #rh2
  86. {
  87. position: absolute;
  88. top: 85px;
  89. right: 20px;
  90. width: 200px;
  91. height: auto;
  92. border: 1px solid #000000;
  93. background:#FFFFFF;-
  94. color:#000000;
  95. margin: 0px;
  96. padding: 0px;
  97. z-index: 1;
  98. }
  99.     
  100. #ctr
  101. {
  102. position: relative;
  103. margin: 70px 230px 0px 140px;
  104. border: 1px solid #333333;
  105. background: #CC9933;
  106. color: #ffffff;
  107. padding: 0px;
  108. text-align:center;
  109. z-index: 7;
  110. }
  111. #ctr2
  112. {
  113. position: relative;
  114. margin: -1px 230px 20px 140px;
  115. border: 1px solid #333333;
  116. background: #FFFFFF;
  117. color: #000000;
  118. padding: 5px;
  119. z-index: 7;
  120. }
  121. #ftr
  122. {
  123. position: relative;
  124. bottom:10px;
  125. margin: 0px 230px 0px 140px;
  126. border: 1px solid #000000;
  127. height: 15px;
  128. color: #00000;
  129. text-align:center;
  130. background:#CC9933;
  131. z-index:7;
  132. }
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

You could make THIS more efficient, but the method your using is the most effiecient way.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

At first glance, I see alot of position: absolute. Being your Ids are less than half of the length of most of your attributes, I bet you cal slim it down even more by combining common attributes a little better. True this is a small file to begin with but hey, you said "most efficient" :wink:

Now that I have your attention, I don't think the author of that site would take too kindly to having thier layout ripped....................
  • aloof
  • Newbie
  • Newbie
  • aloof
  • Posts: 14
  • Loc: Oregon

Post 3+ Months Ago

Combining common attributes? Example?


And the author of the website is me..I was elected to be web master for GFU's engineering department...but, I'm not exactly very proficient in web design.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

aloof wrote:
Combining common attributes? Example?

And the author of the website is me..I was elected to be web master for GFU's engineering department...but, I'm not exactly very proficient in web design.


First off :oops: Sorry about the rip mixup.

Example, which is shorter ?
129 chars wrote:
#hdr,#lh1,#lh2,#rh1,#rh2{position:absolute;}
#hdr{left:100px;}
#lh1{left:120px;}
#lh2{left:140px;}
#rh1{left:160px;}
#rh2{left:180px;}

175 chars wrote:
#hdr{position:absolute;left:100px;}
#lh1{position:absolute;left:120px;}
#lh2{position:absolute;left:140px;}
#rh2{position:absolute;left:160px;}
#rh2{position:absolute;left:180px;}


This may seem like "penny pinching" but this example is also only combining one common attribute for five Ids :wink:

Ever see the "we save $0.05 on every transaction" commercial from Microsoft ?

Edit: border: 1px solid #000000; would have been a better example :P
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

joebert wrote:
Edit: border: 1px solid #000000; would have been a better example :P


if you really wanna be efficient, do three number colors where possible:

#000 (saves you all of three bytes :D)

I'd say other than grouping (which I prefer to do by tag name if at all possible), you are pretty much there.

To be honest though, I shouldn't worry too much about optimising the css, and concentrate on optimising graphics and markup.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 84 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.