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.
To start with, why is the image positioned?
I tried to position the image near the top left corner, but not at the very edge. Do you have better suggestion?
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.
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>
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.
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.
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.
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
<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?
Yes. And that's the problem, IIRC.
how would you re-write this?
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.
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)