Time to get your own back... what do you think?

Discussion in 'Websites' started by sabian1982, Oct 10, 2006.

  1. #1
    I decided this morning it was time for a change - firstly because i've only recently made the transition from tables to css design, secondly cause my old site is really rather out dated and old (despite containing a custom built blog) and thirdly cause i wanted to experiment with css positioning specifically centralising regions on the browser.

    Let me know what you think, what the load time is like. Obviously i'm working on the design of the site at the moment (hence the links don't work) not the text content so obviously bare that in mind.

    So what do you think of my first proper CSS design?

    http://www.michaelthorn.co.uk/redesign

    Be brutal!
     
    sabian1982, Oct 10, 2006 IP
  2. mastermemei

    mastermemei Banned

    Messages:
    262
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The load time was very short.

    Nice homepage but the rest of the links arent working
     
    mastermemei, Oct 10, 2006 IP
  3. mstwntd

    mstwntd Peon

    Messages:
    72
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Looking at the code, it's a good effort. Tips? Make better use of short-hands and inheritance:

    
    body {
      margin: 0;
      padding: 0;
      background: url(../images/bg.gif);
      text-align: center;
      font: 12px Arial, Helvetica, sans-serif;
    }
    
    /*Font Elements*/
    
    h1 {
      font-weight: bold;
      color: #9C834D;
      margin: 0;
      letter-spacing: 2px;
    }
    
    p {
      color: #9C834D;
      text-align: justify;
      line-height: 20px;
      margin: 0.5em 0;
    }
    
    /*Links*/
    
    a {
      text-decoration: none;
      color: #9C834D;
      border-bottom: 1px solid #9C834D;
    }
    
    a:hover {
      border-bottom-style: dotted;
    }
    
    a:active {
      color: #3283B0;
      border-bottom: 1px dotted #999;
    } 
    
    /*Layers*/
    
    #container {
      margin: 0 auto;
      width: 808px;
      text-align: left;
    }
    
    #content {
      background: url(../images/backgroundcontainer.gif);
      padding: 20px 75px 20px 70px;
    }
    
    #footer {
      background: url(../images/footer.jpeg) no-repeat;
      padding: 7px 75px 0 70px;
      height: 100px;
      font-size: 10px;
      color: #9C834D;
    }
    
    Code (markup):
     
    mstwntd, Oct 10, 2006 IP
  4. sabian1982

    sabian1982 Notable Member

    Messages:
    2,028
    Likes Received:
    161
    Best Answers:
    0
    Trophy Points:
    210
    #4
    Thanks i've also just worked out about the float property hence the bottom of the box now over laps beyond the pale horizontal band and doesnt move either when you resize the browser. Tried it with margin sizes initially - although found padding works better... take it thats the best method?
     
    sabian1982, Oct 10, 2006 IP
  5. sabian1982

    sabian1982 Notable Member

    Messages:
    2,028
    Likes Received:
    161
    Best Answers:
    0
    Trophy Points:
    210
    #5
    Anyone else?
     
    sabian1982, Oct 11, 2006 IP