Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ how to poistion text after relatively positioned image

Posted by: hjl1999 Jul 18 2011, 03:03 PM

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 should I do? Thank you.

Posted by: pandy Jul 18 2011, 03:41 PM

To start with, why is the image positioned?

Posted by: hjl1999 Jul 18 2011, 06:18 PM

I tried to position the image near the top left corner, but not at the very edge. Do you have better suggestion?

Posted by: pandy Jul 18 2011, 06:25 PM

Yeah, I can see that, but I wonder why it's positioned. If you just want it a bit to the right, you could just use a margin and avoid the problem.

Posted by: hjl1999 Jul 18 2011, 06:51 PM

Thank you pandy. 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>

Posted by: pandy Jul 18 2011, 07:42 PM

By not positioning the logo over it.

If I understand this right you have no other reason to use positioning than that you want to move the image a little bit in on the page. Then don't use positioning. Use margin.

Save positioning for when it's needed and keep things in the normal flow as much as possible. Positioning is the big sledge. You don't need it for this.

The changed HTML you posted looks the same as before except that the with of the image is in percent. Remove the positioning. Add margin. Like this.

CODE
<img src="http://htmlhelp.com/icon/wdglogo.gif" width="312" height= 28" style="border:none;  margin-top:1em;  margin-left: 10%" alt="logo" /></a> <sup>®</sup>


It's better to keep width and height for images in the HTML. It helps the browser when it draws the page.

Posted by: hjl1999 Jul 19 2011, 07:30 PM

Pandy, thank you. I follow your example. The image is stuck at the top left corner. The image is outside of the margin frame. The margin frame is located at the desirable location, lower and righ of the top-left-corner. How can I locate the image inside the margin frame? Thank you.

You specifiy image width and height, is it better to use %, particularly when different browser show image sizing differently in different screens or smartphones? Thank you.

Posted by: pandy Jul 19 2011, 08:05 PM

QUOTE(hjl1999 @ Jul 20 2011, 02:30 AM) *

Pandy, thank you. I follow your example. The image is stuck at the top left corner. The image is outside of the margin frame. The margin frame is located at the desirable location, lower and righ of the top-left-corner. How can I locate the image inside the margin frame? Thank you.

Can you show me the whole thing? Preferably the URL to a sample page, otherwise paste it all in here.


QUOTE
You specifiy image width and height, is it better to use %, particularly when different browser show image sizing differently in different screens or smartphones? Thank you.


I wouldn't use percent for images unless I was after some special effect. Images have a true size. Changing it degrades the image, not always noticeably so maybe, but it does.

I think small screen devices have their own way to deal with images and resize them if needed, but I could be misinformed about that. I'm the last person in the world who doesn't even own a cell phone, you see. happy.gif

Posted by: hjl1999 Jul 30 2011, 10:59 AM

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

Not elegent codes, but works.

Posted by: Brian Chandler Jul 31 2011, 12:41 AM

There's a breakdown in communications here:

Pandy said: "To start with, why is the image positioned?"

You said: "I tried to position the image near the top left corner..."

The problem is that you are using the English word "to position", which means to arrange that something is in a certain position. Pandy is using the CSS keyword "position" (as though it were an English verb) to mean "use the CSS keyword _position_".

You need to understand that CSS keywords are not (even remotely!) English. If you want to position the logo (or whateveritwas) near the top left corner, you probably do not want to use the CSS 'position' keyword.

(Let alone the CSS 'relative' -- which does not mean "relative" AT ALL. Actually CSS_relative means something like "offset the position of the element from where it would be, but treat it as being at the original position for the purposes of other display elements." That's why CSS_relative often leads to things being splatted on top of other things.)

So now you are using CSS_relative on the text block -- this is almost certainly wrong, because the text block will overlap the next thing you add. Probably you should just use CSS_float left, which positions the logo at the left, and lets following text _flow_ round it. (I don't know if the CSS meaning of "float" is genuinely a term from typography somewhere, but it could well be a confustion between "flow" and "float")

HTH

Posted by: hjl1999 Aug 2 2011, 11:39 AM

<img src="Logo.jpg" style=" position:absolute; top:1.5em; left:2em; border:none; width:20em; height: 1.7em; margin: 0em 0 0 0em; bottom: 751px;" alt="Logo"/></a><br />

OK, is this CSS positioning I am using?

Posted by: pandy Aug 2 2011, 12:37 PM

Yes. And that's the problem, IIRC.

Posted by: Darin McGrew Aug 2 2011, 12:50 PM

QUOTE
OK, is this CSS positioning I am using?
Yes. Note the CSS property "position:absolute" (and the associated properties top and left).

Posted by: hjl1999 Aug 8 2011, 07:20 PM

how would you re-write this?

Posted by: Darin McGrew Aug 8 2011, 08:10 PM

Actually, I'm used to logo images including the ® or ™ as part of the image itself. Then you can just use the image as the first content on the page, and it will be in the top left.

Posted by: pandy Aug 8 2011, 11:33 PM

What was wrong with the example I posted above? Either you never removed the positioning or you have more going on. We can't help if you don't show us the actual markup and CSS.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)