...

View Full Version : My very first try at hand coding - comments welcome - good or bad



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;

}

badwolf
06-14-2012, 10:25 PM
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 in between the brackets like so . 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.



a {
text-decoration: none;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum