how to position text after relatively positioned image

Forum Moderators: open

Message Too Old, No Replies

how to position text after relatively positioned image

image relative, text position

hjl1999

7:38 pm on Jul 18, 2011 (gmt 0)

My page is in the middle position of browser
<body style="width:85%; margin-left:auto; margin-right:auto">

On top left corner is logo. Then, the text " Ž ". However, the image covers up the Ž sign. Not able to move this Ž slight left of logo

<img src="logo.jpg" style="border:none; width: 312px; height: 28px; position:relative; left:10%; margin-top:1em" alt="logo" /></a>
<sup> <span style="position:relative; left: auto"> Ž </span></sup>

What did I do wrong?
Thank you.

lucy24

10:42 pm on Jul 18, 2011 (gmt 0)

Possibly this [w3.org]:

When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

Oh, and you don't need to superscript the Ž sign. It is inherently superscripted. Is the </a> part of some earlier code that you didn't quote?

hjl1999

11:54 pm on Jul 18, 2011 (gmt 0)

thank you lucy24. I re-write the following html, but still the "Ž" is still hidden behind the left side of logo. How can I move this "Ž" to a little further left position, outside the logo?

<img src="Logo.jpg" style="border:none; width: 25%; height: 3%; position:relative; left:10%; margin-top :1em" alt="Logo"/></a>
<span style= display:inline-block; > <sup>Ž</sup> Command Line </span>

don't I need the </a> after <img src= ....>
the <sup> help bring the Ž above the line a little bit? right?

penders

2:41 pm on Jul 19, 2011 (gmt 0)

Oh, and you don't need to superscript the Ž sign. It is inherently superscripted.

It doesn't look superscripted to me? I think you need to superscript it if you want it superscripted?

rocknbil

4:18 pm on Jul 19, 2011 (gmt 0)

My page is in the middle position of browser
<body style="width:85%; margin-left:auto; margin-right:auto">

Though this probably works, I'd take a completely different approach that gets you the same result (and there are probably many more than my example.) When you start using position: for basic layout, you get into all sorts of quirky wierd things when you start checking cross browser and cross platform/device compatibility.

Always start with the "natural flow" of the document and affect it as little as possible to get the effect you want.

I'd approach it something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Example</title> 
 <style type="text/css"> 
 body { margin:0; padding:0; } 
 #wrapper { width: 85%; margin: 0 auto; } /* This centers the wrapper */ 
 #header { width: 100%; } /* 100% of the parent container, wrapper */ 
 #logo a, #logo img { width: 312px; height: 28px; } 
 #logo { float: left; width: 350px; height: 28px; margin: 12px 0 0 24px; padding:0; } 
 #logo span,#logo img { display: block; float: left; } 
 #logo span { width: 1em; } 
 .clear-div { clear: both; } 
 img { border: none; } 
 </style> 
</head> 
<body> 
<div id="wrapper"> 
 <div id="header"> 
 <p id="logo"><a href="/"><img src="logo.jpg" alt="logo"></a><span>&reg;</span></p> 
 <!--  
 you'll probably have other stuff in the header,  
 otherwise you can delete this  
 --> 
 <div class="clear-div"></div> 
 </div> 
</div> 
</body> 
</html>

(Agh . . . in afterthough it's not the most effecient CSS, but move on we shall . . . )

What this does:
- No need to use an XHTML doctype if your documents are pure HTML, it better defines the content.
- The reason I like to float headers is the header div will now "shrink wrap" the elements (a floated element will always contain all floated children) making margins and padding more predictable.
- Always wrap elements in some container, if you were to stick with XHTML, it wouldn't validate with a bar img element. Validation [validator.w3.org] is the first defense against cross browser problems.

The thing with floats is whatever is floated left first will be first on the left; if you want the ® on the left, move it above the logo. An aside, in the U.S. a ® is **technically** not supposed to be used if you don't have an application or an actual registered trademark, you can use ™ though.

lucy24

7:44 pm on Jul 19, 2011 (gmt 0)

Always wrap elements in some container, if you were to stick with XHTML, it wouldn't validate with a bare img element.

<body>
<div class = "wholetext">
...
</div>
</body>

Been there. Done that ;)

hjl1999

1:09 am on Jul 20, 2011 (gmt 0)

thank you. Yes, we do have registered trade marks.

Can you please tell me how to control the location of this trade marks logo position from the bottom of the line, to the middle of the line, to the top of the line.

I have use float:left and it stay above the line.

lucy24

2:08 am on Jul 20, 2011 (gmt 0)

vertical-align [w3.org] but be sure to test in all standard browsers. I've gotten disagreeably varying results, and not only in MSIE ;)

You can also define <sup> explicitly in your css. Good idea, in fact. Vertical-align is then set as a percentage or in ems (same way you'd set a font size), and you should also set a size, because by default browsers will make superscripts and subscripts smaller. But you don't know how much smaller.

Different fonts render the Ž (and also Š) symbols in slightly different sizes and positions. Just to illustrate the point, they're slightly above the baseline in the Compose Post font, but in Preview they're inline, and in the displayed font they will probably be in yet a third position :) But I don't think your customers will have trouble recognizing a registered trademark in any case.

Edit: OK, I got curious and asked the Character Viewer to show me the whole font range.* The Ž symbol varies in size by a factor of at least two-- more like two-and-a-half from smallest to largest. And there's a corresponding range in position. The top doesn't move as much as the bottom-- as you'd expect, the smaller ones are raised higher-- but even the topline isn't consistent.

* Doesn't everyone have 417MB of fonts distributed among 441 files in 339 named families?

rocknbil

4:32 pm on Jul 20, 2011 (gmt 0)

Been there. Done that

More specifically to what I was referring to, try this with an XHTML doctype.

<body>
<div class = "wholetext">
<form action="blah">
<input type="hidden" name="whatever" value"blah">
</form>
</div>
</body>

hjl1999

4:49 pm on Jul 20, 2011 (gmt 0)

I tried:
<span style="vertical-align:text-top">®</span>
But it stay at the bottom of text. What gives?

lucy24

7:18 pm on Jul 20, 2011 (gmt 0)

Try giving a percentage instead. Start with 70% or so, but be sure to try it in assorted fonts. If you are forcing a font family, make sure the backups all have approximately similar Ž characters.

Incidentally, Ž is in the Latin-1 character set-- the one you declared in the header-- so you don't need to use an entity.

rocknbil

4:49 pm on Jul 21, 2011 (gmt 0)

What gives?

Not sure what you've done, but starting from scratch, both img and span are by default, inline elements, and one of the deals with that is they will always base align. Set their display to block and you'll find you can move them around quite nicely with margins and padding.

hjl1999

6:17 pm on Jul 21, 2011 (gmt 0)

still unable to move text from the bottom of text line:

<img src="img1.jpg" style="border:none; width:10em; height: 17em; margin: 0em 0em 0em 26em; " alt="img1"/></a>
<span style="text-align:70%">text next to image</span>

I found if I insert position:abolute will make this line of text move up from the bottom of text line. But this mess up with the following text locations. How best to avoid this problem? Thank you.

rocknbil

6:13 pm on Jul 22, 2011 (gmt 0)

text-align is horizontal alignment, valid values are right, left, center, justify, and inherit. Did you try the solution I posted? Wrap those puppies in a <p> and set the display to block, you'll be able to position it on the moon if you want. :-)

#logo span,#logo img { display: block; }

hjl1999

8:54 pm on Jul 22, 2011 (gmt 0)

Dear rocknbil, I canot use <p> because we need this block of text immediately after the image, at the right side of the image. Using <p> will create a break and another new line starting from the left edge.

The image created a large block, and the following text sits at the bottom of the text line. I am unable to move the text above the text line using text-align with any value. Something is inhibite the horizontal alignment of the text. What could this be?

lucy24

9:23 pm on Jul 22, 2011 (gmt 0)

I am unable to move the text above the text line using text-align with any value.

Was that a typo? text-align means horizontal position. vertical-align means vertical position.

How 'bout {display: inline-block;}? The "inline-" part means it doesn't create a line break. The "-block" part means you can put more stuff inside of it.

hjl1999

3:18 pm on Jul 23, 2011 (gmt 0)

OK, this work, thank you:
<p style="vertical-align:middle; display:inline-block">test line</p>

hjl1999

3:34 pm on Jul 23, 2011 (gmt 0)

well, I spoke too soon, when check on Internet Explorer and FireFox, the text is still sitting on the bottom on the text line.
Regardless of <p> or <span>, this text just would not move up above the bottom of text line defined by the image block.

hjl1999

3:36 pm on Jul 23, 2011 (gmt 0)

however, in the html editor, (Microsoft Office Sharepoint Designer in this case), the text moved above the bottom of text line to the middle.

rocknbil

4:38 pm on Jul 25, 2011 (gmt 0)

I canot use <p> because we need this block of text immediately after the image, at the right side of the image. Using <p> will create a break and another new line starting from the left edge.

Not if you float both paragraphs.

#logo,some-other-content { float: left; padding:0; margin: 12px 0 0 24px; }
#logo {width: 350px; height: 28px; }
#some-other-content { width: 600px; height: 100px; } /* or whatever */

<div id="header">
<p id="logo"><a href="/"><img src="logo.jpg" alt="logo"></a><span>®</span></p>
<p id="some-other-content">I give up.</p>
<div class="clear-div"></div>
</div>

hjl1999

3:58 pm on Jul 30, 2011 (gmt 0)

OK, I end up first put the image with margin 0em 0em 0em 26em
then, put the text with position:relative, left: 1em; top: -5em.

Not elegent, but works.