...

View Full Version : Better way to make site function than current one.



squiwrl
12-19-2006, 03:17 PM
I was wondering if you guys had any ideas on how i could optimize the css that drives my site. Im sure there a tone of declarations that could be done in a more optimized way.

I built most of it back in the day. And knowing now what i know im sure there is a better way to do it i just need a nudge in the right direction. The css file for the size of the site seams absolutly massive.

If any of you guys have any comments and or advice that would be greatly appreciated!!

This is my personal portfolio so im wanting the front and back end to look as good as possible.

Disclaimer: the Iframe in portfolio is going to be torn out and replaced by a simple div with the same content in there. And I'm having one hell of a time iwth the form on the contact page with is ( hidden ) because the site is live.

Any thoughts would be amazing thanks in advance.

http://www.thinkstylestudio.com

harbingerOTV
12-20-2006, 02:03 AM
Honestly, I think the css is written very well. Seems to use shorthand as much as possible. Without diging through every aspect of the html it relates to , I don't think there is a whole lot that should be changed. It's only 7.3k to boot.

_Aerospace_Eng_
12-20-2006, 02:10 AM
Here it is a little more compressed

body {
background:#252525 url(img/bg.jpg) repeat-x bottom center fixed;
text-align:center;
min-width:600px;
}

.hidden {
display:none;
}

p {
font:normal 11px/1px Verdana, Arial, sans-serif;
text-align:right;
color:#484848;
margin:0;
padding:0;
}

p.appointments {
margin:0;
padding:0;
}

.space {
margin:0;
padding:0;
}

input.go {
background-color:#f7941d;
font-weight:700;
font-size:12px;
color:#FFF;
}

#form {
text-align:right;
padding:10px 20px 0 0;
}

#container {
background:#000;
width:600px;
height:330px;
text-align:left;
position:static;
margin:10% auto;
padding:0;
}

#p_centcolum {
background:#333;
width:600px;
height:300px;
text-align:left;
border:1px solid #3e3e3e;
}

#c_centcolum {
background:#666;
width:600px;
height:300px;
text-align:left;
border:1px solid #3e3e3e;
}

#h_centcolum {
background:#000 url(img/home-logo.gif) no-repeat center;
width:600px;
height:300px;
text-align:left;
border:1px solid #3e3e3e;
}

#c_r_body {
height:300px;
background:#666;
width:200px;
float:right;
text-align:left;
position:relative;
margin:0;
padding:0;
}

#c_l_body {
background:transparent url(img/contact_title.gif) no-repeat;
width:185px;
height:300px;
float:left;
}

.c_contact {
float:left;
width:25px;
height:300px;
border:0 solid;
text-align:center;
color:#fff;
background:#333 url(img/contact.gif) no-repeat 0 0;
}

#c_portfolio {
background:#666;
width:25px;
height:300px;
float:right;
}

.c_portfolio {
float:left;
width:25px;
height:300px;
border:0 solid;
text-align:center;
color:#fff;
background:#333 url(img/portfolio2.gif) no-repeat 0 0;
}

a.c_portfolio:link,a.c_portfolio:visited,a.c_portfolio:active {
color:#fff;
text-decoration:none;
background:#333 url(img/portfolio2.gif) no-repeat 0 0;
}

a.c_portfolio:hover {
color:#666;
background:#fff url(img/portfolio2.gif) no-repeat -25px 0;
}

.c_home {
float:left;
width:25px;
height:300px;
border:0 solid;
text-align:center;
color:#fff;
background:#333 url(img/home2.gif) no-repeat 0 0;
}

.contact_outer {
width:150px;
height:20px;
float:left;
position:relative;
margin:10px 40px 0;
}

.contact_title {
text-align:right;
position:relative;
margin-right:40px;
float:left;
width:50px;
height:5px;
}

.contact_form {
text-align:right;
float:right;
width:100px;
position:relative;
}

.h_home {
float:left;
width:25px;
height:300px;
border:0 solid;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/home.gif) no-repeat 0 0;
}

a.h_home:link,a.h_home:visited,a.h_home:active {
color:#fff;
text-decoration:none;
background:#333 url(img/home.gif) no-repeat 0 0;
}

a.h_home:hover {
color:#666;
background:#fff url(img/home.gif) no-repeat -25px 0;
}

#p_contact {
background:#333;
width:25px;
height:300px;
float:left;
position:relative;
}

#p_content {
background:transparent;
width:525px;
height:300px;
float:left;
}

#p_r_body {
background:#333;
width:351px;
height:300px;
float:left;
margin:0;
padding:0;
}

#p_l_body {
background:#333 url(img/portfolio_title.gif) no-repeat;
width:174px;
height:300px;
float:left;
}

.p_home {
float:left;
width:25px;
height:300px;
border:0 solid;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/home2.gif) no-repeat 0 0;
}

#botnav {
width:500px;
height:20px;
background:#000;
text-align:right;
float:right;
font-size:10px;
font-family:Verdana, Arial, sans-serif;
line-height:175%;
color:#666;
margin:0;
padding:5px 10px 0 0;
}

.footlink {
color:#f63;
line-height:175%;
}

a.footlink:link,a.footlink:visited,a.footlink:active {
color:#f63;
text-decoration:none;
}

a.footlink:hover {
color:#666;
}

input.space,textarea.space {
background-color:#f7941d;
font:normal 12px/14px Verdana, Arial, sans-serif;
color:#000;
}

#c_contact,#h_contact,#h_home {
background:#333;
width:25px;
height:300px;
float:left;
}

a.c_contact:link,a.c_contact:visited,a.c_contact:active,a.h_contact:link,a.h_contact:visited,a.h_con tact:active,a.p_contact:link,a.p_contact:visited,a.p_contact:active {
color:#fff;
text-decoration:none;
background:#333 url(img/contact.gif) no-repeat 0 0;
}

a.c_contact:hover,a.h_contact:hover,a.p_contact:hover {
color:#666;
background:#fff url(img/contact.gif) no-repeat -25px 0;
}

#c_home,#p_home {
background:#333;
width:25px;
height:300px;
float:right;
}

a.c_home:link,a.c_home:visited,a.c_home:active,a.p_home:link,a.p_home:visited,a.p_home:active {
color:#fff;
text-decoration:none;
background:#333 url(img/home2.gif) no-repeat 0 0;
}

a.c_home:hover,a.p_home:hover {
color:#666;
background:#fff url(img/home2.gif) no-repeat -25px 0;
}

.h_contact,.p_contact {
float:left;
width:25px;
height:300px;
border:0;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/contact.gif) no-repeat 0 0;
}

#h_portfolio,#p_portfolio {
background:#666;
width:25px;
height:300px;
float:left;
}

.h_portfolio,.p_portfolio {
float:left;
width:25px;
height:300px;
border:0;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/portfolio.gif) no-repeat 0 0;
}

a.h_portfolio:link,a.h_portfolio:visited,a.h_portfolio:active,a.p_portfolio:link,a.p_portfolio:visit ed,a.p_portfolio:active {
color:#fff;
text-decoration:none;
background:#333 url(img/portfolio.gif) no-repeat 0 0;
}

a.h_portfolio:hover,a.p_portfolio:hover {
color:#666;
background:#fff url(img/portfolio.gif) no-repeat -25px 0;
}
It could also do with a little code formatting.

<!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" />
<link href="sh.css" rel="stylesheet" type="text/css" />
<title>Think Style Studio .home</title>
</head>
<body>
<div id="container">
<div id="h_centcolum">
<div id="h_contact"> <a href="contact.html" class="h_contact"></a> </div>
<div id="h_portfolio"> <a href="portfolio.html" class="h_portfolio"></a> </div>
<div id="h_home"> <a href="index.html" class="h_home"></a> </div>
</div>
<div id="botnav"> <a href="index.html" class="footlink">Home</a> / <a href="portfolio.html" class="footlink">Portfolio</a> / <a href="contact.html" class="footlink">Contact</a> </div>
</div>
</body>
</html>

squiwrl
12-20-2006, 12:24 PM
Here it is a little more compressed

body {
background:#252525 url(img/bg.jpg) repeat-x bottom center fixed;
text-align:center;
min-width:600px;
}

.hidden {
display:none;
}

p {
font:normal 11px/1px Verdana, Arial, sans-serif;
text-align:right;
color:#484848;
margin:0;
padding:0;
}

p.appointments {
margin:0;
padding:0;
}

.space {
margin:0;
padding:0;
}

input.go {
background-color:#f7941d;
font-weight:700;
font-size:12px;
color:#FFF;
}

#form {
text-align:right;
padding:10px 20px 0 0;
}

#container {
background:#000;
width:600px;
height:330px;
text-align:left;
position:static;
margin:10% auto;
padding:0;
}

#p_centcolum {
background:#333;
width:600px;
height:300px;
text-align:left;
border:1px solid #3e3e3e;
}

#c_centcolum {
background:#666;
width:600px;
height:300px;
text-align:left;
border:1px solid #3e3e3e;
}

#h_centcolum {
background:#000 url(img/home-logo.gif) no-repeat center;
width:600px;
height:300px;
text-align:left;
border:1px solid #3e3e3e;
}

#c_r_body {
height:300px;
background:#666;
width:200px;
float:right;
text-align:left;
position:relative;
margin:0;
padding:0;
}

#c_l_body {
background:transparent url(img/contact_title.gif) no-repeat;
width:185px;
height:300px;
float:left;
}

.c_contact {
float:left;
width:25px;
height:300px;
border:0 solid;
text-align:center;
color:#fff;
background:#333 url(img/contact.gif) no-repeat 0 0;
}

#c_portfolio {
background:#666;
width:25px;
height:300px;
float:right;
}

.c_portfolio {
float:left;
width:25px;
height:300px;
border:0 solid;
text-align:center;
color:#fff;
background:#333 url(img/portfolio2.gif) no-repeat 0 0;
}

a.c_portfolio:link,a.c_portfolio:visited,a.c_portfolio:active {
color:#fff;
text-decoration:none;
background:#333 url(img/portfolio2.gif) no-repeat 0 0;
}

a.c_portfolio:hover {
color:#666;
background:#fff url(img/portfolio2.gif) no-repeat -25px 0;
}

.c_home {
float:left;
width:25px;
height:300px;
border:0 solid;
text-align:center;
color:#fff;
background:#333 url(img/home2.gif) no-repeat 0 0;
}

.contact_outer {
width:150px;
height:20px;
float:left;
position:relative;
margin:10px 40px 0;
}

.contact_title {
text-align:right;
position:relative;
margin-right:40px;
float:left;
width:50px;
height:5px;
}

.contact_form {
text-align:right;
float:right;
width:100px;
position:relative;
}

.h_home {
float:left;
width:25px;
height:300px;
border:0 solid;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/home.gif) no-repeat 0 0;
}

a.h_home:link,a.h_home:visited,a.h_home:active {
color:#fff;
text-decoration:none;
background:#333 url(img/home.gif) no-repeat 0 0;
}

a.h_home:hover {
color:#666;
background:#fff url(img/home.gif) no-repeat -25px 0;
}

#p_contact {
background:#333;
width:25px;
height:300px;
float:left;
position:relative;
}

#p_content {
background:transparent;
width:525px;
height:300px;
float:left;
}

#p_r_body {
background:#333;
width:351px;
height:300px;
float:left;
margin:0;
padding:0;
}

#p_l_body {
background:#333 url(img/portfolio_title.gif) no-repeat;
width:174px;
height:300px;
float:left;
}

.p_home {
float:left;
width:25px;
height:300px;
border:0 solid;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/home2.gif) no-repeat 0 0;
}

#botnav {
width:500px;
height:20px;
background:#000;
text-align:right;
float:right;
font-size:10px;
font-family:Verdana, Arial, sans-serif;
line-height:175%;
color:#666;
margin:0;
padding:5px 10px 0 0;
}

.footlink {
color:#f63;
line-height:175%;
}

a.footlink:link,a.footlink:visited,a.footlink:active {
color:#f63;
text-decoration:none;
}

a.footlink:hover {
color:#666;
}

input.space,textarea.space {
background-color:#f7941d;
font:normal 12px/14px Verdana, Arial, sans-serif;
color:#000;
}

#c_contact,#h_contact,#h_home {
background:#333;
width:25px;
height:300px;
float:left;
}

a.c_contact:link,a.c_contact:visited,a.c_contact:active,a.h_contact:link,a.h_contact:visited,a.h_con tact:active,a.p_contact:link,a.p_contact:visited,a.p_contact:active {
color:#fff;
text-decoration:none;
background:#333 url(img/contact.gif) no-repeat 0 0;
}

a.c_contact:hover,a.h_contact:hover,a.p_contact:hover {
color:#666;
background:#fff url(img/contact.gif) no-repeat -25px 0;
}

#c_home,#p_home {
background:#333;
width:25px;
height:300px;
float:right;
}

a.c_home:link,a.c_home:visited,a.c_home:active,a.p_home:link,a.p_home:visited,a.p_home:active {
color:#fff;
text-decoration:none;
background:#333 url(img/home2.gif) no-repeat 0 0;
}

a.c_home:hover,a.p_home:hover {
color:#666;
background:#fff url(img/home2.gif) no-repeat -25px 0;
}

.h_contact,.p_contact {
float:left;
width:25px;
height:300px;
border:0;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/contact.gif) no-repeat 0 0;
}

#h_portfolio,#p_portfolio {
background:#666;
width:25px;
height:300px;
float:left;
}

.h_portfolio,.p_portfolio {
float:left;
width:25px;
height:300px;
border:0;
font:normal 10px Verdana, Arial, sans-serif;
text-align:center;
color:#fff;
background:#333 url(img/portfolio.gif) no-repeat 0 0;
}

a.h_portfolio:link,a.h_portfolio:visited,a.h_portfolio:active,a.p_portfolio:link,a.p_portfolio:visit ed,a.p_portfolio:active {
color:#fff;
text-decoration:none;
background:#333 url(img/portfolio.gif) no-repeat 0 0;
}

a.h_portfolio:hover,a.p_portfolio:hover {
color:#666;
background:#fff url(img/portfolio.gif) no-repeat -25px 0;
}
It could also do with a little code formatting.

<!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" />
<link href="sh.css" rel="stylesheet" type="text/css" />
<title>Think Style Studio .home</title>
</head>
<body>
<div id="container">
<div id="h_centcolum">
<div id="h_contact"> <a href="contact.html" class="h_contact"></a> </div>
<div id="h_portfolio"> <a href="portfolio.html" class="h_portfolio"></a> </div>
<div id="h_home"> <a href="index.html" class="h_home"></a> </div>
</div>
<div id="botnav"> <a href="index.html" class="footlink">Home</a> / <a href="portfolio.html" class="footlink">Portfolio</a> / <a href="contact.html" class="footlink">Contact</a> </div>
</div>
</body>
</html>

Hell Yeah thats what im talking about! thanks a ton! it give me something to go from on future versions. Basically the question i still have i suppose is, is there a better way of doing what i've done. As in another way to make the site act as it does but coded in a different fashion?

Thanks again for everything!

ronaldb66
12-20-2006, 01:14 PM
No direct answer to your questions, but I'd personally discourage giving both ids and classes identical names. You can do it, and it will work without a hitch, I just think there's an increased risk at confusion.

Also, as a general point of thought: in some cases, the number of classes/ids used, and thereby in to some extent the number of separate style rules, can be reduced by using a parent element in the rule selector.

To use an example from your main page, take this piece of markup:

<div id="botnav">
<a href="index.html" class="footlink">Home</a> /
<a href="portfolio.html" class="footlink">Portfolio</a> /
<a href="contact.html" class="footlink">Contact</a>
</div>
Instead of classing each link and using the selector "a.footlink" or for short ".footlink", you could do away with the classes and use "#botnav a" to achieve the same effect.

squiwrl
12-20-2006, 02:44 PM
I am retardedly happy with all the points thus far! I am learning so much just from this one simple question i thank you! :) What do you guys think of the navigation ( the way it reacts. ) the "slider idea" like or dislike?

T

codingmasta
12-20-2006, 03:36 PM
Hey! how could you make a message display up-to-down and vice versa?

whizard
12-20-2006, 05:23 PM
Hey! how could you make a message display up-to-down and vice versa?

A: This question makes no sense.

B: Don't threadjack. Start a new thread for your questions.

Dan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum