 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 405
|
 Posted: Mon May 26, 2008 4:16 am div not aligning underneath |
 |
|
|
Here is the code, the problem I have is that the words do not line underneath the list on the main content.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="Content-Language" content="en-gb">
<meta name="ROBOTS" content="NOARCHIVE">
<meta name="keywords" content="byte size office training, virtual assistant, desktop publishing, spreadsheets, web design, presentations,">
<meta name="description" content="online free tutorials, virtual assistant ">
<title>Bytesizeoffice</title>
<link rel="stylesheet" type="text/css" href="stylessheet.css" media="screen">
<link rel="shortcut icon" href="/images/favicon.ico">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.bytesizeoffice.co.uk">
<img src="images/logo.gif" width="300" height="90" alt="bytesizeoffice/logo"></a></h1>
<div class="vmenu">
<ul>
<li><a href="index.htm">home</a></li>
<li><a href="vassistant.htm">virtual assistant<br></a></li>
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="contacts.htm">contacts</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="privacy.htm">privacy</a></li>
<li><a href="sitemap.htm">sitemap</a></li>
</ul></div></div>
<div id="navigation">
<div id="search">
<p class="search"></p>
<form action="http://www.google.com/cse" id="searchbox_003119959939038504956:xrke8d9eiyi">
<p class="search"><input type="hidden" name="cx" value="003119959939038504956:xrke8d9eiyi"></p>
<p class="search"><input type="text" name="q" size="20"></p><p class="search"><input type="submit" name="sa" value="search"><img src="images/search.gif" width="20" height="20" alt="image of search icon"></p>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_003119959939038504956%3Axrke8d9eiyi〈=en"></script>
</div>
<ol id="menu">
<li><a href="virtual.htm">virtual assistant</a></li>
<li><a href="desktop.htm">desktop publishing</a></li>
<li><a href="wordprocessing.htm">word processing</a></li>
<li><a href="spreadsheets.htm">spreadsheets</a></li>
<li><a href="presentationer.htm">presentations</a></li>
<li><a href="webdesign.htm">web design</a></li>
<li><a href="careers.htm">career links</a></li>
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="shortcuts.htm">shortcut keys</a></li>
<li><a href="office.htm">about office</a></li>
<li><a href="blog.htm">blog articles</a></li>
<li><a href="computer.htm">computer tips</a></li>
<li><a href="reviews.htm">reviews</a></li>
</ol>
<div id="smallbox">
<div id="smallbox2">
<a href="tutorials.htm">
<img class="imagebox" alt="free star" src="images/star.gif" width="60" height="60"></a><br>
<h2 style="text-align: center;">Tutorials </h2>
<p style="text-align: center;">New!<br>
<a href="computer.htm">Beginners guide to software </a></p>
<hr></div></div></div>
<div id="centercontent">
<h2><a href="vassistant.htm">Virtual Assistant Service</a></h2>
<p>Personal digital administration service for small businesses and individuals.
Your admin tasks too much strain? <br>
Let me take the pressure out of your office tasks. Services offered:
Based in Lewisham, London, but available through email, MSN, Fax, or
telephone. </p> |
The above is all working but I cannot figure out why the next section does not align right.
| Code: |
<div id="index">
<ul class="bullets">
<li><a href="desktop.htm">Desktop publishing </a></li>
<li><a href="wordprocessing.htm">Word Processing</a></li>
<li><a href="presentationer.htm">PowerPoint Presentations</a></li>
<li><a href="spreadsheets.htm">Spreadsheets</a></li>
<li><a href="vassistant.htm">Databases</a></li>
<li><a href="webdesign.htm">Web Sites (HTML/CSS)</a></li>
<li><a href="webdesign.htm">Link building and submission</a></li>
<li><a href="webdesign.htm">Image Optimisation for the web</a></li>
<li><a href="wordprocessing.htm">Proof Reading</a></li>
<li><a href="wordprocessing.htm">Digital Transcription</a></li>
<li><a href="wordprocessing.htm">Internet Research</a></li>
<li><a href="vassistant.htm">One to one Training on<br>
PC Support/ECDL</a></li>
</ul>
</div>
<div style="clear: both;">
<p>Experienced and qualified </p>
<p><a href="about.htm">ECDL and more. </a> </p>
<p>Read the article: <a href="whatis.htm">What is a Virtual Assistant</a>
</p>
</div></div>
<div id="rightcontent">
<div id="rightcontent2">
<br><br>
<img class="border"alt="girl in park" src="img6B.jpg"><br><br>
<img class="border"alt="typist" src="img6C.jpg"><br></div></div>
<div id="footer"><p>©bytesizeoffice.co.uk <br>
<script type="text/javascript">
<!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
var today = new Date();
var year = y2k(today.getYear());
document.write(''+year+' - All rights reserved');
//--></script>
Microsoft®Programs and Logos are registered trademarks of Microsoft® Corporation.
<br><span class="lilac"><a href="pclinks.htm">pclinks | </a>
<a href="directories.htm">directories</a> | <a href="links.php">links |
</a><a href="links2.php">links2</a> </span></p>
</div></div></body></html>
|
appreciate any help with this the css is below
| Code: |
* {
margin: 0;
padding: 0;
}
html body #container {
height: auto;
}
html {
height: 100%;
}
body {
text-align: center;
height: 100%;
font: .88em helvicta, sans-serif;
background: url('images/bgstripe.jpg') repeat-x;
color: #000;
}
#container {
height: 100%;
background: #fff;
text-align: left;
border: 1px solid #F4F4F4;
margin: 5px auto;
width: 750px;
}
h1 {
padding: 0;
margin-bottom: 0;
}
#header {
width: 750px;
background: url('images/stripe.gif');
height: auto;
background-repeat: repeat;
}
#navigation {
width: 137px;
margin-top: 5px;
float: left;
margin-left: 2px;
}
#menu {
margin: 0 0 0 10px;
padding: 0 6px 0 20px;
font-size: 0.75em;
list-style-image: url('images/arrow.gif');
}
#menu a {
margin: 0;
color: #666;
border-bottom: 1px solid #3c9;
padding: 3px;
display: block;
width: 95px;
}
#menu a:hover {
background: #ebebeb;
color: #666;
text-decoration: none;
}
.vmenu {
font: bold 0.75em Verdana;
width: 100%;
}
.vmenu ul {
margin: 0;
width: 750px;
float: left;
background: #fff url('images/hmenu.gif') repeat-x center;
}
.vmenu ul li {
display: inline;
}
.vmenu ul li a {
float: left;
text-align: center;
width: auto;
text-decoration: none;
color: #666666;
text-transform: uppercase;
padding: 4px 6px;
border-right: 1px solid #666666;
}
.vmenu ul li a:visited {
color: #666;
}
.vmenu ul li a:hover {
color: gray;
background: #fff;
}
#search {
margin: 2px 0 5px 2px;
}
#centercontent {
width: 425px;
margin: 30px 5px 0 15px;
padding: 0 0 0 10px;
float: left;
display: inline;
height: 1%;}
#centercontent.outline {border: 1px double #9999C8;
padding: 5px;}
#smallbox {
background: url('images/box.gif') no-repeat;
width: 128px;
height: auto;
}
#rightcontent {
background: url('images/box.gif') no-repeat;
width: 128px;
height: auto;
}
#rightcontent {
margin-top: 2px;
float: right;
}
#smallbox {
margin: 3px;
float: left;
}
#smallbox2 {
font-size: 0.75em;
width: 122px;
margin-top: 17px;
border: 1px solid #3c9;
padding: 2px;
}
#rightcontent2 {
font-size: 0.75em;
width: 122px;
margin-top: 17px;
border: 1px solid #3c9;
padding: 2px;
}
#footer {
text-align: center;
background-image:url('images/stripe.gif');
background-repeat: repeat;
border-top:1px solid #F4F4F4;
clear: both;
height: 49px;
font-size: 0.66em;
}
#footer p {
padding-top: 10px;
}
#content {
width: 100%;
margin-top: 5px;
}
#rightarea {
width: 130px;
float: left;
margin: 5px;
}
#leftarea {
width: 130px;
margin: 5px;
position: relative;
float: left;
display: inline;
height: 1%;
}
#centerarea {
width: 130px;
margin: 5px;
float: left;
}
ul {
list-style: none;
}
a:link {
text-decoration: none;
color: #666699;
}
a:visited {
text-decoration: none;
color: #666;
}
a:hover {
text-decoration: underline;
}
.lilac {
color: #666699;
}
.margin {
margin:top:2px;
padding: 4px;
clear: both;
}
a:active {
color: #666699;
}
a:visited {
color: #666699;
}
a:link {
color: #666699;
}
h2 a:link {
color: #666699;
}
h2 {padding-bottom: 10px;
color:#A7A7CF;
font-size: 1.50em;
}
hr {
height: 1px;
color: #A7A7CF;
width: 50%;
text-align: center;
margin: 0 auto 10px auto;
}
h3 {
color: #14523e;
font-size: 1.00em;
}
.envelope {
border: none;vertical-align:bottom;
}
.imagebox {margin-left: 30px;
}
a img {
border: none;
}
img.base {
vertical-align:bottom;
}
img.floatcenter {
margin-left: 100px;
}
img.center {
margin-left: 13px;
}
img.floatright {
margin: 10px;
float: right;
}
img.floatleft {
margin: 10px;
float: left;
}
.blue {
color: blue;
}
p.search {
padding-top: 0;
padding-bottom: 0;
}
p.heading {
text-align: center;
font: 0.88em arial;
background: #9cf;
width: 200px;
}
.textindent {
text-indent: 15px;
font: 0.75em arial;
}
p.shaded {
background: #bfdfff;
font: 0.75em arial;
}
p.right {
float: right;
}
p.donate {
text-align: center;
padding: 0;
}
p {
margin-bottom: 10px;
}
.text {
font-size: 0.88em;
}
li.italic {
font-size: 0.75em;
font-style: italic;
}
.links {
list-style-image:url('images/starbullet.gif');
list-style-position: outside;
background-position: 50%;
padding-left: 1.30em;
margin-left: 0;}
.paragraph {
margin: 10px;
font: 0.75em arial;
list-style: decimal;
padding: 15px;
}
.tutorials {
background: #f4f4f4;
list-style: none;
}
.listing {
margin: 10px;
width: 380px;
list-style: square;
padding-left: 5px;
background: #f4f4f4;
list-style-position: inside;
}
.odd {
background: #EEE;
}
.border{border-top: 10px double #A7A7CF;margin-bottom:2px;
}
.title {color:#FFA851;font-size: 1.00em;
}
#index {width: 300px;height: 1px;
margin-left:90px;
font-family:Helvicta,Verdana,sans-serif;
font-weight:bold;
}
ul.bullets li {
list-style-image: url('images/starbullet.gif');
list-style-position: outside;
background-position: 50%;
margin-right: 3px;
}
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1179
|
| Posted: Mon May 26, 2008 4:14 pm |
|
|
|
After a quick look, remove a closing div tag and remove the clearing div.
| Code: |
...........
<li><a href="wordprocessing.htm">Internet Research</a></li>
<li><a href="vassistant.htm">One to one Training on<br>
PC Support/ECDL</a></li>
</ul>
<p>Experienced and qualified </p>
<p><a href="about.htm">ECDL and more. </a> </p>
<p>Read the article: <a href="whatis.htm">What is a Virtual Assistant</a>
</p> |
You can use a clearing <p> instead of a div if you need to clear the <p> below the <ul>
<p style="font-size:1px; height:1px; margin-top:-1px;"></p> or <br clear="all" />, but the br may not validate. I would just use a bottom margin on the ul since the <p> doesn't have an id or class |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Mon May 26, 2008 4:35 pm re |
|
|
|
| Yes I did try and remove the closing div and I did not have the clearing div, but it would not work, its ok though I found out if I add the exact height of the div and not 1px; it works. Thanks |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
