ginaggj
08-05-2006, 06:55 PM
Hi all,
Over the last few days i have fixed alot of layout issues, however the last one i cannot get around. I am trying to float two pieces of text, one to the left the other to the right in a footer. I will post the code below and if anyone could tell me what on earth is wrong with code thanks!
<!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" xml:lang="en" lang="en">
<head>
<title>Postscript5 // Webfolio of a Web Standards Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="postscript5_master.css" title="default" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" ></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="shortcut icon" href="images/favicon.ico" >
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" >
</head>
<body>
<div id="header"></div>
<div id="sidebar">
<div class="gutter">
<div class="box">
<h3>Welcome</h3>
<p>To the small yet perfectly formed portfolio of web standards designer
Grace Smith based in Northern Ireland. </p>
<p> </p>
<p> Whether you're looking for a new website or an updated look for your
current website, I can help you build the online image you want, delivering
functionality, creativity and innovation within an affordable package.</p>
</div>
<div class="box">
<h3>Education</h3>
<p>BSc Honours Interactive Multimedia Design </p>
<p>Diploma in Industrial Studies</p><br />
<h2>A-Levels</h2>
<p>// Art & Design History</p>
<p>// English Literature</p>
<p>// Geography</p>
<br />
<h2>GCSE</h2>
<p>// Art & Design</p>
<p>// English Language</p>
<p>// English Literature</p>
<p>// French</p>
<p>// Geography</p>
<p>// Mathmatics</p>
<p>// Science</p>
</div>
<div class="box">
<h3>Skills</h3>
<div class="skillstext">Web Standards</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">CSS</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Dreamweaver</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Adobe Photoshop</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">RSS/XML/XHTML</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Quark Express</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Adobe Pagemaker</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">ASP/PHP</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Databases</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Print/Image Processing</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Javascript & Ajax</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Browser Compatibility</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br><div id="clear"></div>
</div>
<div class="boxportfolio">
<h3>Portfolio</h3>
<div class="photo">
<ul class="thumbList">
<li><a href="images/hpcoating_screen.jpg" rel="lightbox[portfolio]" title="High Performance Coatings NI Ltd">
<img src="images/hpcoating_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
<li><a href="images/kbooe_screen.jpg" rel="lightbox[portfolio]" title="Kick Brands Out Of Education (KBOOE) Blog">
<img src="images/kbooe_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
<li><a href="images/kbooemain_screen.jpg" rel="lightbox[portfolio]" title="Kick Brands Out Of Education (KBOOE) Website">
<img src="images/kbooemain_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
<li><a href="images/Malacological_screen.jpg" rel="lightbox[portfolio]" title="Malacological Society of London Online Bulletin">
<img src="images/Malacological_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
</ul>
<br> <br> <br> <br>
<br>
</div></div>
<div class="box">
<h3>Contact</h3>
<p>If you have any questions about my services, or are interested in getting
started then please email me and i will reply within 24 hours.</p>
<p> </p>
<p><a href="mailto:hello@postscript5.co.uk"><img src="images/email-bg.jpg" alt="Email Me!" width="40" height="36" border="0" align="absmiddle" /></a><p2><font color="818A1E">
Say Hello!</font></p2> </div>
<div class="boxfooter">
<p>© 2006 Postscript5</p><div id="clear"></div>
<div class="footerlinks"> css | lightbox | xhtml </div>
</div>
</div>
</div>
</body></html>
body {
margin: 0;
padding-top: 30px;
padding-bottom: 1em;
font-family: arial, verdana, sans-serif;
font-size: small;
background-color: #D5D6BE;
color: #333;
}
a:link {
color: #818A1E;
text-decoration: none;
background: #fff;
}
a:visited {
color: #818A1E;
text-decoration: none;
background: #fff;
}
a:hover {
color: #000000;
text-decoration: none;
background: #fff;
}
/* layout */
#content {
float: left;
width: 70%;
font-size: 95%;
color: #333;
line-height: 1.5em;
}
#sidebar {
margin-left: 36%;
width: 30%;
}
/* gutters */
#content .gutter {
padding: 25px;
background: url(images/content-bg.gif) repeat-x top left;
}
#sidebar .gutter, #sidebar-2 .gutter {
padding: 15px;
}
/* header */
#header {
margin-left: 36.9%;
width: 352px;
height: 144px;
background: #D5D6BE url(images/header_v6.jpg) no-repeat;
}
/* content */
#content h2 {
margin: 0 0 0 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: 150%;
color: #663;
font-weight: normal;
}
/* sidebars */
.box {
width: 345px;
margin: 0 0 20px 0;
padding: 0 0 12px 0;
font-size: 95%;
line-height: 1.5em;
color: #666;
background: #fff url(images/box-b.gif) no-repeat bottom right;
}
.box h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: bold;
color: #B6C50C;
background: url(images/box-t.gif) no-repeat top left;
}
.box h2 {
margin: 0;
padding: 10px;
font-family: arial, verdana, sans-serif;
font-size: 110%;
font-weight: normal;
color: #B6C50C;
}
.box p {
margin: 0;
padding: 0 12px;
}
.box p2 {
margin: 0;
padding: 0 1px;
font-weight: normal;
color: #818A1E;
}
.box plink {
margin: 0 0 0 0px;
padding: 0 0 0 0px;
background: #fff;
}
.box ul li {
margin: 0 0 0 12px;
padding: 0 0 0 0px;
list-style: none;
height: 35px;
background: #fff;
}
.skills {
color: #D0E109;
float: right;
overflow: hidden;
padding-right: 12px;
}
.skillsbegin {
clear: both;
}
.skillstext {
float: left;
padding-left: 12px;
padding-right: 100px;
}
.clear {
clear: both;
}
/* portfolio box */
.boxportfolio {
margin-left: 40%;
width: 345px;
margin: 0 0 20px 0;
padding: 0 0 1px 0;
font-size: 95%;
line-height: 1.5em;
color: #666;
background: #fff url(images/box-b.gif) no-repeat bottom right;
clear:both;
}
.boxportfolio h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: bold;
color: #B6C50C;
background: url(images/box-t.gif) no-repeat top left;
}
.boxportfolio p, .box ul {
margin: 0;
padding: 0 0;
}
.boxportfolio ul li {
margin: 0 0 0 12px;
padding: 0 0 0 1px;
list-style: none;
background: #fff;
}
.image {
border: 3px solid #D0E109;
padding:0px;
width: auto;
height: auto;
}
.thumbList {
list-style-type:none;
margin:0px;
padding:0px;
margin:0 auto;
}
.thumbList li {
display:inline;
float:left;
background-color: #fff;
}
/* footer box */
.boxfooter {
width: 345px;
height: 30px;
font-size: 94%;
color: #fff;
background: #D0E109;
}
.boxfooter p {
float: left;
margin-top: 0.6em;
margin-left: 0.9em;
color: #fff;
font-size: 89%;
}
.boxfooter links {
float: right;
margin-left: 500px;
margin-top: 0.6em;
color: #fff;
font-size: 89%;
}
View the website here -test (http://www.postscript5.co.uk/test/Index.htm)
Over the last few days i have fixed alot of layout issues, however the last one i cannot get around. I am trying to float two pieces of text, one to the left the other to the right in a footer. I will post the code below and if anyone could tell me what on earth is wrong with code thanks!
<!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" xml:lang="en" lang="en">
<head>
<title>Postscript5 // Webfolio of a Web Standards Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="postscript5_master.css" title="default" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" ></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="shortcut icon" href="images/favicon.ico" >
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" >
</head>
<body>
<div id="header"></div>
<div id="sidebar">
<div class="gutter">
<div class="box">
<h3>Welcome</h3>
<p>To the small yet perfectly formed portfolio of web standards designer
Grace Smith based in Northern Ireland. </p>
<p> </p>
<p> Whether you're looking for a new website or an updated look for your
current website, I can help you build the online image you want, delivering
functionality, creativity and innovation within an affordable package.</p>
</div>
<div class="box">
<h3>Education</h3>
<p>BSc Honours Interactive Multimedia Design </p>
<p>Diploma in Industrial Studies</p><br />
<h2>A-Levels</h2>
<p>// Art & Design History</p>
<p>// English Literature</p>
<p>// Geography</p>
<br />
<h2>GCSE</h2>
<p>// Art & Design</p>
<p>// English Language</p>
<p>// English Literature</p>
<p>// French</p>
<p>// Geography</p>
<p>// Mathmatics</p>
<p>// Science</p>
</div>
<div class="box">
<h3>Skills</h3>
<div class="skillstext">Web Standards</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">CSS</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Dreamweaver</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Adobe Photoshop</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">RSS/XML/XHTML</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Quark Express</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Adobe Pagemaker</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">ASP/PHP</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Databases</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Print/Image Processing</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Javascript & Ajax</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br>
<div class="skillstext">Browser Compatibility</div>
<div class="skills"><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /><img src="images/star-bullet.jpg" width="15" height="15" /></div><br><div id="clear"></div>
</div>
<div class="boxportfolio">
<h3>Portfolio</h3>
<div class="photo">
<ul class="thumbList">
<li><a href="images/hpcoating_screen.jpg" rel="lightbox[portfolio]" title="High Performance Coatings NI Ltd">
<img src="images/hpcoating_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
<li><a href="images/kbooe_screen.jpg" rel="lightbox[portfolio]" title="Kick Brands Out Of Education (KBOOE) Blog">
<img src="images/kbooe_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
<li><a href="images/kbooemain_screen.jpg" rel="lightbox[portfolio]" title="Kick Brands Out Of Education (KBOOE) Website">
<img src="images/kbooemain_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
<li><a href="images/Malacological_screen.jpg" rel="lightbox[portfolio]" title="Malacological Society of London Online Bulletin">
<img src="images/Malacological_thumb.jpg" alt="" width="59" height="56" class="image"/></a></li>
</ul>
<br> <br> <br> <br>
<br>
</div></div>
<div class="box">
<h3>Contact</h3>
<p>If you have any questions about my services, or are interested in getting
started then please email me and i will reply within 24 hours.</p>
<p> </p>
<p><a href="mailto:hello@postscript5.co.uk"><img src="images/email-bg.jpg" alt="Email Me!" width="40" height="36" border="0" align="absmiddle" /></a><p2><font color="818A1E">
Say Hello!</font></p2> </div>
<div class="boxfooter">
<p>© 2006 Postscript5</p><div id="clear"></div>
<div class="footerlinks"> css | lightbox | xhtml </div>
</div>
</div>
</div>
</body></html>
body {
margin: 0;
padding-top: 30px;
padding-bottom: 1em;
font-family: arial, verdana, sans-serif;
font-size: small;
background-color: #D5D6BE;
color: #333;
}
a:link {
color: #818A1E;
text-decoration: none;
background: #fff;
}
a:visited {
color: #818A1E;
text-decoration: none;
background: #fff;
}
a:hover {
color: #000000;
text-decoration: none;
background: #fff;
}
/* layout */
#content {
float: left;
width: 70%;
font-size: 95%;
color: #333;
line-height: 1.5em;
}
#sidebar {
margin-left: 36%;
width: 30%;
}
/* gutters */
#content .gutter {
padding: 25px;
background: url(images/content-bg.gif) repeat-x top left;
}
#sidebar .gutter, #sidebar-2 .gutter {
padding: 15px;
}
/* header */
#header {
margin-left: 36.9%;
width: 352px;
height: 144px;
background: #D5D6BE url(images/header_v6.jpg) no-repeat;
}
/* content */
#content h2 {
margin: 0 0 0 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: 150%;
color: #663;
font-weight: normal;
}
/* sidebars */
.box {
width: 345px;
margin: 0 0 20px 0;
padding: 0 0 12px 0;
font-size: 95%;
line-height: 1.5em;
color: #666;
background: #fff url(images/box-b.gif) no-repeat bottom right;
}
.box h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: bold;
color: #B6C50C;
background: url(images/box-t.gif) no-repeat top left;
}
.box h2 {
margin: 0;
padding: 10px;
font-family: arial, verdana, sans-serif;
font-size: 110%;
font-weight: normal;
color: #B6C50C;
}
.box p {
margin: 0;
padding: 0 12px;
}
.box p2 {
margin: 0;
padding: 0 1px;
font-weight: normal;
color: #818A1E;
}
.box plink {
margin: 0 0 0 0px;
padding: 0 0 0 0px;
background: #fff;
}
.box ul li {
margin: 0 0 0 12px;
padding: 0 0 0 0px;
list-style: none;
height: 35px;
background: #fff;
}
.skills {
color: #D0E109;
float: right;
overflow: hidden;
padding-right: 12px;
}
.skillsbegin {
clear: both;
}
.skillstext {
float: left;
padding-left: 12px;
padding-right: 100px;
}
.clear {
clear: both;
}
/* portfolio box */
.boxportfolio {
margin-left: 40%;
width: 345px;
margin: 0 0 20px 0;
padding: 0 0 1px 0;
font-size: 95%;
line-height: 1.5em;
color: #666;
background: #fff url(images/box-b.gif) no-repeat bottom right;
clear:both;
}
.boxportfolio h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: bold;
color: #B6C50C;
background: url(images/box-t.gif) no-repeat top left;
}
.boxportfolio p, .box ul {
margin: 0;
padding: 0 0;
}
.boxportfolio ul li {
margin: 0 0 0 12px;
padding: 0 0 0 1px;
list-style: none;
background: #fff;
}
.image {
border: 3px solid #D0E109;
padding:0px;
width: auto;
height: auto;
}
.thumbList {
list-style-type:none;
margin:0px;
padding:0px;
margin:0 auto;
}
.thumbList li {
display:inline;
float:left;
background-color: #fff;
}
/* footer box */
.boxfooter {
width: 345px;
height: 30px;
font-size: 94%;
color: #fff;
background: #D0E109;
}
.boxfooter p {
float: left;
margin-top: 0.6em;
margin-left: 0.9em;
color: #fff;
font-size: 89%;
}
.boxfooter links {
float: right;
margin-left: 500px;
margin-top: 0.6em;
color: #fff;
font-size: 89%;
}
View the website here -test (http://www.postscript5.co.uk/test/Index.htm)