The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> how to poistion text after relatively positioned image
hjl1999
post Jul 18 2011, 03:03 PM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 19-August 09
Member No.: 9,488



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 18 2011, 03:41 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



To start with, why is the image positioned?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hjl1999
post Jul 18 2011, 06:18 PM
Post #3


Newbie
*

Group: Members
Posts: 18
Joined: 19-August 09
Member No.: 9,488



I tried to position the image near the top left corner, but not at the very edge. Do you have better suggestion?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 18 2011, 06:25 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hjl1999
post Jul 18 2011, 06:51 PM
Post #5


Newbie
*

Group: Members
Posts: 18
Joined: 19-August 09
Member No.: 9,488



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 18 2011, 07:42 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hjl1999
post Jul 19 2011, 07:30 PM
Post #7


Newbie
*

Group: Members
Posts: 18
Joined: 19-August 09
Member No.: 9,488



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 19 2011, 08:05 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hjl1999
post Jul 30 2011, 10:59 AM
Post #9


Newbie
*

Group: Members
Posts: 18
Joined: 19-August 09
Member No.: 9,488



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 31 2011, 12:41 AM
Post #10


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hjl1999
post Aug 2 2011, 11:39 AM
Post #11


Newbie
*

Group: Members
Posts: 18
Joined: 19-August 09
Member No.: 9,488



<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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 2 2011, 12:37 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes. And that's the problem, IIRC.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 2 2011, 12:50 PM
Post #13


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
OK, is this CSS positioning I am using?
Yes. Note the CSS property "position:absolute" (and the associated properties top and left).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hjl1999
post Aug 8 2011, 07:20 PM
Post #14


Newbie
*

Group: Members
Posts: 18
Joined: 19-August 09
Member No.: 9,488



how would you re-write this?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 8 2011, 08:10 PM
Post #15


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 8 2011, 11:33 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 27th March 2024 - 12:04 AM