siark.com blog

October 22, 2010

Home Page Design with CSS

Filed under: Uncategorized — Tags: , , — Mark Gould @ 10:23 am

Home Page Design with CSS.

The page design requirements of the siark.com website are different from many websites. In contrast to websites that contain quite a lot of content on their pages that is arranged in columns, the pages of the siark.com website contain minimal content that is arranged centrally.

The pages of the siark.com website have two menus, one at the top which is nearly always displayed, and one at the bottom which is not always displayed. The home page also has an image wich is positioned centrally on the page.

The page layout is achieved using CSS. There are two significant problems to overcome on the home page; the first is to make the bottom menu stick to the bottom of the browser window when the content does not fill the browser window and the second is to centralise both horizontally and vertically the image.

There is a base CSS file called base.css which is in the webapp/styles directory.

This CSS file contains general design styles and is organised by typography & colours, structure, images and menus.

Each page on the siark.com website has some or all of the components, a header, a top menu, content, a bottom menu and a footer.

/* Typography & Colors
------------------------------------ */
body { font-size:100%; }
.container {
	background-color:rgb(245,245,245);
	font-family: Helvetica, sans-serif;
	
}
#logo {
	font-variant: small-caps;
	font-size: 1.5em; 
}
#copyright {
	font-variant: small-caps;
	font-size: 0.8em;
}
.caption {
	font-variant: small-caps;
	font-size: 0.8em;
}
.menu { font-variant: small-caps; }

/* Structure
------------------------------------ */

html, body { 
	height: 100%;
	margin: 0;
	padding: 0;
}
.container {
	width: 960px;
	margin: 0 auto;
	min-height: 100%;
}
#header { 
	height: 2em;
	margin: 0 0.5em;
	line-height: 2em;
}
#top-menu { 
	height: 1em;
	line-height: 1em;
}
#content { 
	margin-top: 0;
	padding-bottom: 2em;
}
#bottom-menu {
	position: absolute;
	bottom: 2em; /* the same height as the footer */
	height: 1em;
	line-height: 1em;
	padding-bottom: 1px;
}
#footer {
	position: absolute;
	bottom: 0;
	height: 2em;
	width: 950px;
	margin: 0 0.5em;
	line-height: 2em;
}

/* Images
------------------------------------ */

img.border {
	border-style: solid;
	border-color: black;
	border-width: 1px;
	padding: 3px;
	background-color: rgb(255, 255, 255);
}

/* Menus
------------------------------------ */

.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu ul li {
	float: left;
	position: relative;
	padding: 0 1em;
}
.menu ul li.right { float: right; }
.menu li a:hover { text-decoration:underline; }
.menu li ul { 
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
}
.menu li:hover ul {
	display: block;
}
.menu li li {
	list-style: none;
	display: list-item;
}
a { 
	text-decoration: none;
	color: black;
}
.bottom-line {
	border-bottom-style: solid;
	border-bottom-color: black;
	border-bottom-width: 1px;
}

.top-line {
	border-top-style: solid;
	border-top-color: black;
	border-top-width: 1px;
}

The bottom menu and footer have absolute positioning so that they always appear at the bottom of the page.

Each page also has it’s own CSS file and the file for the home page is home.css.

#home-image {
	position: absolute;
 	top: 45%;
 	left: 50%;
 	margin-top: -241px;
 	margin-left: -241px;
 	height: 482px;
 	width: 482px;
}

The home page image is also positioned absolutely. This strategy is from the CSS Cookbook by Christopher Schmitt.

The home.jsp page.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" 
		xmlns:c="http://java.sun.com/jsp/jstl/core"
		xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
		version="2.0">
	<fmt:setBundle basename="Messages" />
    <jsp:directive.page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" />
    <!-- According to the W3C XHTML 1.0 Recommendation, an XML declaration is not required, but authors are strongly encouraged to use XML declarations in documents. -->
    <jsp:text>
        <![CDATA[ <?xml version="1.0" encoding="ISO-8859-1" ?> ]]>
    </jsp:text>
    <!-- According to the W3C XHTML 1.0 Recommendation, there must be a DOCTYPE declaration prior to the root element. -->
    <jsp:text>
        <![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
    </jsp:text>
	<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
			<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/base.css" />
			<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/home.css" />
			<title><fmt:message key="home.title" /></title>
		</head>
		<body>
			<div class="container">
				<div id="header" class="bottom-line">
					<div id="logo">
						<a href="#">siark.com</a>
					</div>
				</div>
				<div id="top-menu">
					<div class="menu">
						<ul>
							<li>
								<a href="#"><fmt:message key="menu.gallery" /></a>
								<ul>
									<li><a href="#"><fmt:message key="menu.gallery1" /></a></li>
									<li><a href="#"><fmt:message key="menu.gallery2" /></a></li>
									<li><a href="#"><fmt:message key="menu.gallery3" /></a></li>
								</ul>
							</li>
	  						<li><a href="#"><fmt:message key="menu.about" /></a></li>
	  						<li><a href="#"><fmt:message key="menu.contact" /></a></li>
	  						<li class="right"><a href="#"><fmt:message key="menu.admin" /></a></li>
	  					</ul>
	  				</div>
				</div>
				<div id="content">
					<div id="home-image">
						<div style="position:relative; top:79px; left:0px;">
							<img class="border" src="images/MG-100228-30.jpg" width="474" height="316" />
						</div>
					</div>
				</div>
				<div id="bottom-menu">
					<div class="menu">
						<ul>
							<li><a href="#"><fmt:message key="menu.news" /></a></li>
	  						<li><a href="#"><fmt:message key="menu.reviews" /></a></li>
	  						<li><a href="#"><fmt:message key="menu.tutorials" /></a></li>
	  						<li><a href="#"><fmt:message key="menu.videos" /></a></li>
	  					</ul>
	  				</div>
				</div>
				<div id="footer" class="top-line">
					<div id="copyright">all content © siark ltd</div>
				</div>
			</div>
		</body>
	</html>
</jsp:root>
About these ads

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Silver is the New Black Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: