I have a few paragraphs on my site and an ul that I’ve set up with a css background image. I wanted the image separate from the main background and still have the ability to type on it. Is there a way to get the text to wrap around the ul and the image? Or a better way to set it up in the first place? Right now I can only see how to have text above it and text below it.
Any help would be great
Thanks
[CODE=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FoN</title>
<style type="text/css">
@import "fon.css";
</style>
<script src="menuscript .js" language="javas cript" type="text/javascript"></script>
<link rel="stylesheet " type="text/css" href="menustyle .css" media="screen, print" />
</head>
<body>
<div id="content">
<div align="center" id="header">
<a href="index.htm l"><img src="Images/logo.gif" alt="logo" align="left" border="0" /></a>
<img src="Images/kids3.gif" alt="kids" border="0" />
</div>
<div id="tool_bar">
</div>
<div id="information ">
<h1 align="center"> Friends of Namibia </h1>
<p>Fusce at turpis. Quisque sit amet nisi. Duis mollis sollicitudin ligula. Nullam id nisi sed sem viverra semper. Phasellus erat orci, facilisis sit amet, porta eu, pretium sit amet, mi. Ut vitae lorem. Quisque porta interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vitae nulla. Nunc tempus velit at est. Aenean elementum. Nunc vel turpis at odio egestas adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<ul>
<li>3/29/08</li>
<li>FoN project </li>
</ul>
<p> Ut vitae lorem. Quisque porta interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vitae nulla. Nunc tempus velit at est. Aenean elementum. Nunc vel turpis at odio egestas adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="bottom">
<a href="#"> Contact Us I</a>
<a href="#"> About Us </a>
</div>
</div>
</body>
</html>
[/code]
[code=css]
body {background-image:url(Image s/background.gif) ;
float: inherit;}
h1{color:#00000 0;
font-size:36px;
margin-top:45px;}
#header{
width: auto;
height: 100px;
margin-left: 50px;
float: inherit;
}
#tool_bar{margi n-top: 50px;}
#information{
margin-top:25px;
padding: 10px;
background-image:url(Image s/paper.png);
background-repeat:no-repeat;
background-position:center ;
height: 900px;
width: inherit;
}
#information ul{
background-image:url(Image s/infoboard.png);
background-repeat:repeat-y;
background-position:left;
width: 295px;
height: 450px;
}
#information ul li{
list-style-type: none;
margin-top: 50px;
width: 180px;
margin-left: 64px;
margin-right: 23px;
text-align:center;
}[/CODE]
Any help would be great
Thanks
[CODE=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FoN</title>
<style type="text/css">
@import "fon.css";
</style>
<script src="menuscript .js" language="javas cript" type="text/javascript"></script>
<link rel="stylesheet " type="text/css" href="menustyle .css" media="screen, print" />
</head>
<body>
<div id="content">
<div align="center" id="header">
<a href="index.htm l"><img src="Images/logo.gif" alt="logo" align="left" border="0" /></a>
<img src="Images/kids3.gif" alt="kids" border="0" />
</div>
<div id="tool_bar">
</div>
<div id="information ">
<h1 align="center"> Friends of Namibia </h1>
<p>Fusce at turpis. Quisque sit amet nisi. Duis mollis sollicitudin ligula. Nullam id nisi sed sem viverra semper. Phasellus erat orci, facilisis sit amet, porta eu, pretium sit amet, mi. Ut vitae lorem. Quisque porta interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vitae nulla. Nunc tempus velit at est. Aenean elementum. Nunc vel turpis at odio egestas adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<ul>
<li>3/29/08</li>
<li>FoN project </li>
</ul>
<p> Ut vitae lorem. Quisque porta interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vitae nulla. Nunc tempus velit at est. Aenean elementum. Nunc vel turpis at odio egestas adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="bottom">
<a href="#"> Contact Us I</a>
<a href="#"> About Us </a>
</div>
</div>
</body>
</html>
[/code]
[code=css]
body {background-image:url(Image s/background.gif) ;
float: inherit;}
h1{color:#00000 0;
font-size:36px;
margin-top:45px;}
#header{
width: auto;
height: 100px;
margin-left: 50px;
float: inherit;
}
#tool_bar{margi n-top: 50px;}
#information{
margin-top:25px;
padding: 10px;
background-image:url(Image s/paper.png);
background-repeat:no-repeat;
background-position:center ;
height: 900px;
width: inherit;
}
#information ul{
background-image:url(Image s/infoboard.png);
background-repeat:repeat-y;
background-position:left;
width: 295px;
height: 450px;
}
#information ul li{
list-style-type: none;
margin-top: 50px;
width: 180px;
margin-left: 64px;
margin-right: 23px;
text-align:center;
}[/CODE]
Comment