Space between text and images?

I have a gallery of images with headings above them and am trying to change the distance between the text and the images. I have tried floats and padding but cant get it to work. My headings are in a table and my images are not so it seems that there is some sort of default padding between the images and the text tables.
Here is a link..
http://www.rsicorp.org/rsi/silvagilroy.html

Copy & paste this into a new, blank html page. It's a real quick and dirty layout but hopefully it will show you what you need to know.
FYI Code errors do matter. 90% of browser rendering issues are directly related to code. Trouble shooting is made that much easier when you work with clean 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>Untitled</title>
<style type="text/css">
CSS layout modified by Alt-Web Design and Publishing www.alt-web.com 8/17/2010
body {
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica,sans-serif;
background: #FFF;
text-align:center;
#container {
width : 1000px; /**adjust width in px, ems or % **/
margin : 0 auto; /**centered on page**/
border : 1px solid #020873;
text-align : left;
background: navy;
#header {
width: 100%;
min-height: 100px; /**same height as background image; if none; remove height**/
_height: 100px;
padding:0;
color: #FFF;
#header h1 {
margin: 0;
padding: 10px 20px;
font-size: 14px;
text-transform:uppercase;
#header address {
padding: 0 20px;
font-size: 14px;
font-weight:bold;
#sidebar1 {
width: 175px;
height: 1%;
padding: 15px 5px;
/**to reduce float drop issues in IE6**/
overflow: hidden;
float: left;
color: #FFF;
#mainContent {
margin: 0 0 0 190px;
background: #FFF;
padding: 10px;
#footer {
padding: 0 10px;
background:#DDD;
clear: both;
#footer p {
margin: 0;
padding: 10px 0;
font-size: 12px;
color: #CC3300;
text-align: center;
/**BEGIN PHOTOS**/
/**this styles the image container**/
#photos p {
float:left;
padding: 10px;
border: 1px solid silver;
/**this styles caption text**/
font: italic 12px/1 Geneva, Arial, Helvetica, sans-serif;
color: #666;
text-align:center;
line-height: 2em;
margin: 22px;
/**same size images recommended, adjust as req'rd**/
#photos img {
width:121px;
height:90px
/**photos float clearing**/
.clearing {
clear:left;
height:1px;
width: 100%;
/**re-usable CLASSES**/
.left {text-align: left}
.center {text-align: center}
.right {text-align:right}
</style>

</head>
<body>
<div id="container">
<div id="header">
<h1 class="right">Company Name </h1>
<address class="right">
address, city, state,
telephone
</address>
 </div>
<div id="sidebar1">
<p>#sidebar1 = 175px wide + 10px padding </p>
<p>insert your list menus here</p>
<p>insert your ads here</p>
<p> </p>
<p><end of sidebar1> </p>
 </div>

<div id="mainContent">
<h1>#container = 1000px </h1>
<h1>#mainContent = left-margin 190px </h1>
<h3> </h3>
<h3>Begin #Photos </h3>

<div id="photos">
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
<p>optional caption<br />
<img src="http://www.rsicorp.org/rsi/images/Thumbs Pre/1001thumb.jpg" alt="some description" /></p>
</div>

<hr class="clearing" />
</div>
<div id="footer">
<p>Your footer text goes here</p>
 </div>
 </div>
</body>
</html> 
Good luck with your project,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

How To Reduce Space Between Text and Image

I am trying to wrap text around an irregular shape in InDesign CS4. I used the pen tool to mark the outline of the image, cut the image, then selected the pen outline and pasted the image into the outline. With the TextWrap settings set to what is in this dialog box, text wrapping appears fine on the right-hand side, but has too much space on the left-hand side.
If I try to reduce the space even further, it just affects the right-hand side of the image, not the left:
It is doing the same thing for all of my irregularly-shaped images where I try to wrap text. How can I reduce the whitespace to the left of the image?

Actually just noticed your text is already justified apologies.
Couple more things you can try to improve this:
From Control panel menu choose Justification and try using the following settings:
Minimum
Desired
Maximum
Word Spacing
80%
100%
120%
Letter Spacing
-2%
0%
2%
Glyph Scaling
98%
100%
102%
Also check that Single Word Justification is set to Full Justify.
Cari

Need one space between text and border line

Please, help me.
Is there any way to offset the text from the border a bit?
I would like to have a black line around some boilerplate text, but the text is always butted against the border. Is there a way to offset the text a bit ?
I've been searching in this forum and google and didn't find the answer yet.
Thanks,
Lan

HamidHelal wrote:
Lan_Desu wrote:
Please, help me.
Is there any way to offset the text from the border a bit?
I would like to have a black line around some boilerplate text, but the text is always butted against the border. Is there a way to offset the text a bit ?
I've been searching in this forum and google and didn't find the answer yet.
Hi, Lan
if yo want to place a line you may choose underline option. Otherwise take a line/draw a line and keep space between the text and line.
Hope this helps
HamidIs there a way easily?
I already know that that solution. But it is troublesome when I face editing later - I have to edit all of it.
But thanks for the answer :)

Need one space between text and line color

Is there any way to offset the text from the border a bit? I
would like to have a black line around some boilerplate text,
but the text is always butted against the border. Is there a
way to offset the text a bit

HamidHelal wrote:
Lan_Desu wrote:
Please, help me.
Is there any way to offset the text from the border a bit?
I would like to have a black line around some boilerplate text, but the text is always butted against the border. Is there a way to offset the text a bit ?
I've been searching in this forum and google and didn't find the answer yet.
Hi, Lan
if yo want to place a line you may choose underline option. Otherwise take a line/draw a line and keep space between the text and line.
Hope this helps
HamidIs there a way easily?
I already know that that solution. But it is troublesome when I face editing later - I have to edit all of it.
But thanks for the answer :)

Unexpected gap between text and image.

I have hit a slight snag on my webpage: <http://www.peterforkes.com/Test>.
if you scroll to the bottom you will see the send of the text area and then there is a gap and then there is the image that I was to be flush up against the bottom of the text. Unfortunately, there is a gap creeping in that I cannot figure out ho wto remove.
Can anyone offer any advice as to why this gap is there and (more importantly) how I get rid of it?
Thanks.

Peter A. Forkes wrote:
Can you also point out where I have added the margin in this page that is causing the top image to be separated from the main body on this page?
<http://www.peterforkes.com/resume>
No gap - must have sorted it out since posting?

Reg: Adding spaces between texts in ALV list header

Hi All,
I was implementing a client requirement for ALV. The list header should contain something of this format.
Pgm Id: ZZZ01
After this list header it is ALV display.
I did this using the concatenate statement.
ex: Concatenate 'PgmID' sy-repid into listheader seperated by space.
But this is not showing spaces between text in ALV display. See I want a tabspace between the texts in headr. Any idea on how to mak it?
Rakesh

Depending on Fontsize the space might be so narrow that you believe its not there.
check in the debugger if there is really a space in the string, the clause "separated by space" will insert one for sure.
May be you'reshowing the ALV before you are modifying the listheader?
Another approach is using strings, blanks at the end of a string are not deleted
concatenate 'ABC ' 'XYZ' into s.
and
concatenate `ABC ` `XYZ` into s.
will give different results, be aware of the difference in the quots in both cases. Using the second example you can insert as many blanks as you want.

Box containing text and image (fit frame to contents).

Hi all,
The best way I can describe what I am trying to achieve is to show you a picture.
So essentially, I'm looking to create a grey box, containing some text with an image floating to the right hand side. I want about 2mm space (padding) inside the grey box so no content goes right to the edge and I want the text to wrap around the image. The bit I'm finding tricky is when I go to use the 'Fit frame to content' option. I'm trying to remove the space indicated by the red arrows but if I anchor the image inside the text frame, the grey box shrinks to the height of the text and the image overflows.
This would be incredibly simple to achieve on the web, am I doing something wrong?
Any help/direction would be greatly appreciated.

Sorry, been out for an hour.
I understood that you want to have some variable height text frame (the gray box), and that this box should reduce in height to fit the text contained therein, but not less than necessary for the bottom to be 2mm below the bottom edge of the variable height image (which I'm presuming is anchored to the first line of text in the frame) in a case where there is not sufficient text for fit frame to content to avoide making the frame shorter than the bottom of the image.
I believe this could be scripted, but that will still require you to run the script. You should ask over in InDesign Scripting
As far as a container that holds both text and image frames, yes, but only if you "paste into" a new frame after creating the two separately and grouping, which probably is not what you have in mind.

Disappearing text and image

I created letterhead in Pages for my lil brothers film production company. Saved. Exported the document to Word. Sent it to him. So far so good. Looks great. Each time he opens the document in WORD and trie to alter the text by selecting and typing over it both the text and the graphics disappear.
Is there any way to correct this? I really love the letterhead and have been having problems recreating it in other software.

Thanks for a quick response. I see yr point. The thing is I am setting up a table cell editor and a renderer. It is easy to set up the editor with a combo box. For the renderer, I am using a default cell renderer and I want to make it look like a combo box as well. Since the default cell renderer extends JLabel, I do something like
comboBoxRenderer = new DefaultTableCellRenderer();
ImageIcon image = new ImageIcon("image/Play16.gif");
comboBoxRenderer.setIcon(image);
comboBoxRenderer.setHorizontalTextPosition(JLabel.LEADING);
which does not get me the effect I want. I can put more pixels between the text and image using setIconTextGap. But it is not fool proof. I think I will try yr approach, but then it gets a little complicated. Would have been good if there is simpler way. I will appreciate yr thoughts

Can only see text and image outlines

I am new and got stuck!
When I run the fla, it runs fine. However I have hit some setting and all I can see is the texts and image outlines...
Here are some screen shots:
This is what it looks like when i run it:
Please help! its probably the most fundamental thing ever but I am stuck and it is hot and I'm frustrated. Thank-you

Your timeline is set to outline view. At the top of the timeline, in the section where the names of each layer are shown, there are three icons: an eye, a lock and a box. Click on the box icon to switch between outline and normal view.

Resizing text and images with actions and keeping it resized for the next slides, how to?

Hello everybody,
I searched over the net and in this support section for a solution to my problem, but i didnt find any, so...here I am asking you experts.
Through a particular use of different actions I make a logo "compose" in the first slide of my presentation (the logo is composed by text and images that interact), then in the second slide i make it resize so it goes 50% of its size and moves down like a TV logo, in the corner of the slide, and I want it to stay there for all the lenght of the presentation.
It might be a stupid problem, but I didnt understand how to keep it there, 50% of its size and always in that position. If i duplicate the slide I obviously duplicate the 100%-size-logo, not its 50%-size-version, and if i shrink it in order to make it be 50% of its size the text size doesnt shrink so i have to change the text size manually, but the visual effect is imperfect.
Lets summarize:
slide 1: text appears, image appears, the text and the image move and "compose" the logo
slide 2: the complete logo reduces its size to 50% and moves in the lower corner of the presentation, in the place I want it to be for, lets say, 20 slides
slide 3: i want to have this logo already reduced in size and in its position, in the right lower corner, but if i try to group the different parts of the composed logo and i try to squeeze them the font doesnt change its size, I only squeeze the area that the text occupies.
Some help please guys?
Thanks in advance,
Dom-
(add: the problem is kind of similar to this: https://discussions.apple.com/message/9179367#9179367 . the idea of making a slide that contains the logo and text in the exact positions they would be after the move and scale actions is good and that was my first attempt, the probem is that it looks impossible to me to create a second "little" version of the logo that looks exactly the same of the first one that i reduced, so i hope there is some way to tell the app to use "the first logo, only resized the way i want", and thats the point where the problem with the size of the text comes out)

Hi pritam,
The “maintain proportions of window for different monitor
resolutions” property will maintain the proportional size of the front panel
(its x and y sizes) when opened in a different resolution. The front panel
objects will not be resized and will appear larger (and may not fit inside the
front panel) when saved in a higher resolution, and moved to a lower
resolution. You can use the “Keep window proportions” property to achieve the
same results.
To have both the front panel dimensions and front panel
controls scale, you need to have both the above property and the “scale all
objects on front panel as the window resizes” selected. The labels will not be
resized by this.
I tried using both properties on two monitors and noticed
that the change does not occur when the resolutions between the monitors are
different. I had to lower both monitors’ resolution to see the change work
properly.
Please post back if you have any questions. Have a great day!
Ryan D.
District Sales Manager for Boston & Northern New England
National Instruments

How to maintain space between table and header in ssrs

Hi Everyone,
I have created a report. In page header of this report, On First Page space between header and
body is good , but from next page, space is not maintain.
Please suggest me how to maintain space at every page of report.
Thanks.

Can you post a screenshot?
This can be achieved if you are repeating column headers on each page. Just change row height of header and align text to bottom, and make sure there is no space between Page Header and Tablix.
- Vishal
SqlAndMe.com

Pausing a sequence of text and images

Ok, I have 6 tabs down the side of the main screen where
users can hover over to select which tab to view. All they do is
hover to select the tab - no clicking. The sequence changes from
tab to tab sequentially (if a tab is selected then the sequence
just carries on from the tab that was selected. So it starts on tab
1 if the user hover over tab 4 then after that tab information is
displayed for 5 seconds then tab 5 will play then 6...) with each
tab having its individual text and images.
My problem is that I want the whatever tab the user is
hovering over to stay. So I will only want the sequence to carry on
running when the user has not got the cursor on a tab.
I am at the stage at the moment where I can select any of the
tabs (they are buttons) by hovering over them by using the goto
text, then the sequence continues. I need the sequence to stay
until the cursor is off the tab. One other thing, each tab is set
to display for 5 seconds before it changes again.
Someone please help. I feel as though this may be quite an
easy problem to solve?!?
Thanks
Dan

Priscilla,
I routinely combine 10 lines of 36 pt bible or lecture text to a suitable background using Boris Title 3D.
Many times the text is too long to fit the screen using Boris, so I devide it into 2 or more parts with no transition between sections.
In my case, the text is on the screen as the speaker quotes them.
David

Space between content and logo

Playing with fluid layouts and getting a space between logo and content DIV's
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Playing with Liquid Layouts</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
          <div id="logo">
              <h1>Welcome to Liquid Layouts</h1>
              <h2 class="logo">Place your slogan here...</h2>
          </div>
          <div id="navigation">
    <ul>
              <li>Home</li>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
        <li>Page 4</li>
        <li>Page 5</li>
    </ul>
    </div>
    <div id="content">
    <h1>Adding this element creates a space between logo and content...</h1>
    </div>
          <div id="footer">
    </div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body
          text-align: center;
div#container
          margin-left: auto;
          margin-right: auto;
          min-width: 600px;
          max-width: 2000px;
          text-align: left;
          width: 85%;
div#logo h1, h3
          padding-left: 20px;
          margin-bottom: 0;
div#logo h2
          padding-left: 35px;
          margin-top: 0;
          font-size: 125%;
div#logo
          background-color: #F00;
          width: 100%;
          height: 300px;
div#navigation
          background-color: #0F0;
          width: 25%;
          height: 600px;
          float: left;
div#navigation ul
          padding-left: 25%;
          font-size: 150%;
          list-style-type: square;
div#content
          background-color: #C93;
          width: 100%;
          height: 600px;
          margin-top: 0px;
div#footer
          background-color: #69F;
          height: 30px;;
.footerP
          margin-top: 0px;
          padding-left: 2%;
          line-height: 35px;;
PICTURE:
[IMG]http://i.imgur.com/1nGUG.jpg[/IMG]

The space is caused by the default margin in your H1 tag. As such, you need to define a style for H1:
h1{
margin-top:0;
padding: ??;
You can add padding to move the H1 away from the edges of the surrounding DIV.
EDIT:// An after thought. If you are "Playing with fluid layouts", you might want to consider not using heights and/or set the heights/widths in % values.

Firefox has too much space between text

Something changed in my Firefox display. It is now showing a large amount of space between text. Also, the fields for data entry have increased their size. Text size is okay. Thank you for your help.

Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
*Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
*Do NOT click the Reset button on the Safe Mode start window
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
You can set the <b>layout.css.devPixelsPerPx</b> pref on the <b>about:config</b> page to 1.0
You can adjust layout.css.devPixelsPerPx starting from 1.0 in 0.1 or 0.05 steps (1.1 or 0.9) to make icons show correctly.
You can open the <b>about:config</b> page via the location/address bar.
You can accept the warning and click "I'll be careful" to continue.
*http://kb.mozillazine.org/about:config
Use an extension to adjust the text size in the user interface and the page zoom in the browser window.
You can look at this extension to adjust the font size for the user interface.
*Theme Font & Size Changer: https://addons.mozilla.org/firefox/addon/theme-font-size-changer/
You can look at the Default FullZoom Level or NoScript extension if web pages need to be adjusted after changing layout.css.devPixelsPerPx.
*Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
*NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/

How can I combine a lot of text and images on the same screen?

How can I combine a lot of text and images on the same screen? I can get a couple of words on the screen with a graphic but not 10 lines. I need 10 lines on the page with the image.

Priscilla,
I routinely combine 10 lines of 36 pt bible or lecture text to a suitable background using Boris Title 3D.
Many times the text is too long to fit the screen using Boris, so I devide it into 2 or more parts with no transition between sections.
In my case, the text is on the screen as the speaker quotes them.
David

Space between text and images?

Similar Messages

Maybe you are looking for