Bradders
06-14-2012, 08:51 PM
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
#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;
}
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
#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;
}