| krb100 2004-09-23, 12:16 pm |
| I have a page made with css. I am having trouble placing a border to the right
of the page so that it encloses the whole page (sort of like a border).
I have tried putting the whole page within a wrapper but the wrapper stays
like a 100px or so out from the page no matter what I tweak. I am pasting the
css style sheet and page code here.
Hope someone can decipher it and lend me a hand cracking this mystery.
Thank you in advance
Page html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Organisasjon</title>
<style type="text/css">
<!--
@import url("css/aol2.css");
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="Layer1" style="position:absolute; left:14px; top:81px; width:133px;
height:91px; z-index:1" class="logo"></div>
<div id="header"></div>
<div id="menubar"><a href="#">Sri Sri Ravi Shankar</a> I <a href="#">Service
& Humanitære Projekter </a>I <a href="#">Video / Lyd </a></div>
<div id="mainarea">
<div id="sidemenu">
<ul id="navbar">
<li><a href="home.html">Forside</a></li>
<li><a href="#">Organisasjonen</a></li>
<li><a href="#">AOL kurs</a></li>
<li><a href="#">Aktiviteter/Kalender</a></li>
<li><a href="#">Artikler/forskning</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Webshop</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<div id="navbar">
</div>
</div>
<div id="maincontainer">
<div id="maincontent">
<p align="left">"Life is sacred. Celebrate life. Care for others and
share whatever you have with those less fortunate than you. Broaden your
vision, for the whole world belongs to you." <em><br>
</em> His Holiness Sri Sri Ravi Shankar <em><br>
From an article in the New York Times 10/2001</em></p>
<p align="left">To live life fully and freely is an art, requiring skill,
intuition, creativity, and knowledge. Art of Living, through its many
innovative programs, brings these values to our society by strengthening the
individual. </p>
<p align="left">We do this by offering programs that eliminate stress,
create a sense of belonging, restore human values, and encourage people from
all backgrounds, religions, and cultural traditions to come together in
celebration and service. </p>
<p align="left">The Art of Living Foundation, is an international
nonprofit educational, charitable, and humanitarian organization offering
programs in more than 142 countries around the world. </p>
<p align="left">As a Non-Governmental Organization, Art of Living
Foundation works in special consultative status with the Economic and Social
Council of the United Nations, participating in a variety of committees and
activities relating to health, education, sustainable development and conflict
resolution. </p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Css style Sheet:
/* CSS Document */
body {
background-color: #FFFFFF;
margin: 0px;
margin-top: 0px;
padding: 0px;
font-family: Arial, sans-serif;
font-size: 100%;
color: #000000;
}
#header {
height: 60px;
margin: 1px 25% 0 0;
text-align: left;
background-image: url(../images/head.jpg);
background-repeat: no-repeat;
width: 766px;
}
#mainarea {
margin: 0px 0% 0 0;
clear: both;
}
#maincontainer {
background-color: #FFFFFF;
margin-left: 196px;
line-height: 1em;
width: 570px;
border-right: 1px solid;
}
#maincontent {
padding-top: 1px;
padding-left: 25px;
padding-right: 25px;
text-align: justify;
font-size: .9em;
line-height: 1.5em;
clear: right;
}
#sidemenu {
position: absolute;
top: 249px;
left: 11px;
width: 170px;
font-size: .8em;
height: 235px;
}
#navbar { margin: 1em 0 0 0; padding: 0; }
#navbar li { margin: 0; padding: 0; list-style-type: none; }
#navbar a, #navbar a:visited {
text-decoration: none;
height: 1.1em;
padding: 5px;
display: block;
background-color: #D9D9CD;
color: #000000;
border-top: 1px solid #999999;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #999999
}
#navbar a:hover, #navbar a:active, #navbar a:focus { color: #FFFFFF;
background-color: #0099FF}
h1 { font-size: 1.2em; margin: 1px 0px 0px; }
#footer {
clear: both;
font-size: 0.7em;
margin: 1px 25% 0 0;
padding: 6px 0 0 0;
background-image:url(../images/bottom.jpg);
height: 28px;
background-repeat:no-repeat;
width: 766px;
border-bottom: 1px solid;
}
#footer p {
margin: 0;
}
.logo {
background-image: url(../images/logo.jpg);
background-repeat: no-repeat;
position: absolute;
}
#menubar {
margin: 10px 25% 0% 196px;
font-size: 75%;
}
|