I need some ideas..

kylendm · Oct 4, 2010

Hey guys I've been currently making a website for a client.

Here's his current website.

http://baroncustomamps.com

and this is my remodel of it.

http://bcas1.webs.com/index.html

It feels so empty for the main page. Anyone want to shoot me some ideas?

P.S. also I've been using :hover for the products page for the drop down. I realize that doesn't work in IE7. Anyone want to give me a tip so I can make the drop down work for most browsers?

HTML Code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="flexcroll.js"></script>
</head>
<body>
<div id="container">
	<div id="header">
<div id="logo">
</div> <!--End of logo-->      
		<div id="navMenu">
			<ul>
				<li>
       	     	<div id="navimage1"><a href="#"><img src="Images/home.jpg" width="100" height="40" border="0px"/></a>\
        	        </div>
            	</li>
			</ul> <!-- End of navMenu Image One-->
        
			<ul>
				<li>
   		         	<div id="navimage2"><a href="#"><img src="Images/about.jpg" width="100" height="40" border="0px"/></a>
    	        	</div>
    	        </li>
			</ul> <!-- End of navMenu Image Two-->

			<ul>
				<li>
            		<div id="navimage3"><a href="#"><img src="Images/products.jpg" width="100" height="40" border="0px" /></a>
               	    </div>
 						 <ul>
							<li><a href="#"><img src="Images/MII.jpg" width="100" height="40" border="0px"/></a></li>
							<li><a href="#"><img src="Images/K.jpg" width="100" height="40" border="0px"/></a></li>
							<li><a href="#"><img src="Images/B.jpg" width="100" height="40" border="0px"/></a></li>
						</ul>    
				</li>
			</ul> <!-- End of navMenu Image Three-->

			<ul>
				<li>
           		 	<div id="navimage4"><a href="#"><img src="Images/faq.jpg" width="69" height="40" border="0px"/></a>
         	    	</div>    
				</li>
			</ul> <!-- End of navMenu Image Four-->

			<ul>
				<li>
           		 	<div id="navimage5"><a href="#"><img src="Images/gallery.jpg" width="100" height="40" border="0px"/></a>
               		</div>  
				</li>
			</ul> <!-- End of navMenu Image Five-->

			<ul>
				<li>
           			<div id="navimage6"><a href="#"><img src="Images/cont.jpg" width="100" height="40" border="0px"/></a>
                	</div>   
				</li>
			</ul> <!-- End of navMenu Image Six-->
        
	<br class="clearFloat" />
    
	</div> <!-- End of navMenu-->
</div> <!-- End of header-->

<div id="box">
	<div id="boxLeft">
		<div id="boxName">
		</div> <!-- boxName-->
			<div class="flexcroll">
				<div id="boxLeftText">             
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sem erat, sed adipiscing diam. Curabitur massa nunc, dapibus vel imperdiet at, pharetra in est. Mauris eleifend ligula sed libero suscipit lacinia. Aenean pulvinar lacus ultrices diam vestibulum mollis. Quisque eu velit sed dolor iaculis euismod non sed lacus. Ut lobortis augue non orci sagittis volutpat. Vivamus lobortis molestie gravida. Fusce ac gravida orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec velit diam, porttitor sed ultricies eu, ullamcorper non ipsum. Proin suscipit facilisis consectetur.
<address></address>
Aliquam dignissim enim nec urna bibendum bibendum. Praesent volutpat dictum accumsan. Aliquam sodales metus in neque congue mattis. Fusce sed tempus libero. Morbi convallis turpis eget est convallis vestibulum. Nunc eget metus vel orci scelerisque sollicitudin id vitae massa. Etiam et diam ligula, ac consequat lectus. Curabitur mollis facilisis iaculis. Integer sit amet ligula vel quam aliquam convallis ut et tellus. Praesent tempor neque quis libero porta nec porttitor est commodo. Suspendisse in dictum orci. Donec dolor quam, malesuada quis malesuada sit amet, congue et ipsum. Fusce lobortis metus ac dolor vestibulum in varius velit tincidunt. Nunc auctor bibendum ipsum, a auctor purus ullamcorper id. Morbi varius turpis eget erat posuere vitae tincidunt sapien interdum.
<p>
Aliquam ac eros neque, a facilisis lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla viverra sagittis odio at cursus. Suspendisse potenti. Nunc vitae est ac felis pulvinar interdum. Nulla facilisi. Praesent malesuada ultrices arcu dignissim euismod. Aenean eleifend libero sem, vel condimentum urna. Nunc consequat lacus sit amet nisl bibendum eu condimentum orci aliquam. Nam mattis metus vel sem accumsan sollicitudin. Phasellus rhoncus imperdiet luctus. Cras viverra nisi sed justo vehicula convallis. Curabitur placerat convallis justo tristique volutpat. Curabitur ac suscipit ligula. Mauris commodo commodo ligula sed feugiat. Sed tempus, lacus et tempor viverra, dolor mauris commodo massa, et porttitor eros est et justo. Vivamus feugiat varius quam nec egestas. Aenean nibh nisl, mattis quis consectetur at, tempus quis sem. Duis id nulla urna, congue egestas velit. Fusce fermentum elit in velit luctus nec egestas nunc porttitor.
<p>
Nulla laoreet ante ut lorem rhoncus non porttitor lacus condimentum. Nunc imperdiet venenatis ipsum, eu scelerisque mi elementum nec. Sed bibendum aliquet magna, non condimentum augue consequat in. Morbi convallis sapien ut dui pretium quis hendrerit mauris dignissim. Proin id est nec lectus gravida auctor ut tincidunt felis. Aliquam tincidunt mi ligula, sit amet consequat odio. Etiam ut tortor eu purus dignissim hendrerit. Mauris id erat pretium nulla lobortis egestas sit amet non justo. Nunc fermentum odio neque. Donec ultrices odio sit amet diam malesuada quis luctus arcu malesuada. Duis tincidunt massa pellentesque odio rhoncus ut tincidunt eros iaculis.
<p>
Etiam mattis enim nec mi fringilla sit amet iaculis orci feugiat. Sed porta, tellus non tristique cursus, erat purus auctor lorem, in molestie justo quam nec est. Vestibulum sagittis est quis odio iaculis dictum pulvinar turpis vestibulum. Donec sed arcu lectus. Nulla facilisi. Fusce ultricies metus a sapien tristique convallis. Etiam pellentesque libero ut magna lobortis porta. Phasellus nisi ante, pulvinar posuere tincidunt eget, bibendum nec quam. Cras nisi magna, egestas quis pellentesque eget, interdum at lectus. In eget sem id turpis posuere volutpat eu vitae ante. Nulla tincidunt libero non tellus varius porttitor iaculis massa tincidunt. Nullam gravida nunc ac ante commodo auctor. Sed rutrum, est sit amet ornare aliquet, erat tortor eleifend sem, a condimentum ante enim nec libero. In porttitor venenatis lorem convallis volutpat. In hac habitasse platea dictumst. Aliquam sagittis, felis eget faucibus posuere, orci ante laoreet erat, ut elementum dui felis et est. Phasellus bibendum mollis iaculis. Curabitur vestibulum augue eu mauris fermentum faucibus. Ut dignissim, purus non venenatis congue, nisl erat semper nunc, quis sagittis tellus ante non nisi. Integer tempor orci sed felis aliquam commodo. 
				</div> <!--End of boxLeftText-->
            </div> <!--End of flexcroll-->
		</div> <!--End of boxLeft-->
        
<div id="boxRight">
	<div id="boxNameRight">
	</div> <!--End of boxNameRight-->
    	<div id="boxRightText">
<object width="190" height="153"><param name="movie" value="http://www.youtube.com/v/Hr3bcyxvQrw?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value=				"always"></param><embed src="http://www.youtube.com/v/Hr3bcyxvQrw?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="190" height="153"></embed></object>
			<p></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sem erat, sed adipiscing diam. Curabitur massa nunc, dapibus vel imperdiet at, pharetra in est. Mauris eleifend ligula sed libero suscipit 		lacinia. Aenean pulvinar lacus ultrices diam vestibulum mollis. Quisque eu velit sed dolor iaculis euismod non sed lacus. Ut lobortis augue non orci sagittis volutpat. Vivamus lobortis molestie gravida. Fusce ac gravida orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec velit diam, porttitor sed ultricies eu, ullamcorper non ipsum. Proin suscipit facilisis consectetur.
				<p></p>
		</div><!--End of bixRightText-->
	</div><!--End of boxRight-->
</div><!--End of container-->
</body>
</html>

kylendm · Oct 4, 2010

CSS Code

HTML:

@charset "utf-8";
/* CSS Document */
#container
{
	margin-top:20px;
	padding:0;
	position:relative
	}
body
{
	background:url(Images/BG.jpg) repeat left;
	margin: auto;
	width:936px;
	padding:0;
}
#header
{
	height:114px;
	margin-left:-5px;
	width:950px;
}
#logo
{
	background-image:url(Images/Logo.jpg);
	background-repeat:no-repeat;
	height:120px;
	width:314px;
	float:left;
}
#seperator
{
	background-image:url(Images/seperator.jpg);
	background-repeat:no-repeat;
	width:1px;
	height:35px;
}
#navimage1
{
	padding-right:-10px;
}
#navimage2
{
	padding-right:15px;
}
#navimage3
{
	padding-right:0px;
}
#navimage4
{
	margin-right:-15px;
}
#navimage5
{
	margin-right:0px;
}
#navimage6
{
	margin-right:10px;
}
#navMenu
{
	padding-top:34px;
	margin-right:10px;
}
#navMenu ul
{
	margin-:0;
	padding:0;
	line-height:26px;
		color:#1e1e1e

}
#navMenu ul ul
{
	position:absolute;
	visibility:hidden;
	top:80px;
	left:430px;
		color:#1e1e1e

}
#navMenu ul li:hover ul
{
	visibility:visible;

}
#navMenu li
{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
		color:#1e1e1e

}
#navMenu ul li a
{
	text-align:center;
	height:40px;
	width:100px;
	display:block;
	color:#1e1e1e
}
#box
{
	width:936px;
	height:750px;
	}
#boxLeft
{
	background-image:url(Images/leftbody.jpg);
	background-repeat:no-repeat;
	color:#FFF;
	float:left;
	width:684px;
	height:750px;
	}
#boxLeftText
{
	width:605px;
	height:900px;
	margin-left:59px;
	margin-right:20px;
	}
#boxRight
{
	margin-top:1px;
	background-image:url(Images/rightbody.jpg);
	background-repeat:no-repeat;
	width:252px;
	color:#FFF;
	float:right;
	height:750px;

	}
#boxRightText
{
margin-left:14px;
margin-top:8px;;
	margin-right:46px;

	}
	#boxRightTextText
{
margin-left:14px;
margin-top:8px;;
	margin-right:46px;
	height:200px;
	width:200px;

	}
#boxName
{
	margin-top:20px;
	margin-left:300px;
	background-image:url(Images/welcome.jpg);
	background-repeat:no-repeat;
	widows:140px;
	height:40px;
	}
	#boxNameRight
{
	background-image:url(Images/news.jpg);
	background-repeat:no-repeat;
	height:35px;
	widows:93px;
	margin-left:57px;
	margin-top:23px;
}
.clearFloat
{
	clear:both;
	margin:0;
	padding:0;
}
/*Scroll options */
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 10px;
height:300px !important;
margin-top:130px;
background-color: white;
}
.vscrollerbar {
width: 10px;
background-color: #1e1e1e;
}
.hscrollerbase {
height: 10px;
background-color: white;
}
.hscrollerbar {
height: 10px;
background-color: black;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.flexcroll
{
	height:600px;
	margin-right:-1px;
}
address
{
	margin-left:40px;
	margin-right:40px;
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted
}

web_design · Oct 8, 2010

try using some jquery animation to livenit up a little also filesize of the images is quite large. apart from that i like it

pak001man · Oct 13, 2010

More colors would be a great idea. Also if you would add more content that would help a lot. You could also make that youtube video a bit bigger.

I need some ideas..

kylendm

New Member

kylendm

New Member

web_design

New Member

pak001man

New Member