[CSS Help] Need your suggestions.

Hello Experts,

I have a store ( my first two links on my signature ) and I want to make it look better. Although I am not very good at CSS, I can still find my way around it.

Here is the code:

div#container{text-align:left;width:820px;margin:15px auto 15px auto;min-height:600px;border:5px solid #ff0066;background-color:#ffffff;padding:10px}
div#header{position:relative;margin-top:10px;height:85px;background-color:#ffffff;}
div#header_with_logo{position:relative;margin-top:10px;background-color:#ffffff;}
div#content{float:right;padding: 20px 0px 20px 0;min-height:500px;_height:500px;width:645px;}
div#wrapper{margin-top:0px;clear:both;border-top:1px solid #000000;}
div#menu{border-right:0px  #;margin-left:0px;text-align:left;float:left;width:150px;min-height:500px;_height:500px;background-color:#ffffff;}
div#store_name{z-index:1;display:block;text-align:left;}
div#store_name_with_logo{text-align:left;}
div#top_menu{z-index:-1;display:block;text-align:right;font-size:.8em;}
div#top_menu_with_logo{z-index:-1;display:block;text-align:right;font-size:.8em;}
div#breadcrumb{text-align:right;margin-bottom:10px;margin-right:5px;padding-right:5px;width:640px;float:right;background-color:#eeeeee;color:#000000;font-size:.9em;text-decoration:none;}
div#footer{clear:both;position:relative;border-top:1px solid #000000;padding:5px;text-align:center;font-size:0.7em;}
div#footer a{display:inline;padding:0;color: #333333}

body {	background-color:		#000000;
	color:					#666666;
	font-family:			verdana,arial,sans-serif;
	font-size:				90%;
	line-height:			1.5em;
	margin:				0px;
}

.header_text {
	font-size: 				2.4em;
	line-height:			1.3em;
	color:					#000000;
	font-weight:			bold;
	font-family:			verdana,arial,sans-serif;
}	

.header_text a:hover { }

.header_text a:link {
	color:					#000000;
}

.header_text a:visited {
	color:					#000000;
}

h1 {
	font-size: 				2.5em;
	color:					#000000;
}			
			
h2 {
	font-size: 				1.6em;
	color:					#ff0066;
}

h3 {
	font-size: 				1.2em;
	color:					#000000;
}
			
a:link {
	color:					#ff0066;
	text-decoration:		none;
}

a:visited {
	color:					#000000;
	text-decoration:		none;
}

a:hover {
	text-decoration:		none;
	color:					#ffffff;
	background-color:		#999999;
}

.small_text {
	font-size:	.7em;
}

.medium_text {
	font-size:	.9em;
}

.menu_item a {
	text-decoration:		none;
	padding:				0.3em;
	font-size:				0.85em;
}

.menu_item a:visited {
	color:					#000000;
	text-decoration:		none;
	padding:				0.3em;
	font-size:				0.85em;
}

.menu_item_wrapper {
	margin-left:			15px;
}

ul.navigation {
	padding:				0 0.5em;
	list-style-type:		none;
}

.navigation a {
	text-decoration:		none;
	padding:				0.3em;
	font-size:				1.4em;
}

.navigation li {
	padding:				0.3em;
}

.message {
	padding: 10px;
	border: 1px dotted #666; 
	background-color: 	#efaee3;
}

.error {
	padding: 10px;
	border: 1px dotted #666; 
	background-color: 	#F8F8DE;
}

.alert {
	color: #ff0000;
}

.network_box {
	padding: 5px;
}

.connection {
	padding: 	3px;
	border: 1px solid #aaa; 
}

.connection_text {
	font-size: 	.8em;
}

.connection:hover {
	background-color:		#FCD5F1;
}

.product_box {
	padding: 5px;
	border: 1px solid #666666; 
	background-color: 	#ffffff;
	margin-top: 0px;
	text-align:center;
}

.product_box:hover {
	background-color:	#FCD5F1;
}

a .product_title {
	font-size: 			1.0em;
	line-height:			1.0em;
	color:				#ff0066;
	display:			block;
}

a:visited .product_title {
	color:              #000000;
}

.product_price {
	font-size: 			0.9em;
	color:				#666666;
	display:			block;
}

.product_title_detail {
	font-size:24px;
	color:#ff0066;
}

.addtocart_box {
	background-color:#F2F2F2;
	border: 1px solid #ccc;
	padding:5px;
}

.addtocart_box_head {
	background-color:#ADADAD;
	border: 1px solid #ccc;
	padding:5px;
	font-size:	.9em;
	color: #333;
}

.contact_box {
	border: 1px solid #000000;
	padding:5px;
	width:630px;
}

.cart_box {
	border: 1px solid #000000;
	padding:5px;
	width:630px;
}

.cart_box_head {
	border: 1px solid #000000;
	padding:5px;
	font-size:	.9em;
}

.cart_box_item {
	border: 1px solid #000000;
	padding:5px;
	font-size:	.9em;
}

.btn {
	background-color:#efaee3;
	color: #000000;
	font-weight:bold;
	border: 1px solid #333;
	padding:3px;
	font-size:	.9em;
}

.btn_sub {
	background-color:#efaee3;
	color: #000000;
	font-weight:bold;
	border: 1px solid #666;
	padding:3px;
	font-size:	.8em;
}

.btn_pay {
	background-color:#ff0066;
	color: #000000;
	font-weight:bold;
	border: 1px solid #666;
	padding:5px;
	font-size:	1.1em;
}

Code (markup):

Any suggestions are welcome.

Thanks

Dan

 

first I would recomend you to structure the css file.

after that it might be easier to follow the css and help you

 

Thank you, any ideas how I can accomplish that?

 

I would do it this way

#example{
              background-image:url(example.jpg);
              color: #000;
}

Code (markup):

this will allow the reader to see all the styles you're using

 

What do you mean by "styles"?