Positioning text after an image...

I don't have the ability to upload my website to a server, but I have a picture to show you my problem:
http://tinypic.com/r/a426hz/7
What CSS rules am I missing? I want the text to line up with the top of the image, not the bottom.
Thank you.

<!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>Chi Phi @ EIU</title>


<style type="text/css">

</style>

<link href="screen.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body class="twoColLiqLtHdr">
<div id="container">
<div id="header"></h1>
</div>
<div id="nav">
<ul class="style2" id="navlist">
<li class="active"><a href="index.html">Home</a></li>
     <li><a href="history.html">History</a></li>
     <li><a href="beliefs.html">Beliefs</a></li>
     <li><a href="officers.html">Officers</a></li>
     <li><a href="events.html">Upcoming Events</a></li>
     <li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="sidebar1">
    <h3 class="style3">Important Links:</h3>
    <p class="style14"><a href="http://www.chiphi.org" class="style14">Chi Phi National</a></p>
    <p class="style14"><a href="http://www.facebook.com/home.php?#!/group.php?gid=128193927109" class="style14">Facebook (EIU)</a></p>
</div>
<div id="mainContent">
    <h1 align="left" class="style12">Current Officers</h1>
    <hr size="2" class="twoColLiqLtHdr" />
    <p class="style16">Alpha </p>
    <div class="biopictures"><img src="images/sean.png" alt="Sean Callihan" width="129" height="139" />
   </p> </div>
    <p> </p>
   <p> </p>
    <p> </p>
      
    </p>
</div>

<span class="style3">z<br class="clearfloat" />
    </span>
<div class="style14" id="footer">1824 </div>
</div>
</body>
</html>
@charset "utf-8";
#nav {
height: auto;
text-align: left;
vertical-align: top;
padding-bottom: 5px;
background-color: #640319;
padding-top: 5px;
#navlist {
height: auto;
width: auto;
margin-top: 3px;
margin-bottom: 3px;
padding-top: 0px;
color: #FFFFFF;
margin-right: 60px;
text-align: center;
#navlist a {
display: inline;
font-weight: bold;
margin-right: 5px;
text-align: left;
text-decoration: none;
color: #FFFFFF;
padding-bottom: 10px;
font-family: Verdana, "Book Antiqua";
padding-right: 5px;
#navlist li {
display: inline;
text-align: right;
padding-right: 8px;
padding-left: 8px;
color: #FFFFFF;
padding-bottom: 10px;
#navlist a:hover    {
padding: 5px;
background-color: #8C0319;
#header {
height: 135px;
width: auto;
background-repeat: no-repeat;
background-position: center center;
color: #000066;
background-color: #FFFFFF;
.twoColLiqLtHdr #sidebar1 a:hover {
background-color: #0000CC;
margin:.5em 0;
padding: 2px;
@charset "utf-8";
.style13 {
font-family: "Neutraface Text Bold Alt";
font-size: 36px;
color: #000066;
.style14 {
font-size: 16px;
color: #FFFFFF;
margin-bottom: -15px;
text-align: left;
.style15 {
color: #000000;
font-size: 14px;
font-family: "Century Gothic", Verdana;
padding-left: 5px;
.style16 {
font-family: Verdana, "Book Antiqua";
font-size: 18px;
font-weight: bold;
margin-left: 5px;
.style17 {
font-family: "Century Gothic", Verdana;
font-size: 14px;
font-weight: normal;
margin-top: -15px;
margin-left: 5px;
.eiu {
font-family: "Century Gothic", Verdana;
font-size: 14px;
font-weight: normal;
color: #000066;
.biopictures {
float: left;
width: 130px;
height: auto;
padding-right: 15px;
margin-top: -10px;

Similar Messages

Help with positioning text links over image

I'm creating a five page site with a different background
color for each horizontal nav bar. I created a solid color graphic
(780 x 30) and inserted it into my div. I now want to place my text
links over the graphic but I can't seem to do it. It keeps
appearing underneath. Someone recommended using a table and I'm
wondering if this would be easier.
Thanks!

You have to use the image as a background image in your
'navcontainer' <div>
#navcontainer {
background-image: url(images/nav_services.gif);
background-repeat: no-repeat;
If you actually insert the image into the page, as you have
done, it
WILL push the text links down because its ABOVE them on the
page.
Ruby7829 wrote:
> I'm creating a five page site with a different
background color for each
> horizontal nav bar. I created a solid color graphic (780
x 30) and inserted it
> into my div. I now want to place my text links over the
graphic but I can't
> seem to do it. It keeps appearing underneath. Someone
recommended using a
> table and I'm wondering if this would be easier.
>
> Thanks!
>
> <div id="navcontainer"><img
src="images/nav_services.gif" />
> <ul id="navlist">
> <li id="active"><a href="test_index.html"
id="current">Home</a></li>
> <li><a
href="test_services.html">Services</a></li>
> <li><a
href="test_faq.html">FAQ</a></li>
> <li><a
href="test_testimonials.html">Testimonials</a></li>
> <li><a
href="javascript">Contact</a></li>
> </ul>
> </div>
>
>
> #navcontainer ul
> {
> text-align: center;
> padding: 0px 0px;
> margin: 0;
> color: white;
> width: 100%;
> line-height: 18px;
> }
>
> #navcontainer ul li
> {
> display: inline;
> padding-left: 0;
> padding-right: 0;
> padding-bottom: 5px;
> /* matches link padding except for left and right */
> padding-top: 5px;
> }
>
> #navcontainer ul li a
> {
> padding-left: 10px;
> padding-right: 10px;
> padding-bottom: 5px;
> padding-top: 5px;
> color: white;
> text-decoration: none;
> }
>
> #navcontainer ul li a:hover
> {
> color: #CCCC99;
> }
>

Want to add Custom text after Product Branding Image for application

Hi
Can we add any text after Product Branding Image for application
By default it will show the responsibility function name
My requirement is after company logo I want to add Text at the top of application
with center align
Need suggestions
Regards
Krishna

Hi Anoop
If I done what u suggested then the function responsibilty name will also come
and the application will be disturbed
Is their a way to edit the text at the top
Regards
Krishna

Text jobs with images - printer cancels

When I print a text document with images the printer stops printing and cancels the print job when it starts to print any image.
Help
This question was solved.
View Solution.

Hey @sudiegal!
Thanks for posting on the HP Forums!
I would be happy to provide some suggestions that may resolve the issue. I can see that the printer cancels the jobs when you add a photo to you text document. The first thing I suggest is to remove the printer by resetting the print system. After the printer is removed re-add the printer and try printing the document again.
To reset the printing system:
1. Click the Apple icon at the top left of the computer
2. Click System Preferences
3. Click Printers and Scanners
4. Hold down the "control" key on the keyboard and click with the mouse in the white space bellow the printer
5. Click reset printing system dropdown
6. It may ask for Mac ID and will color wheel for a moment until the printer is removed
To re-add the printer:
1. Click the Apple icon at the top left of the computer
2. Click System Preferences
3. Click Printers and Scanners
4. Click the plus (+) icon under the printers list
5. Select your printer
6. Choose HP ENVY 7640 series in the dropdown next to "use" or "print using"
7. Click add
Please post back and let me know if this works out for you!
Cbert
I work on behalf of HP.
Please click “Accept as Solution” if you feel my post solved your issue, it will help others find the solution.
Click the “Kudos, Thumbs Up" at the bottom of this post to say “Thanks” for helping!

How do I remove extra space after an image in an ePub created with InDesign?

I've designed more than a dozen ebooks with InDesign and have recently been having problems with the spacing after images, both images that are anchored in the text or stand-alone and exported through the Articles Panel. Following are a few details:
• In the Object Export Settings, I have the vertical spacing set to 0 both before and after the images and no breaks added.
• In the Export panel, I do not have any vertical spacing applied to images.
• I do not have any Object Style settings applied.
• It doesn't seem to matter if I anchor the image into the text or have it as a stand-alone image in the Articles Panel with the caption after it in a separate text box, also in the Articles Panel.
• I broke down the ePub into an html file and did not see any div or span classes that were different between images that are showing correctly vs. incorrectly.
• Extra space appears in both iBooks on my computer, as well as on my iPad.
• I converted to a mobi file for the Kindle and the space wasn't there.
See attached screen shot. There shouldn't be that big gap between the image and the orange caption.
Any help or suggestions anyone can provide would be greatly appreciated. I feel like I've tried everything I can think of with the same results over and over!

Yes. That is the technique I traditionally use to drop an image into text. I even cut and pasted again as you suggested with the same result. Trust me, this is driving me nuts. I'm not doing anything different than before, but my results are different, even within the same document. I'll attach a few examples, all from this same document.
How the space after my in-line image is supposed to look:
And then a few of the pages with the mystery gap:

Search text in FXZ images

Hi all
I want to develop a piece of code which will search the text in FXZ images in javafx which is similar to the following program
http://java.sun.com/docs/books/tutorial/uiswing/components/textfield.html
which is in swing and searching in a text of filenow i need just like this functionality but using FXZ images not plain text
any one have idea then please post here

Thanks Pavel.Benes
as you said
use internal API from fxdloader to open content files. It is possible - however completely unsupported and with high probability also not backward compatible.i am using fxdloader
and i was tried something like
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.fxd.FXDLoader;
import javafx.scene.Group;
import javafx.ext.swing.SwingTextField;
import javafx.ext.swing.SwingButton;
import java.lang.Void;
import javafx.scene.Node;
var myScene: Scene;
var fxdContent = FXDLoader.loadContent("{__DIR__}images/12_2008_123-7.fxz");
var RootGroup = fxdContent.getRoot(); //root node
var GroupA = RootGroup.content as Group[]; //first level siblings
var rootsize=sizeof GroupA;                 //size of first level siblings
var textarray = GroupA[0].content;          //content of first level first node
var newtextarray: Text[] = for (i in textarray where i instanceof Text) {
            i as Text
//textfield to input text
var inputtext = SwingTextField {
            editable: true
            translateY: 10
            columns: 20
            text: "Enter Text to search"
//search button
var search = SwingButton {
            text: "Search"
            translateX: inputtext.boundsInLocal.maxX
            translateY: 10
            action: function (): Void {
                 var tex = bind inputtext.text;
                for (i in newtextarray) {
                if (i.content.contains("{tex}")) {
                i.underline = not i.underline;
                       }//if
                i
                }//for
                delete RootGroup from myScene.content;
                insert RootGroup before myScene.content[0] ;
//now the stage
Stage {
    title: "Application title"
    scene: myScene = Scene {
        content: [
            RootGroup,
            inputtext,
            search,
}this is the code i have written but this code have some drawbacks like
0)It is not highlighting but underling the text and that too whole text screenshot is [http://lh5.ggpht.com/_XZ5lTObJ3ZY/S5XmNL2TqXI/AAAAAAAABac/z5IS6yjXjyE/s512/1.jpg]
1)it is particular to one particular FXZ image which is having Text nodes at first level first node(which is a Group)
2)after first search when you make second time search with another key it is not removing previous searched textnow what changes i have to make to this code for avoiding the above drawbacks please help

Why does my paragraph tag for images get repositioned AFTER the image?

I have TCS2 and link my FM docs to RH.
I use a paragraph tag in FM called "figure" for my imported images. I noticed there is too much space after the images in RH and discovered the "figure" tag is BELOW the images. So even if I map the tag to a RH style, it won't do any good. Any suggestions?

This might fix your problem. Look at how your anchored frame appears in the FrameMaker document. It's probably like this:
┴ ¶
Which is simply the anchored frame marker followed by the paragraph marker.
Now try this. Before the anchored frame marker, add a forced space (CTRL-Space).
|_| ┴ ¶
When RoboHelp interprets this, it appears to place the paragraph before the anchored frame, not after it.
This is assuming you've got the anchoring position set to"Below Current Line," as suggested earlier.
Hope this helps!
Jason

What is the best way to add text to an image

I used the draw ap div to add text to an image. will that cause any problems? If so, what is the best way to add text to an image? Thanks!

APDivs will kill your design unless you fully understand the css behind the scenes and plan accordingly. They really are completely unnecessary in the vast majority of situations.
An easy way to add "web text over an image" would be to use the background-image attribute in css for a standard <div> tag, then just add the text within that same <div>.
Something like this in the css (if you are using a 300x300 pixel image)...
#yourdiv {
     background-image:url(yourpic.jpg);
     width:300px;
     height:300px;
And then this in the html...
<div id="yourdiv">Your text here</div>
You would then position the <div> using css margins, floats and padding. Using position:absolute (APDivs) is typically something that will blow your design to pieces if the viewer changes their browser settings.

Having trouble positioning text

http://kurtesposito.com/contact.htm
Looking for some help on how to position this text on this page. Not sure what I'm doing wrong. Also looking for helping on that horizontal strip of white running along the top of my image.
Thanks

You have some errors.
Line 136, you are attempting to merge html and css...
<img src="images/hurtlogo_original.png" height="80" width="329" float=left />
float=left is not valid html or css. If you want the image floated left, you need to put it in a style attribute and format it as css...
<img src="images/hurtlogo_original.png" height="80" width="329" style="float;left;" />
You also have several line items (the <li> tags around line 139) that are not properly contained within a <ul> or <ol> tagset...
<div id="nav">
<ul>
<li><a href="index.htm">Home</a></li><li><a href="about.htm">About</a></li><li><a href="portfolio.htm">Portfolio</a></li><li><a href="http://kurtesposito.com/blog/">Blog</a></li><li><a href="contact.htm">Contact</a></li>
</ul>
</div>
As far as your original issue, not knowing how to position text, did you have some more information on what you wanted to do?
I'm also not seeing white space with your image (I assume you mean the KurtLogo?).

Changing the inside of text to an image rather than colour

It's probably a simple answer so apologies in advance!
I have some text ( see attached photo)
How do I change the background of the text to an image, rather than being blue? I want it to be a picture of bacteria rather than blue. I have all the adobe software if I need to switch programmes to do it, but would rather stick to illustrator.
Thank you!

1. place your image
2. position your text on it, and make sure it is above it in the stack order (Object > Arrange > Bring to front)
3. select both text and image, and hit ctrl + 7 (or Object > Clipping Mask > Make)

1.1 - text converted to image

I've read all the posts regarding problems with publishing, as well as with comments and search features (some of which I have experienced myself).
But has anyone else but me had all of the text on their web-site changed to images (.png) after re-publishing using 1.1?
My website text (except titles) is web-friendly... I'm using Arial. And it all worked fine before 1.1.
I have sent feedback to Apple about this. Just want to know if anyone else has the same problem.
I can actually publish now (with no more error messages) but:
-all text is still in .png format
-comments don't work (I was getting "@post" rather than "add a comment", so I have removed the option)
-search function obviously doesn't work (since all text is in image format, there is nothing to search through)
Here is my main site: www.maitaionline.com
Same problems on my secondary site (jandb.maitaionline.com) where I am also having problems with some photo pages.
Powerbook G4 Mac OS X (10.4.6)

That's weird. My site was all .png before 1.1 (I'm using web safe Georgia). Now, it's real type and not .png.

How to place text beside an image

I know there must be a simple answer to this, but I've looked high and low and can't find it! All I want to do is place a block of text beside an image.
I have created a div tag, inserted the image, then typed in the text - which positions itself below the image and seems to be locked there. Can anyone help? I've been at it all day....

Float the image left or right by using css:
img (
float: left;
The image would normally be in a container of some description, a <div> or table cell <td> so if its only a specific image or images then target only those images within a specific container using css.
So for instance if your image/s are in a container which has an id of 'myContainerName' then you would use:
#myContainerName img {
float: left;
You could also just add some inline css to the specific img tag, style="float: left;" (as below)
<img src="images/myImage.jpg" style="float: left;" alt=" " width="200" height="200" />

Position texte booleen

Bonjour,
Dans une application, j'ai customizé des bouttons en y ajoutant des images, cependant mon probleme vient maintenant des text booleen qui se décale tous le temps hors du boutton. J'ai essayé d'utiliser la fonction "Lock boolean text in center" mais cela crée une superposition entre le texte et l'image et donc ce n'est pas franchement lisible. J'ai cherché un moyen de bloqué le texte à une position par rapport au boutton mais je n'y arrive pas...
Si quelqu'un aurait une idée de comment faire, je le remercie.
Cordialement
Nathan

Le voici
Pièces jointes :
PC vers CN.ctl ‏40 KB

RoboHelp 11 - Text box over image does not generate to Word

Hi All,
With RoboHelp 11 and Word 10, I am trying to emulate an existing cover page for our company, which has a gray background image and a blue text box with the document title and version number. I created a topic with the background image, then placed a positioned text box over it. I added blue shading to the text box and the white lettering for the title and version. When I generate Word, the text box and text inside it do not show up in the Word output. Is there a way to get HTML > Insert features like text boxes to appear in the Word output?
Thanks,
Matt

I would create such a cover page in Word and insert that document in the print layout.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

[Microsoft][SQL Server Native Client 11.0][SQL Server]The text, ntext, and image data types cannot be compared or sorted, except when using IS NULL or LIKE operator. 'Items' (OITM) (OITM)

Dear Experts,
i am getting the below error when i was giving * (Star) to view all the items in DB
[Microsoft][SQL Server Native Client 11.0][SQL Server]The text, ntext, and image data types cannot be compared or sorted, except when using IS NULL or LIKE operator. 'Items' (OITM) (OITM)
As i was searching individually it is working fine
can any one help me how to find this..
Regards,
Meghanath.S

Dear Nithi Anandham,
i am not having any query while finding all the items in item master data i am giving find mode and in item code i was trying to type *(Star) and enter while typing enter the above issue i was facing..
Regards,
Meghanath

Positioning text after an image...

Similar Messages

Maybe you are looking for