 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 405
|
 Posted: Fri Sep 05, 2008 1:28 pm javascript help needed |
 |
|
|
I have this code that another forum member gave me, trouble is I dont know how to add it to the divs.
The site is loaded up on
www.quartzy.net76.net/policies3.html
I just want to get them to site in the middle of the page, with a normal gap between them. If I do not use the js the site goes wrong in IE
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { padding: 0; margin: 0; }
* html
body{
font-size:small;/* for ie5.+*/
f\ont-size:medium;/* for ie6*/
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #000;
line-height:1.5;
}
.wrapper {
margin: 30px auto;
width: 900px;
background:#fff;
}
#header {
color: #333;
width: 100%;
float: left;
height: 140px;
}
#header .map {
width: 140px;
float: right;
}
#nav {
width:100%;
background: #fff;
margin: 0;
}
#leftcolumn {
width: 300px;
float: left;
margin-left:80px;
}
#rightcolumn {
float: right;
width: 300px;
display:inline;
position:relative;
margin-right:100px;
}
.one, .two,.three,.four {
width: 290px;
margin: 0 auto;
padding: 10px;
height: 190px;
overflow: auto;
text-align: justify;
}
.spacer {
height: 1px;
width:290px;
margin:0;
background: #25509f;
overflow:hidden;
margin:30px 0;
}
.spacer1 {
height: 1px;
width:290px;
margin:0;
background: #25509f;
overflow:hidden;
margin:30px 0;
clear:left;
}
.one h3, .two h3,.three h3, .four h3 {
border-bottom:10px solid gold;
color:#3066CB;
width: 220px;
padding-top: 0;
padding-bottom: 0;
}
.clear {width: 100%; height:30px; clear: both;}
#footer {
height: 20px;
text-align: center;
padding: 10px 0 10px 0;
border-top: 2px solid #25509f;
border-bottom: 10px solid #25509f;
}
/*** Tabs ***/
#tabs {
clear: right;
float: none; /* Fix serious bug in Opera 7.1 */
margin: 0 0 0 0;
margin-right: -3px;
font-size: 1.00em;
}
#tabs ul {
margin:0;
padding:0;
list-style:none;
font-size:90%;
}
#tabs li {
float:right;
margin:0;
padding:0.2em;
padding-left: 8px;
}
#tabs a {
padding:0.2em 0.9em 0.2em 0.2em;
margin: 0;
text-decoration: none;
}
#tabs a:visited {
color: #259;
}
#tabs li#current, #tabs li:hover {
background:url("images/tab_r1_c1.png") no-repeat;
background-position: 0% -116px;
color:#fff;
}
#tabs li#current a, #tabs li:hover a {
background-image:url("images/tab_r1_c2.png");
background-repeat: no-repeat;
background-position: 100% -116px;
color:#fff;
}
#tabs a:visited, #tabs a:link {
background-image:url("images/tab_r1_c2.png");
background-repeat: no-repeat;
background-position: right top;
color: #00c;
}
#tabs li {
background-image:url("images/tab_r1_c1.png");
background-repeat: no-repeat;
background-position: left top;
color: #000;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabs a { display:block;}
#tabs li {
padding: 0;
padding-left: 8px;
}
/* End IE5-Mac hack */
.bar {
border-bottom: 1px white solid;
font-weight: bold;
clear: both;
padding: 0.2em 1em;
margin-bottom: 1em;
background:#25509f;
color:#fff;
}
#title {text-align:center;}
#line {
list-style: none;
width:600px;
margin:0 auto 20px auto;
}
#line li {
display:inline;
margin: 0;
padding: 0;
font-size: 1.00em;
font-weight:bold;
padding:0 5px;
border-right: 1px solid gold;
}
#line li.last {border:none;}
/** Puts h1 tag behind header image **/
#logo, #logo span {
width: 300px;
height: 140px;
/*background: url(images/logo.jpg) no-repeat;*//* Header image goes here */
}
#logo span { margin-bottom: -120px; }
/* non-repeated code */
h1 span {
display: block;
position: relative;
z-index: 1;
}
#panels {
/*float: right;
width: 80%;*/
min-height: 300px;
/*background-color: #EEE;*/
}
#panels div {
min-height: 300px;
padding:10px;
}
#panels h3 {
border-bottom:10px solid gold;
width: 190px;
padding-top:20px;
padding-bottom: 0;
color:#25509f;
}
#panels .wider {width:350px;}
/* IE5 Mac Hack \*/
h1 { overflow: hidden; }
/*/
h1 { text-indent: -100em; }
/* End Hack */
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div id="header">
<p class="map"><a href="sitemap.html"><span class="style1">Site</span> Map</a></p>
<h1 id="logo"><span></span>Site Name</h1>
</div>
<div id="nav">
<div id="tabs">
<ul>
<li><a href="links.html">Links</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="about.html">About Us</a></li>
<li id="current"><a href="policies.html">Policies</a></li>
<li><a href="development.html">Development</a></li>
<li><a href="photo_gallery.html">Gallery</a></li>
<li><a href="scholarships.html">Scholarship Program</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="news.html"> News</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<div class="bar"><h2>Policies</h2></div>
<div id="title">
<ul id="line">
<li><a href="#cpa">Child Protection Policy</a></li>
<li><a href="#d">Disclaimer</a></li>
<li><a href="#pp">Privacy Policy</a></li>
<li class="last"><a href="#acc">Accessibility</a></li>
</ul></div>
<div id="leftcolumn">
<div class="one">
<h3><a name="pp">Privacy Policy</a></h3>
<p>Any information given to Ten Em Bee<br /> will be treated with the utmost
confidentiality. Your personal or business details will not be passed on to anyone, not directly
related to your enquiry. We do not sell or trade our contacts to third parties.
Neither do we keep a newsletter list, or mailing list. </p>
<p>Once you enrol as a student we will of course send out the relevant
information that you will need. </p>
</div>
<div class="spacer"></div>
<div class="two"><h3><a name="cpa">Child Protection Policy</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem,
consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam
nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus
dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu
non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim
nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros
eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula,
ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor,
sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec,
faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna.
Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam
interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis
fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit
ac, rutrum ac, lectus.</p>
</div>
</div>
<div id="rightcolumn">
<div class="three">
<h3><a name="acc">Accessibility</a></h3>
<p>Every effort has been carried out to make this website accessible to all. All
WebPages on this website are designed using the Web Standards of Xhtml
1.0 as
laid out by the WC3 recommendations, using cascading style sheets for
presentation. As far as is possible all modern browsers will view these web
pages as intended, and use the navigation with ease. However, I cannot vouch for
older browsers such as Netscape 4 or Internet Explorer 4, this is normal
practise for year 2008.</p><br />
<h3 style="text-align:left">How to increase text size?</h3>
<p>Use the text size settings in the View menu on the top toolbar of your
browser. Default is set to medium, you can change to large or small. If you have
any difficulty with accessibility or think we could do more, please contact us.</p>
</div>
<div class="spacer1"></div>
<div class="four">
<h3><a name="d">Disclaimer</a></h3>
<p>We have a disclaimer policy whereby we will not be held accountable
for any misunderstandings held from the information you gain from this website.
This is an informative website and as such no monies will be taken from you,
on this website, neither will you be coerced to buy things. We are not to be
held accountable for the content of any links from this website They are simply links of our contacts, and any involvement
with third parties by way of links is at your own discretion.</p>
</div>
</div>
<div class="clear"></div>
<div id="footer"><p>© Ten Em Bee ~ 2008</p></div>
</div></div><script src="urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2025455-2";
urchinTracker();
</script>
</body>
</html> |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1173
|
| Posted: Fri Sep 05, 2008 10:19 pm |
|
|
|
| Check your mail |
|
|
|
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
