Err, its not bravo. The problem is your using position: relative which is fine. However, what happens with both relative and aboslute is that, browsers will leave space, where the divs should be if they weren't moved at all. If even if they are moved, like they are in your website, the spaces from their orginal location will remain.
To fix this, I would recommend using floats instead. So...
CSS:
Code:
body {
background-image: url(http://www.enhance.ie/2005/images/background.jpg);
text-align: left;
width: 749px;
margin-left: auto;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #333333;
font-style: normal;
text-decoration: none;
list-style-image: url(../images/bullet.gif);
}
h1 {
font-size: 1.2em;
font-style: italic;
letter-spacing: 5px;
}
h2 {
font-size: 1.1em;
}
p {
font-size: .7em;
text-align: left;
line-height: 1.4em;}
li {
font-size: .7em;
text-align: justify;
line-height: 1.4em;}
#top {
background-image: url(http://www.enhance.ie/2005/images/top_back.jpg);
background-repeat: no-repeat;
}
#content_all {
float: left;
width: 576px;
margin-top: 11px;
}
#content {
width: 556px;
height: 359px;
background-color: #FFFFFF;
border-right-color: #333333;
border-right-style: solid;
border-right-width: 1px;
border-left-color: #333333;
border-left-style: solid;
border-left-width: 1px;
padding: 10px;
overflow: auto;
}
#top_nav {
position: relative;
width: 520px;
top: 39px;
right: -226px;
}
#top_nav a:link, #top_nav a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #000066;
text-decoration: none;
}
#top_nav a:hover {
color: #0066CC;
}
#side{
margin-left: 11px;
margin-top: 11px;
float: left;
width: 160px;
}
#side_nav {
width: 160px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #FFFFFF;
height: 272px;
background-image: url(http://www.enhance.ie/2005/images/side_back.jpg);
}
#side_nav a:link, #side_nav a:visited {
display: block;
color: #000066;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
padding: 12px 0px 0px 15px;
line-height: 12.5px;
}
#side_nav a:hover {
color: #0066CC;
}
#quote {
margin-top: 11px;
width: 160px;
height: 112px;
}
.bulletpoints {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
list-style-image: url(http://www.enhance.ie/2005/images/bullet.gif);
}
HTML:
Code:
<body>
<div id="top_nav"><a href="usability.htm">USABILITY</a> | <a href="function.htm">FUNCTIONALITY</a>
| <a href="design.htm">DESIGN</a> | <a href="promotion.htm">PROMOTION</a> |
<a href="leg_comp.htm">LEGAL & COMPLIANCE</a> | <a href="web_serv.htm">WEB
SERVICES</a></div>
<div id="top">
<a href="index.htm"><img src="http://www.enhance.ie/2005/images/logo.gif" alt="Enhance Logo - Home" width="192" height="60" border="0"></a></div>
<div id="content_all">
<div id="content_top"><img src="http://www.enhance.ie/2005/images/main_top.gif" width="578" height="8"></div>
<div id="content">
<h1>Welcome to Enhance.ie</h1>
<p><br>
Enhance.ie is a web usability and functionality solution provider. Information
on our services is available by navigating the site, or contact us for a
bespoke solution. Essentially, our service examines the Internet opportunities
for a business from various use perspectives (e-commerce, CRM, SCM, HR, Operational
Efficiencies) and implements the technology to capitalise on the agreed project
plan. </p>
<p><br>
<strong>What we do: </strong></p>
<ul>
<li>Use the web to reduce cost of doing business through enhanced customer
communication, increased supplier integration, more efficient staff collaboration. </li>
<li>Use the web to reduce customer acquisition costs, improve customer relationship
management and reduce CRM costs. </li>
<li>Use the web to generate leads and sales. </li>
<li>Help companies understand and
profit from the business impact of the Internet.</li>
<li>Work with you to understand
how the Internet could help your business, from cost saving efficiencies
to revenue enhancing activities. </li>
<li>Enhance the way your business currently
uses the Internet.</li>
</ul>
</div>
<div id="content_top"><img src="http://www.enhance.ie/2005/images/main_bott.gif" width="578" height="8"></div>
</div>
<div id="side">
<div id="side_nav"><img src="http://www.enhance.ie/2005/images/title_home.jpg" width="160" height="136">
<a href="contact.htm">CONTACT US</a><a href="manage.htm">MANAGEMENT</a><a href="portfol.htm">PORTFOLIO</a><a href="pub_link.htm">PUBLICATIONS/LINKS</a><a href="enhance.htm">ENHANCE
YOUR WEB</a></div>
<div id="quote"><img src="http://www.enhance.ie/2005/images/quote_support.jpg" width="160" height="112"></div>
</div>
</body>
Should work.
Big space at bottom of page - please help me!
Originally Posted by The New Guy
Bookmarks