Desperate need in help for simple design layout (css & html)

Fathima786 · 10-11-2012, 08:27 PM

I'm a beginner in HTML and CSS. I'm trying to build a basic design, but I am having many difficulties with alignment.

Here are the things I would like to do;

- If this is possible, for the webpage to appear in the center of the screen.

Here is my file (There are only three files and it's not huge):

https://www.box.com/s/4437qsetrwiag9peyb3d

If anyone is willing to help, I would greatly appreciate it. Thank you so much.

Excavator · 10-12-2012, 04:26 AM

Hello Fathima786,
Once you know how to center something -
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

-you can put your site in a containing element and center it. Your code might look something like this then:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fathima Designs</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #d3f8ff;
	font-family: Georgia;
	text-align: center;
	letter-spacing: 3px;
}
#container {
	width: 1000px;
	margin: 0 auto;
}
div#header {
	height: 173px;
	width: 1000px;
	background: url("header.png"); no-repeat center;
}
	div#header img {
		float: left;
		margin: 60px 0 0 50px;
	}
	#header a {
		margin: 100px 100px 0 0;
		display: inline-block;
	}

div#left {
	height: 170px;
	width: 200px;
	float: left;
	background: #fff;
	margin: 25px 0 0;
}
	ul {
		padding: 0;
		list-style: none;
	}
div#right {
	height: 190px;
	width: 148px;
	margin: 25px 0 0;
	float: right;
	background: #fff;
}
div#middle {
	width: 517px;
	margin: 25px 0 0 15px;
	float: left;
	background: #fff;
	color: #46adba;
}
div#footer {
	width: 517px;
	margin: auto auto 150px auto;
}
a {
	margin: 40px;
	text-decoration: none;
}
</style>
</head>
<body>
    <div id="container">
        <div id="header"> 
        	<img src="logo2.png" alt="logo" width="215" height="88" /> 
            	<a href="home.html">HOME</a> 
                <a href="about.html">ABOUT</a> 
                <a href="contact.html"> CONTACT</a>
        <!--end header--></div>
            <div id="left">
                <ul>
                    <li><a href="design.html">DESIGN</a></li>
                    <li><a href="photography.html">PHOTOGRAPHY</a></li>
                    <li><a href="artwork.html">ARTWORK</a></li>
            	</ul>
            <!--end left--></div>
        <div id="right"> Right column </div>
        <div id="middle">
            <h1>TITLE</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
            <h1>TITLE</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        <!--end middle--></div>
        <div id="footer"> <a href="previousentries.html">Previous Entries</a> </div>
    <!--end container--></div>
</body>
</html>