Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wrap around photo

    What is the style to use to wrap of place the verbiage below the photo and put it to the right of the Let's Go photo?

    preview: http://www.foreveryoungdance.net/entertainers.html

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by vinoman View Post
    What is the style to use to wrap of place the verbiage below the photo and put it to the right of the Let's Go photo?

    preview: http://www.foreveryoungdance.net/entertainers.html
    you must include the photo and your text into a div and use css float to wrap around.

    best regards

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello vinoman,
    Since your image and text are already in .content, this will work:
    Code:
     
    .content {
    overflow: auto;
    }
    .content img {
    float:left; 
    margin: 0 5px 0 0;
    }
    }
    Of course, that floats ALL images in .content because I didn't change your markup. If you want to target only that specific image you need to give it an id or class and float that.

    The overflow:auto; is to the clear the floats.

    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    oesxyl (01-13-2008)

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Excavator View Post
    Usualy I clear float with 'clear' and few days ago I have a problem I can solve this way, I didn't know about overflow( in this context) and I didn't find the answer on the net,

    Thanks for the indirect answer to my problem,

    best regards

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello vinoman,
    Since your image and text are already in .content, this will work:
    Code:
     
    .content {
    overflow: auto;
    }
    .content img {
    float:left; 
    margin: 0 5px 0 0;
    }
    }
    Of course, that floats ALL images in .content because I didn't change your markup. If you want to target only that specific image you need to give it an id or class and float that.

    The overflow:auto; is to the clear the floats.

    .
    Thank you. That did the trick. Is there a way to bring up the line "Dancers catch their breath" on the http://www.foreveryoungdance.net/about.html
    page? Is that a margin adjustment?

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by vinoman View Post
    Is there a way to bring up the line "Dancers catch their breath" on the http://www.foreveryoungdance.net/about.html
    page? Is that a margin adjustment?
    you have some invalid markup:

    http://validator.w3.org/check?verbos...t%2Fabout.html

    after img you have a br tag, if you'll remove it the line will probably be bring up.

    best regards

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by vinoman View Post
    Thank you. That did the trick. Is there a way to bring up the line "Dancers catch their breath" on the http://www.foreveryoungdance.net/about.html
    page? Is that a margin adjustment?
    I think your using the p tag a little too much and wrong. You have an empty p for a spacer and you're enclosing your image in p tags.
    If you view this in FF and do a text resize it does not do well.

    Your using floats on your images so why not let the text flow around the pictures naturally. In this example I've given each image an id and styled it seperately. I've used margins and padding for space, instead of empty p or h2 tags. It behaves a little differently with a text re-size now:
    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>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <style type="text/css">
    html, body {
    	background: #000;
    	color: #222;
    	font: normal 100% sans-serif;
    	padding: 2% 0;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 750px;
    	margin: 0 auto;
    	background: #6699CC; /*just for testing*/
    }
    .post {
    	background: #fff;
    	overflow: auto;
    padding: 10px 10px 25px 10px;
    margin: 0 0 20px 0;
    }
    	h1 {
    		margin: 5px 0 5px 10px;
    	}
    	h2 {
    		font-family: "Times New Roman", Times, serif;
    		font-style: italic;
    		margin: 0 0 10px 0;
    	}
    #twila {
    	float: left;
    	margin: 0 5px;
    }
    #dancers {
    	float: right;
    	margin: 0 5px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div class="post">
        	<h1>About Us</h1>
    			<img src="http://www.foreveryoungdance.net/img/Twila-roses.jpg" alt="Twila Stern" width="194" height="260" id="twila" />
    		  		<h2>Twila is rewarded for her many efforts</h2>
                    <p>
                        <strong>About Twila:</strong> Twila Stern, the director of the Forever   Young Dance Studio is a 
                        professional dancer who has focused on bringing   dance to older performers. Twila spent several 
                        years as a member of   the Radio City Music Hall Rockettes. She combines her dance experience   
                        with the ASU classes she&rsquo;s taken in Sports Medicine and Exercise Physiology.   Most importantly, 
                        Twila is passionate about the value of dance for older   performers and the fun you can have from 
                        performing!&nbsp;
                    </p>
    				<p>
                        As director of the Forever   Young Dancers, Twila and the group have performed in Hollywood, Las   
                        Vegas and throughout the Valley of the Sun. They&rsquo;ve been seen in Denmark,   Russia, England, 
                        Australia, New Zealand, Fiji, Spain, Greece, Switzerland,   and Germany. The group was featured on 
                        NBC&rsquo;s &ldquo;Second Chance: Search   for America&rsquo;s Most Talented Senior.&rdquo;  &nbsp;
                    </p>
      	<!--end .post--></div>  
        <div class="post">
        	<img src="http://www.foreveryoungdance.net/img/Catchingourbreath2.jpg" alt="dancers" width="398" height="181" id="dancers" />
    			<h2>Dancers catch their breath after recent rehearsal</h2>
    				<p><strong>About the Studio: </strong></p>
                    <p>
                        The 1500 square foot studio   has a floating floor that provides the best base for dancers. The gleaming   
                        hard woods on the floating floor are just great for dance! The studio   is conveniently located for easy 
                        access.
                    </p>
        <!--end .post--></div>
    <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you. I'll look at that for future use.

    ...but now my client wants it the way it was without the style!


  •  

    Posting Permissions

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