SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping paragraphs under each other.New to CSS

    I'm very new to CSS- I've been using table based design for years and am finally taking the plunge into web standards based design.
    I have a page here and am trying to get it to display correctly.
    I have a couple of problems, I'd like the page to be fixed width - say 700 pixels - floating in the centre of the page.

    Second and most important - I like the paragraphs to remain under each other. At the moment they flow round each other because of the inclusion of photographs.

    Any help in resolving these issues will be gratefully received!

    Thanks

    Rob

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    Basically, you just need to clear those floated images!
    ;-)
    [Added a containing div which you can then use to set a fixed width...or whatever you need.]
    It's always a good idea to validate your pages with the w3c tools, also.

    HTML 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>
    <title>Flying Pig News</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body{
    margin:0; padding:0; width:100%; height:100%; font-size:100%;
    font-family:"verdana", "helvetica", "arial", sans-serif;
    background:#ececec none;
    }
    a:link, a:visited{
    text-decoration:underline;
    color:  #990000;
    }
    a:focus, a:hover{
    color:gray; text-decoration:none;}
    div#contain{
    width:750px; margin:0 auto; border:1px solid black; background:white none;}
    	h1{
    		background-color:  #ff9966;
    		color: #990000;
    		font-size: 150%;
    		margin:0 auto; padding:4px;
    		}
    	h2{
    		background-color:  #aaaaaa;
    		color: #000000;
    		font-size: 100%;
    		padding:4px;
    		margin:0 auto;
    		}
    		
    	p{
    		font-size: 80%;
    		margin:0 auto;
    		width:95%;
    		padding:5px 0;
    		}
    	#newsitems p{
    	border-bottom:2px solid silver;}
    	#newsitems img{
    		float:  left;
    		border:  0;
    		margin:0 auto;
    		padding-right:15px;
    		}
    	p#address{
    	color:#990000; text-align:right;}
    	</style>
    </head>
    <body>
    <div id="contain">
    	<div id="header">	
    	<p>
    	<img src="pig_files/piglogo.jpg" alt="Flying Pig" height="50" width="210">
    	</p>
    
    	<h1>Flying Pig News</h1>
    	<h2>September 17th 2006</h2>
    	</div>
    	<!-- end of header div !-->
    
    	<p>	
    	<em>Please check the end of this email for details of how to unsubscribe. </em>
    	</p>
    
    	<div id="newsitems"> 
    	<p>
    	<strong>Poppers and Popper Pack.</strong> <br>
    	<img src="pig_files/poppersandpack.jpg" alt="Poppers and the Popper Pack" height="146" width="200">
    	Our most popular downloads to date! Two basic types, Poppers are a fun
    	pair of grumpy characters ready for you to download and make, the
    	Popper Packs let you design your own <a href="http://www.flying-pig.co.uk/pagesv/poppers.html">Poppers!</a> A 		fabulous family activity and a super project for schools or after school clubs. 
    	<br style="clear:both;" />
    	</p>
    
    	<p>
    	<strong>Poppers Gallery.</strong> <br>
    	<a href="http://www.flickr.com/photos/popper/">
    	<img src="pig_files/poppergallery200.jpg" alt="Popper Gallery" height="184" width="200">
    	</a>
    	I've been delighted with the response to our Popper models. It has been
    	great to see the individual designs that people have sent in. We now
    	have a <a href="#">gallery</a>
    
    	where we can display your Popper. Design your own Popper, take a
    	digital photograph then either email it to us at
    	popper@flying-pig.co.uk of go to the <a href="#">Send a Popper Picture page</a> 
    	and upload your photograph. Visit the 
    	<a href="http://www.flickr.com/photos/popper/">Popper Gallery</a>
    	and be inspired!
    	<br style="clear:both;" />
    	</p>
    
    	<p>
    	<strong>Forum.</strong> <br>
    
    	<img src="pig_files/forumimage.jpg" 183="" alt="forum" width="200">
    	Hurry along to our newly updated forum and join in with the discussion
    	about all aspects of paper modeling and animation, ask a question or
    	send in a comment about the website or Flying Pig models.
    	<br style="clear:both;" />
    	</p>
    	</div>
    	<!-- End of NewsItems!-->
    
    		<div id="footer">
    		<p>
    		Best wishes <br />
    
    		<img src="pig_files/sig.jpg" alt="Rob Ives" height="53" width="120"><br />
    		If you wish to unsubscribe from this newsletter follow this link. You can join again at
    		anytime by following this link.
    		</p>
    		
    		<p id="address">
    		<strong>Flying Pig</strong> <br />
    		Broughton Moor <br />
    		Maryport <br />
    
    		Cumbria <br />
    		CA15 7RU <br />
    		t. 01900 814333 <br />
    		f. 01900 557313
    		</p>  
    		</div>
    		<!-- End of Footer !-->
    </div>
    </body>
    
    </html>
    El
    F-Fox 2.0 :: WIN :: el design :: US

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!
    That worked a treat.

    ..so is it the div#contain {} line that does the job?
    I can't find any reference to contain in my CSS book, do you have a reference I could look at?

    Rob

  4. #4
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    The div is just there to "hold" everything else and allows
    you to style it as separate from the body. The name
    [contain] doesn't really matter...and margin:0 auto; will
    center an element. [Though add text-align:center; to the body
    tag in IE to get it working there.]

    Have fun,
    El
    F-Fox 2.0 :: WIN :: el design :: US


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
  •