Website coding help

MarkW7

MarkW7

MarkW7

Permabanned
Joined
30 Nov 2008
Posts
731
Location
Manchester
Hi all,

I've got my domain and hosting running, www.manchestercompute.co.cc - Now i need a layout, i've got a pretty good idea of what i'm after i just need someone to point me in the right direction and help me peace it together.

I want this site up asap and i'm willing to work at it - i can also rattle a few images up in photoshop.

Thank you, Mark.
 
tis dynamically expanding. Just a little 30min mess around before my afternoon nap.

Doesn't quite go together, the bottom is too web 2.0 and the top is too small business, so one or the other needs to be changed depending on what style you want. IMO of course :)

Any way something for you to play with should you be interested.




Code: 
<html>
<head>
<title>My Company</title>

<meta name="title" content="" /> 
<meta name="description" lang="en" content="" /> 
<meta name="keywords"    content="" /> 
<meta name="category"    content="general" /> 
<meta name="robots"      content="index,follow" /> 

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

</head>

<body>

	<div id="wrapper">
	
		<div id="header">
		
			<div id="logo">
				<a href="index.html" title="Company">
				<img src="css/images/Logo.png" alt="Logo" />
				</a>
			</div> <!-- Logo -->
			
			<div id="name">
				<a href="index.html" title="Company">
				<img src="css/images/CompanyName.png" alt="Manchester Compute" />
				</a>
			</div> <!-- NAME -->
		
		</div> <!-- Header -->
		
		<div id="menu">
		
			<ul class="menu">
				<li><a href="index.html" title="Home - Manchester Compute"><img src="css/images/tabHome.png" alt="Home" /></a></li>
				<li><a href="services.html" title="Services - Manchester Compute"><img src="css/images/tabServices.png" alt="Services" /></a></li>
				<li><a href="shop.html" title="Shop - Manchester Compute"><img src="css/images/tabShop.png" alt="Shop" /></a></li>
				<li><a href="links.html" title="Links - Manchester Compute"><img src="css/images/tabLinks.png" alt="Links" /></a></li>
				<li><a href="contactus.html" title="Contact Us - Manchester Compute"><img src="css/images/tabContactus.png" alt="Contact Us" /></a></li>
			</ul>
		
		</div> <!-- Menu -->
		
		<div id="main_container">
		
		
		
		
		
		
		</div> <!-- Main Container -->
		
		
		
		
		


	</div> <!-- Wrapper -->
	
	
		<div id="footer">
		
		<ul class="contact_us">
			
			
			<li>04563 224498</li>
			
			<li>[email protected]</li>
			
			<li>Eric Wimp</li>
			<li>29</li>
			<li>Acacia Avenue</li>
			<li>Nutty Town</li>
		
		</ul>
		
		<ul class="sitemap">
			<li>Home</li>
			<li>Services</li>
			<li>Shop</li>
			<li>Links</li>
			<li>Contact Us</li>
		
		</ul>
		
		<ul class="myfooter">
			<li>This is my footer</li>
			<li>My Lovely Footer</li>
			<li>Oh what a lovly footer</li>
		
		</ul>
		

		</div> <!-- Footer -->
	
	<div id="copy">Copyright &copy; 2009 Manchester Compute. All Rights Reserved.</div>
	


</body>

</html>


Code: 
/* ------ PAGE RESET -----*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	font-size: 100%;
	
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}






* {

font-family: arial;
}

body {
margin-top: 10px;
background: #494950;
}




#wrapper {
width: 90%;
border: 1px solid #b3b3b3;
outline: 1px solid #979797;
height: auto;
margin-left: auto;
margin-right: auto;

background: #ffffff;
}


		#header{
		height: 86px;
		width: 100%;
		}
		
				#logo {
				width: 100px;
				height: 100%;
				
				
				float: left;
				}
				
				
				#name {
				margin-top: 10px;
				height: auto;
				float: left;
				}
				
				#name h1 {
				font-size: 16pt;
				color: gray;
				
				}
				

		#menu {
		height: 35px;
		width: 100%;
		}
		
				#menu ul {
				background: black;
				width: 100%;
				height: 35px;
				}
				
				#menu ul li {
				float: left;
				}
				
				#menu ul li a {
				display: block;
				}
				

		#main_container{
		width: 100%;
		min-height: 600px;
		
		}
		
		
		#footer {
		height: 160px;
		width: 90%;
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
		background: gray;
		
		
		line-height: 120%;

		}
		
				ul.contact_us {
				
				width: 30%;
				float: left;
				height: 80%;
				font-size: 10pt;
				padding-left: 15px;
				padding-right: 15px;
								margin-top: 16px;
				color: #ffffff;
				
				}
				
				
				
				
				
				ul.sitemap {
				
				width: 30%;
				float: left;
				height: 80%;
				font-size: 10pt;
				padding-left: 15px;
				padding-right: 15px;
				margin-top: 16px;
				color: #bdbdbd;
				border-right: 1px solid white;
				border-left: 1px solid white;
				}
				
				
				
				
				ul.myfooter {
			
				width: 30%;
				float: left;
				height: 80%;
				
				font-size: 10pt;
				padding-left: 15px;
				padding-right: 15px;
								margin-top: 16px;
				color: #bdbdbd;
				}
				
		#copy {
		
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 15px;
			margin-bottom: 15px;
			
			font-size: 8pt;
			color: gray;
		}
 
Thank you, i've copied the code and made test.html and style.css; i get this. (In firefox).

All files here; http://www.manchestercompute.co.cc/download/

 
Last edited:
the folder structure has changed.

my images were located in a folder in my css folder called images.

so you'll either need to create a folder in you css folder called images and drop them all in or change the paths in the css / HTML


Also that last footer is out in firefox, drop the width down to 29% on ul.myfooter and see if that fixes it


BTW i didn't get round to doing the menu. Is easy enough with either jscript or css though.
 
Thank you, i've changed it to images/ so now the images are showing - also changed the ul.footer to 29% and it fixed it :)

The menu is the bit were i'm having a problem. :( (ATM i can only access my laptop, and not my desktop, (bigger, 22") i'm guessing this will expand the webpage to a 22".
 
MarkW7 said:
Thank you, i've changed it to images/ so now the images are showing - also changed the ul.footer to 29% and it fixed it :)

The menu is the bit were i'm having a problem. :( (ATM i can only access my laptop, and not my desktop, (bigger, 22") i'm guessing this will expand the webpage to a 22".
Click to expand...

It is set so it will always be 90% of the size of the browsers window, so yeh, switching to a larger screen it will take up more room.

The menu shouldn't be that hard, just do an image shift or onmouse over background change in the css. If i'm bored tomorrow I may have a go for you.
 
You must log in or register to reply here.
Back
Top Bottom