Forum Moderators: not2easy

Message Too Old, No Replies

Absolute positioning of image

         

kaymeis

6:04 pm on Nov 21, 2009 (gmt 0)

10+ Year Member



Can you please tell me if this code is okay? On my browser, the image is to the right of the header instead of the left

<img src="ak-shion.gif" width="63" height="40"align="left"border="0" alt="Ak-Shion"style="position:absolute; left:10px; top:15px">

Xapti

8:13 pm on Nov 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't know for sure, but I think HTML requires spaces between each attribute? You have two attributes that don't have spaces before them (border and style). Browsers are probably smart enough to interpret it regardless. Even if it's not required, it's still helpful for automatic line breaks though.

It would not be a good idea to use both position absolute and the align=left. In fact, as far as I know how align works (float), they cannot be both used at the same time. Not only that, but neither of these methods would be the best to use in this situation:
Align is a deprecated (old) attribute, and position:absolute takes the element out of normal space - instead of inserting it or moving it somewhere, it actually displays right over something (which is usually designed to be white space).

Sorry for all this writing, but your simplest answer would be to use style="float:left;border:0", and remove the align=left and border=0.

The most proper way though would be to redesign the code so that you use a background-image for the image, as my guess is that it's for decoration and not function or content, considering it's size and location.
In the header you want it before, add a style {padding-left:70px; background-image:url('ak-shion.gif'); background-position:0,0; repeat:no-repeat}
The content in the curly braces should go in your CSS stylesheet if you have one (hopefully). If you do not have one, I recommend you learn a bit about the basics of CSS stylesheets (and CSS). If you don't want to learn, you can just put it in your header's style="" attribute.

D_Blackwell

9:22 pm on Nov 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As Xapti noted, there should be a space between attributes.

#1 - Validated code prevents and fixes a lot of problems. Validate your code.

W3C (X)HTML Validator [validator.w3.org]

W3C CSS Validator [jigsaw.w3.org]
..................................

Not only is align: deprecated in HTML4.01, so is border: in an img element.

W3 Schools [w3schools.com]
..................................

Though technically acceptable, I would group my width: and height: with the rest of the CSS and specify px.

<img src="ak-shion.gif" style="width: 63px; height: 40px; border-width: 0; position: absolute; left: 10px; top: 15px" alt="Ak-Shion">
..................................

I don't know if it is best that you use background-image:, but would agree that you need to do a cleanup operation and look at what is being done and why.