Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Better way to make site function than current one.

    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
    Last edited by squiwrl; 12-19-2006 at 03:19 PM. Reason: Title sucked :p

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Here it is a little more compressed
    Code:
    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_contact: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:visited,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.
    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>
    <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>
    Last edited by _Aerospace_Eng_; 12-20-2006 at 02:13 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Here it is a little more compressed
    Code:
    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_contact: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:visited,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.
    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>
    <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!

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Class/id names, levels

    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:
    Code:
    <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.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey! how could you make a message display up-to-down and vice versa?
    ALWAYS remember to validate your code

  • #8
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Quote Originally Posted by codingmasta
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •