Soldato
Hey everyone,
I've done plenty web design before, and Wordpress etc., but since CS6 includes dreamweaver, I thought I'd give it a go developing from scratch.
I've started on the layout and have things positioned where I want them, headers, footers etc.
I have set the width of the container div to 960px, with an auto margin either side, which centred the whole lot. In doing so, it's also added a big space of nothingness to the right hand side, meaning you can scroll right until the left edge of the container is left aligned to the window.
You can see the site here (please note only the index works, there are no other pages yet), and the index html and CSS below.
Any help on what I'm overlooking here would be greatly appreciated! The rest, using various tips I've found online, has gone very smoothly, but this has me stuck!
Thanks,
James
I've done plenty web design before, and Wordpress etc., but since CS6 includes dreamweaver, I thought I'd give it a go developing from scratch.
I've started on the layout and have things positioned where I want them, headers, footers etc.
I have set the width of the container div to 960px, with an auto margin either side, which centred the whole lot. In doing so, it's also added a big space of nothingness to the right hand side, meaning you can scroll right until the left edge of the container is left aligned to the window.
You can see the site here (please note only the index works, there are no other pages yet), and the index html and CSS below.
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TriFit Coaching</title>
<meta name="description" content="TriFit Coaching" />
<meta name="author" content="James Bull" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<?php include('includes/header.php'); ?>
</div>
<div id="nav">
<?php include('includes/nav.php'); ?>
</div>
<div id="page">
<div class="fltlft">
<img src="images/hurdles.jpg">
</div>
<p><b>TriFit Coaching provide a range of personal, educational and corporate coaching solutions within Northamptonshire, Leicestershire & Rutland.</b>
<br><br>
We deliver sessions with experienced, fully qualified and insured coaches across a range of disciplines, designed specifically around your needs. Our clients range from 8 to 80 years, from beginner to elite, and from recreational exercisers to competitive athletes.
<br><br>
If you require Triathlon, Athletics or Endurance coaching, multi-sport curriculum enrichment for your P.E. department, are interested in a staff fitness program for your employees, or simply want to start jogging recreationally for health or weight loss reasons, check the website pages to see how we can help you achieve your goals.
</p>
</div>
<div id="footer">
<?php include('includes/footer.php'); ?>
</div>
</div>
</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */
html,
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
width: 960px;
margin-left:auto;
margin-right:auto;
}
#header {
width:960;
background:#fff;
padding:10px;
}
#body {
padding:10px;
padding-bottom:80px; /* Match height of the footer */
}
/*The footer*/
#footer {
position:absolute;
width:100%;
height:80px; /* Height of the footer */
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 10px 0;
position:absolute;
clear: both;
bottom:0;
width: 960px;
background:#000;
margin-left:auto;
margin-right:auto;
}
/*Navigation Menu*/
.nav {
float:left;
width: 960;
margin-left:auto;
margin-right:auto;
}
.nav ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
padding-bottom: 30px;
}
.nav ul li {
float: left;
list-style-type: none;
text-align:center;
position:relative;
right:50%;
}
.nav ul li a {
color: #fff;
text-decoration: none;
font-size:12px;
background-color: #000;
display: block;
height: 36px;
width: 119px;
text-align: center;
line-height: 36px;
border-left-width: thin;
border-left-style: solid;
border-left-color: #FFF;
margin:0 auto;
}
.noBorder {
border-left-style: none!important;
}
.nav ul li a:hover
{
background-color:#fff;
color: #000;
}
nav ul li:hover > ul {
display: block;
}
.noBorder {
border-left-style: none!important;
}
.rightEdge {
border-radius: 0px 8px 8px 0px;
}
.leftEdge {
border-radius: 8px 0px 0px 8px;
}
/*End Of Navigation Menu*/
/*Make the header logo centered*/
IMG.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top:15px;
padding-bottom:15px;
}
/*floating stuff*/
.fltrtpad { /* this class can be used to float an element right in your page with right padding. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
padding-right:8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;Any help on what I'm overlooking here would be greatly appreciated! The rest, using various tips I've found online, has gone very smoothly, but this has me stuck!
Thanks,
James
Last edited:
