www.webdeveloper.com
Results 1 to 6 of 6

Thread: floating img and text

  1. #1
    Join Date
    Mar 2010
    Posts
    55

    floating img and text

    How do I make the text flow to the right of the picture instead of below it in the following site?
    http://www.mikeglaz.com/jaggedNight/about.html

    here's the code for the page:
    Code:
    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Jagged Night Theatre</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    	<div id="title"><h1><a href="#">Jagged Night Theatre</a></h1>
    
    	</div>
    	<div id="container">
    		<div id="buttons">
    
    			<a href="index.html" class="button">Home</a>
    
    			<a href="about.html" class="button"><span class="currentPage">About the Company</span></a>
    
    			<a href="upcoming.html" class="button">Upcoming Productions</a>
    
    			<a href="donate.html" class="button">Donate</a>
    			<a href="join.html" class="button">Join Our Mailing List</a>
    			<a href="contact.html" class="button">Contact</a>					
    		</div>
    		<div id="left">
    			<div class="clanek">
    				<p class="title">About the Company</p>
    
    				<p class="text">Jagged Night Theatre is a New York City based theatre company founded in July 2011 by co-owners Matt Glaz and Clarisse Behr.  Our aim is to produce new and interesting works to expand the scope of traditional theatre and grow its audience in a creative way.  For information about our debut production, <em>Dark Light</em>, a dramatic horror play, <a href="upcoming.html">click here</a>.  Or, find out more about who we are below!</p>
    <p class="signature">Matt Glaz - Co-Artistic Director</p>
    	<img src="images/matt.jpg" class="left"/>
    
    <p class="text">Matt Glaz has had a love for the dramatic arts as long as he can remember.  At an early age, he
    became obsessed with movies and began concocting his own grandiose stories and bringing them to life with a cast of action-figure performers.  Throughout his childhood and adolescence, Matt enjoyed creating home movies with his friends until he discovered his love for theatre with his high school's production of David Ives' <em>All in the Timing</em>.  Matt pursued an education in Theatre Arts, earning his B.F.A. degree from Northern Illinois University's School of Theatre and Dance, where he studied Sanford Meisner's acting technique under Kathryn Gately.  Matt also studied at Chicago's famous Improv Olympic, and after performing professionally as an actor and improviser in various productions in Chicago, Matt moved to New York City, where he has been working at his other passion as a musician and songwriter.  Now, Matt has returned to the world of theatre as writer and director of Jagged Night Theatre's debut production, <em>Dark Light</em>.</p>
    
    <p class="signature">Clarisse Behr - Co-Artistic Director</p>
    <p class="text">Clarisse Behr first realized she loved theatre when her mother started a theatre company when Clarisse was two and a half years old.  From the time she realized how magical a set could be, or how a prop could come to life almost by itself, or how bewitching it was to witness one person transform into another, Clarisse knew she wanted to be a part of that world.  Clarisse performed in her first professional production at the age of six and became involved in over fifty productions before she turned fourteen.  After continuing to pursue theatre throughout high school, Clarisse went on to study Sanford Meisner technique at Northern Illinois University where she received her B.F.A. in acting.  During this time, Clarisse also studied and performed at the Moscow Art Theatre.  Since arriving in New York Clarisse has performed in theatre productions, in staged readings, and on film.  Clarisse is thrilled to be a co-founder of Jagged Night Theatre in New York City, her new home, and can't wait to act in the company's first production, <em>Dark Light</em>.</p>		
    		</div>
    	</div>
    </div>
    </body>
    </html>
    and here's the CSS:
    Code:
    * {
    
    padding:0;
    
    margin:0;
    
    border:0;
    
    }
    
    body{
    	background-color: rgb(0,25,35);	
    	font-family: Georgia;
    	}
    	
    div#wrapper {
    
    margin: 0px auto;
    
    width: 981px;
    #border: solid red 3px;
    background-color: rgb(0,20,28);
    
    }
    
    div#title {
    
    float: left;
    
    width: 1000px;
    
    height: 71px;
    
    margin-top: 50px;
    background-color: rgb(0,25,35);
    
    }
    
    .left
    {
    	clear: both;
    	display: inline;
    	float: left;
    }
    
    div#title h1 a {
    
    float: left;
    
    #font-size: 18px;
    
    color: rgb(239,255,0);
    
    font-weight: normal;
    
    text-decoration: none;
    
    margin: 15px 0px 0px 90px;
    
    letter-spacing: 1px;
    
    }
    
    div#container {
    
    float: left;
    
    width: 1000px;
    
    _padding-bottom: 50px;
    
    background-color: rgb(0,20,28);
    
    }
    
    #buttons {
    	background-color: rgb(0,16,22);
    	border-bottom: 4px solid rgb(0,24,33);
    	float: left;
    
    	width: 986px;
    
    	height: 30px;
    	color: #eaff00;
    
    	padding: 0px 7px;
    
    	margin-bottom: 30px;
    
    	font-family: Tahoma;
    
    	list-style-type: none;
    	display: inline;
    	padding-top: 10px;
    }
    
    .button{
    	width: 100px;
    	padding: 3px 20px;
    	color: #eaff00;
    	background-color: rgb(0,16,22);
    	font-family: Tahoma;
    	font-size: 14px;
    	text-align: center;
    	text-decoration: none;
    	padding-top: 12px;
    	padding-bottom: 12px;
    }
    
    a.button:hover { color: #fff; 
    						height: 34px;
    					  background: url('images/hover.png') no-repeat center center;
    }
    
    .currentPage {color: #fff; 
    				  #background: url('images/hover.png') no-repeat center center;
    }
    
    #donate{
    	text-align: center;
    }
    			  
    div#left {
    
    width: 595px;
    
    float: left;
    
    padding: 0px 30px 50px 50px;
    
    }
    
    div.clanek {
    
    float: left;
    
    margin-bottom: 20px;
    
    }
    
    div.clanek p.text {
    float: left;
    text-indent: 40px;
    margin-left: 40px;
    
    #color: #8ebdcc;
    color: rgb(140,190,206);
    
    font-family: Tahoma;
    
    font-size: 11px;
    
    line-height: 15px;
    
    letter-spacing: 1.2px;
    
    word-spacing: 2px;
    
    margin-bottom: 20px;
    
    }
    
    div.clanek p.email {
    
    float: left;
    margin-left: 40px;
    
    #color: #8ebdcc;
    color: rgb(140,190,206);
    
    font-family: Tahoma;
    
    font-size: 11px;
    
    line-height: 15px;
    
    letter-spacing: 1.2px;
    
    word-spacing: 2px;
    
    margin-bottom: 20px;
    
    }
    
    
    div.clanek p.signature{
    float: left;
    color: rgb(239,255,0);
    
    font-family: Tahoma;
    
    font-size: 14px;
    
    line-height: 15px;
    
    letter-spacing: 1.2px;
    
    word-spacing: 2px;
    
    margin-bottom: 10px;
    
    }
    
    div.clanek p.title{
    float: left;
    color: rgb(239,255,0);
    
    font-family: Tahoma;
    
    font-size: 20px;
    
    line-height: 15px;
    
    letter-spacing: 1.2px;
    
    word-spacing: 2px;
    
    margin-bottom: 20px;	
    }
    
    p {
    color: rgb(140,190,206);
    
    font-family: Tahoma;
    
    font-size: 11px;
    
    line-height: 15px;
    
    letter-spacing: 1.2px;
    
    word-spacing: 2px;
    
    margin-bottom: 20px;	
    }
    
    div.clanek-hlavicka {
    
    float: left;
    
    width: 100%;
    
    border-bottom: 1px dotted rgb(239,255,0);
    
    padding-bottom: 10px;
    
    margin-bottom: 10px;
    color: rgb(239,255,0);
    
    }
    
    
    
    div.clanek-hlavicka h2 {
    
    float: left;
    
    float: left;
    
    font-size: 17px;
    
    margin-left: 40px;
    
    _margin-left: 20px;
    
    font-weight: normal;
    
    font-style: italic;
    
    letter-spacing: 1px;
    
    }
    
    div.info-pridani{
    
    float: right;
    
    margin-top: 5px;
    
    margin-right: 5px;
    
    }
    
    div.info-pridani p.date{
    	color: rgb(239,255,0);
    }
    
    
    
    
    div.info-pridani p {
    
    float: left;
    
    color: rgb(239,255,0);
    
    font-size: 10px;
    
    font-family: Tahoma;
    
    }
    
    
    
    
    div.info-pridani p a{
    
    text-decoration: none;
    
    font-size: 10px;
    
    color: #fff;
    
    }

  2. #2
    Join Date
    Mar 2011
    Location
    Ponca City, OK
    Posts
    42
    Move your image into your paragraph, that will place it right along side your text, add some margin to the image or some padding to move the text away from the image a bit.
    Last edited by mikeroq; 08-06-2011 at 09:52 PM.

  3. #3
    Join Date
    Mar 2010
    Posts
    55
    Thanx, that did it. But after trying to figure it out I moved display:inline's and clear:both's in and out of CSS properties and some how I broke this page:
    http://www.mikeglaz.com/jaggedNight/contact.html

    Everything is supposed to go underneath each other from up to down but the objects crowd each other left to right. It should look like this:

    Contact Jagged Night Theatre

    By Email:

    Matt Glaz
    Co-Artistic Director
    matt@jaggednighttheatre.com

    Clarisse Behr
    Co-Artistic Director
    clarisse@jaggednighttheatre.com

    I just can't figure out what the problem is after staring at it for hours.

    thanks,
    Mike

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there mikeglaz,

    your problem on this page...

    ...is the result of these highlighted float:left attributes.

    Comment them out as shown, or remove them altogether.

    Code:
    
    div.clanek p.text {
    /*float: left;*/
    text-indent: 40px;
    margin-left: 40px;
    color: rgb(140,190,206);
    font-family: Tahoma;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1.2px;
    word-spacing: 2px;
    margin-bottom: 20px;
    }
    
    div.clanek p.email {
    /*float: left;*/
    margin-left: 40px;
    color: rgb(140,190,206);
    font-family: Tahoma;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1.2px;
    word-spacing: 2px;
    margin-bottom: 20px;
    }
    
    div.clanek p.signature{
    /*float: left;*/
    color: rgb(226,244,0);
    font-family: Tahoma;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 1.2px;
    word-spacing: 2px;
    margin-bottom: 10px;
    }
    
    div.clanek p.title{
    /*float: left;*/
    color: rgb(226,244,0);
    font-family: Tahoma;
    font-size: 20px;
    line-height: 15px;
    letter-spacing: 1.2px;
    word-spacing: 2px;
    margin-bottom: 20px;	
    }
    
    p {
    /*float: left;*/
    color: rgb(140,190,206);
    font-family: Tahoma;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1.2px;
    word-spacing: 2px;
    margin-bottom: 20px;	
    }
    
    coothead

  5. #5
    Join Date
    Mar 2010
    Posts
    55
    Thanx coothead, I really appreciate it. That worked!

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    No problem, you're very welcome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles