SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to wrap text around top layer?

    My question is as simple as the title. I have a layer and I'm trying to wrap the body text around it rather then just having the layer sit on top of the text. Code is included. Thanks.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body,td,th {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000;
    	background: url(images/layout/cork.jpg) repeat;
    }
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    h1 {
    	font-size: 24pt;
    }
    #container {
    	width: 1000px;
    }
    #header {
    	height: 300px;
    }
    #header a { width: 900px; height: 300px; background: url(images/layout/logo.png) top left no-repeat; display: block; }
    #right-corner {
    	position: absolute;
    	left: 800px;
    	top: 0px;
    	width: 200px;
    	height: 200px;
    	z-index: 1;
    	background: #999;
    }
    #content {
    	width: 650px;
    	margin: 0;
    	padding: 0;
    	position: absolute;
    }
    #sidebar {
    	width: 200px;
    	margin: 25px 50px 0 750px;
    	background: #ccc;
    	position: relative;
    }
    
    .page {
    	width: 607px;
    	margin: 25px 50px 0 50px;
    	padding: 0;
    }
    .page p { margin: 0 10px 10px 51px; padding: 0; text-align:justify; }
    .page h1 { margin: 0 10px 10px 51px; padding: 0; font: 250%/70% "Trebuchet MS", Arial, Helvetica, sans-serif; }
    .page-top {
    	width: 607px;
    	height: 61px;
    	margin: 0;
    	padding: 0;
    	background: url(images/layout/paper-top.png) top left no-repeat;
    }
    .page-middle {
    	width: 607px;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	background: url(images/layout/paper-middle.png) top left repeat-y;
    }
    .paper-bottom {
    	width: 607px;
    	height: 25px;
    	margin: 0;
    	padding: 0;
    	background: url(images/layout/paper-bottom.png) top left no-repeat;
    	clear: both;
    }
    .post-it {
    	position: absolute;
    	margin: 11px 0 0 0;
    	width: 152px;
    	height: 157px;
    	z-index: 1;
    	background: url(images/post-it.png) top left no-repeat;
    	display: block;
    }
    -->
    </style></head>
    
    <body>
    <div id="container">
    	<div id="right-corner">corner</div>
    	<div id="header"><a href="#">&nbsp;</a></div>
    	<div id="content">
    		<div class="page">
    			<div class="post-it">&nbsp;</div>
    			<div class="page-top"></div>
    			<div class="page-middle">
    				<h1>Headline</h1>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sem purus, consectetuer quis, vulputate quis, viverra et, urna. Etiam vel lacus a dui placerat vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis massa. Quisque odio. Nullam elementum congue nulla. Ut suscipit, dolor in ornare tincidunt, quam ante venenatis quam, et iaculis massa eros non lacus. Cras molestie nisi eget felis. Cras molestie. Sed eleifend mattis orci. Curabitur malesuada pharetra enim. Curabitur consectetuer pretium justo. Donec ut diam at nunc tempus nonummy. Maecenas vestibulum. Proin ut eros vel nunc mattis convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam molestie nunc.</p>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sem purus, consectetuer quis, vulputate quis, viverra et, urna. Etiam vel lacus a dui placerat vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis massa. Quisque odio. Nullam elementum congue nulla. Ut suscipit, dolor in ornare tincidunt, quam ante venenatis quam, et iaculis massa eros non lacus. Cras molestie nisi eget felis. Cras molestie. Sed eleifend mattis orci. Curabitur malesuada pharetra enim. Curabitur consectetuer pretium justo. Donec ut diam at nunc tempus nonummy. Maecenas vestibulum. Proin ut eros vel nunc mattis convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam molestie nunc.</p>
    			</div>
    			<div class="paper-bottom"></div>
    		</div>
    		<div class="page">
    			<div class="post-it">&nbsp;</div>
    			<div class="page-top"></div>
    			<div class="page-middle">
    				<h1>Headline</h1>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sem purus, consectetuer quis, vulputate quis, viverra et, urna. Etiam vel lacus a dui placerat vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis massa. Quisque odio. Nullam elementum congue nulla. Ut suscipit, dolor in ornare tincidunt, quam ante venenatis quam, et iaculis massa eros non lacus. Cras molestie nisi eget felis. Cras molestie. Sed eleifend mattis orci. Curabitur malesuada pharetra enim. Curabitur consectetuer pretium justo. Donec ut diam at nunc tempus nonummy. Maecenas vestibulum. Proin ut eros vel nunc mattis convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam molestie nunc.</p>
    				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sem purus, consectetuer quis, vulputate quis, viverra et, urna. Etiam vel lacus a dui placerat vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis massa. Quisque odio. Nullam elementum congue nulla. Ut suscipit, dolor in ornare tincidunt, quam ante venenatis quam, et iaculis massa eros non lacus. Cras molestie nisi eget felis. Cras molestie. Sed eleifend mattis orci. Curabitur malesuada pharetra enim. Curabitur consectetuer pretium justo. Donec ut diam at nunc tempus nonummy. Maecenas vestibulum. Proin ut eros vel nunc mattis convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam molestie nunc.</p>
    			</div>
    			<div class="paper-bottom"></div>
    		</div>
    		content
    	</div>
    	<div id="sidebar">sidebar</div>
    </div>
    </body>
    
    </html>

  2. #2
    Cha, Cha, Cha!!! Gamermk's Avatar
    Join Date
    Aug 2005
    Posts
    604
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the layer from position: absolute; to position: relative; and add float: left; (or float: right) to the layer you wish to have text wrapped around.
    People don't read ads. They read what interests them,
    and sometimes that happens to be an ad.
    TrulyBored.com | TankingTips.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •