Forum Moderators: not2easy
Until recently I have been used to building sites using Dreamweaver and tables. However I'm now starting to use Div tags and CSS. However the attached CSS seems to be kinda clumsy and was really looking to see if anyone can suggest how I can tidy either my css or page structure up a bit.
Also any ideas as to how to make it cross browser friendly would be appreciated as the slider changes posistion in IE
Cheers
Tim
HTML File
<!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>IntuitionH2o : Index</title>
<link href="intuition.css" rel="stylesheet" type="text/css"></link>
<style type="text/css" media="screen">
#nav {
background-image: url(header.jpg);
background-repeat: no-repeat;
display: block;
float: right;
width: 244px;
}
#list {
text-decoration: none;
list-style-type: none;
}
#menu {
float: right;
width: 330px;
border: 0px solid #cecece;
margin: 51px 0px 0px 441px;
background-color: #a5d277;
position:absolute;
z-index:100;
}
#menu div.btn {
display: block;
width: 30px;
height: 20px;
float: right;
margin: 0 0px;
background-color: #3752a3;
color: #000000;
text-align: center;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu").hide();
//$("slideIn_container").hide();
$("#powerboat").click( function () {
//var titleAttr = $(this).attr("title");
//$("#menu").html(titleAttr);
$('#menu').SlideInRight(500);
$("#menu").animate({
opacity:0.9
});
}, function () {
$('#menu').SlideOutLeft(300);
});
});
</script>
</head>
<body>
<div id="container">
<div id="flash">
<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
data="imagefade.swf" width="319" height="144">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="1024" height="1536">
<param name="movie" value="swf/navigation-php.swf?page=index" />
<!--><!---->
<param name="loop" value="true" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
</object>
<!-- <![endif]-->
</div>
<div id="header"></div>
<div id="topnav">
<ul>
<li><a class="navtext" href="#">About Us</a></li>
<li><a class="navtext" href="#">Links</a></li>
<li><a class="navtext" href="#">Course Dates/Prices</a></li>
<li><a class="navtext" href="#">News/Availability</a></li>
<li><a class="navtext" href="#">Contact Us/Location</a></li>
</ul>
</div>
<div id="rightnav">
<ul>
<li><a class="navtext" id="powerboat" href="#" title="Powerboat">Powerboat Courses</a></li>
<li><a class="navtext" href="#" title="">Powerboat Charter</a></li>
<li><a class="navtext" href="#" title="">Family and Kids Fun</a></li>
<li><a class="navtext" href="#">Safety Sea / Survival Courses</a></li>
<li><a class="navtext" href="#">First Aid Training</a></li>
<li><a class="navtext" href="#">Own Boat Tuition / Instructor Training</a></li>
<li><a class="navtext" href="#">Shore Based Training</a></li>
</ul>
</div>
<div id="main">
<div id="compass"><img src="compass.jpg" alt="compass" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vitae ante vitae felis pharetra sagittis. Sed enim lacus, ullamcorper hendrerit, laoreet sed, facilisis sed, leo. In et quam at arcu tempor mollis. Sed volutpat pede non felis. Sed pretium. Cras tellus nibh, consectetuer ac, feugiat quis, lacinia ac, urna. Donec ultricies. Donec hendrerit neque in risus. Pellentesque consectetuer. Aenean est odio, eleifend non, ornare non, tristique vitae, lacus. Mauris eget mi. Vivamus laoreet turpis sed pede. Curabitur id elit interdum nibh mollis fermentum. Integer posuere. Mauris vehicula tempor neque. Ut interdum arcu sit amet orci. Duis nisl leo, euismod a, laoreet sed, consectetuer id, lectus. </p>
<br />
<div id="smiler"><img src="smiler.jpg" alt="compass" /></div>
<ul>
<li><a class="navtext" href="#" title="Powerboat">Powerboat Courses</a></li>
<li><a class="navtext" href="#" title="">Powerboat Charter</a></li>
<li><a class="navtext" href="#" title="">Family and Kids Fun</a></li>
<li><a class="navtext" href="#">Safety Sea / Survival Courses</a></li>
<li><a class="navtext" href="#">First Aid Training</a></li>
<li><a class="navtext" href="#">Own Boat Tuition / Instructor Training</a></li>
<li><a class="navtext" href="#">Shore Based Training</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vitae ante vitae felis pharetra sagittis. Sed enim lacus, ullamcorper hendrerit, laoreet sed, facilisis sed, leo. In et quam at arcu tempor mollis. Sed volutpat pede non felis. Sed pretium. Cras tellus nibh, consectetuer ac, feugiat quis, lacinia ac, urna. Donec ultricies. Donec hendrerit neque in risus. Pellentesque consectetuer. Aenean est odio, eleifend non, ornare non, tristique vitae, lacus. Mauris eget mi. Vivamus laoreet turpis sed pede. Curabitur id elit interdum nibh mollis fermentum. Integer posuere. Mauris vehicula tempor neque. Ut interdum arcu sit amet orci. Duis nisl leo, euismod a, laoreet sed, consectetuer id, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vitae ante vitae felis pharetra sagittis. Sed enim lacus, ullamcorper hendrerit, laoreet sed, facilisis sed, leo. In et quam at arcu tempor mollis. Sed volutpat pede non felis. Sed pretium. Cras tellus nibh, consectetuer ac, feugiat quis, lacinia ac, urna. Donec ultricies. Donec hendrerit neque in risus. Pellentesque consectetuer. </p>
</div>
<div id="menu">
<ul id="list">
<li>RYA Courses
<ul>
<li><a class="navtext" href="Pboatcourses.php">Youth Courses</a></li>
<li><a class="navtext" href="Pboatcourses.php">Powerboat Level 1</a></li>
<li><a class="navtext" href="Pboatcourses.php">Powerboat Level 2</a></li>
<li><a class="navtext" href="Pboatcourses.php">Intermediate Powerboat Course</a></li>
<li><a class="navtext" href="Pboatcourses.php">Advanced Powerboat Course</a></li>
<li><a class="navtext" href="Pboatcourses.php">Advanced Powerboat Certificate of Competence</a></li>
<li><a class="navtext" href="Pboatcourses.php">Combination Courses</a></li>
</ul>
</li>
<li><a class="navtext" href="Pboatcourses.php">Direct Assessment and Examination Prep</a></li>
<li><a class="navtext" href="Pboatcourses.php">Courses Delivered Offsite</a></li>
</ul>
</div>
<div id="footer"></div>
</div>
<!-- slide-in container block
<div id="slideIn_container"></div>
-->
</body>
</html>
CSS File
body {
font-family: Verdana;
margin: 0px;
color: #ffffff;
}
#container {
background-color: #fff;
width: 1024px;
margin: 0px auto 0px auto;
height: auto;
}
#header {
width: 1012px;
height: 150px;
background-image: url(header.jpg);
background-repeat: no-repeat;
margin: 0px 6px 8px 6px;
}
#topnav li
{
font-family:Verdana;
font-size: 9pt;
text-decoration: none;
display: inline;
list-style-type: none;
padding: 0px 30px 0px 0px;
}
#topnav
{
background-image: url(nav-footerback.gif);
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
width:771px;
float:left;
}
#rightnav
{
background-image: url(rightnavback.gif);
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
float:right;
margin: 51px 3px 0px 0px;
width:244px
}
#rightnav li
{
text-decoration: none;
list-style-type: none;
font-family:Verdana;
color:fff;
font-size: 9pt;
padding: 0px 0px 27px 0px;
}
.navtext
{
text-decoration: none;
color:#fff;
font-weight: bold;
}
#main
{
width: 765px;
height: auto;
background-image: url(bodyback.gif);
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 6px;
float:left;
}
#footer
{
background-image: url(bodyback.gif);
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
float:left;
}
#compass
{
float:right;
margin: 15px 15px 0px 15px;
}
#smiler
{
float:left;
margin: 15px 15px 15px 15px;
}
#flash
{
position:absolute;
z-index:1000;
float:left;
margin: 3px 0px 0px 9px;
}
0pxcan in all cases be written as 0, its length is nothing regardless of the unit used.
margin: 15px 15px 15px 15pxcan be written as margin: 15px
margin: 0px auto 0px auto;can be written as margin: 0 auto;
float:left; position:absoluteI can't help but find the position:absolute unneeded. (If IE needs it: move it to a conditional comment.
height: auto;I think height is by default "auto"
font-family:Verdana;What happens when the machine has no such named font ? A font family should be a list of fonts, ending in a generic font. E.g.: font-family:Verdana, Arial, Helvetica, sans
I'm not fond of widths of more than 800px (even on this 1900 px wide screen)
<div id="topnav">
<ul>
<li><a class="navtext" href="#">About Us</a></li>
<li><a class="navtext" href="#">Links</a></li>
<li><a class="navtext" href="#">Course Dates/Prices</a></li>
<li><a class="navtext" href="#">News/Availability</a></li>
<li><a class="navtext" href="#">Contact Us/Location</a></li>
</ul>
</div>
<ul id="topnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Links</a></li>
<li><a href="#" class="select">Course Dates/Prices</a></li>
<li><a href="#">News/Availability</a></li>
<li><a href="#">Contact Us/Location</a></li>
</ul>
</div>
