...

View Full Version : Wrap around photo



vinoman
01-12-2008, 03:04 PM
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

oesxyl
01-12-2008, 04:12 PM
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

Excavator
01-12-2008, 05:52 PM
Hello vinoman,
Since your image and text are already in .content, this will work:

.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. (http://www.quirksmode.org/css/clearing.html)

.

oesxyl
01-13-2008, 05:51 AM
The overflow:auto; is to the clear the floats. (http://www.quirksmode.org/css/clearing.html)
.

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

vinoman
01-15-2008, 02:13 PM
Hello vinoman,
Since your image and text are already in .content, this will work:

.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. (http://www.quirksmode.org/css/clearing.html)

.

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?

oesxyl
01-15-2008, 04:12 PM
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?verbose=1&uri=http%3A%2F%2Fwww.foreveryoungdance.net%2Fabout.html

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

best regards

Excavator
01-15-2008, 07:33 PM
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:
<!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>

vinoman
01-16-2008, 02:15 PM
Thank you. I'll look at that for future use.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum