An indented paragraph next to a floating image?

Hi,
I have a typical book layout page: Text with a floated image to the left, with a blockquote that is indented 30px to the left and right. For some reason when the indented paragraph is next to the floating image, the indent does not show up. It does show up when the text wraps that paragraph below the image.
The reason for this appearance is that though the paragraph is set margin-left: 30px; margin-right: 30px;, because the image has a width of 400px, the margin to the left, for that paragraph, must be 430px. Of course when the text wraps so that the indented paragraph is below the image, the indent is far too wide.
Here is some code:
<div style="width: 100%;>
<img style="float: left; width: 400px;" />
<p>Some text goes here</p>
<p style="margin-right: 30px; margin-left: 30px;">Indented paragraph</p>
</div>
Any idea how to get this blockquote indenting?

Use text-indent property.
<!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">
html {font-size: 100%}
body {
background-color: silver;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
#wrapper {
background-color:#EAEAEA;
width: 900px; /**adjust width in px, ems or %**/
border: 2px double green; /**for demo purposes only**/
padding:12px;
margin:0 auto; /**with width, this is centered**/
overflow:hidden; /**for float containment**/
/**this indents the first line of each paragraph**/
p {text-indent: 5em;}
.floatLeft {
float:left;
padding: 12px;
margin-right:12px;
border: 1px dotted red;
height: 150px;
width: 200px;
.floatRight {
float:right;
padding: 12px;
margin-left:12px;
border: 1px dotted red;
height: 150px;
width: 200px;
</style>
</head>
<body>
<div id="wrapper">
<div class="floatLeft">
<h3>insert image here</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac turpis metus. Cras dictum placerat erat ut tincidunt. Suspendisse non quam nibh. Aliquam condimentum purus non urna viverra iaculis. Vivamus lobortis enim sit amet libero fermentum ultricies pharetra lacus lobortis! Etiam et tellus diam? Phasellus ullamcorper augue fringilla orci volutpat ullamcorper. Nulla consequat consequat massa id dignissim. Sed dapibus sapien nec est laoreet viverra! Vivamus in dui eu nisl ornare ultrices.</p>
<p>Morbi a enim massa. Suspendisse imperdiet, neque ut malesuada lobortis, leo purus iaculis ante, id malesuada sem nibh eu enim. Nunc condimentum pharetra iaculis. Sed elementum vehicula mauris sed lacinia. Mauris velit magna, laoreet nec ultrices id, cursus sed ligula. Aliquam vitae quam cursus tortor molestie adipiscing quis vitae lectus? Integer dictum vulputate urna porttitor porta. Phasellus id odio felis. Proin id mollis purus. Quisque varius tristique est a dignissim. Etiam dignissim venenatis lectus eu posuere. Phasellus ullamcorper facilisis egestas. Nam nec libero libero. Etiam ut turpis at urna faucibus tempus. Vestibulum commodo fringilla turpis sed aliquam.</p>
<div class="floatRight">
<h3>insert image here</h3>
</div>
<p>Pellentesque at turpis eu tortor tincidunt mattis. Curabitur rhoncus nibh id mi faucibus vel pharetra augue vestibulum. Duis gravida faucibus interdum. Morbi fermentum arcu in ligula suscipit a pharetra arcu dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis felis urna, condimentum ut iaculis nec, cursus sit amet nunc. Nullam lacinia magna ut turpis bibendum eu molestie lectus molestie! Sed volutpat lobortis rhoncus! Sed elementum condimentum nulla vitae lacinia. Nunc sit amet sapien id elit molestie vestibulum vitae eget justo.</p>
<p>Morbi a enim massa. Suspendisse imperdiet, neque ut malesuada lobortis, leo purus iaculis ante, id malesuada sem nibh eu enim. Nunc condimentum pharetra iaculis. Sed elementum vehicula mauris sed lacinia. Mauris velit magna, laoreet nec ultrices id, cursus sed ligula. Aliquam vitae quam cursus tortor molestie adipiscing quis vitae lectus? Integer dictum vulputate urna porttitor porta. Phasellus id odio felis. Proin id mollis purus. Quisque varius tristique est a dignissim. Etiam dignissim venenatis lectus eu posuere. Phasellus ullamcorper facilisis egestas. Nam nec libero libero. Etiam ut turpis at urna faucibus tempus. Vestibulum commodo fringilla turpis sed aliquam.</p>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Most efficient way to insert into a story with many floating images?

I have a document with many floating images. They must all be floating because otherwise I do not get the Caption numbering right and it is impossible (because some images take an entire page) to use only anchored images.
Now, I have to insert a large part into the middle / at the beginning of a section. If I do that the text will flow, but the images remain in place. This is extremely slow working because of all teh movements I have to do on all the images. What I would like to do is to let the pages after the page where I am entering remain the same and when I insert text and images this should just move up one page at a time. Then, at the end, I can do the fine tuning of attaching both parts again. Is there a way to do that in an efficient way?
What I now often do is move all the floating images out of the pages, then insert the new stuff, move the images back, then make sure all the references are fine (e.g. if they refer to an image on another page, the style becomes paragraph number + page numer). For some sections this is a hideous amount of work (many, many images).
Is there a smarter way. I have been thinking about splitting and later rejoining a section. If I add pages to one section, the following sections are not damaged, after all.
What is the best way to do this?
Thanks in advance.

I have a document with many floating images. They must all be floating because otherwise I do not get the Caption numbering right and it is impossible (because some images take an entire page) to use only anchored images.
Now, I have to insert a large part into the middle / at the beginning of a section. If I do that the text will flow, but the images remain in place. This is extremely slow working because of all teh movements I have to do on all the images. What I would like to do is to let the pages after the page where I am entering remain the same and when I insert text and images this should just move up one page at a time. Then, at the end, I can do the fine tuning of attaching both parts again. Is there a way to do that in an efficient way?
What I now often do is move all the floating images out of the pages, then insert the new stuff, move the images back, then make sure all the references are fine (e.g. if they refer to an image on another page, the style becomes paragraph number + page numer). For some sections this is a hideous amount of work (many, many images).
Is there a smarter way. I have been thinking about splitting and later rejoining a section. If I add pages to one section, the following sections are not damaged, after all.
What is the best way to do this?
Thanks in advance.

Cannot float item next to another floated item...help needed...

Hi everyone,
I'm using DW CS4 and am somewhat in a snag. I am trying to line up an image, text and another image side by side. I was successfully able to float the text to the right of the image (by using float: left) and now I am trying to float another image left of the text. However, when I attempt, the image does not move and the text expands out (I put the text in a DIV container and gave it a width of 800 px); my entire layout is 1280 pixexl. So what I'm asking is, how can I float an item next to another item? I've posted the code below. All help is greatly appreciated. Thank you!
**I posted my entire CSS and highlighted the area I am having issues with.
Website Dimensions:
body {
          height: 1024px;
          width: 1280px;
          margin:0 auto;
          position:relative
HTML:

<div id="main_content">

<div id="Top_Hat_Photo">
      <img src="Dee 201 Big Smile Fade Surgical.jpg" width="438" height="376" alt="Dee Lewis" /></div>
      
      
      <div id="Quotes">
      <h1> Main Content</h1>
      <p>"From writer to filmmaker to actress and back again. DeAara Lewis comfortably wears the hats of three crafts."</p>
<p> Pearl Washington </p>
    <p> Tri State Defender</p>
    <p> </p>
    </div>
    
    
    <div id="TV_Icon">
<img src="TPIMH TV.jpg" width="303" height="325" alt="The People Inside My Head Coming Soon!" /></div>

</div>

CSS:
#container #main_content {
#container #Header #Dee_Title {
          padding-left: 50px;
          width: 600px;
          clear: both;
#container #main_content #Top_Hat_Photo img {
          float: left;
#container #main_content #Quotes {
          width: 800px;
          float: left;
#footer {
          clear: both;
#Header #Navigation_Menu ul {
          margin: 0px;
          padding: 0px;
          list-style:none;
#Header #Navigation_Menu ul li {
          float: left;
          text-align: center;
#Header #Navigation_Menu ul li a:link, #Header #Navigation_Menu ul li a:visited {
          padding:.2em .5em;
          display:block;
          font-family:Georgia, "Times New Roman", Times, serif;
          font-size:1em;
          font-weight:bold;
          color:#000;
          text-decoration:none;
          line-height:1.2em;
          margin-right:.5em
#Header #Navigation_Menu ul li a:hover {
          color:#C90;
#Header #Navigation_Menu ul li a.current, #Header #Navigation_Menu ul li a.current:hover, #Header #Navigation_Menu ul li a.current:active {
          color:#00F;
          cursor:default;

Working with Floats & Margins:
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Captions with Floated Images
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Photo Layout
http://alt-web.com/TEMPLATES/Dark-Grid-II.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Floating images mess up bullet lists

When I place a floating object to the left of bulleted or numbered text, the bullet indentations fall apart. See attached image of a bulleted list. How does this get fixed? What is a work around?
Thnak you, Shawn

It isn't the only DTP program to get this wrong.
You'll have to manually set the left margin in for the bulletted text to the right. So whatever the width of the image make the left indent a little more.
Peter

How do you set-up a floating image in a header or footer?

I want to place a floating image in the header or footer so it repeats on every page of a section. Somehow this has been achieved in the Project Proposal Template but I can't work out how you set something like this up from scratch. Can you help me?

It is not in the header.
Highlight the floating image and then go Format > Advanced > Move Ojbects to Section Master.

Floating images

I'm working with floating images that I want to stay put after I've positioned them.. when I do more edits to the previous page, the images are now all out of position relative to the text. If I make them inline images, I can't get them into the exact position I want to begin with. How do I position images precisely and then get them to stay relative to the text?

Thanks. I want the images to be to the left or right side of the page, with text wrapping around. I can't seem to position inline images that way. When I drag one to the side of the page, it pops back the center.

How do I create a floating image in thelayer panel?

I am watching Deke of Lynda.com in his one on one fundamental with cs5. He says to double-click on the background layer to create a floating image. it does not work for me. No matter what tool I have selected, when I double-click on the layer I simply being up the Layer Style dialogue box. I have googled this problem and done a search here but cannot find the answer to my problem. Can anyone help me with this? Thanks.

You already have a regular layer (floating layer) as others have noted.
A Background layer has a lock symbol and the name Background is italicized, but
regular layers can also be locked, however for regular layers that are locked, you can
just press the Forwardslash (key just to the right of the period key) to unlock those
as opposed to double clicking on a locked Background layer to make it a regular (floating) layer.
MTSTUNER
Message was edited by: MTSTUNER

Floating Images -- Removing Artifacts

This design issue is driving me nuts.
I'm creating a flyer that incorporates "floating" product images.
I removed the background of the original images, using Photoshop. Two files were rendered from tiff, and two files were rendered from smaller rez jpgs. All four floating images were saved as psd files.
I created the flying in Adobe Illustrator, and placed the psd files onto the AI artwork, and the monitor depicts elements as they should be depicted.
Problem is when I print the document in color two of the "floating" images are enclosed by boxes.
http://i191.photobucket.com/albums/z159/threegunfish/20101005Scan.jpg
Can anyone explain how I might fix this issue? I feel like it stems from the nature of the original image files (tiff vs jpeg), but unfortunately I don't have hi rez tiffs of the "error" images.
Thanks very much!!

Thank you, Monika. I will need to take some time to study YDBS's pitfalls.
Wow design theory/know-how is really fascinating.
A friend of mine circumnavigated my issue by taking the completed AI file and opening it with PS.
He then erased the yellow background and saved the images and text on a clear background. Saved as a PSD file.
Then he placed the "clear background" PSD file onto a yellow background, in AI.
The lettering was a bit jagged on the monitor, but printed out fine for my purposes.

How to make floating image with dim background

hi guys, i would like to know how to make a floating image and the background will dim? like for example when you click a thumbnail, the bigger version of that image will pop up on the same page and will have a dim background? can someone point me to a tutorial? any help would be appreciated, thanks in advance!

Hi,
If you look at the tutorials in fireworks such as changing images/rolover images you will start to get an understanding.
Cheers

Can I do a hanging indent paragraph?

can I do a hanging indent paragraph? Need to format references for a technical paper.

Hi,
Unless you have deleted the Recovery partition on your machine, otherwise your machine should have a Recovery partition. Make sure backing up all of your files before restoring the PC/laptop to factory settings.
To set your PC/laptop to factory settings, restart the PC/laptop. At the HP welcome screen hit repeatly the F11 key to launch the recovery process. Follow the instructions provided on the screen.
Please also check this:
http://h50146.www5.hp.com/lib/doc/manual/workstation/xw8400/HP_Backup_and_Recovery_Manager_User_Guid...
Good luck,
BH
**Click the KUDOS thumb up on the left to say 'Thanks'**
Make it easier for other people to find solutions by marking a Reply 'Accept as Solution' if it solves your problem.

Sorting paragraph, apply style then next and (maybe) placing images...

Hi everybody,
I have to set a layout on several pages for a magazine, arranging pictures along with some text related.
I have a text file of this kind:
Text a/1 (should apply Heading style)
Text b/1 (should apply Bodytext style)
Text a/2 (should apply Heading style)
Text b/2 (should apply Bodytext style)
+ Photo
Text a/3 (should apply Heading style)
Text b/3 (should apply Bodytext style)
+ Photo
Text a/1 (should apply Heading style)
Text b/4 (should apply Bodytext style)
etc...
I wish to sort the paragraphs, keep note of those where an image is needed, strip them out into a new frame on the pasteboard with the picture reference and apply to the main text column the styles in order.
Let me explain better with some pictures...
a) b) c)
d) final)
Is it possible, in your opinion?
Thanks,
Guido

Okay, I created a small file with the text
title
subtitle
body
body
body
and the title style applied to the first line. I then ran your new
script, which I had to fix up a little because it got slightly messed up
in the translation to e-mail text. And now it works!
Let's see if I can get it into AppleScript...
First of all, hmm, it's interesting that the script text in the forum
has
var style_name = "h1"
with "h1" red, while the e-mail version I received has
var style_name = "title"
Maybe you changed your message after posting it? No matter, I carry on
and here's the result:
tell application "Adobe InDesign CS4"
   tell document 1
     set theStyle to paragraph style "1.Bold Head 1"
     set applied paragraph style of paragraph 1 of selection to theStyle
     repeat with i from 2 to count of paragraphs of selection
       tell selection
         set applied paragraph style of paragraph i to ¬
           next style of applied paragraph style of paragraph (i - 1)
       end tell
     end repeat
   end tell
end tell
This works the same as yours with the "title" style, but let's go
one more:
tell application "Adobe InDesign CS4"
   tell document 1
     set theStyle to paragraph style "1.Bold Head 1"
     set applied paragraph style of paragraph 1 of selection to theStyle
     repeat with i from 2 to count of paragraphs of selection
       tell selection
         set applied paragraph style of paragraph i to ¬
           next style of applied paragraph style of paragraph (i - 1)
       end tell
     end repeat
   end tell
end tell
This works for any style, so I only need one script! Option-n is
available as a QuicKeys trigger and I use option for other paragraph
style assignments, so I'll assign it to that. Thanks!
Roy

Don't want floating images- how to make it stable

HI,
I just want a static site where it all stays in its correct place.
I put my button bar, header and headline in a div tag. Without it they wouldn't go in place-not lined up.
With it, they float all over. Please see http://www.dancingfruitbook.com.
For some reason the copy below is in a div tag and it does not move around.
Oh, I'd so appreciate the help.
Many, many thanks,
Elaine
Here's the 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=UTF-8" />
<title>index.html</title>
<style type="text/css">

</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv3 {
    position: absolute;
    left: 153px;
    top: 5px;
    width: 960px;
    height: 318px;
    z-index: 2;
#apDiv4 {
    position: absolute;
    left: 305px;
    top: -13px;
    width: 963px;
    height: 305px;
    z-index: 2;
#apDiv5 {
    position: absolute;
    width: 891px;
    height: 73px;
    z-index: 3;
    left: 344px;
    top: 429px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body bgcolor="#CCFFFF">
<div id="apDiv1">
<div id="apDiv2">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a href="author.html">Author</a></li>
      <li><a href="ipad.html">iPad Version</a>      </li>
      <li><a href="media.html">Spanish Version</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="order.html">Order</a></li>
</ul>
<br class="clearfloat" />
</div>
</div>
<div id="apDiv4"><img src="images/fruitwebbanner.jpg" width="960" height="316" alt="Dancing Fruit" /></div><br class="clearfloat" />
<div class="container">
<div class="header"></div>
<div class="content">
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <div id="apDiv5">
      <h1>Kid's Fun, Illustrated Story with an Awesome Educational Bonus!</h1>
    </div>
    <br class="clearfloat" />
    <h1> </h1>
    <p> </p>
    <p><center>
      Kids will go bananas over this whimsical book about fruit!<br />
    Plus, there’s a terrific educational bonus about where fruit comes from at the end!
    </center></p>
    <p><center><iframe width="640" height="360" src="http://www.youtube.com/embed/B6uc1cJjg3s" frameborder="0" allowfullscreen></iframe>
      <p> <br />
        <strong>Video shows iPad Version-Also comes in English and Spanish in ebook, paperback, hardcover</strong>.<br />
        <br />
        Mix rhyming verses with adorable fruit characters for a side order of <strong>positive self-esteem</strong> messages. <br />
        Then add a dose of “I can do it” especially for the shy ones. <br />
        Sprinkle with wiggles and giggles and you have a perfect treat<br />
        for kids to have fun and feel their best. </p>
      <p>(For the iPad version) Toss all types of <strong>dance music</strong> and sound effects into the mix,<br />
        along with the <strong>"I'll read to you" feature</strong>, and kids will want a second helping.<br />
        <br />
        Top with a fascinating <strong>educational bonus </strong>that’s brimming with <strong>70 colorful photos </strong>and interesting <br />
        nuggets of where fruit grows and more, and they’ll eat it up. It’s a tree-rific crowd pleaser!<br />
        <br />
        You may be surprised to learn something new<u> </u>too!<br />
        <br />
        Librarians and teachers will find it’s a berry good story time read! <br />
        This book will definitely grow on everyone. </p>
      </center>
    </p>
</div>
<div class="footer">
    <p>Contact: 630 323 2474, [email protected]</p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

You are learning the hard way that using absolute positioning for layout purposes is an easy trip to the nut house.
Try this code with all the positioning removed and tell us what's not in the right place -
<!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=UTF-8" />
<title>index.html</title>
<style type="text/css">

</style>
<link href="http://www.dancingfruitbook.com/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv3 {
    /*position: absolute;
    left: 153px;
    top: 5px;
    z-index: 2;*/
    width: 960px;
    height: 318px;
#apDiv4 {
    /*position: absolute;
    left: 305px;
    top: -13px;
    z-index: 2;*/
    width: 963px;
    height: 305px;
#apDiv5 {
    /*position: absolute;
    z-index: 3;
    left: 344px;
    top: 429px;*/
    width: 891px;
    height: 73px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body bgcolor="#CCFFFF">
<div class="container">
<div id="apDiv4"><img src="http://www.dancingfruitbook.com/images/fruitwebbanner.jpg" width="960" height="316" alt="Dancing Fruit" /></div><br class="clearfloat" />
<div id="apDiv1">
<div id="apDiv2">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a href="author.html">Author</a></li>
      <li><a href="ipad.html">iPad Version</a>      </li>
      <li><a href="media.html">Spanish Version</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="order.html">Order</a></li>
</ul>
<br class="clearfloat" />
</div>
</div>
<div class="header"></div>
<div class="content">
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <div id="apDiv5">
      <h1>Kid's Fun, Illustrated Story with an Awesome Educational Bonus!</h1>
    </div>
    <br class="clearfloat" />
    <h1> </h1>
    <p> </p>
    <p><center>
      Kids will go bananas over this whimsical book about fruit!<br />
    Plus, there’s a terrific educational bonus about where fruit comes from at the end!
    </center></p>
    <p><center><iframe width="640" height="360" src="http://www.youtube.com/embed/B6uc1cJjg3s" frameborder="0" allowfullscreen></iframe>
      <p> <br />
        <strong>Video shows iPad Version-Also comes in English and Spanish in ebook, paperback, hardcover</strong>.<br />
        <br />
        Mix rhyming verses with adorable fruit characters for a side order of <strong>positive self-esteem</strong> messages. <br />
        Then add a dose of “I can do it” especially for the shy ones. <br />
        Sprinkle with wiggles and giggles and you have a perfect treat<br />
        for kids to have fun and feel their best. </p>
      <p>(For the iPad version) Toss all types of <strong>dance music</strong> and sound effects into the mix,<br />
        along with the <strong>"I'll read to you" feature</strong>, and kids will want a second helping.<br />
        <br />
        Top with a fascinating <strong>educational bonus </strong>that’s brimming with <strong>70 colorful photos </strong>and interesting <br />
        nuggets of where fruit grows and more, and they’ll eat it up. It’s a tree-rific crowd pleaser!<br />
        <br />
        You may be surprised to learn something new<u> </u>too!<br />
        <br />
        Librarians and teachers will find it’s a berry good story time read! <br />
        This book will definitely grow on everyone. </p>
      </center>
    </p>
</div>
<div class="footer">
    <p>Contact: 630 323 2474, [email protected]</p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

CSS: Top alignment of floated image and following text

I have a little site I'm revising where images (inside a div) are floated and the following text flows around them. Standard procedure. Here's what I can't figure out... The top of the image is roughly three pixels higher than the top of the first capital letter in the text next to that image. I understand that with font characters there is space below to accommodate descenders, but I thought the top of a capital letter was the limit of a character's height. I've tested this on Windows XP using Firefox 3.6, IE8 and Chrome 6. Here's a link to an example page:
http://www.keithpurtell.com/kthings/gway.htm

I wouldn't change the line-height on p.
Add some padding to your floats.
.floatL {
    float:left;
    margin: 0;
    padding: 10px 12px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to create a "next" button out of image

Hi all.
I'm new to Dreamweaver and have no idea what I'm doing! I'm a designer and not familiar with code.
I've managed to get this far: I've created a teamplate and am using it successfully on subsequent pages. My snag is that I want to create a "next" button out of an image.
One forum poster suggested taking page_1.html and page_2.html and inserting a link between them. I get this, but in order to do so, it seems I have to detach my individual pages from the template in order to directly edit them. Can I then somehow reattach them to the template so that I can continue to make other changes on one page that will update throughout?
Any suggestions to a VERY green newbie that does not include copying and pasting code? Is there a way to do this in design mode?
thanks
B.

UPDATE:
Nancy and Jon - and all future searchers with this question, I have found the answers!!!
Here goes:
MAKING A SIMPLE NEXT/PREVIOUS BUTTON OUT OF AN IMAGE IN DREAMWEAVER FOR THE CODE-RETARED DESIGNER:
- Create a template which includes buttons for NEXT/PREVIOUS. The buttons should be sliced from a Photoshop file, or created using Div tags in Dreamweaver (see Tutvid.com for these tutorials - very good). The buttons should also be in their own separate Divs.
- Select the individual Divs containing the buttons (one at a time), not the images themselves.
- Go to Insert>Template Objects>Editable Region.
- Give one Editable region the name of NEXT and the other editable region the name of PREVIOUS.
- Save template file.
- Go to page_1.html and now those buttons are selectable. Choose the NEXT button and go to the properties panel and grab the little pick whip icon which is right beside the Link box. Drag and hold the pick whip onto your files panel and select page_2.html. Do the same for each page. From page_2.html onward, you also do this for the PREVIOUS button, only you select the page that comes before it, not the one after it.
Viola!
I really hope this helps out all you code-challenged designers like me! I've searched everywhere and lo and behold, it was as simple as this.
Thanks to you, Nancy, for twigging me into selecting the Div and not the graphic itself.
BellyBuckle.

How to use free floating images on a page?

Using DW CS4 and being a noob, I have a stupid question.
How can I achieve this:
Here is the webpage: http://ppbm5.com/Poffertjes-4.html

Using good layout practices, it would be a piece of cake. The page is really a two-column page with the right-hand column split into a form container on the right and a content container on the left.
Check out the two-column sample pages built into DW for a reasonable start at this. The form container would be floated right, and the images would simply stack vertically in the remaining space to its left.

An indented paragraph next to a floating image?

Similar Messages

Maybe you are looking for