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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    My very first try at hand coding - comments welcome - good or bad

    My very first try a coding - comments welcome - good or bad
    I have only just started HTML and CSS, I have started trying to setup a site which can be found at thetechhub.co.uk, I'm hoping people can have a quick look and let me know their views, as I feel this will help me go in the right direction. As I've said it is very very basic, and looks terrible compared to what you guys are probably capable of.

    Thanks

    Code:
    #container {
    	width: 964px;
    	margin: 0 auto;
    
    	
    }
    
    
    #primary {
    	
    	float: left;
    	width: 190px;
    	height: 650px;
    
    	
    }
    
    
    #primary ul {
    
    float:left;
    list-style-type: none;
    
    
    }
    
    #content {
    
    	float: left;
    	width: 500px;
    	height: 650px;
    	margin:  10px 0px 20px 10px;
    	font-family: Century Gothic, sans-serif; font-size: 16px; line-height: 1.75em;
    	padding:5px;
    	width:500px;height:650px;
    
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    -webkit-box-shadow: #B3B3B3 13px 13px 13px;-moz-box-shadow: #B3B3B3 13px 13px 13px; 
    box-shadow: #B3B3B3 10px 10px 10px;
    overflow:auto;
    
    
    	
    }
    
    
    
    .floatbox  {
    
    float: right;
    width: 160px;
    border:none;
    height:500px;
    margin-top: 100px;
    margin-left:5px;
    
    }
    
    .floatbox p {
    
    float: left;
    margin-top:30px;
    border:2px solid #05000D;
    padding:2px;
    
    }
    
    
    
    
    .inlineprice   {
    
    float:right;
    
    }
    
    
    .inlinekey  {
    
    color:red;
    
    }
    
    
    .menuset ul   {
    
    margin:0 auto;
    list-style-type: none;
    padding-right:5px;
    font-family: arial, serif;
    
    }
    
    .menuset li   {
    
    
    margin: 2em 0;
    font-weight:bold;
    font-family:  Trebuchet MS1, Trebuchet MS, sans-serif;
    
    }
    
    
    .menuset h1  {
    
     margin-left:42px;
    font-size: 20px;   
    text-decoration: underline;
    text-shadow: 0.1em 0.1em 0.1em grey;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    
    }
    
    .menuset h2   {
    
    margin-left:42px;
    font-size:14px;
    font-family: "Book Antiqua", Palatino, serif;
    font-style:italic;
    
    }
    
    
    .mealdescription  {
    
    font-style:italic;
    font-size:14px;
    font-weight:100;
    
    }
    
    
    
    
    
    #secondary p {
    
    font-family: comic sans, Century Gothic, sans-serif;
    margin-bottom: 0px;
    
    }
    
    
    #secondary {
    
    font-family: comic sans, Century Gothic, sans-serif, font-size: 16px;
    float: right;
    width: 235px;
    margin: 10px 0px 0px 0px;
    height: 660px;
    width: 235px; height:660px;
    
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    -webkit-box-shadow: #B3B3B3 13px 13px 13px;-moz-box-shadow: #B3B3B3 13px 13px 13px; 
    box-shadow: #B3B3B3 10px 10px 10px;
    text-align: center;
    font-weight: bold;
    
    
    
    }
    
    #order  {
    
    height:430px;
    width:200px;
    line-height:.25em;
    margin: 0px 15px 10px;
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#f8fbc8;
    
    }
    
    
    
    
    
    
    #details  {
    
    line-height:.13em;
    margin: 0px 38px 10px;
    width: 150px; height:155px;
    -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
    border:1px solid #05000D;background-color:#FFFFFF;
    
    }
    
    
    
    
    
    #footer {
    
    text-align:center;
    font-family: courier; color: #66666a;
    clear: both;
    border: none;
    line-height: .25em;
    
    }
    
    .boldclass   {
    
    font-weight: bold;
    
    }
    
    
    
    .redclass   {
    
    font-weight: bold;
    font-decoration: underline;
    font-family: courier; color: #f8091f;
    font-size: 18px;
    
    }
    
    
    .button {
    
    border-top: 1px solid #000203;
    margin-left: -40px;
    margin-bottom:5px;
    
       background: #b7b9f7;
       background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#b7b9f7));
       background: -webkit-linear-gradient(top, #ffffff, #b7b9f7);
       background: -moz-linear-gradient(top, #ffffff, #b7b9f7);
       background: -ms-linear-gradient(top, #ffffff, #b7b9f7);
       background: -o-linear-gradient(top, #ffffff, #b7b9f7);
       padding: 7px 5px;
       -webkit-border-radius: 7px;
       -moz-border-radius: 7px;
       border-radius: 7px;
       -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
       -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
       box-shadow: rgba(0,0,0,1) 0 1px 0;
       text-shadow: rgba(0,0,0,.4) 0 1px 0;
       color: #000000;
       font-size: 12px;
       font-family:  tahoma, Geneva, sans-serif;
       text-decoration: none;
       vertical-align: middle;
    font-weight: bold;
    
       }
    
    
    
    .button:hover {
    
       border-top-color: #6e6f9e;
       background: #6e6f9e;
       color: #ffffff;
    
       }
    
    
    .button:active {
       border-top-color: #ededed;
       background: #ededed;
    
       }
    Last edited by Bradders; 06-15-2012 at 01:57 PM.

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Here is a tip for you but it has to do with using the forums text editor. If you click the button that looks like a pound sign at the top of the editor it will give you a set of "CODE" and "/CODE" brackets. Place your code [brackets] in between the brackets like so [/brackets] . It will put your code into a scrollable table.. You should use it any time you are adding code to the editor.

    On topic: You have a decent enough start for your website. You need to get rid if the underlined links in the menu though. Add this to your styles.


    Code:
     a {
     text-decoration: none;
    }

  • Users who have thanked badwolf for this post:

    Bradders (06-15-2012)


  •  

    Posting Permissions

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